@bmsuisse/datagrid 0.38.0 → 0.39.0

package/dist/index.js

@@ -184,6 +184,8 @@ var defaultFilterLabels = {
   numberBetween: "Between",
   clear: "Clear",
   loading: "Loading\u2026",
+  loadFailed: "Couldn't load values.",
+  retry: "Retry",
   dateToday: "Today",
   dateLast7Days: "Last 7 days",
   dateThisMonth: "This month",
@@ -286,7 +288,7 @@ PopoverContent.displayName = "PopoverContent";
 
 // src/components/ui/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown } from "lucide-react";
+import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
 import { forwardRef as forwardRef3 } from "react";
 import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
@@ -302,7 +304,7 @@ var SelectTrigger = forwardRef3(({ className, children, ...props }, ref) => /* @
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx4(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx4(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ jsx4(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx4(ChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
@@ -332,7 +334,7 @@ var SelectItem = forwardRef3(({ className, children, ...props }, ref) => /* @__P
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx4("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx4(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx4(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx4("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx4(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx4(CheckIcon, { className: "h-4 w-4" }) }) }),
       /* @__PURE__ */ jsx4(SelectPrimitive.ItemText, { children })
     ]
   }
@@ -425,7 +427,12 @@ import { CalendarDaysIcon } from "@heroicons/react/24/outline";
 import { endOfDay, endOfMonth, format, parseISO as parseISO2, startOfDay, startOfMonth, subDays } from "date-fns";
 
 // src/components/ui/calendar.tsx
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from "lucide-react";
+import {
+  ChevronDownIcon as ChevronDownIcon2,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon
+} from "@heroicons/react/24/outline";
 import { useEffect, useRef } from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { jsx as jsx6 } from "react/jsx-runtime";
@@ -481,7 +488,7 @@ function Calendar({ className, classNames, ...props }) {
       },
       components: {
         Chevron: ({ className: chevronClassName, orientation }) => {
-          const Icon2 = orientation === "up" ? ChevronUpIcon : orientation === "down" ? ChevronDownIcon : orientation === "right" ? ChevronRightIcon : ChevronLeftIcon;
+          const Icon2 = orientation === "up" ? ChevronUpIcon : orientation === "down" ? ChevronDownIcon2 : orientation === "right" ? ChevronRightIcon : ChevronLeftIcon;
           return /* @__PURE__ */ jsx6(Icon2, { className: cn("h-4 w-4", chevronClassName), "aria-hidden": true });
         },
         DayButton: ({ className: dayClassName, day: _day, modifiers, ...dayProps }) => {
@@ -617,7 +624,7 @@ import { useMemo as useMemo2, useState } from "react";
 
 // src/components/ui/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check as Check2, Minus } from "lucide-react";
+import { CheckIcon as CheckIcon2, MinusIcon } from "@heroicons/react/24/outline";
 import { forwardRef as forwardRef4 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var Checkbox = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
@@ -633,7 +640,7 @@ var Checkbox = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx8(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx8(Minus, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx8(Check2, { className: "h-3 w-3" }) })
+    children: /* @__PURE__ */ jsx8(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx8(MinusIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx8(CheckIcon2, { className: "h-3 w-3" }) })
   }
 ));
 Checkbox.displayName = "Checkbox";
@@ -1238,7 +1245,7 @@ function NumberRangeFilter({
 }
 
 // src/filter/NumberHistogramFilter.tsx
-import { FunnelIcon as FunnelIcon5 } from "@heroicons/react/24/outline";
+import { ExclamationTriangleIcon, FunnelIcon as FunnelIcon5 } from "@heroicons/react/24/outline";
 import { useCallback, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
 import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var BAR_HEIGHT_PX = 56;
@@ -1267,20 +1274,25 @@ function NumberHistogramFilter({
   const [minOnTop, setMinOnTop] = useState4(false);
   const [loadedValues, setLoadedValues] = useState4([]);
   const [loading, setLoading] = useState4(false);
+  const [loadError, setLoadError] = useState4(void 0);
+  const [retryKey, setRetryKey] = useState4(0);
   const { min, max } = rangeOf2(value);
   useEffect4(() => {
     if (!open || !loadValues) return;
     let cancelled = false;
     setLoading(true);
+    setLoadError(void 0);
     loadValues().then((values) => {
       if (!cancelled) setLoadedValues(values);
+    }).catch((err) => {
+      if (!cancelled) setLoadError(err instanceof Error ? err.message : String(err));
     }).finally(() => {
       if (!cancelled) setLoading(false);
     });
     return () => {
       cancelled = true;
     };
-  }, [open, loadValues]);
+  }, [open, loadValues, retryKey]);
   const sourceValues = allValues ?? loadedValues;
   const nums = useMemo3(
     () => open ? sourceValues.filter((v) => v != null) : [],
@@ -1344,6 +1356,20 @@ function NumberHistogramFilter({
   const summary = isFiltered ? `${format2(activeMin)} \u2013 ${format2(activeMax)}` : "";
   const panel = /* @__PURE__ */ jsxs7("div", { className: bare ? "flex w-full flex-col gap-3" : "flex w-80 flex-col gap-3", children: [
     loading && /* @__PURE__ */ jsx13("p", { className: "text-xs text-muted-foreground", "data-testid": `filter-${column.id}-loading`, children: labels.loading }),
+    loadError !== void 0 && !loading && /* @__PURE__ */ jsxs7(
+      "span",
+      {
+        role: "alert",
+        title: loadError,
+        className: "flex items-center gap-1.5 text-xs text-destructive",
+        "data-testid": `filter-${column.id}-error`,
+        children: [
+          /* @__PURE__ */ jsx13(ExclamationTriangleIcon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }),
+          labels.loadFailed,
+          /* @__PURE__ */ jsx13("button", { type: "button", className: "underline underline-offset-2", onClick: () => setRetryKey((k) => k + 1), children: labels.retry })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx13("div", { className: "flex items-end gap-px", style: { height: BAR_HEIGHT_PX }, "data-testid": `filter-${column.id}-histogram`, children: histBars.map((bar, i) => /* @__PURE__ */ jsx13(
       "div",
       {
@@ -2780,12 +2806,12 @@ function computeFillChanges(sourceRange, finalRange, rowIds, columnIds, columns,
 }
 
 // src/column-selector/ColumnSelector.tsx
-import { Columns3, GripVertical } from "lucide-react";
+import { Bars2Icon, ViewColumnsIcon } from "@heroicons/react/24/outline";
 import { useEffect as useEffect8, useState as useState11 } from "react";
 
 // src/components/ui/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
+import { XMarkIcon } from "@heroicons/react/24/outline";
 import { forwardRef as forwardRef7 } from "react";
 import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
@@ -2813,7 +2839,7 @@ var DialogContent = forwardRef7(({ className, children, ...props }, ref) => /* @
       children: [
         children,
         /* @__PURE__ */ jsxs17(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100", children: [
-          /* @__PURE__ */ jsx29(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx29(XMarkIcon, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx29("span", { className: "sr-only", children: "Close" })
         ] })
       ]
@@ -2982,7 +3008,7 @@ function ColumnSelector({
     if (persistKey) writePersistedColumnOrder(persistKey, next);
   }
   return /* @__PURE__ */ jsxs18(Dialog, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx30(DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx30(Button, { variant: "outline", size: "icon", "aria-label": "Choose columns", children: /* @__PURE__ */ jsx30(Columns3, { className: "h-4 w-4", "aria-hidden": true }) }) }),
+    /* @__PURE__ */ jsx30(DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx30(Button, { variant: "outline", size: "icon", "aria-label": "Choose columns", children: /* @__PURE__ */ jsx30(ViewColumnsIcon, { className: "h-4 w-4", "aria-hidden": true }) }) }),
     /* @__PURE__ */ jsxs18(DialogContent, { className: "w-fit max-w-[calc(100vw-2rem)] sm:max-w-2xl", children: [
       /* @__PURE__ */ jsx30(DialogHeader, { children: /* @__PURE__ */ jsx30(DialogTitle, { children: "Columns" }) }),
       /* @__PURE__ */ jsx30("div", { className: "flex flex-wrap gap-x-8 gap-y-5", children: groups.map(({ group, columns: groupCols }) => /* @__PURE__ */ jsxs18("div", { className: "flex min-w-32 flex-col gap-1.5", children: [
@@ -3017,9 +3043,9 @@ function ColumnSelector({
               ),
               children: [
                 canReorder && /* @__PURE__ */ jsx30(
-                  GripVertical,
+                  Bars2Icon,
                   {
-                    className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/50",
+                    className: "h-3.5 w-3.5 shrink-0 rotate-90 text-muted-foreground/50",
                     "aria-hidden": true
                   }
                 ),
@@ -3054,7 +3080,7 @@ function resolveMenuItems(items, ctx) {
 }
 
 // src/menu/ActionsMenu.tsx
-import { MoreVertical } from "lucide-react";
+import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
 import { useMemo as useMemo5 } from "react";
 
 // src/components/ui/dropdown-menu.tsx
@@ -3117,7 +3143,7 @@ function ActionsMenu({ items, ctx, triggerLabel }) {
   );
   if (resolved.length === 0) return null;
   return /* @__PURE__ */ jsxs19(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx32(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx32(Button, { variant: "ghost", size: "icon", "aria-label": triggerLabel, onClick: stopRowClick, children: /* @__PURE__ */ jsx32(MoreVertical, { className: "h-4 w-4", "aria-hidden": true }) }) }),
+    /* @__PURE__ */ jsx32(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx32(Button, { variant: "ghost", size: "icon", "aria-label": triggerLabel, onClick: stopRowClick, children: /* @__PURE__ */ jsx32(EllipsisVerticalIcon, { className: "h-4 w-4", "aria-hidden": true }) }) }),
     /* @__PURE__ */ jsx32(DropdownMenuContent, { align: "end", children: resolved.map((item) => /* @__PURE__ */ jsx32(
       DropdownMenuItem,
       {
@@ -3132,10 +3158,115 @@ function ActionsMenu({ items, ctx, triggerLabel }) {
 }
 
 // src/grid/DataGrid.tsx
-import { BarsArrowDownIcon, BarsArrowUpIcon, FunnelIcon as FunnelIcon7 } from "@heroicons/react/24/outline";
+import {
+  BarsArrowDownIcon,
+  BarsArrowUpIcon,
+  ChevronRightIcon as ChevronRightIcon2,
+  FunnelIcon as FunnelIcon7
+} from "@heroicons/react/24/outline";
 import { columnResizingFeature, columnSizingFeature, flexRender, tableFeatures, useTable } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { ChevronRight, Loader2 } from "lucide-react";
+
+// src/components/status.tsx
+import { ArrowPathIcon, ExclamationTriangleIcon as ExclamationTriangleIcon2 } from "@heroicons/react/24/outline";
+import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+function toErrorInfo(error) {
+  if (error == null || error === false || error === "") return void 0;
+  if (typeof error === "string") return { message: error };
+  if (error instanceof Error) return { message: error.message || void 0, details: error.stack };
+  if (typeof error === "object") {
+    const { title, message, details } = error;
+    if (title !== void 0 || message !== void 0 || details !== void 0) return { title, message, details };
+  }
+  try {
+    return { message: typeof error === "object" ? "Unknown error" : String(error) };
+  } catch {
+    return { message: "Unknown error" };
+  }
+}
+var defaultGridStatusLabels = {
+  loading: "Loading...",
+  noResults: "No results.",
+  errorTitle: "Couldn't load data",
+  retry: "Retry",
+  showDetails: "Show details",
+  nodeLoadFailed: "Failed to load."
+};
+function resolveStatusLabels(overrides) {
+  return overrides ? { ...defaultGridStatusLabels, ...overrides } : defaultGridStatusLabels;
+}
+function LoadingRows({ label, rows = 4 }) {
+  return /* @__PURE__ */ jsxs20("div", { role: "status", "aria-busy": "true", "data-testid": "grid-loading-rows", className: "flex flex-col gap-2 p-1", children: [
+    /* @__PURE__ */ jsx33("span", { className: "sr-only", children: label }),
+    Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx33("div", { className: "h-4 animate-pulse rounded-md bg-muted", style: { width: i === rows - 1 ? "60%" : "100%" } }, i))
+  ] });
+}
+function RefreshBar(props) {
+  return /* @__PURE__ */ jsx33(
+    "div",
+    {
+      role: "progressbar",
+      "aria-label": "Refreshing",
+      className: "pointer-events-none absolute inset-x-0 top-0 z-30 h-0.5 overflow-hidden bg-muted",
+      ...props,
+      children: /* @__PURE__ */ jsx33("div", { className: "h-full w-1/3 animate-pulse bg-primary motion-reduce:animate-none" })
+    }
+  );
+}
+function GridErrorState({
+  error,
+  onRetry,
+  labels
+}) {
+  const info = toErrorInfo(error);
+  if (!info) return null;
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      role: "alert",
+      "data-testid": "grid-error-state",
+      className: "flex min-h-24 w-full flex-col items-center justify-center gap-1 p-4 text-center text-sm",
+      children: [
+        /* @__PURE__ */ jsx33(ExclamationTriangleIcon2, { className: "h-8 w-8 text-destructive", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx33("p", { className: "font-semibold", children: info.title ?? labels.errorTitle }),
+        info.message ? /* @__PURE__ */ jsx33("p", { className: "text-muted-foreground", children: info.message }) : null,
+        info.details ? /* @__PURE__ */ jsxs20("details", { className: "w-full max-w-lg text-left text-xs", children: [
+          /* @__PURE__ */ jsx33("summary", { className: "cursor-pointer select-none underline underline-offset-2", children: labels.showDetails }),
+          /* @__PURE__ */ jsx33("pre", { className: "mt-1 max-h-40 overflow-auto whitespace-pre-wrap break-words rounded bg-muted p-2 text-muted-foreground", children: info.details })
+        ] }) : null,
+        onRetry ? /* @__PURE__ */ jsxs20(Button, { type: "button", variant: "outline", size: "sm", className: "mt-2", onClick: onRetry, children: [
+          /* @__PURE__ */ jsx33(ArrowPathIcon, { className: "h-4 w-4", "aria-hidden": "true" }),
+          labels.retry
+        ] }) : null
+      ]
+    }
+  );
+}
+function GridInlineError({
+  error,
+  onRetry,
+  labels,
+  className
+}) {
+  const info = toErrorInfo(error);
+  if (!info) return null;
+  return /* @__PURE__ */ jsxs20(
+    "span",
+    {
+      role: "alert",
+      "data-testid": "grid-inline-error",
+      title: info.details,
+      className: cn("inline-flex min-w-0 items-center gap-1.5 text-xs text-red-700 dark:text-red-300", className),
+      children: [
+        /* @__PURE__ */ jsx33(ExclamationTriangleIcon2, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx33("span", { className: "truncate", children: info.message ?? info.title ?? labels.errorTitle }),
+        onRetry ? /* @__PURE__ */ jsx33("button", { type: "button", className: "shrink-0 underline underline-offset-2", onClick: onRetry, children: labels.retry }) : null
+      ]
+    }
+  );
+}
+
+// src/grid/DataGrid.tsx
 import { Fragment as Fragment3, useEffect as useEffect12, useMemo as useMemo9, useRef as useRef13, useState as useState16 } from "react";
 
 // src/cell-editing/renderAlwaysEditCell.tsx
@@ -3143,7 +3274,7 @@ import {
   useEffect as useEffect9,
   useState as useState12
 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function AlwaysEditCell(props) {
   const { column, row, rawValue, ctx, atomicGesture } = props;
   const rowId = ctx.getRowId(row);
@@ -3156,7 +3287,7 @@ function AlwaysEditCell(props) {
     if (shouldOpenEnumNow) setEnumOpen(true);
   }, [shouldOpenEnumNow]);
   if (!isEditable(column, row)) {
-    return /* @__PURE__ */ jsx33("span", { "data-testid": `cell-${rowId}-${column.id}`, className: "block w-full", children: column.cell ? column.cell(resolvedValue, row) : defaultFormat(column, resolvedValue) });
+    return /* @__PURE__ */ jsx34("span", { "data-testid": `cell-${rowId}-${column.id}`, className: "block w-full", children: column.cell ? column.cell(resolvedValue, row) : defaultFormat(column, resolvedValue) });
   }
   const isAtomic = isAtomicEditorType(column.type);
   const error = ctx.getError(rowId, column.id);
@@ -3223,7 +3354,7 @@ function AlwaysEditCell(props) {
     handleModifierCapture(event);
     handleEnumOpenCapture(event);
   }
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "fieldset",
     {
       disabled: ctx.disabled,
@@ -3232,7 +3363,7 @@ function AlwaysEditCell(props) {
       onPointerDownCapture: handlePointerDownCapture,
       onClickCapture: handleClickCapture,
       className: "contents",
-      children: column.type === "enum" && !column.renderEditCell ? /* @__PURE__ */ jsx33(
+      children: column.type === "enum" && !column.renderEditCell ? /* @__PURE__ */ jsx34(
         EnumEditor,
         {
           column,
@@ -3472,7 +3603,7 @@ function useGridState(dataSource, initialState, externalState, showPagination =
 }
 
 // src/grid/DataGrid.tsx
-import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
 var gridTableFeatures = tableFeatures({ columnSizingFeature, columnResizingFeature });
 var DEFAULT_COLUMN_SIZE = 150;
 var MIN_COLUMN_SIZE = 40;
@@ -3523,7 +3654,7 @@ function toTanstackColumns(columns, editingCtxRef, cellEditingCtxRef, atomicGest
     cell: (info) => {
       const cellEditingCtx = cellEditingCtxRef.current;
       if (!cellEditingCtx) return renderEditableCell(column, info.row.original, info.getValue(), editingCtxRef.current);
-      return cellEditingCtx.alwaysEdit ? /* @__PURE__ */ jsx34(
+      return cellEditingCtx.alwaysEdit ? /* @__PURE__ */ jsx35(
         AlwaysEditCell,
         {
           column,
@@ -3560,6 +3691,9 @@ function DataGrid({
   onSelectedIdsChange,
   testId,
   loading: loadingProp = false,
+  error,
+  onRetry,
+  statusLabels,
   groupBy,
   renderGroupHeader,
   defaultGroupsExpanded = true,
@@ -3666,6 +3800,8 @@ function DataGrid({
     return table.getRowModel().rowsById[rowId]?.original;
   }
   const pageCount = Math.max(1, Math.ceil(rowCount / state.pageSize));
+  const labels = resolveStatusLabels(statusLabels);
+  const hasError = toErrorInfo(error) !== void 0;
   const loading = loadingProp || (dataSource.mode === "server" ? Boolean(dataSource.loading) : false);
   const showSelectionColumn = Boolean(headerActions?.length) || controlledSelectedIds !== void 0;
   const showRowActionsColumn = Boolean(rowActions?.length);
@@ -4073,20 +4209,20 @@ function DataGrid({
     const rowProps = getRowProps?.(row.original);
     const rowTestId = getRowTestId?.(row.original) ?? `row-${row.id}`;
     const isOddRow = zebra && row.index % 2 === 1;
-    return /* @__PURE__ */ jsxs20("tbody", { ref: measureRef, "data-index": dataIndex, children: [
-      /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs21("tbody", { ref: measureRef, "data-index": dataIndex, children: [
+      /* @__PURE__ */ jsxs21(
         "tr",
         {
           ...rowProps,
           "data-testid": rowTestId,
           className: rowProps?.className ? cn("divide-x divide-border", rowProps.className, isOddRow && "bg-foreground/5") : `divide-x divide-border${isOddRow ? " bg-foreground/5" : ""}`,
           children: [
-            showDetailColumn && /* @__PURE__ */ jsx34(
+            showDetailColumn && /* @__PURE__ */ jsx35(
               "td",
               {
                 className: isOddRow ? detailCellProps.classNameOdd : detailCellProps.className,
                 style: detailCellProps.style,
-                children: /* @__PURE__ */ jsx34(
+                children: /* @__PURE__ */ jsx35(
                   Button,
                   {
                     type: "button",
@@ -4098,8 +4234,8 @@ function DataGrid({
                       stopRowClick(event);
                       toggleRowExpanded(row.id);
                     },
-                    children: /* @__PURE__ */ jsx34(
-                      ChevronRight,
+                    children: /* @__PURE__ */ jsx35(
+                      ChevronRightIcon2,
                       {
                         className: `h-4 w-4 transition-transform${isExpanded ? " rotate-90" : ""}`,
                         "aria-hidden": true
@@ -4109,12 +4245,12 @@ function DataGrid({
                 )
               }
             ),
-            showSelectionColumn && /* @__PURE__ */ jsx34(
+            showSelectionColumn && /* @__PURE__ */ jsx35(
               "td",
               {
                 className: isOddRow ? selectionCellProps.classNameOdd : selectionCellProps.className,
                 style: selectionCellProps.style,
-                children: /* @__PURE__ */ jsx34(
+                children: /* @__PURE__ */ jsx35(
                   "input",
                   {
                     type: "checkbox",
@@ -4128,7 +4264,7 @@ function DataGrid({
             ),
             row.getAllCells().map((cell) => {
               const cellProps = bodyCellPropsByColumn.get(cell.column.id);
-              return /* @__PURE__ */ jsx34(
+              return /* @__PURE__ */ jsx35(
                 "td",
                 {
                   style: cellProps?.style,
@@ -4140,24 +4276,24 @@ function DataGrid({
                 cell.id
               );
             }),
-            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx34(
+            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx35(
               "td",
               {
                 className: isOddRow ? rowActionsCellProps.classNameOdd : rowActionsCellProps.className,
                 style: rowActionsCellProps.style,
-                children: /* @__PURE__ */ jsx34(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` })
+                children: /* @__PURE__ */ jsx35(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` })
               }
             )
           ]
         }
       ),
-      showDetailColumn && isExpanded && renderDetail && /* @__PURE__ */ jsx34("tr", { "data-testid": `${rowTestId}-detail`, children: /* @__PURE__ */ jsx34("td", { colSpan: totalColumnCount, className: "border-b border-border p-2", children: renderDetail(row.original) }) })
+      showDetailColumn && isExpanded && renderDetail && /* @__PURE__ */ jsx35("tr", { "data-testid": `${rowTestId}-detail`, children: /* @__PURE__ */ jsx35("td", { colSpan: totalColumnCount, className: "border-b border-border p-2", children: renderDetail(row.original) }) })
     ] }, row.id);
   }
   function renderGroupSummaryCells(rows2, bgClassName) {
     return visibleColumns.map((column) => {
       const cellProps = bodyCellPropsByColumn.get(column.id);
-      return /* @__PURE__ */ jsx34(
+      return /* @__PURE__ */ jsx35(
         "td",
         {
           className: cn(cellProps?.className, bgClassName, "font-medium", alignClassName(column)),
@@ -4175,10 +4311,10 @@ function DataGrid({
     const leadingSpan = summaryLeadingCellSpan();
     const bgClassName = zebra ? "bg-muted" : "bg-background";
     const fillerClass = cn("border-b border-border p-2", bgClassName);
-    return /* @__PURE__ */ jsxs20("tr", { "data-testid": "group-summary-row", className: "divide-x divide-border", children: [
-      leadingSpan > 0 && /* @__PURE__ */ jsx34("td", { colSpan: leadingSpan, className: fillerClass }),
+    return /* @__PURE__ */ jsxs21("tr", { "data-testid": "group-summary-row", className: "divide-x divide-border", children: [
+      leadingSpan > 0 && /* @__PURE__ */ jsx35("td", { colSpan: leadingSpan, className: fillerClass }),
       renderGroupSummaryCells(rows2, bgClassName),
-      showRowActionsColumn && /* @__PURE__ */ jsx34("td", { className: fillerClass, "aria-hidden": true })
+      showRowActionsColumn && /* @__PURE__ */ jsx35("td", { className: fillerClass, "aria-hidden": true })
     ] });
   }
   function renderTotalsFooter() {
@@ -4186,11 +4322,11 @@ function DataGrid({
     const summaryRows = tableRows.map((row) => row.original);
     const leadingSpan = summaryLeadingCellSpan();
     const fillerClass = "sticky bottom-0 z-20 border-t border-border bg-muted p-2";
-    return /* @__PURE__ */ jsx34("tfoot", { children: /* @__PURE__ */ jsxs20("tr", { "data-testid": "totals-row", className: "divide-x divide-border", children: [
-      leadingSpan > 0 && /* @__PURE__ */ jsx34("td", { colSpan: leadingSpan, className: fillerClass }),
+    return /* @__PURE__ */ jsx35("tfoot", { children: /* @__PURE__ */ jsxs21("tr", { "data-testid": "totals-row", className: "divide-x divide-border", children: [
+      leadingSpan > 0 && /* @__PURE__ */ jsx35("td", { colSpan: leadingSpan, className: fillerClass }),
       visibleColumns.map((column) => {
         const pinnedProps = pinnedCellProps(column, "header");
-        return /* @__PURE__ */ jsx34(
+        return /* @__PURE__ */ jsx35(
           "td",
           {
             className: cn(
@@ -4205,19 +4341,19 @@ function DataGrid({
           column.id
         );
       }),
-      showRowActionsColumn && /* @__PURE__ */ jsx34("td", { className: fillerClass, "aria-hidden": true })
+      showRowActionsColumn && /* @__PURE__ */ jsx35("td", { className: fillerClass, "aria-hidden": true })
     ] }) });
   }
   function renderGroupHeaderTbody(key, rows2, measureRef, dataIndex) {
     const expanded = isGroupExpanded(key);
-    return /* @__PURE__ */ jsxs20("tbody", { ref: measureRef, "data-index": dataIndex, children: [
-      /* @__PURE__ */ jsx34("tr", { "data-testid": `group-header-${key}`, children: /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsxs21("tbody", { ref: measureRef, "data-index": dataIndex, children: [
+      /* @__PURE__ */ jsx35("tr", { "data-testid": `group-header-${key}`, children: /* @__PURE__ */ jsx35(
         "td",
         {
           colSpan: totalColumnCount,
           className: cn("sticky z-20 border-b p-2 font-medium", zebra ? "bg-muted" : "bg-background"),
           style: { top: groupHeaderTop },
-          children: /* @__PURE__ */ jsxs20(
+          children: /* @__PURE__ */ jsxs21(
             "button",
             {
               type: "button",
@@ -4225,8 +4361,8 @@ function DataGrid({
               onClick: () => toggleGroupExpanded(key),
               "aria-expanded": expanded,
               children: [
-                /* @__PURE__ */ jsx34(
-                  ChevronRight,
+                /* @__PURE__ */ jsx35(
+                  ChevronRightIcon2,
                   {
                     className: `h-4 w-4 shrink-0 transition-transform${expanded ? " rotate-90" : ""}`,
                     "aria-hidden": true
@@ -4244,7 +4380,7 @@ function DataGrid({
   function renderGroupedBucket(bucket) {
     const expanded = isGroupExpanded(bucket.key);
     const originalRows = bucket.items.map((row) => row.original);
-    return /* @__PURE__ */ jsxs20(Fragment3, { children: [
+    return /* @__PURE__ */ jsxs21(Fragment3, { children: [
       renderGroupHeaderTbody(bucket.key, originalRows),
       expanded && bucket.items.map((row) => renderRow(row))
     ] }, `group-${bucket.key}`);
@@ -4266,8 +4402,8 @@ function DataGrid({
     // containers (that one scrolling vertically, this component's own
     // `overflow-x-auto` div scrolling horizontally) fighting over which one
     // a sticky header/pinned column is actually stuck relative to.
-    /* @__PURE__ */ jsxs20("div", { className: "flex h-full min-h-0 flex-col gap-2", "data-testid": "datagrid", children: [
-      editing && pendingEdits.size > 0 && /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsxs21("div", { className: "flex h-full min-h-0 flex-col gap-2", "data-testid": "datagrid", children: [
+      editing && pendingEdits.size > 0 && /* @__PURE__ */ jsx35(
         EditingBar,
         {
           editing,
@@ -4277,28 +4413,25 @@ function DataGrid({
           onDiscard: handleDiscardEdits
         }
       ),
-      showSelectionColumn && headerActions && /* @__PURE__ */ jsxs20("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
-        /* @__PURE__ */ jsxs20("span", { children: [
+      showSelectionColumn && headerActions && /* @__PURE__ */ jsxs21("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
+        /* @__PURE__ */ jsxs21("span", { children: [
           selectedRows.length,
           " selected"
         ] }),
-        /* @__PURE__ */ jsx34(ActionsMenu, { items: headerActions, ctx: { selectedRows }, triggerLabel: "Bulk actions" })
+        /* @__PURE__ */ jsx35(ActionsMenu, { items: headerActions, ctx: { selectedRows }, triggerLabel: "Bulk actions" })
       ] }),
-      /* @__PURE__ */ jsxs20("div", { className: "relative min-h-0 flex-1", children: [
-        loading && /* @__PURE__ */ jsx34(
-          "div",
-          {
-            "data-testid": "datagrid-loading-overlay",
-            className: "absolute inset-0 z-30 flex items-center justify-center bg-background/60",
-            children: /* @__PURE__ */ jsx34(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground", "aria-hidden": true })
-          }
-        ),
-        /* @__PURE__ */ jsxs20(
+      hasError && rows.length > 0 && /* @__PURE__ */ jsx35("div", { className: "flex shrink-0 items-center rounded-md border border-destructive/40 bg-destructive/10 px-2 py-1", children: /* @__PURE__ */ jsx35(GridInlineError, { error, onRetry, labels }) }),
+      /* @__PURE__ */ jsxs21("div", { className: "relative min-h-0 flex-1", children: [
+        loading && rows.length > 0 && /* @__PURE__ */ jsx35(RefreshBar, { "data-testid": "datagrid-loading-overlay" }),
+        /* @__PURE__ */ jsxs21(
           "div",
           {
             ref: scrollRef,
             "data-testid": testId,
-            className: cn("h-full overflow-auto rounded-md border", hasCellEditing && "relative"),
+            className: cn(
+              "h-full overflow-auto rounded-md border",
+              hasCellEditing && "relative"
+            ),
             style: shouldVirtualize ? { maxHeight: virtualize?.maxBodyHeight ?? 480 } : void 0,
             tabIndex: hasCellEditing ? 0 : void 0,
             onMouseDown: hasCellEditing ? handleCellMouseDown : void 0,
@@ -4307,8 +4440,8 @@ function DataGrid({
             onCopy: hasCellEditing ? handleCopy : void 0,
             onPaste: hasCellEditing ? handlePaste : void 0,
             children: [
-              /* @__PURE__ */ jsxs20("table", { className: cn("w-full border-collapse text-sm", enableColumnResizing && "table-fixed"), children: [
-                /* @__PURE__ */ jsxs20("thead", { ref: theadRef, className: "bg-muted", children: [
+              /* @__PURE__ */ jsxs21("table", { className: cn("w-full border-collapse text-sm", enableColumnResizing && "table-fixed"), children: [
+                /* @__PURE__ */ jsxs21("thead", { ref: theadRef, className: "bg-muted", children: [
                   table.getHeaderGroups().map((headerGroup) => {
                     const headerById = new Map(headerGroup.headers.map((header) => [header.id, header]));
                     function renderLeafHeaderCell(column, rowSpan) {
@@ -4320,7 +4453,7 @@ function DataGrid({
                       const cellProps = leafHeaderCellPropsByColumn.get(column.id);
                       const headerContent = column.renderHeader ? column.renderHeader(column) : column.header;
                       const headerLabelId = `${header.id}-label`;
-                      return /* @__PURE__ */ jsxs20(
+                      return /* @__PURE__ */ jsxs21(
                         "th",
                         {
                           rowSpan,
@@ -4329,8 +4462,8 @@ function DataGrid({
                           "aria-sort": sortable ? sortDirToAriaSort(sortEntry?.dir) : void 0,
                           "aria-labelledby": headerLabelId,
                           children: [
-                            /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
-                              sortable ? /* @__PURE__ */ jsxs20(
+                            /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1", children: [
+                              sortable ? /* @__PURE__ */ jsxs21(
                                 "button",
                                 {
                                   type: "button",
@@ -4340,8 +4473,8 @@ function DataGrid({
                                   onClick: (event) => toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
                                   children: [
                                     headerContent,
-                                    sortEntry?.dir === "asc" && /* @__PURE__ */ jsx34(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
-                                    sortEntry?.dir === "desc" && /* @__PURE__ */ jsx34(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
+                                    sortEntry?.dir === "asc" && /* @__PURE__ */ jsx35(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
+                                    sortEntry?.dir === "desc" && /* @__PURE__ */ jsx35(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
                                   ]
                                 }
                               ) : (
@@ -4350,17 +4483,17 @@ function DataGrid({
                                 // silently breaking any interactive content a column's own `renderHeader`
                                 // embeds directly (bare filter inputs, "select/reject all" buttons) —
                                 // clicks never reach them at all, even though nothing looks wrong visually.
-                                /* @__PURE__ */ jsx34("div", { id: headerLabelId, className: "flex items-center gap-1 px-1", children: headerContent })
+                                /* @__PURE__ */ jsx35("div", { id: headerLabelId, className: "flex items-center gap-1 px-1", children: headerContent })
                               ),
-                              filterable && /* @__PURE__ */ jsxs20(Popover, { children: [
-                                /* @__PURE__ */ jsx34(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(
+                              filterable && /* @__PURE__ */ jsxs21(Popover, { children: [
+                                /* @__PURE__ */ jsx35(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx35(
                                   Button,
                                   {
                                     variant: "ghost",
                                     size: "icon",
                                     "data-testid": `filter-trigger-${column.id}`,
                                     "aria-label": resolvedFilterLabels.filterAriaLabel(column.header),
-                                    children: /* @__PURE__ */ jsx34(
+                                    children: /* @__PURE__ */ jsx35(
                                       FunnelIcon7,
                                       {
                                         className: cn(
@@ -4372,10 +4505,10 @@ function DataGrid({
                                     )
                                   }
                                 ) }),
-                                /* @__PURE__ */ jsx34(PopoverContent, { className: "w-auto max-w-[var(--radix-popover-content-available-width)]", children: renderFilterWidget(column) })
+                                /* @__PURE__ */ jsx35(PopoverContent, { className: "w-auto max-w-[var(--radix-popover-content-available-width)]", children: renderFilterWidget(column) })
                               ] })
                             ] }),
-                            enableColumnResizing && /* @__PURE__ */ jsx34(
+                            enableColumnResizing && /* @__PURE__ */ jsx35(
                               "div",
                               {
                                 "data-testid": `resize-handle-${column.id}`,
@@ -4400,9 +4533,9 @@ function DataGrid({
                         header.id
                       );
                     }
-                    return /* @__PURE__ */ jsxs20(Fragment3, { children: [
-                      hasHeaderGroups && /* @__PURE__ */ jsxs20("tr", { "data-testid": "header-group-row", className: "divide-x divide-border", children: [
-                        showDetailColumn && /* @__PURE__ */ jsx34(
+                    return /* @__PURE__ */ jsxs21(Fragment3, { children: [
+                      hasHeaderGroups && /* @__PURE__ */ jsxs21("tr", { "data-testid": "header-group-row", className: "divide-x divide-border", children: [
+                        showDetailColumn && /* @__PURE__ */ jsx35(
                           "th",
                           {
                             rowSpan: 2,
@@ -4411,13 +4544,13 @@ function DataGrid({
                             "aria-hidden": true
                           }
                         ),
-                        showSelectionColumn && /* @__PURE__ */ jsx34(
+                        showSelectionColumn && /* @__PURE__ */ jsx35(
                           "th",
                           {
                             rowSpan: 2,
                             className: selectionHeaderCellProps.className,
                             style: selectionHeaderCellProps.style,
-                            children: /* @__PURE__ */ jsx34(
+                            children: /* @__PURE__ */ jsx35(
                               "input",
                               {
                                 type: "checkbox",
@@ -4429,7 +4562,7 @@ function DataGrid({
                           }
                         ),
                         headerRuns.map(
-                          (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx34(
+                          (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx35(
                             "th",
                             {
                               colSpan: run.columns.length,
@@ -4439,7 +4572,7 @@ function DataGrid({
                             `group-${run.label}-${run.columns[0].id}`
                           )
                         ),
-                        showRowActionsColumn && /* @__PURE__ */ jsx34(
+                        showRowActionsColumn && /* @__PURE__ */ jsx35(
                           "th",
                           {
                             rowSpan: 2,
@@ -4449,8 +4582,8 @@ function DataGrid({
                           }
                         )
                       ] }, `${headerGroup.id}-groups`),
-                      /* @__PURE__ */ jsxs20("tr", { className: "divide-x divide-border", children: [
-                        !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx34(
+                      /* @__PURE__ */ jsxs21("tr", { className: "divide-x divide-border", children: [
+                        !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx35(
                           "th",
                           {
                             className: detailHeaderCellProps.className,
@@ -4458,12 +4591,12 @@ function DataGrid({
                             "aria-hidden": true
                           }
                         ),
-                        !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx34(
+                        !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx35(
                           "th",
                           {
                             className: selectionHeaderCellProps.className,
                             style: selectionHeaderCellProps.style,
-                            children: /* @__PURE__ */ jsx34(
+                            children: /* @__PURE__ */ jsx35(
                               "input",
                               {
                                 type: "checkbox",
@@ -4479,7 +4612,7 @@ function DataGrid({
                           if (!column || hasHeaderGroups && !column.headerGroup) return null;
                           return renderLeafHeaderCell(column);
                         }),
-                        !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx34(
+                        !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx35(
                           "th",
                           {
                             className: rowActionsHeaderCellProps.className,
@@ -4490,9 +4623,9 @@ function DataGrid({
                       ] }, headerGroup.id)
                     ] }, headerGroup.id);
                   }),
-                  hasFilterRow && /* @__PURE__ */ jsxs20("tr", { "data-testid": "filter-row", className: "divide-x divide-border", children: [
-                    showDetailColumn && /* @__PURE__ */ jsx34("th", { className: detailHeaderCellProps.className, style: detailHeaderCellProps.style }),
-                    showSelectionColumn && /* @__PURE__ */ jsx34(
+                  hasFilterRow && /* @__PURE__ */ jsxs21("tr", { "data-testid": "filter-row", className: "divide-x divide-border", children: [
+                    showDetailColumn && /* @__PURE__ */ jsx35("th", { className: detailHeaderCellProps.className, style: detailHeaderCellProps.style }),
+                    showSelectionColumn && /* @__PURE__ */ jsx35(
                       "th",
                       {
                         className: selectionHeaderCellProps.className,
@@ -4501,9 +4634,9 @@ function DataGrid({
                     ),
                     visibleColumns.map((column) => {
                       const cellProps = filterHeaderCellPropsByColumn.get(column.id);
-                      return /* @__PURE__ */ jsx34("th", { style: cellProps?.style, className: cellProps?.className, children: isFilterable(column) && column.filterDisplay === "row" ? renderFilterWidget(column) : null }, column.id);
+                      return /* @__PURE__ */ jsx35("th", { style: cellProps?.style, className: cellProps?.className, children: isFilterable(column) && column.filterDisplay === "row" ? renderFilterWidget(column) : null }, column.id);
                     }),
-                    showRowActionsColumn && /* @__PURE__ */ jsx34(
+                    showRowActionsColumn && /* @__PURE__ */ jsx35(
                       "th",
                       {
                         className: rowActionsHeaderCellProps.className,
@@ -4512,8 +4645,8 @@ function DataGrid({
                     )
                   ] })
                 ] }),
-                rows.length === 0 ? /* @__PURE__ */ jsx34("tbody", { children: /* @__PURE__ */ jsx34("tr", { children: /* @__PURE__ */ jsx34("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs20(Fragment4, { children: [
-                  paddingTop > 0 && /* @__PURE__ */ jsx34("tbody", { children: /* @__PURE__ */ jsx34("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx34("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }) }),
+                rows.length === 0 ? /* @__PURE__ */ jsx35("tbody", { children: /* @__PURE__ */ jsx35("tr", { children: /* @__PURE__ */ jsx35("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? /* @__PURE__ */ jsx35(LoadingRows, { label: labels.loading }) : hasError ? /* @__PURE__ */ jsx35(GridErrorState, { error, onRetry, labels }) : labels.noResults }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs21(Fragment4, { children: [
+                  paddingTop > 0 && /* @__PURE__ */ jsx35("tbody", { children: /* @__PURE__ */ jsx35("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx35("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }) }),
                   virtualItems.map(
                     (virtualItem) => renderFlatItem(
                       flatItems[virtualItem.index],
@@ -4521,11 +4654,11 @@ function DataGrid({
                       (el) => virtualizer.measureElement(el)
                     )
                   ),
-                  paddingBottom > 0 && /* @__PURE__ */ jsx34("tbody", { children: /* @__PURE__ */ jsx34("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx34("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingBottom } }) }) })
+                  paddingBottom > 0 && /* @__PURE__ */ jsx35("tbody", { children: /* @__PURE__ */ jsx35("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx35("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingBottom } }) }) })
                 ] }) : groupedBuckets ? groupedBuckets.map((bucket) => renderGroupedBucket(bucket)) : tableRows.map((row) => renderRow(row)),
                 renderTotalsFooter()
               ] }),
-              hasCellEditing && /* @__PURE__ */ jsx34(
+              hasCellEditing && /* @__PURE__ */ jsx35(
                 SelectionOverlay,
                 {
                   containerRef: scrollRef,
@@ -4538,8 +4671,8 @@ function DataGrid({
           }
         )
       ] }),
-      showPagination && /* @__PURE__ */ jsxs20("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
-        /* @__PURE__ */ jsxs20("span", { children: [
+      showPagination && /* @__PURE__ */ jsxs21("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
+        /* @__PURE__ */ jsxs21("span", { children: [
           "Page ",
           state.page + 1,
           " of ",
@@ -4550,8 +4683,8 @@ function DataGrid({
           rowCount === 1 ? "" : "s",
           ")"
         ] }),
-        /* @__PURE__ */ jsxs20("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsxs21("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx35(
             Button,
             {
               variant: "outline",
@@ -4561,7 +4694,7 @@ function DataGrid({
               children: "Previous"
             }
           ),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             Button,
             {
               variant: "outline",
@@ -4575,12 +4708,16 @@ function DataGrid({
       ] })
     ] })
   );
-  return /* @__PURE__ */ jsx34(FilterLabelsProvider, { labels: filterLabels, children: grid });
+  return /* @__PURE__ */ jsx35(FilterLabelsProvider, { labels: filterLabels, children: grid });
 }
 
 // src/tree/TreeDataGrid.tsx
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
-import { AlertCircle, ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, Loader2 as Loader22 } from "lucide-react";
+import {
+  ArrowPathIcon as ArrowPathIcon2,
+  ChevronDownIcon as ChevronDownIcon3,
+  ChevronRightIcon as ChevronRightIcon3
+} from "@heroicons/react/24/outline";
 import { Fragment as Fragment5, useEffect as useEffect13, useMemo as useMemo11, useRef as useRef14 } from "react";
 
 // src/tree/flattenTree.ts
@@ -4743,7 +4880,7 @@ function useTreeState({
 }
 
 // src/tree/TreeDataGrid.tsx
-import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
 var EMPTY_SELECTED_IDS = /* @__PURE__ */ new Set();
 var UNCHECKED_STATE = { checked: false, indeterminate: false };
 function renderCell(column, row, editingCtx) {
@@ -4755,12 +4892,13 @@ function TreeCell({
   indentSize,
   isLoading,
   error,
+  labels,
   onToggle,
   onRetry,
   editingCtx
 }) {
-  return /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1", style: { paddingLeft: flatRow.depth * indentSize }, children: [
-    flatRow.hasChildren ? /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1", style: { paddingLeft: flatRow.depth * indentSize }, children: [
+    flatRow.hasChildren ? /* @__PURE__ */ jsx36(
       "button",
       {
         type: "button",
@@ -4772,21 +4910,28 @@ function TreeCell({
         "aria-label": flatRow.isExpanded ? "Collapse" : "Expand",
         "aria-expanded": flatRow.isExpanded,
         className: "flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground disabled:opacity-50",
-        children: isLoading ? /* @__PURE__ */ jsx35(Loader22, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": "true" }) : flatRow.isExpanded ? /* @__PURE__ */ jsx35(ChevronDown2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx35(ChevronRight2, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+        children: isLoading ? /* @__PURE__ */ jsx36(ArrowPathIcon2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": "true" }) : flatRow.isExpanded ? /* @__PURE__ */ jsx36(ChevronDownIcon3, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx36(ChevronRightIcon3, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
       }
-    ) : /* @__PURE__ */ jsx35("span", { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx35("span", { className: "min-w-0 flex-1 truncate", children: renderCell(column, flatRow.row, editingCtx) }),
-    flatRow.isExpanded && error ? /* @__PURE__ */ jsxs21("span", { className: "ml-1 flex shrink-0 items-center gap-1 text-xs text-destructive", children: [
-      /* @__PURE__ */ jsx35(AlertCircle, { className: "h-3 w-3", "aria-hidden": "true" }),
-      "Failed to load.",
-      /* @__PURE__ */ jsx35("button", { type: "button", className: "underline underline-offset-2", onClick: onRetry, children: "Retry" })
-    ] }) : null
+    ) : /* @__PURE__ */ jsx36("span", { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx36("span", { className: "min-w-0 flex-1 truncate", children: renderCell(column, flatRow.row, editingCtx) }),
+    flatRow.isExpanded && error ? /* @__PURE__ */ jsx36(
+      GridInlineError,
+      {
+        error: { message: labels.nodeLoadFailed, details: error },
+        onRetry,
+        labels,
+        className: "ml-1 shrink-0"
+      }
+    ) : null
   ] });
 }
 function TreeDataGrid({
   columns,
   data,
   loading = false,
+  error,
+  onRetry,
+  statusLabels,
   treeColumnId,
   columnVisibility,
   getRowId,
@@ -4819,6 +4964,8 @@ function TreeDataGrid({
   showTotals = false,
   editing
 }) {
+  const labels = resolveStatusLabels(statusLabels);
+  const hasError = toErrorInfo(error) !== void 0;
   const accessors = useMemo11(
     () => ({ getRowId, getChildren, hasChildren }),
     [getRowId, getChildren, hasChildren]
@@ -4913,7 +5060,7 @@ function TreeDataGrid({
   }, [visibleColumns]);
   const hasColumnSummary = visibleColumns.some((column) => column.summary);
   function renderGroupSummaryCells(rows) {
-    return visibleColumns.map((column) => /* @__PURE__ */ jsx35("td", { className: cn(bodyTdClassByColumn.get(column.id), "font-medium"), children: column.summary?.(rows) }, column.id));
+    return visibleColumns.map((column) => /* @__PURE__ */ jsx36("td", { className: cn(bodyTdClassByColumn.get(column.id), "font-medium"), children: column.summary?.(rows) }, column.id));
   }
   const scrollRef = useRef14(null);
   const shouldVirtualize = !groupBy && flatRows.length > virtualizeThreshold;
@@ -4928,7 +5075,7 @@ function TreeDataGrid({
     const rowProps = getRowProps?.(flatRow.row, flatRow.depth, index);
     const rowTestId = getRowTestId?.(flatRow.row) ?? `tree-row-${flatRow.id}`;
     const isOddRow = zebra && index % 2 === 1;
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs22(
       "tr",
       {
         ref: measureRef,
@@ -4941,9 +5088,9 @@ function TreeDataGrid({
           isOddRow && "bg-foreground/5"
         ) : `border-b border-border divide-x divide-border${isOddRow ? " bg-foreground/5" : ""}`,
         children: [
-          showSelectionColumn && /* @__PURE__ */ jsx35("td", { className: "p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: (() => {
+          showSelectionColumn && /* @__PURE__ */ jsx36("td", { className: "p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: (() => {
             const state = resolveSelectionState(flatRow.row, flatRow.id);
-            return /* @__PURE__ */ jsx35(
+            return /* @__PURE__ */ jsx36(
               Checkbox,
               {
                 "aria-label": `Select row ${flatRow.id}`,
@@ -4954,7 +5101,7 @@ function TreeDataGrid({
               }
             );
           })() }),
-          visibleColumns.map((column) => /* @__PURE__ */ jsx35("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx35(
+          visibleColumns.map((column) => /* @__PURE__ */ jsx36("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx36(
             TreeCell,
             {
               flatRow,
@@ -4962,12 +5109,13 @@ function TreeDataGrid({
               indentSize,
               isLoading: loadingIds.has(flatRow.id),
               error: errorIds.get(flatRow.id),
+              labels,
               onToggle: () => toggleExpand(flatRow.row),
               onRetry: () => retry(flatRow.row),
               editingCtx: editingState.ctx
             }
           ) : renderCell(column, flatRow.row, editingState.ctx) }, column.id)),
-          showRowActionsColumn && rowActions && /* @__PURE__ */ jsx35("td", { className: "p-2", children: /* @__PURE__ */ jsx35(
+          showRowActionsColumn && rowActions && /* @__PURE__ */ jsx36("td", { className: "p-2", children: /* @__PURE__ */ jsx36(
             ActionsMenu,
             {
               items: rowActions,
@@ -4983,8 +5131,9 @@ function TreeDataGrid({
   const virtualItems = shouldVirtualize ? virtualizer.getVirtualItems() : [];
   const paddingTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
   const paddingBottom = virtualItems.length > 0 ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end : 0;
-  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-2", "data-testid": "tree-datagrid", children: [
-    editing && editingState.pendingEdits.size > 0 && /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-2", "data-testid": "tree-datagrid", children: [
+    hasError && data.length > 0 && /* @__PURE__ */ jsx36("div", { className: "flex shrink-0 items-center rounded-md border border-destructive/40 bg-destructive/10 px-2 py-1", children: /* @__PURE__ */ jsx36(GridInlineError, { error, onRetry, labels }) }),
+    editing && editingState.pendingEdits.size > 0 && /* @__PURE__ */ jsx36(
       EditingBar,
       {
         editing,
@@ -4995,21 +5144,21 @@ function TreeDataGrid({
         testIdPrefix: "tree-datagrid"
       }
     ),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       "div",
       {
         ref: scrollRef,
         "data-testid": testId,
         className: "overflow-y-auto",
         style: { maxHeight: maxBodyHeight },
-        children: /* @__PURE__ */ jsxs21("table", { className: "w-full border-collapse text-sm", children: [
-          /* @__PURE__ */ jsx35("thead", { ref: theadRef, children: /* @__PURE__ */ jsxs21("tr", { className: "divide-x divide-border", children: [
-            showSelectionColumn && /* @__PURE__ */ jsx35(
+        children: /* @__PURE__ */ jsxs22("table", { className: "w-full border-collapse text-sm", children: [
+          /* @__PURE__ */ jsx36("thead", { ref: theadRef, children: /* @__PURE__ */ jsxs22("tr", { className: "divide-x divide-border", children: [
+            showSelectionColumn && /* @__PURE__ */ jsx36(
               "th",
               {
                 className: "sticky top-0 z-20 border-b border-border bg-muted p-1",
                 style: { width: SELECTION_COLUMN_WIDTH },
-                children: /* @__PURE__ */ jsx35(
+                children: /* @__PURE__ */ jsx36(
                   Checkbox,
                   {
                     "aria-label": "Select all visible rows",
@@ -5019,7 +5168,7 @@ function TreeDataGrid({
                 )
               }
             ),
-            visibleColumns.map((column) => /* @__PURE__ */ jsx35(
+            visibleColumns.map((column) => /* @__PURE__ */ jsx36(
               "th",
               {
                 style: column.width ? { width: column.width } : void 0,
@@ -5031,15 +5180,12 @@ function TreeDataGrid({
               },
               column.id
             )),
-            showRowActionsColumn && /* @__PURE__ */ jsx35("th", { className: "sticky top-0 z-20 border-b border-border bg-muted p-2", "aria-label": "Row actions" })
+            showRowActionsColumn && /* @__PURE__ */ jsx36("th", { className: "sticky top-0 z-20 border-b border-border bg-muted p-2", "aria-label": "Row actions" })
           ] }) }),
-          /* @__PURE__ */ jsx35("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx35("tr", { children: /* @__PURE__ */ jsx35("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? /* @__PURE__ */ jsxs21("span", { className: "inline-flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx35(Loader22, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }),
-            "Loading..."
-          ] }) : "No results." }) }) : groupedBuckets ? groupedBuckets.map((bucket) => {
+          /* @__PURE__ */ jsx36("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? /* @__PURE__ */ jsx36(LoadingRows, { label: labels.loading }) : hasError ? /* @__PURE__ */ jsx36(GridErrorState, { error, onRetry, labels }) : labels.noResults }) }) : groupedBuckets ? groupedBuckets.map((bucket) => {
             const groupExpanded = isGroupExpanded(bucket.key);
-            return /* @__PURE__ */ jsxs21(Fragment5, { children: [
-              /* @__PURE__ */ jsx35("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx35(
+            return /* @__PURE__ */ jsxs22(Fragment5, { children: [
+              /* @__PURE__ */ jsx36("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx36(
                 "td",
                 {
                   colSpan: totalColumnCount,
@@ -5048,7 +5194,7 @@ function TreeDataGrid({
                     zebra ? "bg-muted" : "bg-background"
                   ),
                   style: { top: groupHeaderTop },
-                  children: /* @__PURE__ */ jsxs21(
+                  children: /* @__PURE__ */ jsxs22(
                     "button",
                     {
                       type: "button",
@@ -5056,8 +5202,8 @@ function TreeDataGrid({
                       onClick: () => toggleGroupExpanded(bucket.key),
                       "aria-expanded": groupExpanded,
                       children: [
-                        /* @__PURE__ */ jsx35(
-                          ChevronRight2,
+                        /* @__PURE__ */ jsx36(
+                          ChevronRightIcon3,
                           {
                             className: `h-4 w-4 shrink-0 transition-transform${groupExpanded ? " rotate-90" : ""}`,
                             "aria-hidden": true
@@ -5069,13 +5215,13 @@ function TreeDataGrid({
                   )
                 }
               ) }),
-              hasColumnSummary && /* @__PURE__ */ jsxs21(
+              hasColumnSummary && /* @__PURE__ */ jsxs22(
                 "tr",
                 {
                   "data-testid": `group-summary-${bucket.key}`,
                   className: "border-b border-border divide-x divide-border",
                   children: [
-                    showSelectionColumn && /* @__PURE__ */ jsx35(
+                    showSelectionColumn && /* @__PURE__ */ jsx36(
                       "td",
                       {
                         className: cn("p-2", zebra ? "bg-muted" : "bg-background"),
@@ -5083,7 +5229,7 @@ function TreeDataGrid({
                       }
                     ),
                     renderGroupSummaryCells(bucket.roots),
-                    showRowActionsColumn && /* @__PURE__ */ jsx35("td", { className: cn("p-2", zebra ? "bg-muted" : "bg-background"), "aria-hidden": true })
+                    showRowActionsColumn && /* @__PURE__ */ jsx36("td", { className: cn("p-2", zebra ? "bg-muted" : "bg-background"), "aria-hidden": true })
                   ]
                 }
               ),
@@ -5092,12 +5238,12 @@ function TreeDataGrid({
                 return bucket.flatRows.map((flatRow, i) => renderRow(flatRow, startIndex + i));
               })()
             ] }, `group-${bucket.key}`);
-          }) : shouldVirtualize ? /* @__PURE__ */ jsxs21(Fragment6, { children: [
-            paddingTop > 0 && /* @__PURE__ */ jsx35("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx35("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }),
+          }) : shouldVirtualize ? /* @__PURE__ */ jsxs22(Fragment6, { children: [
+            paddingTop > 0 && /* @__PURE__ */ jsx36("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx36("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }),
             virtualItems.map(
               (virtualItem) => renderRow(flatRows[virtualItem.index], virtualItem.index, (el) => virtualizer.measureElement(el))
             ),
-            paddingBottom > 0 && /* @__PURE__ */ jsx35("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx35(
+            paddingBottom > 0 && /* @__PURE__ */ jsx36("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx36(
               "td",
               {
                 colSpan: totalColumnCount,
@@ -5112,15 +5258,15 @@ function TreeDataGrid({
           // "roots only" scope `groupBy` itself uses, and for the same
           // reason (a child's value is usually already folded into its
           // parent's).
-          /* @__PURE__ */ jsx35("tfoot", { children: /* @__PURE__ */ jsxs21("tr", { "data-testid": "totals-row", className: "divide-x divide-border", children: [
-            showSelectionColumn && /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36("tfoot", { children: /* @__PURE__ */ jsxs22("tr", { "data-testid": "totals-row", className: "divide-x divide-border", children: [
+            showSelectionColumn && /* @__PURE__ */ jsx36(
               "td",
               {
                 className: "sticky bottom-0 z-20 border-t border-border bg-muted p-2",
                 style: { width: SELECTION_COLUMN_WIDTH }
               }
             ),
-            visibleColumns.map((column) => /* @__PURE__ */ jsx35(
+            visibleColumns.map((column) => /* @__PURE__ */ jsx36(
               "td",
               {
                 style: column.width ? { width: column.width } : void 0,
@@ -5132,7 +5278,7 @@ function TreeDataGrid({
               },
               column.id
             )),
-            showRowActionsColumn && /* @__PURE__ */ jsx35("td", { className: "sticky bottom-0 z-20 border-t border-border bg-muted p-2", "aria-hidden": true })
+            showRowActionsColumn && /* @__PURE__ */ jsx36("td", { className: "sticky bottom-0 z-20 border-t border-border bg-muted p-2", "aria-hidden": true })
           ] }) })
         ] })
       }
@@ -5174,6 +5320,7 @@ export {
   defaultAlign,
   defaultFilterLabels,
   defaultFormat,
+  defaultGridStatusLabels,
   editErrorId,
   evaluateFilter,
   extendRangeForFill,
@@ -5203,6 +5350,7 @@ export {
   resolveMenuItems,
   storageKeyFor,
   toDate,
+  toErrorInfo,
   useCellEditingState,
   useCellSelection,
   useDebouncedCallback,