@upbound/monarch-blocks 0.4.1 → 0.6.0

package/dist/index.js

@@ -67,6 +67,9 @@ var twMerge = extendTailwindMerge({
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function sortBy(items, getKey) {
+  return [...items].sort((a, b) => getKey(a).localeCompare(getKey(b)));
+}
 
 // src/hooks/use-mounted.ts
 import { useSyncExternalStore } from "react";
@@ -1219,6 +1222,7 @@ function CelFilterBar({
     (_a = onCompileResultChangeRef.current) == null ? void 0 : _a.call(onCompileResultChangeRef, __spreadProps(__spreadValues({}, displayResult), { isEmitReady }));
   }, [displayResult, isEmitReady]);
   const conditions = tree.root.children.filter(isCelFilterCondition);
+  const containerRef = React.useRef(null);
   function handleAddFilter(columnId) {
     const condition = createDefaultCondition({ schema, columnId });
     onChange(appendCondition(tree, condition));
@@ -1233,8 +1237,8 @@ function CelFilterBar({
     onChange({ root: __spreadProps(__spreadValues({}, tree.root), { children: [] }) });
     editor.clearSuppress();
   }
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "cel-filter-bar", className: cn("flex flex-wrap items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx(CelAddFilterButton, { schema, conditions, onSelect: handleAddFilter }),
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "cel-filter-bar", className: cn("flex flex-wrap items-center gap-2", className), ref: containerRef, children: [
+    /* @__PURE__ */ jsx(CelAddFilterButton, { schema, conditions, onSelect: handleAddFilter, container: containerRef }),
     conditions.map((condition) => {
       const columnDef = resolveColumnDefinition(condition, schema);
       if (!columnDef) return null;
@@ -1249,7 +1253,8 @@ function CelFilterBar({
           controller: editor.getController(condition.id),
           issues: displayResult.issues.filter((issue) => issue.nodeId === condition.id),
           onRemove: () => handleRemove(condition.id),
-          onRestrictedOptionSelect
+          onRestrictedOptionSelect,
+          container: containerRef
         },
         condition.id
       );
@@ -1260,7 +1265,8 @@ function CelFilterBar({
 function CelAddFilterButton({
   schema,
   conditions,
-  onSelect
+  onSelect,
+  container
 }) {
   var _a, _b;
   const usedSingleInstanceColumnIds = new Set(
@@ -1276,7 +1282,10 @@ function CelAddFilterButton({
     list.push(column);
     groupMap.set(key, list);
   }
-  const groups = Array.from(groupMap.entries()).map(([value, items]) => ({ value, items }));
+  const groups = sortBy(
+    Array.from(groupMap.entries()).map(([value, items]) => ({ value, items: sortBy(items, (item) => item.title) })),
+    (group) => group.value
+  );
   return /* @__PURE__ */ jsxs(
     Combobox,
     {
@@ -1291,7 +1300,7 @@ function CelAddFilterButton({
           /* @__PURE__ */ jsx(Icon, { name: "plus", "data-icon": "inline-start" }),
           "Add filter"
         ] }),
-        /* @__PURE__ */ jsxs(ComboboxContent, { align: "start", className: "w-64", children: [
+        /* @__PURE__ */ jsxs(ComboboxContent, { container, align: "start", className: "w-64", children: [
           /* @__PURE__ */ jsx(ComboboxInput, { showTrigger: false, placeholder: "Search filters\u2026" }),
           /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No filters found." }),
           /* @__PURE__ */ jsx(ComboboxList, { children: (group) => /* @__PURE__ */ jsxs(ComboboxGroup, { items: group.items, children: [
@@ -1355,7 +1364,8 @@ function CelFilterPill({
   controller,
   issues,
   onRemove,
-  onRestrictedOptionSelect
+  onRestrictedOptionSelect,
+  container
 }) {
   var _a;
   const shape = (_a = resolveFilterShape(condition, schema)) != null ? _a : columnDef.filterType;
@@ -1372,7 +1382,8 @@ function CelFilterPill({
         controller,
         issues,
         onRemove,
-        onRestrictedOptionSelect
+        onRestrictedOptionSelect,
+        container
       }
     );
   }
@@ -1387,7 +1398,8 @@ function CelFilterPill({
         controller,
         issues,
         onRemove,
-        onRestrictedOptionSelect
+        onRestrictedOptionSelect,
+        container
       }
     );
   }
@@ -1497,10 +1509,11 @@ function CelCheckboxComboboxPill({
   controller,
   issues,
   onRemove,
-  onRestrictedOptionSelect
+  onRestrictedOptionSelect,
+  container
 }) {
   var _a;
-  const options = (_a = columnDef.options) != null ? _a : [];
+  const options = sortBy((_a = columnDef.options) != null ? _a : [], (o) => o.label);
   const value = isCheckboxCelValue(condition.value) ? condition.value : [];
   const selected = options.filter((option) => value.includes(option.value));
   const allowedOperators = getAllowedOperators(columnDef);
@@ -1556,7 +1569,7 @@ function CelCheckboxComboboxPill({
           ),
           /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", "aria-label": `Remove ${columnDef.title} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx(Icon, { name: "xmark" }) })
         ] }),
-        /* @__PURE__ */ jsxs(ComboboxContent, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
+        /* @__PURE__ */ jsxs(ComboboxContent, { container, className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
           /* @__PURE__ */ jsx(ComboboxInput, { showTrigger: false, placeholder: `Search ${columnDef.title.toLowerCase()}\u2026` }),
           selected.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs(ComboboxSelectedChips, { children: [
@@ -1585,10 +1598,11 @@ function CelRadioComboboxPill({
   controller,
   issues,
   onRemove,
-  onRestrictedOptionSelect
+  onRestrictedOptionSelect,
+  container
 }) {
   var _a, _b;
-  const options = (_a = columnDef.options) != null ? _a : [];
+  const options = sortBy((_a = columnDef.options) != null ? _a : [], (o) => o.label);
   const value = typeof condition.value === "string" ? condition.value : "";
   const selected = (_b = options.find((option) => option.value === value)) != null ? _b : null;
   const allowedOperators = getAllowedOperators(columnDef);
@@ -1640,7 +1654,7 @@ function CelRadioComboboxPill({
           ),
           /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", "aria-label": `Remove ${columnDef.title} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx(Icon, { name: "xmark" }) })
         ] }),
-        /* @__PURE__ */ jsxs(ComboboxContent, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
+        /* @__PURE__ */ jsxs(ComboboxContent, { container, className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
           /* @__PURE__ */ jsx(ComboboxInput, { showTrigger: false, placeholder: `Search ${columnDef.title.toLowerCase()}\u2026` }),
           /* @__PURE__ */ jsxs(ComboboxEmpty, { children: [
             "No ",
@@ -2753,7 +2767,7 @@ function ChatThread({
           ] }, msg.id)),
           isThinking && /* @__PURE__ */ jsx5(ChatThinkingIndicator, {})
         ] }) }),
-        /* @__PURE__ */ jsx5(MessageScrollerButton, { direction: "end", children: /* @__PURE__ */ jsx5(Icon2, { name: "arrow-down" }) })
+        /* @__PURE__ */ jsx5(MessageScrollerButton, { direction: "end", variant: "secondary", size: "icon-sm", children: /* @__PURE__ */ jsx5(Icon2, { name: "arrow-down" }) })
       ] }) }),
       /* @__PURE__ */ jsx5(
         ChatInput,
@@ -3135,7 +3149,15 @@ function CellContextualFilter({
     );
   }
   return /* @__PURE__ */ jsxs5(ContextMenuContent, { children: [
-    /* @__PURE__ */ jsx7(ContextMenuItem, { disabled, onClick: (event) => event.stopPropagation(), onSelect: handleSelect, children: "Filter by this value" }),
+    /* @__PURE__ */ jsx7(
+      ContextMenuItem,
+      {
+        disabled,
+        onClick: (event) => event.stopPropagation(),
+        onSelect: handleSelect,
+        children: "Filter by this value"
+      }
+    ),
     contextualMenuActions.length > 0 && /* @__PURE__ */ jsxs5(Fragment4, { children: [
       /* @__PURE__ */ jsx7(ContextMenuSeparator, {}),
       contextualMenuActions.map(renderAction)
@@ -3217,6 +3239,14 @@ function isFilterOnlyColumn(column) {
   var _a;
   return ((_a = column.columnDef.meta) == null ? void 0 : _a.filterOnly) === true;
 }
+function hasFilterableColumns(columns) {
+  return columns.some(
+    (column) => {
+      var _a;
+      return !isFilterOnlyColumn(column) && column.getCanFilter() && !!((_a = column.columnDef.meta) == null ? void 0 : _a.filter);
+    }
+  );
+}
 function getTableState({
   error,
   loading,
@@ -3450,6 +3480,7 @@ function ColumnOptions({
 import { Button as Button4 } from "@upbound/monarch-core";
 import { DropdownMenu as DropdownMenu3, DropdownMenuContent as DropdownMenuContent3, DropdownMenuItem as DropdownMenuItem3, DropdownMenuTrigger as DropdownMenuTrigger3 } from "@upbound/monarch-core";
 import { Icon as Icon5 } from "@upbound/monarch-core";
+import { Link } from "@upbound/monarch-core";
 import { Tooltip as Tooltip4, TooltipContent as TooltipContent3, TooltipTrigger as TooltipTrigger3 } from "@upbound/monarch-core";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function RowActions({
@@ -3458,8 +3489,25 @@ function RowActions({
   contentClassName
 }) {
   return /* @__PURE__ */ jsxs7(DropdownMenu3, { children: [
-    /* @__PURE__ */ jsx9(DropdownMenuTrigger3, { asChild: true, children: /* @__PURE__ */ jsx9(Button4, { variant: "ghost", size: "icon-xs", "aria-label": "Row actions", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx9(Icon5, { name: "ellipsis-vertical", size: "sm" }) }) }),
-    /* @__PURE__ */ jsx9(DropdownMenuContent3, { align, className: contentClassName, onClick: (event) => event.stopPropagation(), children })
+    /* @__PURE__ */ jsx9(DropdownMenuTrigger3, { asChild: true, children: /* @__PURE__ */ jsx9(
+      Button4,
+      {
+        variant: "ghost",
+        size: "icon-xs",
+        "aria-label": "Row actions",
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsx9(Icon5, { name: "ellipsis-vertical", size: "sm" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx9(
+      DropdownMenuContent3,
+      {
+        align,
+        className: contentClassName,
+        onClick: (event) => event.stopPropagation(),
+        children
+      }
+    )
   ] });
 }
 function RowActionItem({
@@ -3528,7 +3576,7 @@ function getExpandColumnDefinition(options) {
 function DataTableValueCell({ content, title, className, href, onClick }) {
   const baseClassName = cn("text-body truncate", className);
   if (href) {
-    return /* @__PURE__ */ jsx9("p", { className: baseClassName, children: /* @__PURE__ */ jsx9("a", { href, title, className: "underline hover:no-underline", onClick, children: content }) });
+    return /* @__PURE__ */ jsx9("p", { className: baseClassName, children: /* @__PURE__ */ jsx9(Link, { href, title, onClick, children: content }) });
   }
   if (title) {
     return /* @__PURE__ */ jsxs7(Tooltip4, { children: [
@@ -3555,7 +3603,7 @@ function TimestampCell({ timestamp }) {
 }
 
 // src/data-table/data-table.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import {
   getCoreRowModel,
   getExpandedRowModel,
@@ -3568,7 +3616,7 @@ import {
   noop,
   useReactTable
 } from "@tanstack/react-table";
-import { Icon as Icon10 } from "@upbound/monarch-core";
+import { Icon as Icon11 } from "@upbound/monarch-core";
 import { InputGroup as InputGroup3, InputGroupAddon as InputGroupAddon3, InputGroupInput as InputGroupInput2 } from "@upbound/monarch-core";
 
 // src/lib/data-table/contextual-filters.ts
@@ -4166,6 +4214,18 @@ function useGridLayout({
   };
 }
 
+// src/hooks/use-filter-visibility.ts
+import * as React7 from "react";
+function useFilterVisibility(filterVisibility) {
+  var _a, _b, _c;
+  const config = typeof filterVisibility === "object" ? filterVisibility : void 0;
+  const [innerVisible, setInnerVisible] = React7.useState((_a = config == null ? void 0 : config.defaultVisible) != null ? _a : false);
+  const showFilterToggle = filterVisibility !== false;
+  const filterRowVisible = (_b = config == null ? void 0 : config.visible) != null ? _b : innerVisible;
+  const setFilterRowVisible = (_c = config == null ? void 0 : config.onVisibleChange) != null ? _c : setInnerVisible;
+  return { showFilterToggle, filterRowVisible, setFilterRowVisible };
+}
+
 // src/data-table/empty-view.tsx
 import { Alert, AlertDescription } from "@upbound/monarch-core";
 import { Button as Button5 } from "@upbound/monarch-core";
@@ -4218,9 +4278,34 @@ function DataTableEmptyView({
   ] }) });
 }
 
+// src/data-table/filter-toggle.tsx
+import { Icon as Icon7, Toggle } from "@upbound/monarch-core";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+function FilterToggle({ pressed, onPressedChange, count }) {
+  return /* @__PURE__ */ jsxs9(
+    Toggle,
+    {
+      variant: "outline",
+      pressed,
+      onPressedChange,
+      "aria-label": "Toggle filters",
+      className: "shrink-0 gap-1.5",
+      children: [
+        /* @__PURE__ */ jsx11(Icon7, { name: "filter", "data-icon": "inline-start" }),
+        "Filter",
+        !!count && /* @__PURE__ */ jsxs9("span", { className: "tabular-nums", children: [
+          "(",
+          count,
+          ")"
+        ] })
+      ]
+    }
+  );
+}
+
 // src/data-table/pagination.tsx
 import { Button as Button6 } from "@upbound/monarch-core";
-import { Icon as Icon7 } from "@upbound/monarch-core";
+import { Icon as Icon8 } from "@upbound/monarch-core";
 import { Label as Label2 } from "@upbound/monarch-core";
 import {
   Pagination,
@@ -4231,7 +4316,7 @@ import {
 } from "@upbound/monarch-core";
 import { Select as Select2, SelectContent as SelectContent2, SelectGroup as SelectGroup2, SelectItem as SelectItem2, SelectTrigger as SelectTrigger2, SelectValue as SelectValue2 } from "@upbound/monarch-core";
 import { Tooltip as Tooltip5, TooltipContent as TooltipContent4, TooltipTrigger as TooltipTrigger4 } from "@upbound/monarch-core";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var DEFAULT_PAGINATION_CONFIG = {
   summary: true,
   arrows: true,
@@ -4270,36 +4355,36 @@ function DataTablePagination({
   const currentPage = pageIndex + 1;
   const mounted = useMounted();
   const locale = mounted ? void 0 : "en-US";
-  return /* @__PURE__ */ jsxs9("div", { "data-testid": "table-footer", className: "flex items-center justify-between px-2 pt-4", children: [
-    resolved.summary ? /* @__PURE__ */ jsxs9("div", { className: "text-body text-muted-foreground", "data-testid": "table-pagination-summary", children: [
+  return /* @__PURE__ */ jsxs10("div", { "data-testid": "table-footer", className: "flex items-center justify-between px-2 pt-4", children: [
+    resolved.summary ? /* @__PURE__ */ jsxs10("div", { className: "text-body text-muted-foreground", "data-testid": "table-pagination-summary", children: [
       "Showing ",
-      /* @__PURE__ */ jsx11("span", { className: "text-foreground font-medium", children: itemStart.toLocaleString(locale) }),
+      /* @__PURE__ */ jsx12("span", { className: "text-foreground font-medium", children: itemStart.toLocaleString(locale) }),
       " to",
       " ",
-      /* @__PURE__ */ jsx11("span", { className: "text-foreground font-medium", children: itemEnd.toLocaleString(locale) }),
+      /* @__PURE__ */ jsx12("span", { className: "text-foreground font-medium", children: itemEnd.toLocaleString(locale) }),
       " of",
       " ",
-      /* @__PURE__ */ jsxs9("span", { className: "text-foreground font-medium", children: [
+      /* @__PURE__ */ jsxs10("span", { className: "text-foreground font-medium", children: [
         rowCount.toLocaleString(locale),
         !isRowCountExact && "+"
       ] }),
       " ",
       "results",
-      !isRowCountExact && /* @__PURE__ */ jsxs9(Tooltip5, { children: [
-        /* @__PURE__ */ jsx11(TooltipTrigger4, { className: "ml-1 align-middle", children: /* @__PURE__ */ jsx11(Icon7, { name: "circle-info", size: "sm" }) }),
-        /* @__PURE__ */ jsx11(TooltipContent4, { children: "Add filters or refine your search to reduce the result set." })
+      !isRowCountExact && /* @__PURE__ */ jsxs10(Tooltip5, { children: [
+        /* @__PURE__ */ jsx12(TooltipTrigger4, { className: "ml-1 align-middle", children: /* @__PURE__ */ jsx12(Icon8, { name: "circle-info", size: "sm" }) }),
+        /* @__PURE__ */ jsx12(TooltipContent4, { children: "Add filters or refine your search to reduce the result set." })
       ] })
-    ] }) : /* @__PURE__ */ jsx11("div", {}),
-    /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-4", children: [
-      resolved.pageSizeSelector && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx11(Label2, { htmlFor: PAGE_SIZE_SELECT_ID, className: "font-semibold", children: "Rows per page" }),
-        /* @__PURE__ */ jsxs9(Select2, { value: String(effectivePageSize), onValueChange: (value) => onPageSizeChange(Number(value)), children: [
-          /* @__PURE__ */ jsx11(SelectTrigger2, { id: PAGE_SIZE_SELECT_ID, size: "sm", className: "w-18", "data-testid": "table-page-size-select", children: /* @__PURE__ */ jsx11(SelectValue2, {}) }),
-          /* @__PURE__ */ jsx11(SelectContent2, { align: "end", children: /* @__PURE__ */ jsx11(SelectGroup2, { children: normalizedPageSizeOptions.map((option) => /* @__PURE__ */ jsx11(SelectItem2, { value: String(option), children: option }, option)) }) })
+    ] }) : /* @__PURE__ */ jsx12("div", {}),
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-4", children: [
+      resolved.pageSizeSelector && /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx12(Label2, { htmlFor: PAGE_SIZE_SELECT_ID, className: "font-semibold", children: "Rows per page" }),
+        /* @__PURE__ */ jsxs10(Select2, { value: String(effectivePageSize), onValueChange: (value) => onPageSizeChange(Number(value)), children: [
+          /* @__PURE__ */ jsx12(SelectTrigger2, { id: PAGE_SIZE_SELECT_ID, size: "sm", className: "w-18", "data-testid": "table-page-size-select", children: /* @__PURE__ */ jsx12(SelectValue2, {}) }),
+          /* @__PURE__ */ jsx12(SelectContent2, { align: "end", children: /* @__PURE__ */ jsx12(SelectGroup2, { children: normalizedPageSizeOptions.map((option) => /* @__PURE__ */ jsx12(SelectItem2, { value: String(option), children: option }, option)) }) })
         ] })
       ] }),
-      pageCount > 1 && (resolved.arrows || resolved.numbers) && /* @__PURE__ */ jsx11(Pagination, { className: "mx-0 w-auto justify-end", children: /* @__PURE__ */ jsxs9(PaginationContent, { children: [
-        resolved.arrows && /* @__PURE__ */ jsx11(PaginationItem, { children: /* @__PURE__ */ jsx11(
+      pageCount > 1 && (resolved.arrows || resolved.numbers) && /* @__PURE__ */ jsx12(Pagination, { className: "mx-0 w-auto justify-end", children: /* @__PURE__ */ jsxs10(PaginationContent, { children: [
+        resolved.arrows && /* @__PURE__ */ jsx12(PaginationItem, { children: /* @__PURE__ */ jsx12(
           Button6,
           {
             variant: "outline",
@@ -4307,10 +4392,10 @@ function DataTablePagination({
             "aria-label": "Go to first page",
             disabled: currentPage <= 1,
             onClick: () => onPageChange(1),
-            children: /* @__PURE__ */ jsx11(Icon7, { name: "chevrons-left", className: "cn-rtl-flip" })
+            children: /* @__PURE__ */ jsx12(Icon8, { name: "chevrons-left", className: "cn-rtl-flip" })
           }
         ) }),
-        resolved.arrows && /* @__PURE__ */ jsx11(PaginationItem, { children: /* @__PURE__ */ jsx11(
+        resolved.arrows && /* @__PURE__ */ jsx12(PaginationItem, { children: /* @__PURE__ */ jsx12(
           Button6,
           {
             variant: "outline",
@@ -4318,14 +4403,15 @@ function DataTablePagination({
             "aria-label": "Go to previous page",
             disabled: currentPage <= 1,
             onClick: () => onPageChange(currentPage - 1),
-            children: /* @__PURE__ */ jsx11(Icon7, { name: "chevron-left", className: "cn-rtl-flip" })
+            children: /* @__PURE__ */ jsx12(Icon8, { name: "chevron-left", className: "cn-rtl-flip" })
           }
         ) }),
         resolved.numbers && visiblePages.map(
-          (page, index) => page === void 0 ? /* @__PURE__ */ jsx11(PaginationItem, { children: /* @__PURE__ */ jsx11(PaginationEllipsis, {}) }, `ellipsis-${index}`) : /* @__PURE__ */ jsx11(PaginationItem, { children: /* @__PURE__ */ jsx11(
+          (page, index) => page === void 0 ? /* @__PURE__ */ jsx12(PaginationItem, { children: /* @__PURE__ */ jsx12(PaginationEllipsis, {}) }, `ellipsis-${index}`) : /* @__PURE__ */ jsx12(PaginationItem, { children: /* @__PURE__ */ jsx12(
             PaginationLink,
             {
               href: "#",
+              size: "icon",
               isActive: page === currentPage,
               onClick: (e) => {
                 e.preventDefault();
@@ -4335,7 +4421,7 @@ function DataTablePagination({
             }
           ) }, page)
         ),
-        resolved.arrows && /* @__PURE__ */ jsx11(PaginationItem, { children: /* @__PURE__ */ jsx11(
+        resolved.arrows && /* @__PURE__ */ jsx12(PaginationItem, { children: /* @__PURE__ */ jsx12(
           Button6,
           {
             variant: "outline",
@@ -4343,10 +4429,10 @@ function DataTablePagination({
             "aria-label": "Go to next page",
             disabled: currentPage >= pageCount,
             onClick: () => onPageChange(currentPage + 1),
-            children: /* @__PURE__ */ jsx11(Icon7, { name: "chevron-right", className: "cn-rtl-flip" })
+            children: /* @__PURE__ */ jsx12(Icon8, { name: "chevron-right", className: "cn-rtl-flip" })
           }
         ) }),
-        resolved.arrows && /* @__PURE__ */ jsx11(PaginationItem, { children: /* @__PURE__ */ jsx11(
+        resolved.arrows && /* @__PURE__ */ jsx12(PaginationItem, { children: /* @__PURE__ */ jsx12(
           Button6,
           {
             variant: "outline",
@@ -4354,7 +4440,7 @@ function DataTablePagination({
             "aria-label": "Go to last page",
             disabled: currentPage >= pageCount,
             onClick: () => onPageChange(pageCount),
-            children: /* @__PURE__ */ jsx11(Icon7, { name: "chevrons-right", className: "cn-rtl-flip" })
+            children: /* @__PURE__ */ jsx12(Icon8, { name: "chevrons-right", className: "cn-rtl-flip" })
           }
         ) })
       ] }) })
@@ -4363,7 +4449,7 @@ function DataTablePagination({
 }
 
 // src/data-table/table-primitives.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import {
   flexRender as flexRender2
 } from "@tanstack/react-table";
@@ -4375,7 +4461,7 @@ import {
   DropdownMenuSeparator as DropdownMenuSeparator2,
   DropdownMenuTrigger as DropdownMenuTrigger4
 } from "@upbound/monarch-core";
-import { Icon as Icon8 } from "@upbound/monarch-core";
+import { Icon as Icon9 } from "@upbound/monarch-core";
 import { Skeleton } from "@upbound/monarch-core";
 import {
   Table as BaseTable,
@@ -4386,7 +4472,7 @@ import {
   TableRow as BaseTableRow
 } from "@upbound/monarch-core";
 import { Tooltip as Tooltip6, TooltipContent as TooltipContent5, TooltipTrigger as TooltipTrigger5 } from "@upbound/monarch-core";
-import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 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";
@@ -4400,7 +4486,7 @@ function DataTableRoot({
   children
 }) {
   if (layout === "grid") {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         ref: gridRootRef,
@@ -4411,7 +4497,7 @@ function DataTableRoot({
       }
     );
   }
-  return /* @__PURE__ */ jsx12(BaseTable, { className, style, children });
+  return /* @__PURE__ */ jsx13(BaseTable, { className, style, children });
 }
 function getColumnPinningProps(column, surface = "body") {
   const isPinned = column.getIsPinned();
@@ -4434,8 +4520,8 @@ function getColumnPinningProps(column, surface = "body") {
 }
 function DataTableSortIcon({ sortOrder }) {
   if (!sortOrder) return null;
-  return /* @__PURE__ */ jsx12(
-    Icon8,
+  return /* @__PURE__ */ jsx13(
+    Icon9,
     {
       name: sortOrder === "asc" ? "arrow-up" : "arrow-down",
       size: "xs",
@@ -4454,57 +4540,57 @@ function ColumnActionsMenuItems({
   const canResize = header.column.getCanResize();
   const canHide = header.column.getCanHide();
   const canPin = !isGrid && header.column.getCanPin();
-  return /* @__PURE__ */ jsxs10(DropdownMenuContent4, { align: "start", className: "w-45", children: [
-    canSort && /* @__PURE__ */ jsxs10(Fragment7, { children: [
-      /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(DropdownMenuContent4, { align: "start", className: "w-45", children: [
+    canSort && /* @__PURE__ */ jsxs11(Fragment7, { children: [
+      /* @__PURE__ */ jsxs11(
         DropdownMenuItem4,
         {
           disabled: header.column.getIsSorted() === "asc",
           onClick: () => header.column.toggleSorting(false),
           children: [
-            /* @__PURE__ */ jsx12(Icon8, { name: "arrow-up" }),
+            /* @__PURE__ */ jsx13(Icon9, { name: "arrow-up" }),
             "Sort ascending"
           ]
         }
       ),
-      /* @__PURE__ */ jsxs10(
+      /* @__PURE__ */ jsxs11(
         DropdownMenuItem4,
         {
           disabled: header.column.getIsSorted() === "desc",
           onClick: () => header.column.toggleSorting(true),
           children: [
-            /* @__PURE__ */ jsx12(Icon8, { name: "arrow-down" }),
+            /* @__PURE__ */ jsx13(Icon9, { name: "arrow-down" }),
             "Sort descending"
           ]
         }
       ),
-      !!header.column.getIsSorted() && /* @__PURE__ */ jsxs10(DropdownMenuItem4, { onClick: () => header.column.clearSorting(), children: [
-        /* @__PURE__ */ jsx12(Icon8, { name: "xmark" }),
+      !!header.column.getIsSorted() && /* @__PURE__ */ jsxs11(DropdownMenuItem4, { onClick: () => header.column.clearSorting(), children: [
+        /* @__PURE__ */ jsx13(Icon9, { name: "xmark" }),
         "Remove sorting"
       ] })
     ] }),
-    canResize && /* @__PURE__ */ jsxs10(Fragment7, { children: [
-      canSort && /* @__PURE__ */ jsx12(DropdownMenuSeparator2, {}),
-      !isGrid && /* @__PURE__ */ jsxs10(DropdownMenuItem4, { onClick: () => onAutosizeColumn(header.column.id), children: [
-        /* @__PURE__ */ jsx12(Icon8, { name: "arrows-left-right" }),
+    canResize && /* @__PURE__ */ jsxs11(Fragment7, { children: [
+      canSort && /* @__PURE__ */ jsx13(DropdownMenuSeparator2, {}),
+      !isGrid && /* @__PURE__ */ jsxs11(DropdownMenuItem4, { onClick: () => onAutosizeColumn(header.column.id), children: [
+        /* @__PURE__ */ jsx13(Icon9, { name: "arrows-left-right" }),
         "Autosize column"
       ] }),
-      /* @__PURE__ */ jsxs10(DropdownMenuItem4, { onClick: () => onAutosizeAll(), children: [
-        /* @__PURE__ */ jsx12(Icon8, { name: "table-columns" }),
+      /* @__PURE__ */ jsxs11(DropdownMenuItem4, { onClick: () => onAutosizeAll(), children: [
+        /* @__PURE__ */ jsx13(Icon9, { name: "table-columns" }),
         isGrid ? "Reset all columns" : "Autosize all columns"
       ] })
     ] }),
-    (canHide || canPin) && /* @__PURE__ */ jsxs10(Fragment7, { children: [
-      (canSort || canResize) && /* @__PURE__ */ jsx12(DropdownMenuSeparator2, {}),
-      canHide && /* @__PURE__ */ jsxs10(DropdownMenuItem4, { onClick: () => header.column.toggleVisibility(), children: [
-        /* @__PURE__ */ jsx12(Icon8, { name: "eye-slash" }),
+    (canHide || canPin) && /* @__PURE__ */ jsxs11(Fragment7, { children: [
+      (canSort || canResize) && /* @__PURE__ */ jsx13(DropdownMenuSeparator2, {}),
+      canHide && /* @__PURE__ */ jsxs11(DropdownMenuItem4, { onClick: () => header.column.toggleVisibility(), children: [
+        /* @__PURE__ */ jsx13(Icon9, { name: "eye-slash" }),
         "Hide column"
       ] }),
-      canPin && (header.column.getIsPinned() ? /* @__PURE__ */ jsxs10(DropdownMenuItem4, { onClick: () => header.column.pin(false), children: [
-        /* @__PURE__ */ jsx12(Icon8, { name: "thumbtack" }),
+      canPin && (header.column.getIsPinned() ? /* @__PURE__ */ jsxs11(DropdownMenuItem4, { onClick: () => header.column.pin(false), children: [
+        /* @__PURE__ */ jsx13(Icon9, { name: "thumbtack" }),
         "Unpin column"
-      ] }) : /* @__PURE__ */ jsxs10(DropdownMenuItem4, { onClick: () => header.column.pin("left"), children: [
-        /* @__PURE__ */ jsx12(Icon8, { name: "thumbtack" }),
+      ] }) : /* @__PURE__ */ jsxs11(DropdownMenuItem4, { onClick: () => header.column.pin("left"), children: [
+        /* @__PURE__ */ jsx13(Icon9, { name: "thumbtack" }),
         "Pin column"
       ] }))
     ] })
@@ -4524,7 +4610,7 @@ function HeaderCellContent({
   const resizeHandler = header.getResizeHandler();
   const headerTitle = typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "";
   const sorted = header.column.getIsSorted();
-  const labelButton = /* @__PURE__ */ jsxs10(
+  const labelButton = /* @__PURE__ */ jsxs11(
     "button",
     {
       type: "button",
@@ -4535,10 +4621,10 @@ function HeaderCellContent({
         shouldShowActionsMenu ? "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 cursor-pointer" : "cursor-default"
       ),
       children: [
-        /* @__PURE__ */ jsx12(DataTableSortIcon, { sortOrder: sorted }),
-        /* @__PURE__ */ jsx12("span", { className: "min-w-0 truncate", children: flexRender2(header.column.columnDef.header, header.getContext()) }),
-        shouldShowActionsMenu && /* @__PURE__ */ jsx12(
-          Icon8,
+        /* @__PURE__ */ jsx13(DataTableSortIcon, { sortOrder: sorted }),
+        /* @__PURE__ */ jsx13("span", { className: "min-w-0 truncate", children: flexRender2(header.column.columnDef.header, header.getContext()) }),
+        shouldShowActionsMenu && /* @__PURE__ */ jsx13(
+          Icon9,
           {
             size: "sm",
             name: "ellipsis",
@@ -4548,9 +4634,9 @@ function HeaderCellContent({
       ]
     }
   );
-  const label = shouldShowActionsMenu ? /* @__PURE__ */ jsxs10(DropdownMenu4, { children: [
-    /* @__PURE__ */ jsx12(DropdownMenuTrigger4, { asChild: true, children: labelButton }),
-    /* @__PURE__ */ jsx12(
+  const label = shouldShowActionsMenu ? /* @__PURE__ */ jsxs11(DropdownMenu4, { children: [
+    /* @__PURE__ */ jsx13(DropdownMenuTrigger4, { asChild: true, children: labelButton }),
+    /* @__PURE__ */ jsx13(
       ColumnActionsMenuItems,
       {
         header,
@@ -4560,12 +4646,12 @@ function HeaderCellContent({
       }
     )
   ] }) : labelButton;
-  return /* @__PURE__ */ jsxs10(Fragment7, { children: [
-    /* @__PURE__ */ jsx12("div", { className: "flex min-w-0 items-center gap-1", children: /* @__PURE__ */ jsx12("div", { className: "min-w-0 flex-1", children: !isActionColumn && !isGroupedColumn && (headerTitle ? /* @__PURE__ */ jsxs10(Tooltip6, { children: [
-      /* @__PURE__ */ jsx12(TooltipTrigger5, { asChild: true, children: label }),
-      /* @__PURE__ */ jsx12(TooltipContent5, { children: headerTitle })
+  return /* @__PURE__ */ jsxs11(Fragment7, { children: [
+    /* @__PURE__ */ jsx13("div", { className: "flex min-w-0 flex-1 items-center gap-1", children: /* @__PURE__ */ jsx13("div", { className: "min-w-0 flex-1", children: !isActionColumn && !isGroupedColumn && (headerTitle ? /* @__PURE__ */ jsxs11(Tooltip6, { children: [
+      /* @__PURE__ */ jsx13(TooltipTrigger5, { asChild: true, children: label }),
+      /* @__PURE__ */ jsx13(TooltipContent5, { children: headerTitle })
     ] }) : label) }) }),
-    canResize && /* @__PURE__ */ jsx12(
+    canResize && /* @__PURE__ */ jsx13(
       "button",
       {
         type: "button",
@@ -4581,7 +4667,7 @@ function HeaderCellContent({
   ] });
 }
 var DEFAULT_STICKY_HEADER_OFFSET_PX = 0;
-var DEFAULT_STICKY_HEADER_ROW_HEIGHT_PX = 48;
+var DEFAULT_STICKY_HEADER_ROW_HEIGHT_PX = 40;
 function DataTableHeader({
   headerGroups,
   onAutosizeAll,
@@ -4609,7 +4695,7 @@ function DataTableHeader({
       const stickyTopPx = stickyHeader ? stickyHeaderOffset + headerGroupIndex * stickyHeaderRowHeight : void 0;
       const isPinned = !isGrid && header.column.getIsPinned();
       const pinning = isGrid ? { className: "", style: {} } : getColumnPinningProps(header.column, "header");
-      const content = /* @__PURE__ */ jsx12(
+      const content = /* @__PURE__ */ jsx13(
         HeaderCellContent,
         {
           header,
@@ -4630,11 +4716,11 @@ function DataTableHeader({
         isPinned && "z-30"
       );
       if (isGrid) {
-        return /* @__PURE__ */ jsx12(
+        return /* @__PURE__ */ jsx13(
           "div",
           {
             role: "columnheader",
-            className: cn(TABLE_HEAD_CLASSES, cellClassName, "h-auto py-1.5 whitespace-normal"),
+            className: cn(TABLE_HEAD_CLASSES, cellClassName, "flex items-center whitespace-normal"),
             style: __spreadValues({
               minWidth: header.column.columnDef.minSize
             }, stickyTopPx !== void 0 ? { top: stickyTopPx } : {}),
@@ -4643,10 +4729,10 @@ function DataTableHeader({
           header.id
         );
       }
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(
         BaseTableHead,
         {
-          className: cn(cellClassName, "h-auto py-1.5 whitespace-normal"),
+          className: cn(cellClassName, "whitespace-normal"),
           style: __spreadValues(__spreadValues(__spreadProps(__spreadValues({}, pinning.style), {
             minWidth: header.column.columnDef.minSize,
             maxWidth: header.column.columnDef.maxSize
@@ -4658,19 +4744,19 @@ function DataTableHeader({
     });
   };
   if (isGrid) {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         role: "rowgroup",
         className: cn("col-span-full grid grid-cols-subgrid", HEADER_SURFACE_BG, !!stickyHeader && "sticky z-20"),
         style: stickyHeader ? { top: stickyHeaderOffset } : void 0,
-        children: headerGroups.map((headerGroup, headerGroupIndex) => /* @__PURE__ */ jsx12("div", { role: "row", className: "col-span-full grid grid-cols-subgrid border-b", children: renderHeaders(headerGroup, headerGroupIndex) }, headerGroup.id))
+        children: headerGroups.map((headerGroup, headerGroupIndex) => /* @__PURE__ */ jsx13("div", { role: "row", className: "col-span-full grid grid-cols-subgrid border-b", children: renderHeaders(headerGroup, headerGroupIndex) }, headerGroup.id))
       }
     );
   }
-  return /* @__PURE__ */ jsx12(BaseTableHeader, { children: headerGroups.map((headerGroup, headerGroupIndex) => /* @__PURE__ */ jsx12(BaseTableRow, { children: renderHeaders(headerGroup, headerGroupIndex) }, headerGroup.id)) });
+  return /* @__PURE__ */ jsx13(BaseTableHeader, { children: headerGroups.map((headerGroup, headerGroupIndex) => /* @__PURE__ */ jsx13(BaseTableRow, { children: renderHeaders(headerGroup, headerGroupIndex) }, headerGroup.id)) });
 }
-var DataTableRow = React7.forwardRef(
+var DataTableRow = React8.forwardRef(
   (_a, ref) => {
     var _b = _a, { hoverable, disabled, className, layout = "auto" } = _b, props = __objRest(_b, ["hoverable", "disabled", "className", "layout"]);
     const classes = cn(
@@ -4680,7 +4766,7 @@ var DataTableRow = React7.forwardRef(
       className
     );
     if (layout === "grid") {
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx13(
         "div",
         __spreadValues({
           ref,
@@ -4689,7 +4775,7 @@ var DataTableRow = React7.forwardRef(
         }, props)
       );
     }
-    return /* @__PURE__ */ jsx12(BaseTableRow, __spreadValues({ ref, className: classes }, props));
+    return /* @__PURE__ */ jsx13(BaseTableRow, __spreadValues({ ref, className: classes }, props));
   }
 );
 DataTableRow.displayName = "DataTableRow";
@@ -4720,7 +4806,7 @@ function DataTableCell({
     isPinned && "z-10",
     className
   );
-  const cellElement = isGrid ? /* @__PURE__ */ jsx12(
+  const cellElement = isGrid ? /* @__PURE__ */ jsx13(
     "div",
     {
       role: "cell",
@@ -4728,7 +4814,7 @@ function DataTableCell({
       style: { minWidth: cell.column.columnDef.minSize },
       children: content
     }
-  ) : /* @__PURE__ */ jsx12(
+  ) : /* @__PURE__ */ jsx13(
     BaseTableCell,
     {
       className: cellClassName,
@@ -4740,9 +4826,9 @@ function DataTableCell({
     }
   );
   if (!shouldShowContextualMenu || !onContextCell) return cellElement;
-  return /* @__PURE__ */ jsxs10(ContextMenu, { children: [
-    /* @__PURE__ */ jsx12(ContextMenuTrigger, { asChild: true, children: cellElement }),
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs11(ContextMenu, { children: [
+    /* @__PURE__ */ jsx13(ContextMenuTrigger, { asChild: true, children: cellElement }),
+    /* @__PURE__ */ jsx13(
       CellContextualFilter,
       {
         filter: contextualFilter,
@@ -4761,7 +4847,7 @@ function DataTableGroupRow({
   layout = "auto"
 }) {
   if (layout === "grid") {
-    return /* @__PURE__ */ jsx12("div", { role: "row", className: "bg-muted/50 hover:bg-muted/50 col-span-full grid grid-cols-subgrid", children: /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13("div", { role: "row", className: "bg-muted/50 hover:bg-muted/50 col-span-full grid grid-cols-subgrid", children: /* @__PURE__ */ jsx13(
       "div",
       {
         role: "cell",
@@ -4771,7 +4857,7 @@ function DataTableGroupRow({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx12(BaseTableRow, { className: "bg-muted/50 hover:bg-muted/50", children: /* @__PURE__ */ jsx12(BaseTableCell, { colSpan, className: "text-foreground border-b font-semibold whitespace-nowrap", children: groupLabel }) });
+  return /* @__PURE__ */ jsx13(BaseTableRow, { className: "bg-muted/50 hover:bg-muted/50", children: /* @__PURE__ */ jsx13(BaseTableCell, { colSpan, className: "text-foreground border-b font-semibold whitespace-nowrap", children: groupLabel }) });
 }
 function DataTableSkeletonBody({
   rowCount = 10,
@@ -4780,32 +4866,32 @@ function DataTableSkeletonBody({
   layout = "auto"
 }) {
   const isGrid = layout === "grid";
-  const rows = Array.from({ length: rowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx12(DataTableRow, { layout, children: columns.map(
+  const rows = Array.from({ length: rowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx13(DataTableRow, { layout, children: columns.map(
     (col) => {
       var _a, _b;
-      return isGrid ? /* @__PURE__ */ jsx12(
+      return isGrid ? /* @__PURE__ */ jsx13(
         "div",
         {
           role: "cell",
           className: cn(TABLE_CELL_CLASSES, "flex items-center overflow-hidden"),
           style: { minWidth: col.minSize },
-          children: (_a = renderCell == null ? void 0 : renderCell(col.id)) != null ? _a : /* @__PURE__ */ jsx12(Skeleton, { className: "h-4 w-full" })
+          children: (_a = renderCell == null ? void 0 : renderCell(col.id)) != null ? _a : /* @__PURE__ */ jsx13(Skeleton, { className: "h-4 w-full" })
         },
         `skeleton-col-${col.id}-row-${rowIndex}`
-      ) : /* @__PURE__ */ jsx12(
+      ) : /* @__PURE__ */ jsx13(
         BaseTableCell,
         {
           style: { width: col.size, minWidth: col.minSize, maxWidth: col.maxSize },
-          children: (_b = renderCell == null ? void 0 : renderCell(col.id)) != null ? _b : /* @__PURE__ */ jsx12(Skeleton, { className: "h-4 w-full" })
+          children: (_b = renderCell == null ? void 0 : renderCell(col.id)) != null ? _b : /* @__PURE__ */ jsx13(Skeleton, { className: "h-4 w-full" })
         },
         `skeleton-col-${col.id}-row-${rowIndex}`
       );
     }
   ) }, `skeleton-row-${rowIndex}`));
   if (isGrid) {
-    return /* @__PURE__ */ jsx12("div", { role: "rowgroup", className: "col-span-full grid grid-cols-subgrid", "data-testid": "table-skeleton-loader", children: rows });
+    return /* @__PURE__ */ jsx13("div", { role: "rowgroup", className: "col-span-full grid grid-cols-subgrid", "data-testid": "table-skeleton-loader", children: rows });
   }
-  return /* @__PURE__ */ jsx12(BaseTableBody, { "data-testid": "table-skeleton-loader", children: rows });
+  return /* @__PURE__ */ jsx13(BaseTableBody, { "data-testid": "table-skeleton-loader", children: rows });
 }
 function DataTableExpandedRow({
   colSpan,
@@ -4815,9 +4901,9 @@ function DataTableExpandedRow({
 }) {
   if (!show) return null;
   if (layout === "grid") {
-    return /* @__PURE__ */ jsx12("div", { role: "row", className: "col-span-full grid grid-cols-subgrid", children: /* @__PURE__ */ jsx12("div", { role: "cell", style: { gridColumn: `span ${colSpan}` }, className: "bg-card p-0 align-top whitespace-normal", children }) });
+    return /* @__PURE__ */ jsx13("div", { role: "row", className: "col-span-full grid grid-cols-subgrid", children: /* @__PURE__ */ jsx13("div", { role: "cell", style: { gridColumn: `span ${colSpan}` }, className: "bg-card p-0 align-top whitespace-normal", children }) });
   }
-  return /* @__PURE__ */ jsx12(BaseTableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx12(BaseTableCell, { colSpan, className: "bg-card p-0 align-top whitespace-normal", children }) });
+  return /* @__PURE__ */ jsx13(BaseTableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx13(BaseTableCell, { colSpan, className: "bg-card p-0 align-top whitespace-normal", children }) });
 }
 function DataTableBody({
   tableRows,
@@ -4843,7 +4929,7 @@ function DataTableBody({
       minSize: c.columnDef.minSize,
       maxSize: c.columnDef.maxSize
     }));
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       DataTableSkeletonBody,
       {
         columns: skeletonColumns,
@@ -4857,17 +4943,17 @@ function DataTableBody({
     var _a, _b, _c, _d;
     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__ */ jsx12(DataTableGroupRow, { groupLabel: String(groupLabel != null ? groupLabel : ""), colSpan, layout }, row.id);
+      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;
-    return /* @__PURE__ */ jsxs10(React7.Fragment, { children: [
-      /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsxs11(React8.Fragment, { children: [
+      /* @__PURE__ */ jsx13(
         DataTableRow,
         __spreadProps(__spreadValues({}, onRowRender ? onRowRender(row.original) : {}), {
           "data-expanded": isExpanded || void 0,
           layout,
-          children: row.getVisibleCells().filter((cell) => !isFilterOnlyColumn(cell.column)).map((cell) => /* @__PURE__ */ jsx12(
+          children: row.getVisibleCells().filter((cell) => !isFilterOnlyColumn(cell.column)).map((cell) => /* @__PURE__ */ jsx13(
             DataTableCell,
             {
               cell,
@@ -4881,21 +4967,21 @@ function DataTableBody({
           ))
         })
       ),
-      /* @__PURE__ */ jsx12(DataTableExpandedRow, { colSpan, show: isExpanded, layout, children: expandedRow })
+      /* @__PURE__ */ jsx13(DataTableExpandedRow, { colSpan, show: isExpanded, layout, children: expandedRow })
     ] }, row.id);
   });
   if (isGrid) {
-    return /* @__PURE__ */ jsx12("div", { role: "rowgroup", className: "col-span-full grid grid-cols-subgrid", children: rows });
+    return /* @__PURE__ */ jsx13("div", { role: "rowgroup", className: "col-span-full grid grid-cols-subgrid", children: rows });
   }
-  return /* @__PURE__ */ jsx12(BaseTableBody, { children: rows });
+  return /* @__PURE__ */ jsx13(BaseTableBody, { children: rows });
 }
 
 // src/data-table/view-filter.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 
 // src/filter-bar/filter-bar.tsx
-import * as React8 from "react";
-import { Icon as Icon9 } from "@upbound/monarch-core";
+import * as React9 from "react";
+import { Icon as Icon10 } from "@upbound/monarch-core";
 import { Badge as Badge3 } from "@upbound/monarch-core";
 import { Button as Button7 } from "@upbound/monarch-core";
 import { ButtonGroup as ButtonGroup2, ButtonGroupText as ButtonGroupText2 } from "@upbound/monarch-core";
@@ -4918,7 +5004,6 @@ import {
   DropdownMenu as DropdownMenu5,
   DropdownMenuCheckboxItem as DropdownMenuCheckboxItem2,
   DropdownMenuContent as DropdownMenuContent5,
-  DropdownMenuItem as DropdownMenuItem5,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger as DropdownMenuTrigger5
@@ -4926,7 +5011,7 @@ import {
 import { Input as Input2 } from "@upbound/monarch-core";
 import { Label as Label3 } from "@upbound/monarch-core";
 import { Popover as Popover2, PopoverContent as PopoverContent2, PopoverTrigger as PopoverTrigger2 } from "@upbound/monarch-core";
-import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function asCheckboxValue(value) {
   return Array.isArray(value) ? value : [];
 }
@@ -4960,6 +5045,17 @@ function applyTimeToDate(date, time) {
 function formatDateLabel(date) {
   return date.toLocaleDateString(void 0, { month: "short", day: "numeric" });
 }
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }
+  };
+}
+function hasOrder(filter) {
+  return typeof filter.order === "number";
+}
 function FilterBar(_a) {
   var _b = _a, {
     filters,
@@ -4968,7 +5064,8 @@ function FilterBar(_a) {
     onRemoveFilter,
     onChangeFilter,
     className,
-    children
+    children,
+    ref
   } = _b, props = __objRest(_b, [
     "filters",
     "activeFilters",
@@ -4976,48 +5073,60 @@ function FilterBar(_a) {
     "onRemoveFilter",
     "onChangeFilter",
     "className",
-    "children"
+    "children",
+    "ref"
   ]);
   const usedKeys = new Set(activeFilters.map((f) => f.key));
-  const availableFilters = filters.filter((f) => !usedKeys.has(f.key));
+  const remainingFilters = filters.filter((f) => !usedKeys.has(f.key));
+  const availableFilters = filters.some(hasOrder) ? remainingFilters : sortBy(remainingFilters, (f) => f.label);
   const shouldShowFilters = availableFilters.length > 0 || activeFilters.length > 0;
-  const [pendingOpenKey, setPendingOpenKey] = React8.useState(null);
+  const [pendingOpenKey, setPendingOpenKey] = React9.useState(null);
   function handleAddFilter(key) {
     onAddFilter(key);
     setPendingOpenKey(key);
   }
-  return /* @__PURE__ */ jsxs11(
+  const containerRef = React9.useRef(null);
+  return /* @__PURE__ */ jsxs12(
     "div",
     __spreadProps(__spreadValues({
       "data-slot": "filter-bar",
       "data-visible-filters": shouldShowFilters,
-      className: cn("flex flex-wrap items-center gap-2", className)
+      className: cn("flex flex-wrap items-center gap-2", className),
+      ref: composeRefs(containerRef, ref)
     }, props), {
       children: [
-        availableFilters.length > 0 && /* @__PURE__ */ jsxs11(DropdownMenu5, { children: [
-          /* @__PURE__ */ jsx13(DropdownMenuTrigger5, { asChild: true, children: /* @__PURE__ */ jsxs11(Button7, { variant: "outline", children: [
-            /* @__PURE__ */ jsx13(Icon9, { name: "plus", "data-icon": "inline-start" }),
-            "Add filter"
-          ] }) }),
-          /* @__PURE__ */ jsx13(
-            DropdownMenuContent5,
-            {
-              align: "start",
-              className: "w-48",
-              onCloseAutoFocus: (e) => e.preventDefault(),
-              children: availableFilters.map((filter) => /* @__PURE__ */ jsx13(DropdownMenuItem5, { onSelect: () => handleAddFilter(filter.key), children: filter.label }, filter.key))
-            }
-          )
-        ] }),
+        availableFilters.length > 0 && /* @__PURE__ */ jsxs12(
+          Combobox2,
+          {
+            items: availableFilters,
+            itemToStringValue: (item) => item.label,
+            itemToStringLabel: (item) => item.label,
+            onValueChange: (filter) => {
+              if (filter) handleAddFilter(filter.key);
+            },
+            children: [
+              /* @__PURE__ */ jsxs12(ComboboxTrigger2, { "aria-label": "Add filter", render: /* @__PURE__ */ jsx14(Button7, { variant: "outline" }), children: [
+                /* @__PURE__ */ jsx14(Icon10, { name: "plus", "data-icon": "inline-start" }),
+                "Add filter"
+              ] }),
+              /* @__PURE__ */ jsxs12(ComboboxContent2, { container: containerRef, align: "start", className: "w-48", children: [
+                /* @__PURE__ */ jsx14(ComboboxInput2, { showTrigger: false, placeholder: "Search filters\u2026" }),
+                /* @__PURE__ */ jsx14(ComboboxEmpty2, { children: "No filters found." }),
+                /* @__PURE__ */ jsx14(ComboboxList2, { children: (filter) => /* @__PURE__ */ jsx14(ComboboxItem2, { value: filter, children: filter.label }, filter.key) })
+              ] })
+            ]
+          }
+        ),
         activeFilters.map((active) => {
           const definition = filters.find((f) => f.key === active.key);
           if (!definition) return null;
-          return /* @__PURE__ */ jsx13(
+          return /* @__PURE__ */ jsx14(
             FilterChip,
             {
               definition,
               value: active.value,
               autoOpen: active.key === pendingOpenKey,
+              container: containerRef,
               onChangeValue: (value) => onChangeFilter(active.key, value),
               onRemove: () => onRemoveFilter(active.key)
             },
@@ -5029,34 +5138,36 @@ function FilterBar(_a) {
     })
   );
 }
-function FilterChip({ definition, value, autoOpen, onChangeValue, onRemove }) {
+function FilterChip({ definition, value, autoOpen, container, onChangeValue, onRemove }) {
   var _a;
   const type = (_a = definition.type) != null ? _a : "checkbox";
   switch (type) {
     case "checkbox":
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         CheckboxFilterChip,
         {
           definition,
           value,
           autoOpen,
+          container,
           onChangeValue,
           onRemove
         }
       );
     case "radio":
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         RadioFilterChip,
         {
           definition,
           value,
           autoOpen,
+          container,
           onChangeValue,
           onRemove
         }
       );
     case "text":
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         TextFilterChip,
         {
           definition,
@@ -5067,7 +5178,7 @@ function FilterChip({ definition, value, autoOpen, onChangeValue, onRemove }) {
         }
       );
     case "multiText":
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         MultiTextFilterChip,
         {
           definition,
@@ -5078,7 +5189,7 @@ function FilterChip({ definition, value, autoOpen, onChangeValue, onRemove }) {
         }
       );
     case "date":
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         DateFilterChip,
         {
           definition,
@@ -5091,26 +5202,28 @@ function FilterChip({ definition, value, autoOpen, onChangeValue, onRemove }) {
   }
 }
 function FilterChipRemoveButton({ label, onRemove }) {
-  return /* @__PURE__ */ jsx13(Button7, { variant: "outline", size: "icon", "aria-label": `Remove ${label} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx13(Icon9, { name: "xmark" }) });
+  return /* @__PURE__ */ jsx14(Button7, { variant: "outline", size: "icon", "aria-label": `Remove ${label} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx14(Icon10, { name: "xmark" }) });
 }
 function CheckboxFilterChip({
   definition,
   value,
   autoOpen,
+  container,
   onChangeValue,
   onRemove
 }) {
   var _a, _b;
-  const { label, options, searchable = false } = definition;
+  const { label, searchable = false } = definition;
+  const options = sortBy(definition.options, (o) => o.label);
   const values = asCheckboxValue(value);
   const displayLabel = values.length === 0 ? "Any" : values.length === 1 ? (_b = (_a = options.find((o) => o.value === values[0])) == null ? void 0 : _a.label) != null ? _b : values[0] : `${values.length} selected`;
   function toggle(optionValue) {
     const next = values.includes(optionValue) ? values.filter((v) => v !== optionValue) : [...values, optionValue];
     onChangeValue(next);
   }
-  return /* @__PURE__ */ jsxs11(ButtonGroup2, { children: [
-    /* @__PURE__ */ jsx13(ButtonGroupText2, { children: label }),
-    searchable ? /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(ButtonGroup2, { children: [
+    /* @__PURE__ */ jsx14(ButtonGroupText2, { children: label }),
+    searchable ? /* @__PURE__ */ jsxs12(
       Combobox2,
       {
         items: options,
@@ -5120,40 +5233,48 @@ function CheckboxFilterChip({
         value: options.filter((o) => values.includes(o.value)),
         onValueChange: (selected) => onChangeValue(selected.map((s) => s.value)),
         children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             ComboboxTrigger2,
             {
-              render: /* @__PURE__ */ jsx13(Button7, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
-              children: /* @__PURE__ */ jsx13("span", { className: values.length === 0 ? "text-muted-foreground" : "", children: displayLabel })
+              render: /* @__PURE__ */ jsx14(Button7, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
+              children: /* @__PURE__ */ jsx14("span", { className: values.length === 0 ? "text-muted-foreground" : "", children: displayLabel })
             }
           ),
-          /* @__PURE__ */ jsxs11(ComboboxContent2, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
-            /* @__PURE__ */ jsx13(ComboboxInput2, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
-            values.length > 0 && /* @__PURE__ */ jsxs11(Fragment8, { children: [
-              /* @__PURE__ */ jsxs11(ComboboxSelectedChips2, { children: [
-                /* @__PURE__ */ jsx13(ComboboxValue2, { children: (selected) => /* @__PURE__ */ jsx13(Fragment8, { children: selected.map((item) => /* @__PURE__ */ jsx13(ComboboxChip2, { children: item.label }, item.value)) }) }),
-                /* @__PURE__ */ jsx13(ComboboxClearAll2, { onClick: () => onChangeValue([]) })
-              ] }),
-              /* @__PURE__ */ jsx13(ComboboxSeparator2, {})
-            ] }),
-            /* @__PURE__ */ jsxs11(ComboboxEmpty2, { children: [
-              "No ",
-              label.toLowerCase(),
-              " found."
-            ] }),
-            /* @__PURE__ */ jsx13(ComboboxList2, { children: (item) => /* @__PURE__ */ jsxs11(ComboboxItem2, { value: item, children: [
-              item.icon,
-              item.label
-            ] }, item.value) })
-          ] })
+          /* @__PURE__ */ jsxs12(
+            ComboboxContent2,
+            {
+              container,
+              className: "min-w-64",
+              collisionAvoidance: { side: "none", align: "shift" },
+              children: [
+                /* @__PURE__ */ jsx14(ComboboxInput2, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
+                values.length > 0 && /* @__PURE__ */ jsxs12(Fragment8, { children: [
+                  /* @__PURE__ */ jsxs12(ComboboxSelectedChips2, { children: [
+                    /* @__PURE__ */ jsx14(ComboboxValue2, { children: (selected) => /* @__PURE__ */ jsx14(Fragment8, { children: selected.map((item) => /* @__PURE__ */ jsx14(ComboboxChip2, { children: item.label }, item.value)) }) }),
+                    /* @__PURE__ */ jsx14(ComboboxClearAll2, { onClick: () => onChangeValue([]) })
+                  ] }),
+                  /* @__PURE__ */ jsx14(ComboboxSeparator2, {})
+                ] }),
+                /* @__PURE__ */ jsxs12(ComboboxEmpty2, { children: [
+                  "No ",
+                  label.toLowerCase(),
+                  " found."
+                ] }),
+                /* @__PURE__ */ jsx14(ComboboxList2, { children: (item) => /* @__PURE__ */ jsxs12(ComboboxItem2, { value: item, children: [
+                  item.icon,
+                  item.label
+                ] }, item.value) })
+              ]
+            }
+          )
         ]
       }
-    ) : /* @__PURE__ */ jsxs11(DropdownMenu5, { defaultOpen: autoOpen, children: [
-      /* @__PURE__ */ jsx13(DropdownMenuTrigger5, { asChild: true, children: /* @__PURE__ */ jsxs11(Button7, { variant: "outline", className: "gap-1 font-normal", children: [
-        /* @__PURE__ */ jsx13("span", { className: values.length === 0 ? "text-muted-foreground" : "", children: displayLabel }),
-        /* @__PURE__ */ jsx13(Icon9, { name: "chevron-down", size: "sm", className: "text-muted-foreground" })
+    ) : /* @__PURE__ */ jsxs12(DropdownMenu5, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx14(DropdownMenuTrigger5, { asChild: true, children: /* @__PURE__ */ jsxs12(Button7, { variant: "outline", className: "gap-1 font-normal", children: [
+        /* @__PURE__ */ jsx14("span", { className: values.length === 0 ? "text-muted-foreground" : "", children: displayLabel }),
+        /* @__PURE__ */ jsx14(Icon10, { name: "chevron-down", size: "sm", className: "text-muted-foreground" })
       ] }) }),
-      /* @__PURE__ */ jsx13(DropdownMenuContent5, { align: "start", className: "w-48", children: options.map((opt) => /* @__PURE__ */ jsxs11(
+      /* @__PURE__ */ jsx14(DropdownMenuContent5, { align: "start", className: "w-48", children: options.map((opt) => /* @__PURE__ */ jsxs12(
         DropdownMenuCheckboxItem2,
         {
           checked: values.includes(opt.value),
@@ -5166,24 +5287,26 @@ function CheckboxFilterChip({
         opt.value
       )) })
     ] }),
-    /* @__PURE__ */ jsx13(FilterChipRemoveButton, { label, onRemove })
+    /* @__PURE__ */ jsx14(FilterChipRemoveButton, { label, onRemove })
   ] });
 }
 function RadioFilterChip({
   definition,
   value,
   autoOpen,
+  container,
   onChangeValue,
   onRemove
 }) {
   var _a, _b, _c;
-  const { label, options, searchable = false } = definition;
+  const { label, searchable = false } = definition;
+  const options = sortBy(definition.options, (o) => o.label);
   const selectedValue = asRadioValue(value);
   const displayLabel = selectedValue ? (_b = (_a = options.find((o) => o.value === selectedValue)) == null ? void 0 : _a.label) != null ? _b : selectedValue : "Any";
   const selected = (_c = options.find((o) => o.value === selectedValue)) != null ? _c : null;
-  return /* @__PURE__ */ jsxs11(ButtonGroup2, { children: [
-    /* @__PURE__ */ jsx13(ButtonGroupText2, { children: label }),
-    searchable ? /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(ButtonGroup2, { children: [
+    /* @__PURE__ */ jsx14(ButtonGroupText2, { children: label }),
+    searchable ? /* @__PURE__ */ jsxs12(
       Combobox2,
       {
         items: options,
@@ -5195,38 +5318,46 @@ function RadioFilterChip({
           return onChangeValue((_a2 = next == null ? void 0 : next.value) != null ? _a2 : "");
         },
         children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             ComboboxTrigger2,
             {
-              render: /* @__PURE__ */ jsx13(Button7, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
-              children: /* @__PURE__ */ jsx13("span", { className: selectedValue ? "" : "text-muted-foreground", children: displayLabel })
+              render: /* @__PURE__ */ jsx14(Button7, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
+              children: /* @__PURE__ */ jsx14("span", { className: selectedValue ? "" : "text-muted-foreground", children: displayLabel })
             }
           ),
-          /* @__PURE__ */ jsxs11(ComboboxContent2, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
-            /* @__PURE__ */ jsx13(ComboboxInput2, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
-            /* @__PURE__ */ jsxs11(ComboboxEmpty2, { children: [
-              "No ",
-              label.toLowerCase(),
-              " found."
-            ] }),
-            /* @__PURE__ */ jsx13(ComboboxList2, { children: (item) => /* @__PURE__ */ jsxs11(ComboboxItem2, { value: item, children: [
-              item.icon,
-              item.label
-            ] }, item.value) })
-          ] })
+          /* @__PURE__ */ jsxs12(
+            ComboboxContent2,
+            {
+              container,
+              className: "min-w-64",
+              collisionAvoidance: { side: "none", align: "shift" },
+              children: [
+                /* @__PURE__ */ jsx14(ComboboxInput2, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
+                /* @__PURE__ */ jsxs12(ComboboxEmpty2, { children: [
+                  "No ",
+                  label.toLowerCase(),
+                  " found."
+                ] }),
+                /* @__PURE__ */ jsx14(ComboboxList2, { children: (item) => /* @__PURE__ */ jsxs12(ComboboxItem2, { value: item, children: [
+                  item.icon,
+                  item.label
+                ] }, item.value) })
+              ]
+            }
+          )
         ]
       }
-    ) : /* @__PURE__ */ jsxs11(DropdownMenu5, { defaultOpen: autoOpen, children: [
-      /* @__PURE__ */ jsx13(DropdownMenuTrigger5, { asChild: true, children: /* @__PURE__ */ jsxs11(Button7, { variant: "outline", className: "gap-1 font-normal", children: [
-        /* @__PURE__ */ jsx13("span", { className: selectedValue ? "" : "text-muted-foreground", children: displayLabel }),
-        /* @__PURE__ */ jsx13(Icon9, { name: "chevron-down", size: "sm", className: "text-muted-foreground" })
+    ) : /* @__PURE__ */ jsxs12(DropdownMenu5, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx14(DropdownMenuTrigger5, { asChild: true, children: /* @__PURE__ */ jsxs12(Button7, { variant: "outline", className: "gap-1 font-normal", children: [
+        /* @__PURE__ */ jsx14("span", { className: selectedValue ? "" : "text-muted-foreground", children: displayLabel }),
+        /* @__PURE__ */ jsx14(Icon10, { name: "chevron-down", size: "sm", className: "text-muted-foreground" })
       ] }) }),
-      /* @__PURE__ */ jsx13(DropdownMenuContent5, { align: "start", className: "w-48", children: /* @__PURE__ */ jsx13(DropdownMenuRadioGroup, { value: selectedValue, onValueChange: onChangeValue, children: options.map((opt) => /* @__PURE__ */ jsxs11(DropdownMenuRadioItem, { value: opt.value, children: [
+      /* @__PURE__ */ jsx14(DropdownMenuContent5, { align: "start", className: "w-48", children: /* @__PURE__ */ jsx14(DropdownMenuRadioGroup, { value: selectedValue, onValueChange: onChangeValue, children: options.map((opt) => /* @__PURE__ */ jsxs12(DropdownMenuRadioItem, { value: opt.value, children: [
         opt.icon,
         opt.label
       ] }, opt.value)) }) })
     ] }),
-    /* @__PURE__ */ jsx13(FilterChipRemoveButton, { label, onRemove })
+    /* @__PURE__ */ jsx14(FilterChipRemoveButton, { label, onRemove })
   ] });
 }
 function TextFilterChip({
@@ -5238,12 +5369,12 @@ function TextFilterChip({
 }) {
   const { label, placeholder } = definition;
   const text = asTextValue(value);
-  const [open, setOpen] = React8.useState(!!autoOpen);
-  return /* @__PURE__ */ jsxs11(ButtonGroup2, { children: [
-    /* @__PURE__ */ jsx13(ButtonGroupText2, { children: label }),
-    /* @__PURE__ */ jsxs11(Popover2, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx13(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx13(Button7, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx13("span", { className: text ? "" : "text-muted-foreground", children: text || "Any" }) }) }),
-      /* @__PURE__ */ jsx13(PopoverContent2, { align: "start", children: /* @__PURE__ */ jsx13(
+  const [open, setOpen] = React9.useState(!!autoOpen);
+  return /* @__PURE__ */ jsxs12(ButtonGroup2, { children: [
+    /* @__PURE__ */ jsx14(ButtonGroupText2, { children: label }),
+    /* @__PURE__ */ jsxs12(Popover2, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx14(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx14(Button7, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx14("span", { className: text ? "" : "text-muted-foreground", children: text || "Any" }) }) }),
+      /* @__PURE__ */ jsx14(PopoverContent2, { align: "start", children: /* @__PURE__ */ jsx14(
         Input2,
         {
           autoFocus: true,
@@ -5256,7 +5387,7 @@ function TextFilterChip({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx13(FilterChipRemoveButton, { label, onRemove })
+    /* @__PURE__ */ jsx14(FilterChipRemoveButton, { label, onRemove })
   ] });
 }
 function MultiTextFilterChip({
@@ -5268,7 +5399,7 @@ function MultiTextFilterChip({
 }) {
   const { label, placeholder } = definition;
   const tokens = asMultiTextValue(value);
-  const [draft, setDraft] = React8.useState("");
+  const [draft, setDraft] = React9.useState("");
   const displayLabel = tokens.length === 0 ? "Any" : tokens.length === 1 ? tokens[0] : `${tokens.length} values`;
   function addToken() {
     const token = draft.trim();
@@ -5282,25 +5413,25 @@ function MultiTextFilterChip({
   function removeToken(token) {
     onChangeValue(tokens.filter((t) => t !== token));
   }
-  return /* @__PURE__ */ jsxs11(ButtonGroup2, { children: [
-    /* @__PURE__ */ jsx13(ButtonGroupText2, { children: label }),
-    /* @__PURE__ */ jsxs11(Popover2, { defaultOpen: autoOpen, children: [
-      /* @__PURE__ */ jsx13(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx13(Button7, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx13("span", { className: tokens.length === 0 ? "text-muted-foreground" : "", children: displayLabel }) }) }),
-      /* @__PURE__ */ jsx13(PopoverContent2, { align: "start", children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2", children: [
-        tokens.length > 0 && /* @__PURE__ */ jsx13("div", { className: "flex flex-wrap gap-1", children: tokens.map((token) => /* @__PURE__ */ jsxs11(Badge3, { variant: "secondary", className: "gap-1", children: [
+  return /* @__PURE__ */ jsxs12(ButtonGroup2, { children: [
+    /* @__PURE__ */ jsx14(ButtonGroupText2, { children: label }),
+    /* @__PURE__ */ jsxs12(Popover2, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx14(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx14(Button7, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx14("span", { className: tokens.length === 0 ? "text-muted-foreground" : "", children: displayLabel }) }) }),
+      /* @__PURE__ */ jsx14(PopoverContent2, { align: "start", children: /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-2", children: [
+        tokens.length > 0 && /* @__PURE__ */ jsx14("div", { className: "flex flex-wrap gap-1", children: tokens.map((token) => /* @__PURE__ */ jsxs12(Badge3, { variant: "secondary", className: "gap-1", children: [
           token,
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             "button",
             {
               type: "button",
               "aria-label": `Remove ${token}`,
               onClick: () => removeToken(token),
               className: "cursor-pointer",
-              children: /* @__PURE__ */ jsx13(Icon9, { name: "xmark", size: "xs" })
+              children: /* @__PURE__ */ jsx14(Icon10, { name: "xmark", size: "xs" })
             }
           )
         ] }, token)) }),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           Input2,
           {
             autoFocus: true,
@@ -5319,7 +5450,7 @@ function MultiTextFilterChip({
         )
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx13(FilterChipRemoveButton, { label, onRemove })
+    /* @__PURE__ */ jsx14(FilterChipRemoveButton, { label, onRemove })
   ] });
 }
 function DateFilterChip({
@@ -5349,12 +5480,12 @@ function DateFilterChip({
     if (!endDate) return;
     onChangeValue({ startDate, endDate: applyTimeToDate(endDate, time) });
   }
-  return /* @__PURE__ */ jsxs11(ButtonGroup2, { children: [
-    /* @__PURE__ */ jsx13(ButtonGroupText2, { children: label }),
-    /* @__PURE__ */ jsxs11(Popover2, { defaultOpen: autoOpen, children: [
-      /* @__PURE__ */ jsx13(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx13(Button7, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx13("span", { className: startDate ? "" : "text-muted-foreground", children: displayLabel }) }) }),
-      /* @__PURE__ */ jsx13(PopoverContent2, { align: "start", className: "w-fit", children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs12(ButtonGroup2, { children: [
+    /* @__PURE__ */ jsx14(ButtonGroupText2, { children: label }),
+    /* @__PURE__ */ jsxs12(Popover2, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx14(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx14(Button7, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx14("span", { className: startDate ? "" : "text-muted-foreground", children: displayLabel }) }) }),
+      /* @__PURE__ */ jsx14(PopoverContent2, { align: "start", className: "w-fit", children: /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx14(
           Calendar2,
           {
             mode: "range",
@@ -5362,9 +5493,9 @@ function DateFilterChip({
             onSelect: pickRange
           }
         ),
-        showTimeInputs && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center gap-2", children: [
-            /* @__PURE__ */ jsx13(
+        showTimeInputs && /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs12("div", { className: "flex w-full items-center gap-2", children: [
+            /* @__PURE__ */ jsx14(
               Label3,
               {
                 htmlFor: `${definition.key}-start-time`,
@@ -5372,7 +5503,7 @@ function DateFilterChip({
                 children: "Start"
               }
             ),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14(
               Input2,
               {
                 id: `${definition.key}-start-time`,
@@ -5384,8 +5515,8 @@ function DateFilterChip({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center gap-2", children: [
-            /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsxs12("div", { className: "flex w-full items-center gap-2", children: [
+            /* @__PURE__ */ jsx14(
               Label3,
               {
                 htmlFor: `${definition.key}-end-time`,
@@ -5393,7 +5524,7 @@ function DateFilterChip({
                 children: "End"
               }
             ),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14(
               Input2,
               {
                 id: `${definition.key}-end-time`,
@@ -5408,7 +5539,7 @@ function DateFilterChip({
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx13(FilterChipRemoveButton, { label, onRemove })
+    /* @__PURE__ */ jsx14(FilterChipRemoveButton, { label, onRemove })
   ] });
 }
 
@@ -5419,26 +5550,26 @@ var isCheckboxColumnFilter = (definition) => definition.type === "checkbox";
 var isMultiTextColumnFilter = (definition) => definition.type === "multiText";
 
 // src/data-table/view-filter.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function toFilterOption(opt) {
   return typeof opt === "string" ? { value: opt, label: opt } : { value: opt.value, label: opt.label };
 }
 function toFilterBarDefinition(key, filter) {
-  var _a, _b, _c;
-  const base = { key, label: filter.title, order: (_a = filter.order) != null ? _a : 0 };
+  var _a, _b;
+  const base = { key, label: filter.title, order: filter.order };
   if (isCheckboxColumnFilter(filter)) {
     const options = "options" in filter && filter.options ? filter.options : [];
     return __spreadProps(__spreadValues({}, base), {
       type: "checkbox",
       options: options.map(toFilterOption),
-      searchable: (_b = filter.searchable) != null ? _b : true
+      searchable: (_a = filter.searchable) != null ? _a : true
     });
   }
   if (isRadioColumnFilter(filter)) {
     return __spreadProps(__spreadValues({}, base), {
       type: "radio",
       options: filter.options.map(toFilterOption),
-      searchable: (_c = filter.searchable) != null ? _c : true
+      searchable: (_b = filter.searchable) != null ? _b : true
     });
   }
   if (isDateRangeColumnFilter(filter)) {
@@ -5462,7 +5593,7 @@ function ViewFilter({
   onColumnFiltersChange,
   className
 }) {
-  const filterableColumns = React9.useMemo(
+  const filterableColumns = React10.useMemo(
     () => columns.filter((column) => !isFilterOnlyColumn(column) && column.getCanFilter()).flatMap((column) => {
       var _a;
       const filter = (_a = column.columnDef.meta) == null ? void 0 : _a.filter;
@@ -5470,19 +5601,24 @@ function ViewFilter({
     }),
     [columns]
   );
-  const filterDefinitions = React9.useMemo(
-    () => filterableColumns.map(({ key, filter }) => toFilterBarDefinition(key, filter)).sort((a, b) => a.order - b.order),
+  const filterDefinitions = React10.useMemo(
+    () => filterableColumns.map(({ key, filter }) => toFilterBarDefinition(key, filter)).sort((a, b) => {
+      if (a.order == null && b.order == null) return 0;
+      if (a.order == null) return 1;
+      if (b.order == null) return -1;
+      return a.order - b.order;
+    }),
     [filterableColumns]
   );
-  const emptyValueByKey = React9.useMemo(
+  const emptyValueByKey = React10.useMemo(
     () => new Map(filterableColumns.map(({ key, filter }) => [key, emptyValueFor(filter)])),
     [filterableColumns]
   );
-  const activeFilters = React9.useMemo(
+  const activeFilters = React10.useMemo(
     () => columnFilters.map((filter) => ({ key: filter.id, value: filter.value })),
     [columnFilters]
   );
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     FilterBar,
     {
       className,
@@ -5496,10 +5632,10 @@ function ViewFilter({
 }
 
 // src/section-header.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function SectionHeader(_a) {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     __spreadProps(__spreadValues({
       "data-slot": "section-header",
@@ -5511,19 +5647,19 @@ function SectionHeader(_a) {
 }
 function SectionHeaderContent(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx15("div", __spreadValues({ "data-slot": "section-header-content", className: cn("flex flex-col gap-1", className) }, props));
+  return /* @__PURE__ */ jsx16("div", __spreadValues({ "data-slot": "section-header-content", className: cn("flex flex-col gap-1", className) }, props));
 }
 function SectionHeaderTitle(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx15("h2", __spreadValues({ "data-slot": "section-header-title", className: cn("text-h3 text-foreground", className) }, props));
+  return /* @__PURE__ */ jsx16("h2", __spreadValues({ "data-slot": "section-header-title", className: cn("text-h3 text-foreground", className) }, props));
 }
 function SectionHeaderDescription(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx15("p", __spreadValues({ "data-slot": "section-header-description", className: cn("text-body text-muted-foreground", className) }, props));
+  return /* @__PURE__ */ jsx16("p", __spreadValues({ "data-slot": "section-header-description", className: cn("text-body text-muted-foreground", className) }, props));
 }
 function SectionHeaderMeta(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     __spreadValues({
       "data-slot": "section-header-meta",
@@ -5537,15 +5673,15 @@ function SectionHeaderMeta(_a) {
 }
 function SectionHeaderActions(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx15("div", __spreadValues({ "data-slot": "section-header-actions", className: cn("flex items-center gap-2", className) }, props));
+  return /* @__PURE__ */ jsx16("div", __spreadValues({ "data-slot": "section-header-actions", className: cn("flex items-center gap-2", className) }, props));
 }
 function SectionHeaderTabs(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx15("div", __spreadValues({ "data-slot": "section-header-tabs", className: cn("border-b", className) }, props));
+  return /* @__PURE__ */ jsx16("div", __spreadValues({ "data-slot": "section-header-tabs", className: cn("border-b", className) }, props));
 }
 
 // src/data-table/data-table.tsx
-import { Fragment as Fragment9, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var DEFAULT_PAGE_SIZE = 20;
 function DataTable({
   id,
@@ -5596,23 +5732,24 @@ function DataTable({
   initialColumnSizing,
   onColumnSizingPersist,
   stickyHeader = false,
-  celFilterConfig
+  celFilterConfig,
+  filterVisibility
 }) {
   var _a, _b, _c, _d, _e, _f;
   const isGrid = layout === "grid";
-  const tableBodyScrollRef = React10.useRef(null);
-  const [innerGlobalFilter, setInnerGlobalFilter] = React10.useState("");
-  const [innerColumnOrdering, setInnerColumnOrdering] = React10.useState([]);
-  const [innerColumnFilters, setInnerColumnFilters] = React10.useState([]);
-  const [innerSorting, setInnerSorting] = React10.useState(((_a = config.state) == null ? void 0 : _a.sorting) || []);
-  const [innerColumnPinning, setInnerColumnPinning] = React10.useState({ left: [], right: [] });
-  const [innerPagination, setInnerPagination] = React10.useState({
+  const tableBodyScrollRef = React11.useRef(null);
+  const [innerGlobalFilter, setInnerGlobalFilter] = React11.useState("");
+  const [innerColumnOrdering, setInnerColumnOrdering] = React11.useState([]);
+  const [innerColumnFilters, setInnerColumnFilters] = React11.useState([]);
+  const [innerSorting, setInnerSorting] = React11.useState(((_a = config.state) == null ? void 0 : _a.sorting) || []);
+  const [innerColumnPinning, setInnerColumnPinning] = React11.useState({ left: [], right: [] });
+  const [innerPagination, setInnerPagination] = React11.useState({
     pageIndex: ((_c = (_b = config.state) == null ? void 0 : _b.pagination) == null ? void 0 : _c.pageIndex) || 0,
     pageSize: ((_e = (_d = config.state) == null ? void 0 : _d.pagination) == null ? void 0 : _e.pageSize) || DEFAULT_PAGE_SIZE
   });
-  const [innerGrouping, setInnerGrouping] = React10.useState([]);
-  const [innerColumnVisibility, setInnerColumnVisibility] = React10.useState({});
-  const [innerExpanded, setInnerExpanded] = React10.useState({});
+  const [innerGrouping, setInnerGrouping] = React11.useState([]);
+  const [innerColumnVisibility, setInnerColumnVisibility] = React11.useState({});
+  const [innerExpanded, setInnerExpanded] = React11.useState({});
   const {
     columnSizing,
     handleColumnSizingChange,
@@ -5624,6 +5761,11 @@ function DataTable({
     onColumnSizingPersist,
     maxSize: isGrid ? RESIZE_MAX_UNBOUNDED : void 0
   });
+  const {
+    showFilterToggle: filterToggleRequested,
+    filterRowVisible,
+    setFilterRowVisible
+  } = useFilterVisibility(filterVisibility);
   const globalFilter = parentGlobalFilter != null ? parentGlobalFilter : innerGlobalFilter;
   const applyGlobalFilter = parentSetGlobalFilter != null ? parentSetGlobalFilter : setInnerGlobalFilter;
   const columnFilters = parentColumnFilters || innerColumnFilters;
@@ -5631,25 +5773,25 @@ function DataTable({
   const pagination = parentPagination || innerPagination;
   const setPagination = parentSetPagination != null ? parentSetPagination : setInnerPagination;
   const shouldDisablePagination = paginationConfig === false;
-  const resetPageIndexOnFilterChange = React10.useCallback(() => {
+  const resetPageIndexOnFilterChange = React11.useCallback(() => {
     if (!serverSidePagination || pagination.pageIndex === 0) return;
     setPagination((prev) => __spreadProps(__spreadValues({}, prev), { pageIndex: 0 }));
   }, [serverSidePagination, pagination.pageIndex, setPagination]);
-  const setGlobalFilter = React10.useCallback(
+  const setGlobalFilter = React11.useCallback(
     (value) => {
       applyGlobalFilter(value);
       resetPageIndexOnFilterChange();
     },
     [applyGlobalFilter, resetPageIndexOnFilterChange]
   );
-  const setColumnFilters = React10.useCallback(
+  const setColumnFilters = React11.useCallback(
     (value) => {
       applyColumnFilters(value);
       resetPageIndexOnFilterChange();
     },
     [applyColumnFilters, resetPageIndexOnFilterChange]
   );
-  React10.useLayoutEffect(() => {
+  React11.useLayoutEffect(() => {
     var _a2;
     if (shouldDisablePagination) return;
     (_a2 = tableBodyScrollRef.current) == null ? void 0 : _a2.scrollTo({ top: 0 });
@@ -5731,7 +5873,9 @@ function DataTable({
   const flatColumns = table.getAllFlatColumns();
   const displayableColumns = flatColumns.filter((col) => !isFilterOnlyColumn(col));
   const orderedVisibleColumns = table.getVisibleLeafColumns().filter((col) => !isFilterOnlyColumn(col));
-  const [gridMeasuredMins, setGridMeasuredMins] = React10.useState({});
+  const hasFilters = !!celFilterConfig || hasFilterableColumns(flatColumns);
+  const showFilterToggle = filterToggleRequested && !disableFilters && hasFilters;
+  const [gridMeasuredMins, setGridMeasuredMins] = React11.useState({});
   const { gridTemplateColumns, gridRootRef, handleAutosizeAll, handleAutosizeColumn, handleResetColumnSize } = useGridLayout({
     layout,
     table,
@@ -5745,7 +5889,7 @@ function DataTable({
     rawHandleAutosizeColumn,
     rawHandleResetColumnSize
   });
-  const handleContextCell = React10.useCallback(
+  const handleContextCell = React11.useCallback(
     (filter, cell) => {
       var _a2, _b2;
       if (celFilterConfig == null ? void 0 : celFilterConfig.onContextualFilter) {
@@ -5762,13 +5906,13 @@ function DataTable({
     },
     [celFilterConfig, onContextCell, setColumnFilters, table]
   );
-  const handleContextSearch = React10.useCallback(
+  const handleContextSearch = React11.useCallback(
     (searchTerm) => {
       setGlobalFilter(searchTerm);
     },
     [setGlobalFilter]
   );
-  const totalTableWidth = React10.useMemo(() => {
+  const totalTableWidth = React11.useMemo(() => {
     if (isGrid) return 0;
     const firstGroup = headerGroups[0];
     if (!firstGroup) return 0;
@@ -5792,12 +5936,12 @@ function DataTable({
     }
     setGlobalFilter("");
   };
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (parentGlobalFilter !== void 0) {
       setInnerGlobalFilter(parentGlobalFilter);
     }
   }, [parentGlobalFilter]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (disableColumnReordering) return;
     const allColumnIds = flatColumns.map((col) => col.id);
     const normalizedColumnOrdering = normalizeColumnOrdering(columnOrdering, allColumnIds);
@@ -5807,9 +5951,9 @@ function DataTable({
   }, [columnOrdering, disableColumnReordering, flatColumns, setColumnOrdering]);
   const showViewHeader = !!title || !!Actions;
   const showColumnOptions = !disableColumnReordering || !disableColumnVisibility;
-  const toolbarSearch = !disableSearch && /* @__PURE__ */ jsxs12(InputGroup3, { className: "w-70", children: [
-    /* @__PURE__ */ jsx16(InputGroupAddon3, { align: "inline-start", children: /* @__PURE__ */ jsx16(Icon10, { name: "magnifying-glass" }) }),
-    /* @__PURE__ */ jsx16(
+  const toolbarSearch = !disableSearch && /* @__PURE__ */ jsxs13(InputGroup3, { className: "w-70", children: [
+    /* @__PURE__ */ jsx17(InputGroupAddon3, { align: "inline-start", children: /* @__PURE__ */ jsx17(Icon11, { name: "magnifying-glass" }) }),
+    /* @__PURE__ */ jsx17(
       InputGroupInput2,
       {
         "aria-label": "Search",
@@ -5820,7 +5964,7 @@ function DataTable({
       }
     )
   ] });
-  const toolbarColumns = !!showColumnOptions && /* @__PURE__ */ jsx16(
+  const toolbarColumns = !!showColumnOptions && /* @__PURE__ */ jsx17(
     ColumnOptions,
     {
       columns: flatColumns,
@@ -5829,7 +5973,7 @@ function DataTable({
       disableColumnOrdering: disableColumnReordering
     }
   );
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       id: `table-${id}`,
@@ -5840,18 +5984,19 @@ function DataTable({
         className
       ),
       children: [
-        showViewHeader && /* @__PURE__ */ jsx16(SectionHeader, { className: "mb-4 flex w-full gap-2", children: /* @__PURE__ */ jsxs12(SectionHeaderContent, { children: [
-          !!title && /* @__PURE__ */ jsx16(SectionHeaderTitle, { children: title }),
-          !!description && /* @__PURE__ */ jsx16(SectionHeaderDescription, { children: description })
+        showViewHeader && /* @__PURE__ */ jsx17(SectionHeader, { className: "mb-4 flex w-full gap-2", children: /* @__PURE__ */ jsxs13(SectionHeaderContent, { children: [
+          !!title && /* @__PURE__ */ jsx17(SectionHeaderTitle, { children: title }),
+          !!description && /* @__PURE__ */ jsx17(SectionHeaderDescription, { children: description })
         ] }) }),
-        /* @__PURE__ */ jsxs12("div", { className: "mb-4 flex flex-row gap-2", children: [
+        /* @__PURE__ */ jsxs13("div", { className: "mb-4 flex flex-row gap-2", children: [
           toolbarSearch,
-          /* @__PURE__ */ jsxs12("div", { className: "ml-auto flex items-center gap-2", children: [
-            !!Actions && /* @__PURE__ */ jsx16(Actions, { state: tableState }),
+          /* @__PURE__ */ jsxs13("div", { className: "ml-auto flex items-center gap-2", children: [
+            showFilterToggle && /* @__PURE__ */ jsx17(FilterToggle, { pressed: filterRowVisible, onPressedChange: setFilterRowVisible, count: filterCount }),
+            !!Actions && /* @__PURE__ */ jsx17(Actions, { state: tableState }),
             toolbarColumns
           ] })
         ] }),
-        !disableFilters && /* @__PURE__ */ jsx16("div", { className: "flex w-full", children: celFilterConfig ? /* @__PURE__ */ jsx16("div", { className: cn("mr-2 mb-4 min-w-0 flex-1", celFilterClassName), children: /* @__PURE__ */ jsx16(
+        !disableFilters && (!showFilterToggle || filterRowVisible) && /* @__PURE__ */ jsx17("div", { className: "flex w-full", children: celFilterConfig ? /* @__PURE__ */ jsx17("div", { className: cn("mr-2 mb-4 min-w-0 flex-1", celFilterClassName), children: /* @__PURE__ */ jsx17(
           CelFilterBar,
           {
             schema: celFilterConfig.schema,
@@ -5861,7 +6006,7 @@ function DataTable({
             onRestrictedOptionSelect: celFilterConfig.onRestrictedOptionSelect,
             showClearButton: celFilterConfig.showClearButton
           }
-        ) }) : /* @__PURE__ */ jsx16(
+        ) }) : /* @__PURE__ */ jsx17(
           ViewFilter,
           {
             columns: flatColumns,
@@ -5870,8 +6015,8 @@ function DataTable({
             className: "data-[visible-filters=true]:mb-4"
           }
         ) }),
-        shouldRenderTableContent ? /* @__PURE__ */ jsxs12(Fragment9, { children: [
-          /* @__PURE__ */ jsx16("div", { className: "flex min-h-0 flex-1 flex-col", "data-testid": "table-main", children: /* @__PURE__ */ jsx16(
+        shouldRenderTableContent ? /* @__PURE__ */ jsxs13(Fragment9, { children: [
+          /* @__PURE__ */ jsx17("div", { className: "flex min-h-0 flex-1 flex-col", "data-testid": "table-main", children: /* @__PURE__ */ jsx17(
             "div",
             {
               ref: tableBodyScrollRef,
@@ -5879,7 +6024,7 @@ function DataTable({
                 "min-h-0 flex-1 overflow-auto rounded-lg border **:data-[slot=table-container]:overflow-visible",
                 !!stickyHeader && "max-h-[calc(100svh-250px)]"
               ),
-              children: /* @__PURE__ */ jsxs12(
+              children: /* @__PURE__ */ jsxs13(
                 DataTableRoot,
                 {
                   layout,
@@ -5887,7 +6032,7 @@ function DataTable({
                   gridRootRef,
                   style: isGrid ? { width: "100%" } : totalTableWidth > 0 ? { width: `max(100%, ${totalTableWidth}px)`, minWidth: "100%" } : { width: "100%" },
                   children: [
-                    /* @__PURE__ */ jsx16(
+                    /* @__PURE__ */ jsx17(
                       DataTableHeader,
                       {
                         headerGroups,
@@ -5898,7 +6043,7 @@ function DataTable({
                         layout
                       }
                     ),
-                    /* @__PURE__ */ jsx16(
+                    /* @__PURE__ */ jsx17(
                       DataTableBody,
                       {
                         tableRows,
@@ -5920,7 +6065,7 @@ function DataTable({
               )
             }
           ) }),
-          !shouldDisablePagination && !!pagination && /* @__PURE__ */ jsx16(
+          !shouldDisablePagination && !!pagination && /* @__PURE__ */ jsx17(
             DataTablePagination,
             {
               rowCount,
@@ -5932,7 +6077,7 @@ function DataTable({
               onPageSizeChange: (nextPageSize) => setPagination((prev) => __spreadProps(__spreadValues({}, prev || pagination), { pageIndex: 0, pageSize: nextPageSize }))
             }
           )
-        ] }) : /* @__PURE__ */ jsx16(
+        ] }) : /* @__PURE__ */ jsx17(
           DataTableEmptyView,
           {
             emptyView,
@@ -5947,19 +6092,19 @@ function DataTable({
 }
 
 // src/floating-widget.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { Button as Button8 } from "@upbound/monarch-core";
 import { DropdownMenu as DropdownMenu6, DropdownMenuContent as DropdownMenuContent6, DropdownMenuTrigger as DropdownMenuTrigger6 } from "@upbound/monarch-core";
-import { Icon as Icon11 } from "@upbound/monarch-core";
+import { Icon as Icon12 } from "@upbound/monarch-core";
 import { Kbd as Kbd2 } from "@upbound/monarch-core";
 import { Tooltip as Tooltip7, TooltipContent as TooltipContent6, TooltipTrigger as TooltipTrigger6 } from "@upbound/monarch-core";
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
-var FloatingWidgetContext = React11.createContext(null);
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var FloatingWidgetContext = React12.createContext(null);
 function FloatingWidgetProvider({ children }) {
-  const [isOpen, setIsOpen] = React11.useState(false);
-  const [isCollapsed, setIsCollapsed] = React11.useState(false);
-  const [isExpanded, setIsExpanded] = React11.useState(false);
-  const value = React11.useMemo(
+  const [isOpen, setIsOpen] = React12.useState(false);
+  const [isCollapsed, setIsCollapsed] = React12.useState(false);
+  const [isExpanded, setIsExpanded] = React12.useState(false);
+  const value = React12.useMemo(
     () => ({
       isOpen,
       isCollapsed,
@@ -5991,10 +6136,10 @@ function FloatingWidgetProvider({ children }) {
     }),
     [isOpen, isCollapsed, isExpanded]
   );
-  return /* @__PURE__ */ jsx17(FloatingWidgetContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx18(FloatingWidgetContext.Provider, { value, children });
 }
 function useFloatingWidget() {
-  const ctx = React11.useContext(FloatingWidgetContext);
+  const ctx = React12.useContext(FloatingWidgetContext);
   if (!ctx) {
     throw new Error("useFloatingWidget must be used inside <FloatingWidgetProvider>.");
   }
@@ -6002,14 +6147,14 @@ function useFloatingWidget() {
 }
 function FloatingWidget({ title = "Ask AI", subtitle, menuItems, children, className }) {
   const { isOpen, isCollapsed, isExpanded, close, collapse, restore, toggleExpand } = useFloatingWidget();
-  const [dragWidth, setDragWidth] = React11.useState(null);
-  const [isDragging, setIsDragging] = React11.useState(false);
-  React11.useEffect(() => {
+  const [dragWidth, setDragWidth] = React12.useState(null);
+  const [isDragging, setIsDragging] = React12.useState(false);
+  React12.useEffect(() => {
     setDragWidth(null);
   }, [isExpanded]);
   const MIN_WIDTH = 420;
-  const widgetRef = React11.useRef(null);
-  const handleResizeMouseDown = React11.useCallback((e) => {
+  const widgetRef = React12.useRef(null);
+  const handleResizeMouseDown = React12.useCallback((e) => {
     var _a, _b;
     e.preventDefault();
     setIsDragging(true);
@@ -6029,7 +6174,7 @@ function FloatingWidget({ title = "Ask AI", subtitle, menuItems, children, class
     window.addEventListener("mousemove", onMove);
     window.addEventListener("mouseup", onUp);
   }, []);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!isOpen) return;
     function handleKeydown(e) {
       if (e.key === "Escape") {
@@ -6041,7 +6186,7 @@ function FloatingWidget({ title = "Ask AI", subtitle, menuItems, children, class
   }, [isOpen, close]);
   if (!isOpen) return null;
   const dragStyle = dragWidth != null && !isCollapsed ? { width: `${dragWidth}px`, minWidth: `${MIN_WIDTH}px` } : void 0;
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       ref: widgetRef,
@@ -6065,8 +6210,8 @@ function FloatingWidget({ title = "Ask AI", subtitle, menuItems, children, class
         className
       ),
       children: [
-        !isCollapsed && /* @__PURE__ */ jsxs13(Tooltip7, { children: [
-          /* @__PURE__ */ jsx17(TooltipTrigger6, { asChild: true, children: /* @__PURE__ */ jsx17(
+        !isCollapsed && /* @__PURE__ */ jsxs14(Tooltip7, { children: [
+          /* @__PURE__ */ jsx18(TooltipTrigger6, { asChild: true, children: /* @__PURE__ */ jsx18(
             "div",
             {
               role: "separator",
@@ -6074,79 +6219,993 @@ function FloatingWidget({ title = "Ask AI", subtitle, menuItems, children, class
               "aria-label": "Resize widget",
               onMouseDown: handleResizeMouseDown,
               className: "group absolute inset-y-0 left-0 z-20 hidden w-3 cursor-col-resize touch-none items-center justify-center bg-transparent select-none sm:flex",
-              children: /* @__PURE__ */ jsx17("div", { className: "bg-border h-12 w-1 shrink-0 rounded-lg opacity-0 transition-opacity duration-150 group-hover:opacity-100" })
+              children: /* @__PURE__ */ jsx18("div", { className: "bg-border h-12 w-1 shrink-0 rounded-lg opacity-0 transition-opacity duration-150 group-hover:opacity-100" })
             }
           ) }),
-          /* @__PURE__ */ jsx17(TooltipContent6, { side: "left", children: "Resize" })
+          /* @__PURE__ */ jsx18(TooltipContent6, { side: "left", children: "Resize" })
         ] }),
-        /* @__PURE__ */ jsxs13("header", { className: "flex min-h-12 shrink-0 items-center gap-1 border-b px-3 py-2", children: [
-          /* @__PURE__ */ jsxs13("div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: [
-            /* @__PURE__ */ jsx17("span", { className: "text-body truncate font-medium", children: title }),
-            subtitle && /* @__PURE__ */ jsx17("span", { className: "text-body-sm text-muted-foreground truncate", children: subtitle })
+        /* @__PURE__ */ jsxs14("header", { className: "flex min-h-12 shrink-0 items-center gap-1 border-b px-3 py-2", children: [
+          /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: [
+            /* @__PURE__ */ jsx18("span", { className: "text-body truncate font-medium", children: title }),
+            subtitle && /* @__PURE__ */ jsx18("span", { className: "text-body-sm text-muted-foreground truncate", children: subtitle })
           ] }),
-          menuItems && !isCollapsed && /* @__PURE__ */ jsxs13(Tooltip7, { children: [
-            /* @__PURE__ */ jsxs13(DropdownMenu6, { children: [
-              /* @__PURE__ */ jsx17(TooltipTrigger6, { asChild: true, children: /* @__PURE__ */ jsx17(DropdownMenuTrigger6, { asChild: true, children: /* @__PURE__ */ jsx17(Button8, { variant: "ghost", size: "icon-sm", "aria-label": "More options", children: /* @__PURE__ */ jsx17(Icon11, { name: "ellipsis-vertical" }) }) }) }),
-              /* @__PURE__ */ jsx17(DropdownMenuContent6, { align: "end", children: menuItems })
+          menuItems && !isCollapsed && /* @__PURE__ */ jsxs14(Tooltip7, { children: [
+            /* @__PURE__ */ jsxs14(DropdownMenu6, { children: [
+              /* @__PURE__ */ jsx18(TooltipTrigger6, { asChild: true, children: /* @__PURE__ */ jsx18(DropdownMenuTrigger6, { asChild: true, children: /* @__PURE__ */ jsx18(Button8, { variant: "ghost", size: "icon-sm", "aria-label": "More options", children: /* @__PURE__ */ jsx18(Icon12, { name: "ellipsis-vertical" }) }) }) }),
+              /* @__PURE__ */ jsx18(DropdownMenuContent6, { align: "end", children: menuItems })
             ] }),
-            /* @__PURE__ */ jsx17(TooltipContent6, { children: "More options" })
+            /* @__PURE__ */ jsx18(TooltipContent6, { children: "More options" })
           ] }),
-          !isCollapsed && /* @__PURE__ */ jsxs13(Tooltip7, { children: [
-            /* @__PURE__ */ jsx17(TooltipTrigger6, { asChild: true, children: /* @__PURE__ */ jsx17(
+          !isCollapsed && /* @__PURE__ */ jsxs14(Tooltip7, { children: [
+            /* @__PURE__ */ jsx18(TooltipTrigger6, { asChild: true, children: /* @__PURE__ */ jsx18(
               Button8,
               {
                 variant: "ghost",
                 size: "icon-sm",
                 onClick: toggleExpand,
                 "aria-label": isExpanded ? "Shrink widget" : "Expand widget",
-                children: /* @__PURE__ */ jsx17(Icon11, { name: isExpanded ? "shrink" : "arrow-up-right-and-arrow-down-left-from-center" })
+                children: /* @__PURE__ */ jsx18(Icon12, { name: isExpanded ? "shrink" : "arrow-up-right-and-arrow-down-left-from-center" })
               }
             ) }),
-            /* @__PURE__ */ jsx17(TooltipContent6, { children: isExpanded ? "Shrink widget" : "Expand widget" })
+            /* @__PURE__ */ jsx18(TooltipContent6, { children: isExpanded ? "Shrink widget" : "Expand widget" })
           ] }),
-          /* @__PURE__ */ jsxs13(Tooltip7, { children: [
-            /* @__PURE__ */ jsx17(TooltipTrigger6, { asChild: true, children: isCollapsed ? /* @__PURE__ */ jsx17(Button8, { variant: "ghost", size: "icon-sm", onClick: restore, "aria-label": "Restore widget", children: /* @__PURE__ */ jsx17(Icon11, { name: "window-maximize" }) }) : /* @__PURE__ */ jsx17(Button8, { variant: "ghost", size: "icon-sm", onClick: collapse, "aria-label": "Minimize widget", children: /* @__PURE__ */ jsx17(Icon11, { name: "minus" }) }) }),
-            /* @__PURE__ */ jsx17(TooltipContent6, { children: isCollapsed ? "Restore widget" : "Minimize widget" })
+          /* @__PURE__ */ jsxs14(Tooltip7, { children: [
+            /* @__PURE__ */ jsx18(TooltipTrigger6, { asChild: true, children: isCollapsed ? /* @__PURE__ */ jsx18(Button8, { variant: "ghost", size: "icon-sm", onClick: restore, "aria-label": "Restore widget", children: /* @__PURE__ */ jsx18(Icon12, { name: "window-maximize" }) }) : /* @__PURE__ */ jsx18(Button8, { variant: "ghost", size: "icon-sm", onClick: collapse, "aria-label": "Minimize widget", children: /* @__PURE__ */ jsx18(Icon12, { name: "minus" }) }) }),
+            /* @__PURE__ */ jsx18(TooltipContent6, { children: isCollapsed ? "Restore widget" : "Minimize widget" })
           ] }),
-          /* @__PURE__ */ jsxs13(Tooltip7, { children: [
-            /* @__PURE__ */ jsx17(TooltipTrigger6, { asChild: true, children: /* @__PURE__ */ jsx17(Button8, { variant: "ghost", size: "icon-sm", onClick: close, "aria-label": "Close widget", children: /* @__PURE__ */ jsx17(Icon11, { name: "xmark" }) }) }),
-            /* @__PURE__ */ jsxs13(TooltipContent6, { children: [
+          /* @__PURE__ */ jsxs14(Tooltip7, { children: [
+            /* @__PURE__ */ jsx18(TooltipTrigger6, { asChild: true, children: /* @__PURE__ */ jsx18(Button8, { variant: "ghost", size: "icon-sm", onClick: close, "aria-label": "Close widget", children: /* @__PURE__ */ jsx18(Icon12, { name: "xmark" }) }) }),
+            /* @__PURE__ */ jsxs14(TooltipContent6, { children: [
               "Close widget",
-              /* @__PURE__ */ jsx17(Kbd2, { children: "Esc" })
+              /* @__PURE__ */ jsx18(Kbd2, { children: "Esc" })
             ] })
           ] })
         ] }),
-        !isCollapsed && /* @__PURE__ */ jsx17("div", { className: "flex min-h-0 flex-1 flex-col", children })
+        !isCollapsed && /* @__PURE__ */ jsx18("div", { className: "flex min-h-0 flex-1 flex-col", children })
+      ]
+    }
+  );
+}
+
+// src/graph/graph-actions-provider.tsx
+import * as React14 from "react";
+
+// src/graph/hooks/useGraphActionsContext.ts
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var GraphActionsContext = createContext3(null);
+var useGraphActionsContext = () => {
+  const context = useContext3(GraphActionsContext);
+  if (!context) {
+    throw new Error("useGraphActionsContext must be used within GraphActionsProvider");
+  }
+  return context;
+};
+
+// src/graph/hooks/useGraphActions.ts
+import { useCallback as useCallback9, useState as useState12 } from "react";
+
+// src/graph/graph-node.tsx
+import * as React13 from "react";
+import { getIncomers, getOutgoers, Handle, Position as Position2 } from "reactflow";
+import { Badge as Badge4, Card as Card2, Icon as Icon13, Spinner, Tooltip as Tooltip8, TooltipContent as TooltipContent7, TooltipTrigger as TooltipTrigger7 } from "@upbound/monarch-core";
+
+// src/graph/consts.ts
+var GRAPH_NODE_WIDTH = 260;
+var GRAPH_NODE_HEIGHT = 106;
+var GRAPH_NODE_COLLAPSED_HEIGHT = 47;
+var GRAPH_NODE_SEP = 22;
+var GRAPH_RANK_SEP = 54;
+
+// src/graph/graph-edge.tsx
+import { getSmoothStepPath, getStraightPath, Position } from "reactflow";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var GraphEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  targetPosition
+}) => {
+  const halfDistanceWidth = (targetX - sourceX) / 2;
+  const [straightEdgePath] = getStraightPath({
+    sourceX: sourceX - 4,
+    sourceY,
+    targetX: Math.max(sourceX + halfDistanceWidth, GRAPH_NODE_WIDTH / 2),
+    targetY: sourceY
+  });
+  const [edgePath] = getSmoothStepPath({
+    sourceX: Math.max(sourceX + halfDistanceWidth, GRAPH_NODE_WIDTH / 2),
+    sourceY,
+    sourcePosition: Position.Bottom,
+    targetX: targetX + 4,
+    targetY,
+    targetPosition,
+    borderRadius: 8,
+    offset: 0
+  });
+  return /* @__PURE__ */ jsxs15("g", { id, className: "react-flow__edge-path", children: [
+    /* @__PURE__ */ jsx19("path", { d: straightEdgePath, className: "stroke-border fill-transparent stroke-2" }),
+    /* @__PURE__ */ jsx19("path", { d: edgePath, className: "stroke-border fill-transparent stroke-2" })
+  ] });
+};
+
+// src/graph/graph-node.tsx
+import { Fragment as Fragment10, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+function isDefaultNode(node) {
+  return node.type !== "loading";
+}
+function GraphNode(_a) {
+  var _b = _a, { id, data } = _b, props = __objRest(_b, ["id", "data"]);
+  var _a2, _b2;
+  const { nodes: originalNodes, edges: originalEdges } = useGraphActionsContext();
+  const nodes = originalNodes;
+  const edges = originalEdges;
+  const handleClick = React13.useCallback(() => {
+    var _a3;
+    (_a3 = data == null ? void 0 : data.onClick) == null ? void 0 : _a3.call(data, id, data);
+  }, [data, id]);
+  const compact = (_a2 = data == null ? void 0 : data.compact) != null ? _a2 : false;
+  const state = (_b2 = data == null ? void 0 : data.state) != null ? _b2 : "default";
+  const compactBadges = React13.useMemo(() => {
+    const badges = data.badges.compact || [];
+    if (state === "paused") {
+      return [
+        { children: /* @__PURE__ */ jsx20(Icon13, { name: "pause", size: "xs" }), variant: "secondary", tooltipContent: "Resource is paused" },
+        ...badges
+      ];
+    }
+    return badges;
+  }, [data.badges.compact, state]);
+  const defaultBadges = React13.useMemo(() => {
+    const badges = data.badges.default || [];
+    if (state === "paused") {
+      return [
+        {
+          children: /* @__PURE__ */ jsxs16(Fragment10, { children: [
+            /* @__PURE__ */ jsx20(Icon13, { name: "pause", size: "xs", className: "mr-1" }),
+            " Paused"
+          ] }),
+          variant: "secondary",
+          tooltipContent: "Resource is paused"
+        },
+        ...badges
+      ];
+    }
+    return badges;
+  }, [data.badges.default, state]);
+  const currentNode = React13.useMemo(
+    () => ({
+      id,
+      position: { x: 0, y: 0 },
+      // Position not needed for edge calculations
+      data,
+      type: props.type
+    }),
+    [id, data, props.type]
+  );
+  const _hasIncomingEdge = React13.useMemo(() => {
+    return getIncomers(currentNode, nodes, edges).length > 0;
+  }, [currentNode, nodes, edges]);
+  const hasOutgoingEdge = React13.useMemo(() => {
+    return getOutgoers(currentNode, nodes, edges).length > 0;
+  }, [currentNode, nodes, edges]);
+  const targetX = GRAPH_NODE_WIDTH / 2 - 4;
+  const sourceX = 4;
+  return /* @__PURE__ */ jsxs16(
+    Card2,
+    {
+      className: cn(
+        "relative gap-1.5 overflow-visible rounded-lg py-0",
+        `flex h-[106px]! w-[260px]! flex-col pt-2.5! pb-0!`,
+        `hover:shadow-md motion-safe:transition-shadow`,
+        compact && `h-[47px]!`
+      ),
+      style: { height: compact ? GRAPH_NODE_COLLAPSED_HEIGHT : GRAPH_NODE_HEIGHT, width: GRAPH_NODE_WIDTH },
+      children: [
+        /* @__PURE__ */ jsx20(
+          Handle,
+          {
+            type: "target",
+            position: Position2.Left,
+            style: {
+              visibility: "hidden",
+              width: 0
+            },
+            isConnectable: false
+          }
+        ),
+        /* @__PURE__ */ jsxs16("div", { className: "flex w-full flex-1 cursor-pointer flex-col", onClick: handleClick, children: [
+          /* @__PURE__ */ jsxs16("div", { className: cn("flex w-full justify-between gap-1 px-2.5", compact && "flex-row-reverse items-start"), children: [
+            !!compact && /* @__PURE__ */ jsxs16(Fragment10, { children: [
+              compactBadges.length > 0 && /* @__PURE__ */ jsx20("div", { className: "flex shrink-0 flex-row items-center gap-1.5 overflow-hidden", children: compactBadges.map((_c, index) => {
+                var _d = _c, { tooltipContent, variant } = _d, badge = __objRest(_d, ["tooltipContent", "variant"]);
+                return /* @__PURE__ */ jsxs16(Tooltip8, { children: [
+                  /* @__PURE__ */ jsx20(TooltipTrigger7, { children: /* @__PURE__ */ jsx20(
+                    Badge4,
+                    __spreadProps(__spreadValues({
+                      variant
+                    }, badge), {
+                      className: "flex size-[20px]! cursor-default! items-center justify-center p-0!",
+                      children: badge.children
+                    })
+                  ) }),
+                  tooltipContent && /* @__PURE__ */ jsx20(TooltipContent7, { children: tooltipContent })
+                ] }, index);
+              }) }),
+              state === "progressing" && /* @__PURE__ */ jsx20("div", { className: "flex shrink-0 flex-row items-center gap-1.5 overflow-hidden", children: /* @__PURE__ */ jsx20("div", { className: "flex size-[20px]! items-center justify-center", children: /* @__PURE__ */ jsx20(Spinner, { size: "sm" }) }) })
+            ] }),
+            /* @__PURE__ */ jsxs16("div", { className: "mr-auto grow-0 overflow-hidden", children: [
+              /* @__PURE__ */ jsx20("h5", { className: "text-body-sm/tight truncate font-bold", children: data.title }),
+              /* @__PURE__ */ jsx20("p", { className: "text-body-sm truncate leading-none", children: data.subtitle }),
+              !compact && /* @__PURE__ */ jsx20("p", { className: "text-body-sm text-muted-foreground mt-1 truncate", children: data.name })
+            ] }),
+            /* @__PURE__ */ jsx20(
+              "span",
+              {
+                className: cn(
+                  "bg-foreground text-background inline-flex h-[26px] w-auto shrink-0 items-center justify-center rounded-md px-[7px] text-[10px] font-semibold",
+                  ["progressing", "paused"].includes(state) && "opacity-30",
+                  data.typeDescriptors.className
+                ),
+                children: data.typeDescriptors.default
+              }
+            )
+          ] }),
+          !compact && /* @__PURE__ */ jsx20(Fragment10, { children: (defaultBadges.length > 0 || state === "progressing") && /* @__PURE__ */ jsxs16("div", { className: "mt-auto flex h-8 items-center border-t px-2.5", children: [
+            /* @__PURE__ */ jsx20("div", { className: "flex gap-1.5 overflow-hidden overflow-x-auto", children: defaultBadges.map((_e, index) => {
+              var _f = _e, { tooltipContent, variant } = _f, badge = __objRest(_f, ["tooltipContent", "variant"]);
+              return /* @__PURE__ */ jsxs16(Tooltip8, { children: [
+                /* @__PURE__ */ jsx20(TooltipTrigger7, { children: /* @__PURE__ */ jsx20(Badge4, __spreadProps(__spreadValues({ variant }, badge), { className: "cursor-default! py-px! whitespace-nowrap", children: badge.children })) }),
+                tooltipContent && /* @__PURE__ */ jsx20(TooltipContent7, { children: tooltipContent })
+              ] }, index);
+            }) }),
+            state === "progressing" && /* @__PURE__ */ jsx20("div", { className: "ml-auto flex size-[20px]! items-center justify-center", children: /* @__PURE__ */ jsx20(Spinner, { size: "sm" }) })
+          ] }) })
+        ] }),
+        !!hasOutgoingEdge && /* @__PURE__ */ jsxs16(
+          "div",
+          {
+            className: "absolute top-0 right-0 h-full w-auto translate-x-full",
+            style: {
+              width: GRAPH_RANK_SEP
+            },
+            children: [
+              /* @__PURE__ */ jsx20("svg", { height: 20, width: GRAPH_NODE_SEP, className: "absolute top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx20(
+                GraphEdge,
+                {
+                  id: `${id}-expadable`,
+                  sourceX,
+                  sourceY: 10,
+                  targetX,
+                  targetY: 10,
+                  sourcePosition: Position2.Right,
+                  targetPosition: Position2.Left,
+                  source: id,
+                  target: id,
+                  stopOpacity: 0
+                }
+              ) }),
+              /* @__PURE__ */ jsxs16(Tooltip8, { children: [
+                /* @__PURE__ */ jsx20(TooltipTrigger7, { asChild: true, children: /* @__PURE__ */ jsx20(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": data.expanded ? "Collapse" : "Expand",
+                    className: "bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-ring/30 absolute top-[calc(50%)] left-[calc(50%)] inline-flex size-4 -translate-1/2 items-center justify-center rounded-full p-0 text-center text-[10px] leading-none duration-150 outline-none focus-visible:ring-2 motion-safe:transition-colors",
+                    onClick: (e) => {
+                      var _a3;
+                      e.stopPropagation();
+                      (_a3 = data.onExpandToggle) == null ? void 0 : _a3.call(data, id);
+                    },
+                    children: /* @__PURE__ */ jsx20(Icon13, { name: data.expanded ? "minus" : "plus", size: "xs" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx20(TooltipContent7, { children: data.expanded ? "Collapse" : "Expand" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx20(
+          Handle,
+          {
+            type: "source",
+            position: Position2.Right,
+            style: {
+              visibility: "hidden",
+              width: 0
+            },
+            isConnectable: false
+          }
+        )
+      ]
+    }
+  );
+}
+function GraphNodeSkeleton(_props) {
+  const compact = false;
+  return /* @__PURE__ */ jsxs16(
+    Card2,
+    {
+      className: cn(
+        `flex h-[106px]! w-[260px]! flex-col gap-1.5 rounded-lg px-0 py-0 pt-2.5! pb-0! hover:shadow-md motion-safe:transition-shadow`,
+        compact && `h-[47px]!`
+      ),
+      children: [
+        /* @__PURE__ */ jsx20(
+          Handle,
+          {
+            type: "target",
+            position: Position2.Left,
+            style: {
+              visibility: "hidden",
+              width: 0
+            },
+            isConnectable: false
+          }
+        ),
+        /* @__PURE__ */ jsxs16("div", { className: cn("flex w-full gap-1 px-2.5", compact && "flex-row-reverse"), children: [
+          /* @__PURE__ */ jsxs16("div", { className: cn("grow-0 overflow-hidden", compact && "mr-auto"), children: [
+            /* @__PURE__ */ jsx20("div", { className: "bg-muted mb-1 h-3 w-16 animate-pulse rounded-sm" }),
+            /* @__PURE__ */ jsx20("div", { className: "bg-muted h-3 w-40 animate-pulse rounded-sm" }),
+            !compact && /* @__PURE__ */ jsx20("div", { className: "bg-muted mt-2 h-3 w-48 animate-pulse rounded-sm" })
+          ] }),
+          /* @__PURE__ */ jsx20("div", { className: cn("bg-muted size-[26px] shrink-0 animate-pulse rounded-md", !compact && "ml-auto") })
+        ] }),
+        !compact && /* @__PURE__ */ jsx20("div", { className: "mt-auto flex h-8 items-center border-t px-2.5", children: /* @__PURE__ */ jsxs16("div", { className: "flex gap-1.5 overflow-hidden overflow-x-auto", children: [
+          /* @__PURE__ */ jsx20("div", { className: "bg-muted h-4 w-12 animate-pulse rounded-sm" }),
+          /* @__PURE__ */ jsx20("div", { className: "bg-muted h-4 w-12 animate-pulse rounded-sm" })
+        ] }) }),
+        /* @__PURE__ */ jsx20(
+          Handle,
+          {
+            type: "source",
+            position: Position2.Right,
+            style: {
+              visibility: "hidden",
+              width: 0
+            },
+            isConnectable: false
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/graph/hooks/useGraphActions.ts
+var useGraphActions = (initialNodes = [], initialEdges = []) => {
+  const [nodes, setNodes] = useState12(initialNodes);
+  const [edges, setEdges] = useState12(initialEdges);
+  const addNodes = useCallback9((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) => {
+    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 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 edgeIdSet = new Set(edgeIds);
+    setEdges((prevEdges) => prevEdges.filter((edge) => !edgeIdSet.has(edge.id)));
+  }, []);
+  const resetGraph = useCallback9(() => {
+    setNodes(initialNodes);
+    setEdges(initialEdges);
+  }, [initialNodes, initialEdges]);
+  const updateNode = useCallback9((nodeId, node) => {
+    setNodes((prevNodes) => prevNodes.map((n) => n.id === nodeId ? node : n));
+  }, []);
+  const toggleNodeExpansion = useCallback9((nodeId) => {
+    setNodes(
+      (prevNodes) => prevNodes.map((node) => {
+        if (node.id === nodeId && isDefaultNode(node)) {
+          return __spreadProps(__spreadValues({}, node), {
+            data: __spreadProps(__spreadValues({}, node.data), {
+              expanded: !node.data.expanded
+            })
+          });
+        }
+        return node;
+      })
+    );
+  }, []);
+  return {
+    nodes,
+    edges,
+    addNodes,
+    addEdges,
+    removeNodes,
+    removeEdges,
+    setNodes,
+    setEdges,
+    resetGraph,
+    updateNode,
+    toggleNodeExpansion
+  };
+};
+
+// src/graph/graph-actions-provider.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+var GraphActionsProvider = React14.forwardRef(
+  ({ initialNodes = [], initialEdges = [], children }, ref) => {
+    const graphActions = useGraphActions(initialNodes, initialEdges);
+    React14.useImperativeHandle(
+      ref,
+      () => ({
+        addNodes: graphActions.addNodes,
+        addEdges: graphActions.addEdges,
+        setNodes: graphActions.setNodes,
+        setEdges: graphActions.setEdges,
+        toggleNodeExpansion: graphActions.toggleNodeExpansion,
+        updateNode: graphActions.updateNode,
+        reset: graphActions.resetGraph
+      }),
+      [graphActions]
+    );
+    return /* @__PURE__ */ jsx21(GraphActionsContext.Provider, { value: graphActions, children });
+  }
+);
+GraphActionsProvider.displayName = "GraphActionsProvider";
+
+// src/graph/graph.tsx
+import * as React16 from "react";
+import {
+  getCoreRowModel as getCoreRowModel2,
+  getFacetedRowModel as getFacetedRowModel2,
+  getFacetedUniqueValues as getFacetedUniqueValues2,
+  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";
+
+// src/graph/graph-view.tsx
+import * as React15 from "react";
+import {
+  Background,
+  Controls,
+  MiniMap,
+  ReactFlow,
+  ReactFlowProvider,
+  useReactFlow
+} from "reactflow";
+
+// src/graph/hooks/useAutoLayout.ts
+import { useMemo as useMemo10 } from "react";
+import { Position as Position3 } from "reactflow";
+var TILE_HORIZONTAL_DISTANCE = GRAPH_RANK_SEP;
+var TILE_VERTICAL_DISTANCE = GRAPH_NODE_SEP;
+var TILE_HEIGHT = GRAPH_NODE_HEIGHT;
+var TILE_WIDTH = GRAPH_NODE_WIDTH;
+var getNodeDepth = (nodeId, edges, visited = /* @__PURE__ */ new Set(), maxDepth = 100) => {
+  if (visited.has(nodeId)) {
+    console.warn(`Cycle detected in graph at node: ${nodeId}. Returning depth 0 to prevent infinite recursion.`);
+    return 0;
+  }
+  if (visited.size >= maxDepth) {
+    console.warn(`Maximum depth limit (${maxDepth}) reached for node: ${nodeId}.`);
+    return visited.size;
+  }
+  const parentEdge = edges.find((edge) => edge.target === nodeId);
+  if (!parentEdge) {
+    return 0;
+  }
+  const newVisited = /* @__PURE__ */ new Set([...visited, nodeId]);
+  return 1 + getNodeDepth(parentEdge.source, edges, newVisited, maxDepth);
+};
+var flatNodeTree = (nodeTree) => {
+  const { node, children } = nodeTree;
+  if (!children) {
+    return [node];
+  }
+  return [node, ...children.flatMap(flatNodeTree)];
+};
+var getChildren = (nodeId, nodes, edges) => {
+  const nodeEdges = edges.filter((edge) => edge.source === nodeId);
+  return nodeEdges.map((edge) => nodes.find((node) => node.id === edge.target)).filter((node) => node !== void 0).map((node) => ({
+    node,
+    children: getChildren(node.id, nodes, edges)
+  }));
+};
+var getTrees = (nodes, edges) => nodes.filter((node) => !edges.some((edge) => edge.target === node.id)).map((node) => ({
+  node,
+  children: getChildren(node.id, nodes, edges)
+}));
+var getLowestPositionYInSubtree = (nodeTree) => {
+  const { node, children } = nodeTree;
+  const lowestY = node.position.y;
+  if (!(children == null ? void 0 : children.length)) {
+    return lowestY;
+  }
+  const visibleChildren = children.filter(({ node: { hidden } }) => !hidden);
+  if (visibleChildren.length === 0) {
+    return lowestY;
+  }
+  const childLowestYPositions = visibleChildren.map((child) => getLowestPositionYInSubtree(child));
+  const lowestChildY = Math.max(...childLowestYPositions);
+  return Math.max(lowestY, lowestChildY);
+};
+var positionNodes = (treeNodes, rootFlattenTree, allEdges, parentY) => {
+  const flattenTree = rootFlattenTree || treeNodes.flatMap(flatNodeTree);
+  return treeNodes.reduce((actualTreeNodes, nodeTree, treeNodeIndex) => {
+    const { node, children } = nodeTree;
+    const depth = allEdges ? getNodeDepth(node.id, allEdges) : 0;
+    const getPositionY = () => {
+      if (treeNodeIndex > 0) {
+        const previousSibling = actualTreeNodes[treeNodeIndex - 1];
+        const lowestYInPreviousSubtree = getLowestPositionYInSubtree(previousSibling);
+        return lowestYInPreviousSubtree + TILE_HEIGHT + TILE_VERTICAL_DISTANCE;
+      }
+      if (parentY !== void 0) {
+        return parentY;
+      }
+      return (TILE_HEIGHT + TILE_VERTICAL_DISTANCE) * treeNodeIndex;
+    };
+    const position = {
+      x: depth * (TILE_WIDTH + TILE_HORIZONTAL_DISTANCE),
+      y: getPositionY()
+    };
+    const positionedNode = __spreadProps(__spreadValues({}, node), {
+      targetPosition: Position3.Left,
+      sourcePosition: Position3.Right,
+      position
+    });
+    if (!(children == null ? void 0 : children.length)) {
+      return [
+        ...actualTreeNodes,
+        __spreadProps(__spreadValues({}, nodeTree), {
+          node: positionedNode
+        })
+      ];
+    }
+    const nodeWithChildren = __spreadProps(__spreadValues({}, nodeTree), {
+      node: positionedNode,
+      children: positionNodes(
+        children.sort((a, b) => {
+          return a.node.id.localeCompare(b.node.id);
+        }),
+        flattenTree,
+        allEdges,
+        position.y
+        // Pass parent's Y position to children
+      )
+    });
+    return [...actualTreeNodes, nodeWithChildren];
+  }, []);
+};
+var getLaidOutElements = (nodes, edges) => {
+  const nodeTrees = getTrees(nodes, edges);
+  const positionedNodes = positionNodes(nodeTrees, void 0, edges).flatMap(flatNodeTree);
+  return { nodes: positionedNodes, edges };
+};
+var useAutoLayout = (nodes, edges, { viewportFocusNodeId }) => {
+  const laidOutElements = useMemo10(() => {
+    if (nodes.length === 0) {
+      return { nodes, edges, nodeMap: /* @__PURE__ */ new Map() };
+    }
+    const visibleNodes = nodes.filter((node) => !node.hidden);
+    const visibleNodeIds = new Set(visibleNodes.map((node) => node.id));
+    const visibleEdges = edges.filter((edge) => visibleNodeIds.has(edge.source) && visibleNodeIds.has(edge.target));
+    const { nodes: laidOutNodes, edges: laidOutEdges } = getLaidOutElements(visibleNodes, visibleEdges);
+    const laidOutNodeMap = new Map(laidOutNodes.map((node) => [node.id, node]));
+    if (viewportFocusNodeId) {
+      const highlightedNode = laidOutNodeMap.get(viewportFocusNodeId);
+      if (highlightedNode) {
+        laidOutNodeMap.set(viewportFocusNodeId, __spreadProps(__spreadValues({}, highlightedNode), {
+          data: __spreadProps(__spreadValues({}, highlightedNode.data), { isHighlighted: true })
+        }));
+      }
+    }
+    const finalNodes = nodes.filter((node) => !node.hidden).map((node) => laidOutNodeMap.get(node.id) || node);
+    return {
+      nodes: finalNodes,
+      edges: laidOutEdges,
+      nodeMap: laidOutNodeMap
+    };
+  }, [nodes, edges, viewportFocusNodeId]);
+  return laidOutElements;
+};
+
+// src/graph/hooks/useNodeVisibility.ts
+import { useCallback as useCallback10, useMemo as useMemo11 } from "react";
+var useNodeVisibility = (nodes, edges) => {
+  const hasRealChildren = useCallback10(
+    (nodeId) => {
+      const childEdges = edges.filter((edge) => edge.source === nodeId);
+      const childNodes = childEdges.map((edge) => nodes.find((node) => node.id === edge.target)).filter(Boolean);
+      return childNodes.some((child) => child && child.type !== "loading");
+    },
+    [nodes, edges]
+  );
+  const areAllAncestorsExpanded = useCallback10(
+    (nodeId) => {
+      const parentEdges = edges.filter((edge) => edge.target === nodeId);
+      if (parentEdges.length === 0) {
+        return true;
+      }
+      for (const parentEdge of parentEdges) {
+        const parentNode = nodes.find((node) => node.id === parentEdge.source);
+        if (!parentNode) {
+          return false;
+        }
+        const isParentExpanded = isDefaultNode(parentNode) ? Boolean(parentNode.data.expanded) : true;
+        if (!isParentExpanded) {
+          return false;
+        }
+      }
+      return parentEdges.every((parentEdge) => areAllAncestorsExpanded(parentEdge.source));
+    },
+    [nodes, edges]
+  );
+  const visibleNodes = useMemo11(() => {
+    return nodes.map((node) => {
+      const shouldBeVisible = areAllAncestorsExpanded(node.id);
+      if (node.type === "loading") {
+        const loadingNode = {
+          id: node.id,
+          position: node.position,
+          type: "loading",
+          hidden: !shouldBeVisible,
+          data: node.data
+        };
+        return loadingNode;
+      }
+      if (isDefaultNode(node)) {
+        const expandedNode = {
+          id: node.id,
+          position: node.position,
+          type: node.type,
+          hidden: !shouldBeVisible,
+          data: __spreadProps(__spreadValues({}, node.data), {
+            expanded: Boolean(node.data.expanded),
+            isExpandable: hasRealChildren(node.id)
+            // onExpandToggle will be added later in GraphView
+          })
+        };
+        return expandedNode;
+      }
+      return node;
+    });
+  }, [nodes, areAllAncestorsExpanded, hasRealChildren]);
+  const visibleEdges = useMemo11(() => {
+    const visibleNodeIds = new Set(visibleNodes.filter((node) => !node.hidden).map((node) => node.id));
+    return edges.filter((edge) => visibleNodeIds.has(edge.source) && visibleNodeIds.has(edge.target));
+  }, [visibleNodes, edges]);
+  return { nodes: visibleNodes, edges: visibleEdges };
+};
+
+// src/graph/graph-view.tsx
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+var GraphViewInternal = ({ nodeTypes: parentNodeTypes, edgeTypes: parentEdgeTypes, children, viewportFocusNodeId }) => {
+  const { nodes, edges, toggleNodeExpansion } = useGraphActionsContext();
+  const nodeTypes = React15.useMemo(
+    () => __spreadValues({
+      default: GraphNode,
+      loading: GraphNodeSkeleton
+    }, parentNodeTypes),
+    [parentNodeTypes]
+  );
+  const edgeTypes = React15.useMemo(
+    () => __spreadValues({
+      default: GraphEdge
+    }, parentEdgeTypes),
+    [parentEdgeTypes]
+  );
+  const { nodes: visibleNodes, edges: visibleEdges } = useNodeVisibility(nodes, edges);
+  const nodesWithExpansion = React15.useMemo(() => {
+    return visibleNodes.map((node) => {
+      if (isDefaultNode(node) && !node.data.onExpandToggle) {
+        return __spreadProps(__spreadValues({}, node), {
+          data: __spreadProps(__spreadValues({}, node.data), {
+            onExpandToggle: toggleNodeExpansion
+          })
+        });
+      }
+      return node;
+    });
+  }, [visibleNodes, toggleNodeExpansion]);
+  const {
+    nodes: layoutedNodes,
+    edges: layoutedEdges,
+    nodeMap
+  } = useAutoLayout(nodesWithExpansion, visibleEdges, {
+    viewportFocusNodeId
+  });
+  useViewportFocus(nodeMap, viewportFocusNodeId);
+  return /* @__PURE__ */ jsxs17(
+    ReactFlow,
+    {
+      nodeTypes,
+      edgeTypes,
+      nodes: layoutedNodes,
+      edges: layoutedEdges,
+      nodesConnectable: false,
+      nodesDraggable: false,
+      fitView: viewportFocusNodeId ? false : true,
+      fitViewOptions: {
+        maxZoom: 1
+      },
+      proOptions: {
+        hideAttribution: true
+      },
+      panOnScroll: true,
+      selectionOnDrag: true,
+      children: [
+        /* @__PURE__ */ jsx22(Background, { className: "bg-muted text-muted" }),
+        /* @__PURE__ */ jsx22(Controls, { showInteractive: false }),
+        /* @__PURE__ */ jsx22(MiniMap, { zoomable: true, pannable: true }),
+        children
       ]
     }
   );
+};
+var GraphView = React15.forwardRef(({ defaultNodes = [], defaultEdges = [], nodeTypes, edgeTypes, children, viewportFocusNodeId }, ref) => {
+  return /* @__PURE__ */ jsx22(ReactFlowProvider, { children: /* @__PURE__ */ jsx22(GraphActionsProvider, { ref, initialNodes: defaultNodes, initialEdges: defaultEdges, children: /* @__PURE__ */ jsx22(GraphViewInternal, { nodeTypes, edgeTypes, viewportFocusNodeId, children }) }) });
+});
+GraphView.displayName = "GraphView";
+function useViewportFocus(nodeMap, viewportFocusNodeId) {
+  const flow = useReactFlow();
+  React15.useEffect(() => {
+    if (viewportFocusNodeId) {
+      const focusNode = nodeMap.get(viewportFocusNodeId);
+      if (focusNode) {
+        flow.setCenter(focusNode.position.x, focusNode.position.y, { zoom: 1 });
+      }
+    }
+  }, [viewportFocusNodeId, flow, nodeMap]);
 }
 
+// src/graph/graph.tsx
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+var defaultGraphErrorConfig = {
+  icon: "triangle-exclamation",
+  header: "An error occurred",
+  subheader: "There was an error fetching the data for this graph. Please refresh the screen."
+};
+var defaultGraphEmptyConfig = {
+  icon: "layer-group",
+  header: "No resources found",
+  subheader: "We couldn't find any resources to display in this graph. If you need help getting started you can learn more in the Upbound Documentation."
+};
+var defaultGraphNoFilterFoundConfig = {
+  icon: "magnifying-glass",
+  header: "No results found",
+  subheader: "We couldn't find any results that match your search term or filtering criteria. Try using different keywords, checking for typos or adjusting your filters and try again."
+};
+function Graph({
+  id,
+  viewportFocusNodeId,
+  config,
+  columnDefinitions = [],
+  title,
+  emptyView,
+  showError,
+  className,
+  loading = false,
+  ActionsComponent: Actions,
+  disableSearch = false,
+  disableFilters = false,
+  searchTerm: parentGlobalFilter,
+  onSearchTermChange: parentSetGlobalFilter,
+  filters: parentColumnFilters,
+  onFiltersChange: parentSetColumnFilters,
+  children
+}) {
+  var _a, _b, _c;
+  const graphRef = React16.useRef(null);
+  const [innerGlobalFilter, setInnerGlobalFilter] = React16.useState("");
+  const [innerColumnFilters, setInnerColumnFilters] = React16.useState([]);
+  const globalFilter = parentGlobalFilter != null ? parentGlobalFilter : innerGlobalFilter;
+  const setGlobalFilter = parentSetGlobalFilter != null ? parentSetGlobalFilter : setInnerGlobalFilter;
+  React16.useEffect(() => {
+    if (parentGlobalFilter !== void 0) {
+      setInnerGlobalFilter(parentGlobalFilter);
+    }
+  }, [parentGlobalFilter]);
+  const columnFilters = parentColumnFilters != null ? parentColumnFilters : innerColumnFilters;
+  const setColumnFilters = parentSetColumnFilters != null ? parentSetColumnFilters : setInnerColumnFilters;
+  const table = useReactTable2({
+    data: config.data,
+    columns: columnDefinitions,
+    getCoreRowModel: getCoreRowModel2(),
+    getFilteredRowModel: getFilteredRowModel2(),
+    getFacetedRowModel: getFacetedRowModel2(),
+    getFacetedUniqueValues: getFacetedUniqueValues2(),
+    state: { columnFilters, globalFilter },
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    manualFiltering: false
+  });
+  const flatColumns = table.getAllFlatColumns();
+  const filteredRows = table.getFilteredRowModel().rows;
+  const filteredData = React16.useMemo(() => filteredRows.map((row) => row.original), [filteredRows]);
+  const filterCount = columnFilters.map(
+    ({ id: columnFilterId, value }) => {
+      var _a2, _b2;
+      return getColumnFilterCount(value, (_b2 = (_a2 = table.getColumn(columnFilterId)) == null ? void 0 : _a2.columnDef.meta) == null ? void 0 : _b2.filter);
+    }
+  ).reduce((prev, curr) => prev + curr, 0);
+  const graphState = getTableState({ error: !!showError, loading, rowCount: filteredData.length });
+  const shouldDisable = graphState === "error";
+  const shouldRenderGraphContent = graphState !== "error" && graphState !== "empty";
+  const resetFilters = () => {
+    setColumnFilters([]);
+    setGlobalFilter("");
+  };
+  const memoizedNodeTypes = React16.useMemo(() => config.nodeTypes, [config.nodeTypes]);
+  const memoizedEdgeTypes = React16.useMemo(() => config.edgeTypes, [config.edgeTypes]);
+  const memoizedConfig = React16.useMemo(() => config, [config]);
+  React16.useEffect(() => {
+    if (!graphRef.current) {
+      return;
+    }
+    const { setNodes, setEdges } = graphRef.current;
+    const nodes = filteredData.map((item) => memoizedConfig.nodeTransform(item, filteredData)).flat() || [];
+    const nodeIds = new Set(nodes.map((node) => node.id));
+    const edges = (filteredData.map(memoizedConfig.edgeTransform).filter(Boolean).flat() || []).filter(
+      (edge) => Boolean(edge && edge.hasOwnProperty("source") && edge.hasOwnProperty("target")) && nodeIds.has(edge.source) && nodeIds.has(edge.target)
+    );
+    setNodes(nodes);
+    setEdges(edges);
+  }, [memoizedConfig, filteredData]);
+  const showFilters = !disableFilters && hasFilterableColumns(flatColumns);
+  const showToolbar = !disableSearch || !!Actions;
+  const resolvedEmptyView = {
+    error: (_a = emptyView == null ? void 0 : emptyView.error) != null ? _a : defaultGraphErrorConfig,
+    empty: (_b = emptyView == null ? void 0 : emptyView.empty) != null ? _b : defaultGraphEmptyConfig,
+    filter: (_c = emptyView == null ? void 0 : emptyView.filter) != null ? _c : defaultGraphNoFilterFoundConfig
+  };
+  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" }) }),
+        /* @__PURE__ */ jsx23(
+          InputGroupInput3,
+          {
+            "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 }) })
+    ] }),
+    showFilters && /* @__PURE__ */ jsx23(
+      ViewFilter,
+      {
+        columns: flatColumns,
+        columnFilters,
+        onColumnFiltersChange: setColumnFilters,
+        className: "mb-4"
+      }
+    ),
+    shouldRenderGraphContent ? /* @__PURE__ */ jsxs18("div", { className: "relative size-full flex-1", children: [
+      graphState === "loading" && /* @__PURE__ */ jsx23(Icon14, { name: "circle-notch", className: "absolute top-4 left-4 z-10 animate-spin" }),
+      /* @__PURE__ */ jsx23(
+        GraphView,
+        {
+          viewportFocusNodeId,
+          ref: graphRef,
+          nodeTypes: memoizedNodeTypes,
+          edgeTypes: memoizedEdgeTypes,
+          children
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx23(
+      DataTableEmptyView,
+      {
+        emptyView: resolvedEmptyView,
+        tableState: graphState,
+        filterCount: filterCount + (!!globalFilter.trim() ? 1 : 0),
+        resetFilters
+      }
+    )
+  ] });
+}
+
+// src/graph/hooks/useGetViewportNodeIds.ts
+import { useEffect as useEffect9, useMemo as useMemo14, useRef as useRef9, useState as useState14 } from "react";
+import { useStore, useViewport } from "reactflow";
+var useGetDebouncedViewport = (debounceDelay = 1e3) => {
+  const timerRef = useRef9(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 } = useStore((state) => ({
+    width: state.width,
+    height: state.height,
+    nodes: state.getNodes()
+  }));
+  const nodesHash = nodes.map((n) => n.id).sort().join(",");
+  const memoizedNodes = useMemo14(() => nodes, [nodesHash]);
+  useEffect9(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      setDebouncedValues({ x, y, zoom, width, height, nodes: memoizedNodes });
+      timerRef.current = null;
+    }, debounceDelay);
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [x, y, zoom, width, height, memoizedNodes, debounceDelay]);
+  return debouncedValues;
+};
+var useGetViewportNodeIds = (debounceDelay = 1e3) => {
+  const { x, y, zoom, width, height, nodes } = useGetDebouncedViewport(debounceDelay);
+  return useMemo14(() => {
+    return nodes.filter((node) => {
+      var _a, _b, _c, _d;
+      if (node.hidden) {
+        return false;
+      }
+      const nodeX = ((_b = (_a = node.positionAbsolute) == null ? void 0 : _a.x) != null ? _b : node.position.x) * zoom + x;
+      const nodeY = ((_d = (_c = node.positionAbsolute) == null ? void 0 : _c.y) != null ? _d : node.position.y) * zoom + y;
+      const nodeW = GRAPH_NODE_WIDTH * zoom;
+      const nodeH = GRAPH_NODE_HEIGHT * zoom;
+      return nodeX + nodeW >= 0 && nodeX <= width && nodeY + nodeH >= 0 && nodeY <= height;
+    }).map((node) => node.id).sort((a, b) => a.localeCompare(b));
+  }, [x, y, zoom, width, height, nodes]);
+};
+
+// src/graph/utils.ts
+import { getOutgoers as getOutgoers2 } from "reactflow";
+var getGraphDescendants = (node, nodes, edges) => {
+  const outgoers = getOutgoers2(node, nodes, edges);
+  return outgoers.reduce(
+    (acc, outgoer) => {
+      const { nodes: outgoerNodes, edges: outgoerEdges } = getGraphDescendants(outgoer, nodes, edges);
+      return {
+        nodes: [...acc.nodes, ...outgoerNodes],
+        edges: [...acc.edges, ...outgoerEdges.filter((edge) => edge.source === outgoer.id)]
+      };
+    },
+    { nodes: [node], edges: edges.filter((edge) => edge.source === node.id) }
+  );
+};
+
 // src/page-header.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function PageHeader(_a) {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx18("div", __spreadProps(__spreadValues({ "data-slot": "page-header", className: cn("flex w-full items-start justify-between gap-4", className) }, props), { children }));
+  return /* @__PURE__ */ jsx24("div", __spreadProps(__spreadValues({ "data-slot": "page-header", className: cn("flex w-full items-start justify-between gap-4", className) }, props), { children }));
 }
 function PageHeaderAvatar(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx18("div", __spreadValues({ "data-slot": "page-header-avatar", className: cn("shrink-0 self-center", className) }, props));
+  return /* @__PURE__ */ jsx24("div", __spreadValues({ "data-slot": "page-header-avatar", className: cn("shrink-0 self-center", className) }, props));
 }
 function PageHeaderContent(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx18("div", __spreadValues({ "data-slot": "page-header-content", className: cn("flex flex-1 flex-col gap-1", className) }, props));
+  return /* @__PURE__ */ jsx24("div", __spreadValues({ "data-slot": "page-header-content", className: cn("flex flex-1 flex-col gap-1", className) }, props));
 }
 function PageHeaderTitle(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx18("h1", __spreadValues({ "data-slot": "page-header-title", className: cn("text-h1 text-foreground", className) }, props));
+  return /* @__PURE__ */ jsx24("h1", __spreadValues({ "data-slot": "page-header-title", className: cn("text-h1 text-foreground", className) }, props));
 }
 function PageHeaderDescription(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx18("p", __spreadValues({ "data-slot": "page-header-description", className: cn("text-body text-muted-foreground", className) }, props));
+  return /* @__PURE__ */ jsx24("p", __spreadValues({ "data-slot": "page-header-description", className: cn("text-body text-muted-foreground", className) }, props));
 }
 function PageHeaderMeta(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx24(
     "div",
     __spreadValues({
       "data-slot": "page-header-meta",
@@ -6160,27 +7219,27 @@ function PageHeaderMeta(_a) {
 }
 function PageHeaderActions(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx18("div", __spreadValues({ "data-slot": "page-header-actions", className: cn("flex items-center gap-2", className) }, props));
+  return /* @__PURE__ */ jsx24("div", __spreadValues({ "data-slot": "page-header-actions", className: cn("flex items-center gap-2", className) }, props));
 }
 function PageHeaderTabs(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx18("div", __spreadValues({ "data-slot": "page-header-tabs", className: cn("border-b", className) }, props));
+  return /* @__PURE__ */ jsx24("div", __spreadValues({ "data-slot": "page-header-tabs", className: cn("border-b", className) }, props));
 }
 
 // src/timeline.tsx
-import { Icon as Icon12 } from "@upbound/monarch-core";
+import { Icon as Icon15 } from "@upbound/monarch-core";
 import { Item as Item2, ItemGroup as ItemGroup2 } from "@upbound/monarch-core";
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 function Timeline(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx19(ItemGroup2, __spreadValues({ "data-slot": "timeline", className: cn(className) }, props));
+  return /* @__PURE__ */ jsx25(ItemGroup2, __spreadValues({ "data-slot": "timeline", className: cn(className) }, props));
 }
 function TimelineItem(_a) {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxs14(Item2, __spreadProps(__spreadValues({ "data-slot": "timeline-item", className: cn("group/timeline-item gap-3 py-4", className) }, props), { children: [
-    /* @__PURE__ */ jsxs14("div", { className: "relative flex flex-col items-center self-stretch", children: [
-      /* @__PURE__ */ jsx19(Icon12, { name: "circle-dot", size: "sm", className: "text-primary shrink-0" }),
-      /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs19(Item2, __spreadProps(__spreadValues({ "data-slot": "timeline-item", className: cn("group/timeline-item gap-3 py-4", className) }, props), { children: [
+    /* @__PURE__ */ jsxs19("div", { className: "relative flex flex-col items-center self-stretch", children: [
+      /* @__PURE__ */ jsx25(Icon15, { name: "circle-dot", size: "sm", className: "text-primary shrink-0" }),
+      /* @__PURE__ */ jsx25(
         "span",
         {
           "aria-hidden": "true",
@@ -6236,6 +7295,12 @@ export {
   FilterChip,
   FloatingWidget,
   FloatingWidgetProvider,
+  Graph,
+  GraphActionsProvider,
+  GraphEdge,
+  GraphNode,
+  GraphNodeSkeleton,
+  GraphView,
   PageHeader,
   PageHeaderActions,
   PageHeaderAvatar,
@@ -6281,6 +7346,9 @@ export {
   dateBoundaryForOperator,
   defaultEmptyConfig,
   defaultErrorConfig,
+  defaultGraphEmptyConfig,
+  defaultGraphErrorConfig,
+  defaultGraphNoFilterFoundConfig,
   defaultNoFilterFoundConfig,
   denormalizeColumnIdWithReservedNames,
   denormalizeColumnsWithReservedNames,
@@ -6292,6 +7360,7 @@ export {
   getColumnEmitOn,
   getDefaultOperator,
   getExpandColumnDefinition,
+  getGraphDescendants,
   getOperatorLabel,
   getQuantifierLabel,
   isCelFilterCondition,
@@ -6301,6 +7370,7 @@ export {
   isDateRangeOperator,
   isDateRelativeOperator,
   isDateWindowOperator,
+  isDefaultNode,
   isEndOfDayTimestamp,
   isEndOfMinuteTimestamp,
   isMapKeyCelValue,
@@ -6324,7 +7394,12 @@ export {
   resolveFilterShape,
   startInstantFromEndOfDay,
   startInstantFromEndOfMinute,
+  useAutoLayout,
   useFloatingWidget,
+  useGetViewportNodeIds,
+  useGraphActions,
+  useGraphActionsContext,
+  useNodeVisibility,
   validateCondition,
   withTimeOfDay
 };