@bmsuisse/datagrid 0.37.1 → 0.39.0

package/dist/index.js

@@ -147,6 +147,72 @@ function evaluateFilter(row, filter) {
   return evaluateLeaf(row, filter);
 }
 
+// src/filter/labels.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var defaultFilterLabels = {
+  filterAriaLabel: (header) => `Filter ${header}`,
+  searchPlaceholder: (header) => `Search ${header.toLowerCase()}...`,
+  selectAll: "Select all",
+  selectAllOfGroup: (group) => `Select all of ${group}`,
+  noMatches: "No matches.",
+  selectedCount: (count) => `${count} selected`,
+  stringPlaceholder: (header) => `Filter ${header.toLowerCase()}...`,
+  stringContains: "Contains",
+  stringIs: "Is",
+  stringStartsWith: "Starts with",
+  stringEndsWith: "Ends with",
+  operatorAriaLabel: (header) => `${header} filter operator`,
+  booleanAll: "All",
+  booleanYes: "Yes",
+  booleanNo: "No",
+  booleanAriaLabel: (header) => `${header} filter`,
+  minPlaceholder: "Min",
+  maxPlaceholder: "Max",
+  valuePlaceholder: "Value",
+  rangeSeparator: "to",
+  minimumAriaLabel: (header) => `${header} minimum`,
+  maximumAriaLabel: (header) => `${header} maximum`,
+  minimumSliderAriaLabel: (header) => `${header} minimum (slider)`,
+  maximumSliderAriaLabel: (header) => `${header} maximum (slider)`,
+  numberGreaterThan: "Greater than",
+  numberGreaterThanOrEqual: "Greater than or equal to",
+  numberLessThan: "Less than",
+  numberLessThanOrEqual: "Less than or equal to",
+  numberEquals: "Equals",
+  numberNotEquals: "Does not equal",
+  numberBetween: "Between",
+  clear: "Clear",
+  loading: "Loading\u2026",
+  loadFailed: "Couldn't load values.",
+  retry: "Retry",
+  dateToday: "Today",
+  dateLast7Days: "Last 7 days",
+  dateThisMonth: "This month",
+  dateCustom: "Custom"
+};
+function mergeFilterLabels(base, overrides) {
+  if (!overrides) return base;
+  const merged = { ...base };
+  for (const [key, value] of Object.entries(overrides)) {
+    if (value !== void 0) merged[key] = value;
+  }
+  return merged;
+}
+var FilterLabelsContext = createContext(defaultFilterLabels);
+function FilterLabelsProvider({
+  labels,
+  children
+}) {
+  const parent = useContext(FilterLabelsContext);
+  const value = useMemo(() => mergeFilterLabels(parent, labels), [parent, labels]);
+  return /* @__PURE__ */ jsx(FilterLabelsContext.Provider, { value, children });
+}
+function useFilterLabels(overrides) {
+  const fromContext = useContext(FilterLabelsContext);
+  return useMemo(() => mergeFilterLabels(fromContext, overrides), [fromContext, overrides]);
+}
+
 // src/filter/BooleanFilter.tsx
 import { FunnelIcon } from "@heroicons/react/24/outline";
 
@@ -166,7 +232,7 @@ function stopRowClick(event) {
 }
 
 // src/components/ui/button.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
@@ -193,7 +259,7 @@ var Button = forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     const variantClass = buttonVariants({ variant, size });
-    return /* @__PURE__ */ jsx(Comp, { className: className ? cn(variantClass, className) : variantClass, ref, ...props });
+    return /* @__PURE__ */ jsx2(Comp, { className: className ? cn(variantClass, className) : variantClass, ref, ...props });
   }
 );
 Button.displayName = "Button";
@@ -201,10 +267,10 @@ Button.displayName = "Button";
 // src/components/ui/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = forwardRef2(({ className, align = "start", sideOffset = 4, collisionPadding = 8, ...props }, ref) => /* @__PURE__ */ jsx2(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
+var PopoverContent = forwardRef2(({ className, align = "start", sideOffset = 4, collisionPadding = 8, ...props }, ref) => /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
   PopoverPrimitive.Content,
   {
     ref,
@@ -222,9 +288,9 @@ 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 jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
 var SelectTrigger = forwardRef3(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
@@ -238,12 +304,12 @@ var SelectTrigger = forwardRef3(({ className, children, ...props }, ref) => /* @
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx3(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx3(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" }) })
     ]
   }
 ));
 SelectTrigger.displayName = "SelectTrigger";
-var SelectContent = forwardRef3(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx3(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
+var SelectContent = forwardRef3(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx4(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
   SelectPrimitive.Content,
   {
     ref,
@@ -254,7 +320,7 @@ var SelectContent = forwardRef3(({ className, children, position = "popper", ...
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx3(SelectPrimitive.Viewport, { className: "p-1", children })
+    children: /* @__PURE__ */ jsx4(SelectPrimitive.Viewport, { className: "p-1", children })
   }
 ) }));
 SelectContent.displayName = "SelectContent";
@@ -268,19 +334,19 @@ var SelectItem = forwardRef3(({ className, children, ...props }, ref) => /* @__P
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx3("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx3(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx3(Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx3(SelectPrimitive.ItemText, { 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(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx4(SelectPrimitive.ItemText, { children })
     ]
   }
 ));
 SelectItem.displayName = "SelectItem";
 
 // src/filter/BooleanFilter.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var BOOLEAN_CHOICES = [
-  { value: "all", label: "All" },
-  { value: "yes", label: "Yes" },
-  { value: "no", label: "No" }
+  { value: "all", labelKey: "booleanAll" },
+  { value: "yes", labelKey: "booleanYes" },
+  { value: "no", labelKey: "booleanNo" }
 ];
 function choiceOf(value) {
   if (!value) return "all";
@@ -300,11 +366,13 @@ function BooleanFilter({
   column,
   value,
   onChange,
-  bare = false
+  bare = false,
+  labels: labelOverrides
 }) {
+  const labels = useFilterLabels(labelOverrides);
   const choice = choiceOf(value);
   const isFiltered = choice !== "all";
-  const summary = choice === "yes" ? "Yes" : choice === "no" ? "No" : "";
+  const summary = choice === "yes" ? labels.booleanYes : choice === "no" ? labels.booleanNo : "";
   function emit(next) {
     if (next === "all") {
       onChange(void 0);
@@ -321,36 +389,36 @@ function BooleanFilter({
         if (match) emit(match);
       },
       children: [
-        /* @__PURE__ */ jsx4(SelectTrigger, { "aria-label": `${column.header} filter`, children: /* @__PURE__ */ jsx4(SelectValue, {}) }),
-        /* @__PURE__ */ jsx4(SelectContent, { children: BOOLEAN_CHOICES.map((option) => /* @__PURE__ */ jsx4(SelectItem, { value: option.value, children: option.label }, option.value)) })
+        /* @__PURE__ */ jsx5(SelectTrigger, { "aria-label": labels.booleanAriaLabel(column.header), children: /* @__PURE__ */ jsx5(SelectValue, {}) }),
+        /* @__PURE__ */ jsx5(SelectContent, { children: BOOLEAN_CHOICES.map((option) => /* @__PURE__ */ jsx5(SelectItem, { value: option.value, children: labels[option.labelKey] }, option.value)) })
       ]
     }
   );
   if (bare) {
-    return /* @__PURE__ */ jsx4("div", { "data-testid": `filter-${column.id}`, children: panel });
+    return /* @__PURE__ */ jsx5("div", { "data-testid": `filter-${column.id}`, children: panel });
   }
   return /* @__PURE__ */ jsxs2(Popover, { children: [
-    /* @__PURE__ */ jsx4(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsx5(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
       Button,
       {
         variant: "outline",
         size: "sm",
         className: cn("gap-1", isFiltered ? "max-w-[140px] px-2" : "w-8 justify-center px-0"),
-        "aria-label": `Filter ${column.header}`,
+        "aria-label": labels.filterAriaLabel(column.header),
         "data-testid": `filter-${column.id}`,
         children: [
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             FunnelIcon,
             {
               className: cn("h-3.5 w-3.5 shrink-0", isFiltered ? "opacity-100 text-primary" : "opacity-40"),
               "aria-hidden": true
             }
           ),
-          isFiltered && /* @__PURE__ */ jsx4("span", { className: "truncate", children: summary })
+          isFiltered && /* @__PURE__ */ jsx5("span", { className: "truncate", children: summary })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx4(PopoverContent, { className: "w-40 p-2", children: panel })
+    /* @__PURE__ */ jsx5(PopoverContent, { className: "w-40 p-2", children: panel })
   ] });
 }
 
@@ -359,13 +427,18 @@ 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 jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function Calendar({ className, classNames, ...props }) {
   const defaultClassNames = getDefaultClassNames();
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     DayPicker,
     {
       className: cn("w-fit", className),
@@ -415,15 +488,15 @@ function Calendar({ className, classNames, ...props }) {
       },
       components: {
         Chevron: ({ className: chevronClassName, orientation }) => {
-          const Icon2 = orientation === "up" ? ChevronUpIcon : orientation === "down" ? ChevronDownIcon : orientation === "right" ? ChevronRightIcon : ChevronLeftIcon;
-          return /* @__PURE__ */ jsx5(Icon2, { className: cn("h-4 w-4", chevronClassName), "aria-hidden": true });
+          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 }) => {
           const ref = useRef(null);
           useEffect(() => {
             if (modifiers.focused) ref.current?.focus();
           }, [modifiers.focused]);
-          return /* @__PURE__ */ jsx5(
+          return /* @__PURE__ */ jsx6(
             "button",
             {
               ref,
@@ -447,21 +520,21 @@ function Calendar({ className, classNames, ...props }) {
 }
 
 // src/filter/DateRangeFilter.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var PRESETS = [
   {
     key: "today",
-    label: "Today",
+    labelKey: "dateToday",
     range: (today) => ({ from: startOfDay(today), to: endOfDay(today) })
   },
   {
     key: "last7",
-    label: "Last 7 days",
+    labelKey: "dateLast7Days",
     range: (today) => ({ from: startOfDay(subDays(today, 6)), to: endOfDay(today) })
   },
   {
     key: "thisMonth",
-    label: "This month",
+    labelKey: "dateThisMonth",
     range: (today) => ({ from: startOfMonth(today), to: endOfMonth(today) })
   }
 ];
@@ -486,8 +559,11 @@ function DateRangeFilter({
   value,
   onChange,
   today = /* @__PURE__ */ new Date(),
-  bare = false
+  bare = false,
+  labels: labelOverrides
 }) {
+  const labels = useFilterLabels(labelOverrides);
+  const locale = labels.dateLocale ? { locale: labels.dateLocale } : void 0;
   const range = rangeOf(value);
   function emit(next) {
     if (!next?.from || !next.to) {
@@ -502,56 +578,56 @@ function DateRangeFilter({
     });
   }
   const isFiltered = range?.from !== void 0;
-  const summary = range?.from ? range.to ? `${format(range.from, "PP")} - ${format(range.to, "PP")}` : format(range.from, "PP") : "";
+  const summary = range?.from ? range.to ? `${format(range.from, "PP", locale)} - ${format(range.to, "PP", locale)}` : format(range.from, "PP", locale) : "";
   const panel = /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap gap-2", children: [
-      PRESETS.map((preset) => /* @__PURE__ */ jsx6(
+      PRESETS.map((preset) => /* @__PURE__ */ jsx7(
         Button,
         {
           type: "button",
           variant: "outline",
           size: "sm",
           onClick: () => emit(preset.range(today)),
-          children: preset.label
+          children: labels[preset.labelKey]
         },
         preset.key
       )),
-      /* @__PURE__ */ jsx6(Button, { type: "button", variant: "outline", size: "sm", onClick: () => emit(void 0), children: "Custom" })
+      /* @__PURE__ */ jsx7(Button, { type: "button", variant: "outline", size: "sm", onClick: () => emit(void 0), children: labels.dateCustom })
     ] }),
-    /* @__PURE__ */ jsx6(Calendar, { mode: "range", selected: range, onSelect: emit, numberOfMonths: 2 })
+    /* @__PURE__ */ jsx7(Calendar, { mode: "range", selected: range, onSelect: emit, numberOfMonths: 2, locale: labels.dateLocale })
   ] });
   if (bare) {
-    return /* @__PURE__ */ jsx6("div", { "data-testid": `filter-${column.id}`, children: panel });
+    return /* @__PURE__ */ jsx7("div", { "data-testid": `filter-${column.id}`, children: panel });
   }
   return /* @__PURE__ */ jsxs3(Popover, { children: [
-    /* @__PURE__ */ jsx6(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsx7(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
       Button,
       {
         variant: "outline",
         size: "sm",
         className: cn("gap-1", isFiltered ? "max-w-[220px] px-2" : "w-8 justify-center px-0"),
-        "aria-label": `Filter ${column.header}`,
+        "aria-label": labels.filterAriaLabel(column.header),
         "data-testid": `filter-${column.id}`,
         children: [
-          /* @__PURE__ */ jsx6(CalendarDaysIcon, { className: "h-3.5 w-3.5 shrink-0 opacity-70", "aria-hidden": true }),
-          isFiltered && /* @__PURE__ */ jsx6("span", { className: "truncate", children: summary })
+          /* @__PURE__ */ jsx7(CalendarDaysIcon, { className: "h-3.5 w-3.5 shrink-0 opacity-70", "aria-hidden": true }),
+          isFiltered && /* @__PURE__ */ jsx7("span", { className: "truncate", children: summary })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx6(PopoverContent, { className: "w-auto", children: panel })
+    /* @__PURE__ */ jsx7(PopoverContent, { className: "w-auto max-w-[var(--radix-popover-content-available-width)]", children: panel })
   ] });
 }
 
 // src/filter/EnumFilter.tsx
 import { FunnelIcon as FunnelIcon2 } from "@heroicons/react/24/outline";
-import { useMemo, useState } from "react";
+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 jsx7 } from "react/jsx-runtime";
-var Checkbox = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Checkbox = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -564,16 +640,16 @@ var Checkbox = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx7(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx7(Minus, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx7(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";
 
 // src/components/ui/input.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Input = forwardRef5(({ className, type, ...props }, ref) => {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "input",
     {
       type,
@@ -589,7 +665,7 @@ var Input = forwardRef5(({ className, type, ...props }, ref) => {
 Input.displayName = "Input";
 
 // src/filter/EnumFilter.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 function selectedValuesOf(value) {
   if (!value || value.operator !== "in" || !Array.isArray(value.value)) return [];
   return value.value.filter((entry) => typeof entry === "string");
@@ -622,16 +698,18 @@ function EnumFilter({
   column,
   value,
   onChange,
-  bare = false
+  bare = false,
+  labels: labelOverrides
 }) {
+  const labels = useFilterLabels(labelOverrides);
   const [search, setSearch] = useState("");
   const selected = selectedValuesOf(value);
-  const visibleOptions = useMemo(() => {
+  const visibleOptions = useMemo2(() => {
     const term = search.trim().toLowerCase();
     if (!term) return column.options;
     return column.options.filter((option) => option.label.toLowerCase().includes(term));
   }, [column.options, search]);
-  const renderChunks = useMemo(() => buildRenderChunks(visibleOptions), [visibleOptions]);
+  const renderChunks = useMemo2(() => buildRenderChunks(visibleOptions), [visibleOptions]);
   function emit(next) {
     onChange(next.length === 0 ? void 0 : { field: column.id, operator: "in", value: next });
   }
@@ -662,7 +740,7 @@ function EnumFilter({
       {
         className: "flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground",
         children: [
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             Checkbox,
             {
               checked: selected.includes(option.value),
@@ -676,29 +754,29 @@ function EnumFilter({
     );
   }
   const isFiltered = selected.length > 0;
-  const summary = `${selected.length} selected`;
+  const summary = labels.selectedCount(selected.length);
   const panel = /* @__PURE__ */ jsxs4("div", { className: bare ? "flex w-full flex-col gap-2" : "flex w-64 flex-col gap-2 p-2", children: [
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       Input,
       {
-        placeholder: `Search ${column.header.toLowerCase()}...`,
+        placeholder: labels.searchPlaceholder(column.header),
         value: search,
         onChange: (event) => setSearch(event.target.value)
       }
     ),
     /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2 border-b px-1 pb-2 text-sm", children: [
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         Checkbox,
         {
           checked: someVisibleSelected ? "indeterminate" : allVisibleSelected,
           disabled: visibleValues.length === 0,
           onCheckedChange: toggleSelectAllVisible,
-          "aria-label": "Select all"
+          "aria-label": labels.selectAll
         }
       ),
-      "Select all"
+      labels.selectAll
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: "flex max-h-60 flex-col gap-0.5 overflow-y-auto", children: renderChunks.length === 0 ? /* @__PURE__ */ jsx9("p", { className: "py-2 text-center text-sm text-muted-foreground", children: "No matches." }) : renderChunks.map((chunk) => {
+    /* @__PURE__ */ jsx10("div", { className: "flex max-h-60 flex-col gap-0.5 overflow-y-auto", children: renderChunks.length === 0 ? /* @__PURE__ */ jsx10("p", { className: "py-2 text-center text-sm text-muted-foreground", children: labels.noMatches }) : renderChunks.map((chunk) => {
       if (chunk.kind === "single") return renderOption(chunk.row.option);
       const headerState = groupCheckState(visibleOptions, selected, chunk.group);
       return (
@@ -713,12 +791,12 @@ function EnumFilter({
               "data-group-header": true,
               className: "sticky top-0 z-10 flex items-center gap-2 rounded-sm bg-muted px-2 py-1.5 text-sm font-semibold text-foreground",
               children: [
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   Checkbox,
                   {
                     checked: headerState === "indeterminate" ? "indeterminate" : headerState === "checked",
                     onCheckedChange: () => toggleGroup(chunk.group),
-                    "aria-label": `Select all of ${chunk.group}`
+                    "aria-label": labels.selectAllOfGroup(chunk.group)
                   }
                 ),
                 chunk.group
@@ -731,30 +809,30 @@ function EnumFilter({
     }) })
   ] });
   if (bare) {
-    return /* @__PURE__ */ jsx9("div", { "data-testid": `filter-${column.id}`, children: panel });
+    return /* @__PURE__ */ jsx10("div", { "data-testid": `filter-${column.id}`, children: panel });
   }
   return /* @__PURE__ */ jsxs4(Popover, { children: [
-    /* @__PURE__ */ jsx9(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsx10(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
       Button,
       {
         variant: "outline",
         size: "sm",
         className: cn("gap-1", isFiltered ? "max-w-[180px] px-2" : "w-8 justify-center px-0"),
-        "aria-label": `Filter ${column.header}`,
+        "aria-label": labels.filterAriaLabel(column.header),
         "data-testid": `filter-${column.id}`,
         children: [
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             FunnelIcon2,
             {
               className: cn("h-3.5 w-3.5 shrink-0", isFiltered ? "opacity-100 text-primary" : "opacity-40"),
               "aria-hidden": true
             }
           ),
-          isFiltered && /* @__PURE__ */ jsx9("span", { className: "truncate", children: summary })
+          isFiltered && /* @__PURE__ */ jsx10("span", { className: "truncate", children: summary })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx9(PopoverContent, { className: "w-64 p-2", children: panel })
+    /* @__PURE__ */ jsx10(PopoverContent, { className: "w-64 p-2", children: panel })
   ] });
 }
 
@@ -897,15 +975,15 @@ function descriptorFor(field, range) {
 }
 
 // src/filter/NumberComparisonFilter.tsx
-import { Fragment, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var NUMBER_OPERATORS = [
-  { value: "gt", label: "Greater than" },
-  { value: "gte", label: "Greater than or equal to" },
-  { value: "lt", label: "Less than" },
-  { value: "lte", label: "Less than or equal to" },
-  { value: "eq", label: "Equals" },
-  { value: "neq", label: "Does not equal" },
-  { value: "between", label: "Between" }
+  { value: "gt", labelKey: "numberGreaterThan" },
+  { value: "gte", labelKey: "numberGreaterThanOrEqual" },
+  { value: "lt", labelKey: "numberLessThan" },
+  { value: "lte", labelKey: "numberLessThanOrEqual" },
+  { value: "eq", labelKey: "numberEquals" },
+  { value: "neq", labelKey: "numberNotEquals" },
+  { value: "between", labelKey: "numberBetween" }
 ];
 var OPERATOR_SYMBOL = {
   gt: ">",
@@ -939,8 +1017,10 @@ function NumberComparisonFilter({
   column,
   value,
   onChange,
-  bare = true
+  bare = true,
+  labels: labelOverrides
 }) {
+  const labels = useFilterLabels(labelOverrides);
   const initial = stateFromValue(value);
   const [operator, setOperator] = useState2(initial.operator);
   const [text, setText] = useState2(initial.text);
@@ -994,20 +1074,20 @@ function NumberComparisonFilter({
           emit(nextOperator, text, text2);
         },
         children: [
-          /* @__PURE__ */ jsx10(SelectTrigger, { id: operatorId, "aria-label": `${column.header} filter operator`, children: /* @__PURE__ */ jsx10(SelectValue, {}) }),
-          /* @__PURE__ */ jsx10(SelectContent, { children: NUMBER_OPERATORS.map((option) => /* @__PURE__ */ jsx10(SelectItem, { value: option.value, children: option.label }, option.value)) })
+          /* @__PURE__ */ jsx11(SelectTrigger, { id: operatorId, "aria-label": labels.operatorAriaLabel(column.header), children: /* @__PURE__ */ jsx11(SelectValue, {}) }),
+          /* @__PURE__ */ jsx11(SelectContent, { children: NUMBER_OPERATORS.map((option) => /* @__PURE__ */ jsx11(SelectItem, { value: option.value, children: labels[option.labelKey] }, option.value)) })
         ]
       }
     ),
     /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         Input,
         {
           id: valueId,
           type: "number",
           className: "min-w-0",
-          "aria-label": isBetween ? `${column.header} minimum` : column.header,
-          placeholder: isBetween ? "Min" : "Value",
+          "aria-label": isBetween ? labels.minimumAriaLabel(column.header) : column.header,
+          placeholder: isBetween ? labels.minPlaceholder : labels.valuePlaceholder,
           value: text,
           onChange: (event) => {
             setText(event.target.value);
@@ -1016,14 +1096,14 @@ function NumberComparisonFilter({
         }
       ),
       isBetween && /* @__PURE__ */ jsxs5(Fragment, { children: [
-        /* @__PURE__ */ jsx10("span", { className: "shrink-0 text-xs text-muted-foreground", children: "to" }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11("span", { className: "shrink-0 text-xs text-muted-foreground", children: labels.rangeSeparator }),
+        /* @__PURE__ */ jsx11(
           Input,
           {
             type: "number",
             className: "min-w-0",
-            "aria-label": `${column.header} maximum`,
-            placeholder: "Max",
+            "aria-label": labels.maximumAriaLabel(column.header),
+            placeholder: labels.maxPlaceholder,
             value: text2,
             onChange: (event) => {
               setText2(event.target.value);
@@ -1035,37 +1115,37 @@ function NumberComparisonFilter({
     ] })
   ] });
   if (bare) {
-    return /* @__PURE__ */ jsx10("div", { "data-testid": `filter-${column.id}`, children: panel });
+    return /* @__PURE__ */ jsx11("div", { "data-testid": `filter-${column.id}`, children: panel });
   }
   return /* @__PURE__ */ jsxs5(Popover, { children: [
-    /* @__PURE__ */ jsx10(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsx11(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
       Button,
       {
         variant: "outline",
         size: "sm",
         className: cn("gap-1", isFiltered ? "max-w-[180px] px-2" : "w-8 justify-center px-0"),
-        "aria-label": `Filter ${column.header}`,
+        "aria-label": labels.filterAriaLabel(column.header),
         "data-testid": `filter-${column.id}`,
         children: [
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             FunnelIcon3,
             {
               className: cn("h-3.5 w-3.5 shrink-0", isFiltered ? "opacity-100 text-primary" : "opacity-40"),
               "aria-hidden": true
             }
           ),
-          isFiltered && /* @__PURE__ */ jsx10("span", { className: "truncate", children: summary })
+          isFiltered && /* @__PURE__ */ jsx11("span", { className: "truncate", children: summary })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx10(PopoverContent, { className: "w-auto p-3", children: panel })
+    /* @__PURE__ */ jsx11(PopoverContent, { className: "w-auto p-3", children: panel })
   ] });
 }
 
 // src/filter/NumberRangeFilter.tsx
 import { FunnelIcon as FunnelIcon4 } from "@heroicons/react/24/outline";
 import { useEffect as useEffect3, useId as useId2, useRef as useRef3, useState as useState3 } from "react";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 function parseNumber2(raw) {
   if (raw.trim() === "") return void 0;
   const parsed = Number(raw);
@@ -1075,8 +1155,10 @@ function NumberRangeFilter({
   column,
   value,
   onChange,
-  bare = false
+  bare = false,
+  labels: labelOverrides
 }) {
+  const labels = useFilterLabels(labelOverrides);
   const initial = rangeOf2(value);
   const [minText, setMinText] = useState3(initial.min?.toString() ?? "");
   const [maxText, setMaxText] = useState3(initial.max?.toString() ?? "");
@@ -1102,13 +1184,13 @@ function NumberRangeFilter({
   const isFiltered = min !== void 0 || max !== void 0;
   const summary = min !== void 0 && max !== void 0 ? `${defaultFormat(column, min)} \u2013 ${defaultFormat(column, max)}` : min !== void 0 ? `\u2265 ${defaultFormat(column, min)}` : max !== void 0 ? `\u2264 ${defaultFormat(column, max)}` : "";
   const panel = /* @__PURE__ */ jsxs6("div", { className: "flex w-full max-w-[220px] items-center gap-2", children: [
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       Input,
       {
         id: minId,
         type: "number",
-        "aria-label": `${column.header} minimum`,
-        placeholder: "Min",
+        "aria-label": labels.minimumAriaLabel(column.header),
+        placeholder: labels.minPlaceholder,
         className: "min-w-0",
         value: minText,
         onChange: (event) => {
@@ -1117,14 +1199,14 @@ function NumberRangeFilter({
         }
       }
     ),
-    /* @__PURE__ */ jsx11("span", { className: "shrink-0 text-xs text-muted-foreground", children: "to" }),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12("span", { className: "shrink-0 text-xs text-muted-foreground", children: labels.rangeSeparator }),
+    /* @__PURE__ */ jsx12(
       Input,
       {
         id: maxId,
         type: "number",
-        "aria-label": `${column.header} maximum`,
-        placeholder: "Max",
+        "aria-label": labels.maximumAriaLabel(column.header),
+        placeholder: labels.maxPlaceholder,
         className: "min-w-0",
         value: maxText,
         onChange: (event) => {
@@ -1135,37 +1217,37 @@ function NumberRangeFilter({
     )
   ] });
   if (bare) {
-    return /* @__PURE__ */ jsx11("div", { "data-testid": `filter-${column.id}`, children: panel });
+    return /* @__PURE__ */ jsx12("div", { "data-testid": `filter-${column.id}`, children: panel });
   }
   return /* @__PURE__ */ jsxs6(Popover, { children: [
-    /* @__PURE__ */ jsx11(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsx12(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs6(
       Button,
       {
         variant: "outline",
         size: "sm",
         className: cn("gap-1", isFiltered ? "max-w-[180px] px-2" : "w-8 justify-center px-0"),
-        "aria-label": `Filter ${column.header}`,
+        "aria-label": labels.filterAriaLabel(column.header),
         "data-testid": `filter-${column.id}`,
         children: [
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12(
             FunnelIcon4,
             {
               className: cn("h-3.5 w-3.5 shrink-0", isFiltered ? "opacity-100 text-primary" : "opacity-40"),
               "aria-hidden": true
             }
           ),
-          isFiltered && /* @__PURE__ */ jsx11("span", { className: "truncate", children: summary })
+          isFiltered && /* @__PURE__ */ jsx12("span", { className: "truncate", children: summary })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx11(PopoverContent, { className: "w-auto p-3", children: panel })
+    /* @__PURE__ */ jsx12(PopoverContent, { className: "w-auto p-3", children: panel })
   ] });
 }
 
 // src/filter/NumberHistogramFilter.tsx
-import { FunnelIcon as FunnelIcon5 } from "@heroicons/react/24/outline";
-import { useCallback, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4, useState as useState4 } from "react";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+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;
 var DEFAULT_BUCKETS = 24;
 function tLog(v) {
@@ -1182,35 +1264,42 @@ function NumberHistogramFilter({
   loadValues,
   format: format2 = (v) => v.toLocaleString(),
   buckets = DEFAULT_BUCKETS,
-  bare = true
+  bare = true,
+  labels: labelOverrides
 }) {
+  const labels = useFilterLabels(labelOverrides);
   const [openState, setOpen] = useState4(false);
   const open = bare || openState;
   const trackRef = useRef4(null);
   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 = useMemo2(
+  const nums = useMemo3(
     () => open ? sourceValues.filter((v) => v != null) : [],
     [sourceValues, open]
   );
-  const dataMin = useMemo2(() => nums.reduce((a, b) => Math.min(a, b), Infinity), [nums]);
-  const dataMax = useMemo2(() => nums.reduce((a, b) => Math.max(a, b), -Infinity), [nums]);
+  const dataMin = useMemo3(() => nums.reduce((a, b) => Math.min(a, b), Infinity), [nums]);
+  const dataMax = useMemo3(() => nums.reduce((a, b) => Math.max(a, b), -Infinity), [nums]);
   const activeMin = min ?? dataMin;
   const activeMax = max ?? dataMax;
   const [minText, setMinText] = useState4("");
@@ -1227,7 +1316,7 @@ function NumberHistogramFilter({
     (v) => logDataMax === logDataMin ? 0 : (tLog(v) - logDataMin) / (logDataMax - logDataMin) * 100,
     [logDataMin, logDataMax]
   );
-  const histBars = useMemo2(() => {
+  const histBars = useMemo3(() => {
     if (!nums.length || dataMin === dataMax || !Number.isFinite(dataMin) || !Number.isFinite(dataMax)) return [];
     const step = (logDataMax - logDataMin) / buckets;
     const counts = Array(buckets).fill(0);
@@ -1266,8 +1355,22 @@ function NumberHistogramFilter({
   const isFiltered = value !== void 0;
   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__ */ jsx12("p", { className: "text-xs text-muted-foreground", "data-testid": `filter-${column.id}-loading`, children: "Loading\u2026" }),
-    /* @__PURE__ */ jsx12("div", { className: "flex items-end gap-px", style: { height: BAR_HEIGHT_PX }, "data-testid": `filter-${column.id}-histogram`, children: histBars.map((bar, i) => /* @__PURE__ */ jsx12(
+    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",
       {
         className: cn("flex-1 rounded-sm", bar.active ? "bg-primary/70" : "bg-muted-foreground/20"),
@@ -1276,11 +1379,11 @@ function NumberHistogramFilter({
       i
     )) }),
     /* @__PURE__ */ jsxs7("div", { ref: trackRef, className: "relative h-5", onMouseMove: handleTrackHover, children: [
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(
         "input",
         {
           type: "range",
-          "aria-label": `${column.header} minimum (slider)`,
+          "aria-label": labels.minimumSliderAriaLabel(column.header),
           min: logDataMin,
           max: logDataMax,
           step: logStep,
@@ -1290,11 +1393,11 @@ function NumberHistogramFilter({
           style: { zIndex: minOnTop ? 5 : 3 }
         }
       ),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(
         "input",
         {
           type: "range",
-          "aria-label": `${column.header} maximum (slider)`,
+          "aria-label": labels.maximumSliderAriaLabel(column.header),
           min: logDataMin,
           max: logDataMax,
           step: logStep,
@@ -1304,14 +1407,14 @@ function NumberHistogramFilter({
           style: { zIndex: minOnTop ? 3 : 5 }
         }
       ),
-      /* @__PURE__ */ jsx12("div", { className: "pointer-events-none absolute top-1/2 h-1.5 w-full -translate-y-1/2 rounded-full bg-muted", children: /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13("div", { className: "pointer-events-none absolute top-1/2 h-1.5 w-full -translate-y-1/2 rounded-full bg-muted", children: /* @__PURE__ */ jsx13(
         "div",
         {
           className: "absolute h-full rounded-full bg-primary",
           style: { left: `${logPct(activeMin)}%`, right: `${100 - logPct(activeMax)}%` }
         }
       ) }),
-      [activeMin, activeMax].map((v, i) => /* @__PURE__ */ jsx12(
+      [activeMin, activeMax].map((v, i) => /* @__PURE__ */ jsx13(
         "div",
         {
           className: "pointer-events-none absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-primary bg-background shadow",
@@ -1321,12 +1424,12 @@ function NumberHistogramFilter({
       ))
     ] }),
     /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(
         Input,
         {
           type: "text",
           inputMode: "numeric",
-          "aria-label": `${column.header} minimum`,
+          "aria-label": labels.minimumAriaLabel(column.header),
           value: minText,
           onChange: (event) => {
             setMinText(event.target.value);
@@ -1335,13 +1438,13 @@ function NumberHistogramFilter({
           }
         }
       ),
-      /* @__PURE__ */ jsx12("span", { className: "shrink-0 text-xs text-muted-foreground", children: "to" }),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13("span", { className: "shrink-0 text-xs text-muted-foreground", children: labels.rangeSeparator }),
+      /* @__PURE__ */ jsx13(
         Input,
         {
           type: "text",
           inputMode: "numeric",
-          "aria-label": `${column.header} maximum`,
+          "aria-label": labels.maximumAriaLabel(column.header),
           value: maxText,
           onChange: (event) => {
             setMaxText(event.target.value);
@@ -1351,33 +1454,33 @@ function NumberHistogramFilter({
         }
       )
     ] }),
-    isFiltered && /* @__PURE__ */ jsx12(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onChange(void 0), children: "Clear" })
+    isFiltered && /* @__PURE__ */ jsx13(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onChange(void 0), children: labels.clear })
   ] });
   if (bare) {
-    return /* @__PURE__ */ jsx12("div", { "data-testid": `filter-${column.id}`, children: panel });
+    return /* @__PURE__ */ jsx13("div", { "data-testid": `filter-${column.id}`, children: panel });
   }
   return /* @__PURE__ */ jsxs7(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx12(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsx13(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs7(
       Button,
       {
         variant: "outline",
         size: "sm",
         className: cn("gap-1", isFiltered ? "max-w-[200px] px-2" : "w-8 justify-center px-0"),
-        "aria-label": `Filter ${column.header}`,
+        "aria-label": labels.filterAriaLabel(column.header),
         "data-testid": `filter-${column.id}`,
         children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             FunnelIcon5,
             {
               className: cn("h-3.5 w-3.5 shrink-0", isFiltered ? "opacity-100 text-primary" : "opacity-40"),
               "aria-hidden": true
             }
           ),
-          isFiltered && /* @__PURE__ */ jsx12("span", { className: "truncate", children: summary })
+          isFiltered && /* @__PURE__ */ jsx13("span", { className: "truncate", children: summary })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx12(PopoverContent, { className: "w-80", children: panel })
+    /* @__PURE__ */ jsx13(PopoverContent, { className: "w-80", children: panel })
   ] });
 }
 
@@ -1429,20 +1532,22 @@ function facetedNumberValues(data, column, filter) {
 // src/filter/StringFilter.tsx
 import { FunnelIcon as FunnelIcon6 } from "@heroicons/react/24/outline";
 import { useEffect as useEffect5, useId as useId3, useState as useState5 } from "react";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var STRING_OPERATORS = [
-  { value: "contains", label: "Contains" },
-  { value: "eq", label: "Is" },
-  { value: "startsWith", label: "Starts with" },
-  { value: "endsWith", label: "Ends with" }
+  { value: "contains", labelKey: "stringContains" },
+  { value: "eq", labelKey: "stringIs" },
+  { value: "startsWith", labelKey: "stringStartsWith" },
+  { value: "endsWith", labelKey: "stringEndsWith" }
 ];
 var DEFAULT_OPERATOR2 = "contains";
 function StringFilter({
   column,
   value,
   onChange,
-  bare = false
+  bare = false,
+  labels: labelOverrides
 }) {
+  const labels = useFilterLabels(labelOverrides);
   const [operator, setOperator] = useState5(value?.operator ?? DEFAULT_OPERATOR2);
   const text = typeof value?.value === "string" ? value.value : "";
   const inputId = useId3();
@@ -1469,66 +1574,66 @@ function StringFilter({
           emit(nextOperator, text);
         },
         children: [
-          /* @__PURE__ */ jsx13(SelectTrigger, { "aria-label": `${column.header} filter operator`, children: /* @__PURE__ */ jsx13(SelectValue, {}) }),
-          /* @__PURE__ */ jsx13(SelectContent, { children: STRING_OPERATORS.map((option) => /* @__PURE__ */ jsx13(SelectItem, { value: option.value, children: option.label }, option.value)) })
+          /* @__PURE__ */ jsx14(SelectTrigger, { "aria-label": labels.operatorAriaLabel(column.header), children: /* @__PURE__ */ jsx14(SelectValue, {}) }),
+          /* @__PURE__ */ jsx14(SelectContent, { children: STRING_OPERATORS.map((option) => /* @__PURE__ */ jsx14(SelectItem, { value: option.value, children: labels[option.labelKey] }, option.value)) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       Input,
       {
         id: inputId,
         value: text,
-        placeholder: `Filter ${column.header.toLowerCase()}...`,
+        placeholder: labels.stringPlaceholder(column.header),
         onChange: (event) => emit(operator, event.target.value)
       }
     )
   ] });
   if (bare) {
-    return /* @__PURE__ */ jsx13("div", { "data-testid": `filter-${column.id}`, children: panel });
+    return /* @__PURE__ */ jsx14("div", { "data-testid": `filter-${column.id}`, children: panel });
   }
   return /* @__PURE__ */ jsxs8(Popover, { children: [
-    /* @__PURE__ */ jsx13(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx14(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8(
       Button,
       {
         variant: "outline",
         size: "sm",
         className: cn("gap-1", isFiltered ? "max-w-[160px] px-2" : "w-8 justify-center px-0"),
-        "aria-label": `Filter ${column.header}`,
+        "aria-label": labels.filterAriaLabel(column.header),
         "data-testid": `filter-${column.id}`,
         children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             FunnelIcon6,
             {
               className: cn("h-3.5 w-3.5 shrink-0", isFiltered ? "opacity-100 text-primary" : "opacity-40"),
               "aria-hidden": true
             }
           ),
-          isFiltered && /* @__PURE__ */ jsx13("span", { className: "truncate", children: text })
+          isFiltered && /* @__PURE__ */ jsx14("span", { className: "truncate", children: text })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx13(PopoverContent, { className: "w-auto p-3", children: panel })
+    /* @__PURE__ */ jsx14(PopoverContent, { className: "w-auto p-3", children: panel })
   ] });
 }
 
 // src/filter/registry.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function renderDefaultFilterWidget(column, value, onChange) {
   const bare = column.filterDisplay !== "row";
   switch (column.type) {
     case "string":
-      return /* @__PURE__ */ jsx14(StringFilter, { column, value, onChange, bare });
+      return /* @__PURE__ */ jsx15(StringFilter, { column, value, onChange, bare });
     case "enum":
-      return /* @__PURE__ */ jsx14(EnumFilter, { column, value, onChange, bare });
+      return /* @__PURE__ */ jsx15(EnumFilter, { column, value, onChange, bare });
     case "boolean":
-      return /* @__PURE__ */ jsx14(BooleanFilter, { column, value, onChange, bare });
+      return /* @__PURE__ */ jsx15(BooleanFilter, { column, value, onChange, bare });
     case "number":
     case "currency":
-      return /* @__PURE__ */ jsx14(NumberRangeFilter, { column, value, onChange, bare });
+      return /* @__PURE__ */ jsx15(NumberRangeFilter, { column, value, onChange, bare });
     case "date":
     case "datetime":
-      return /* @__PURE__ */ jsx14(DateRangeFilter, { column, value, onChange, bare });
+      return /* @__PURE__ */ jsx15(DateRangeFilter, { column, value, onChange, bare });
   }
 }
 
@@ -1538,13 +1643,13 @@ function editErrorId(rowId, columnId) {
 }
 
 // src/edit/EditFieldError.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function EditFieldError({ id, message }) {
-  return /* @__PURE__ */ jsx15("span", { id, className: "mt-0.5 block text-xs text-destructive", children: message });
+  return /* @__PURE__ */ jsx16("span", { id, className: "mt-0.5 block text-xs text-destructive", children: message });
 }
 
 // src/edit/BooleanEditor.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function toBoolean(value) {
   if (typeof value === "boolean") return value;
   if (typeof value === "string") return value.trim().toLowerCase() === "true";
@@ -1565,7 +1670,7 @@ function BooleanEditor({
     // `mt-0.5` already provides the same spacing every other editor gets;
     // adding both would double it for this one editor only.
     /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-center", children: [
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx17(
         Checkbox,
         {
           "aria-label": `Edit ${column.header}`,
@@ -1577,14 +1682,14 @@ function BooleanEditor({
           onCheckedChange: (next) => onChange(next === true)
         }
       ),
-      error && /* @__PURE__ */ jsx16(EditFieldError, { id: errorId, message: error })
+      error && /* @__PURE__ */ jsx17(EditFieldError, { id: errorId, message: error })
     ] })
   );
 }
 
 // src/edit/DateEditor.tsx
 import { format as formatDate, parseISO as parseISO4 } from "date-fns";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function inputValueOf(value, columnType) {
   const date = toDate(value);
   if (!date) return "";
@@ -1600,7 +1705,7 @@ function DateEditor({
 }) {
   const errorId = editErrorId(rowId, column.id);
   return /* @__PURE__ */ jsxs10("div", { children: [
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       Input,
       {
         type: column.type === "datetime" ? "datetime-local" : "date",
@@ -1615,12 +1720,12 @@ function DateEditor({
         onChange: (event) => onChange(event.target.value === "" ? null : parseISO4(event.target.value))
       }
     ),
-    error && /* @__PURE__ */ jsx17(EditFieldError, { id: errorId, message: error })
+    error && /* @__PURE__ */ jsx18(EditFieldError, { id: errorId, message: error })
   ] });
 }
 
 // src/edit/EnumEditor.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 function EnumEditor({
   column,
   rowId,
@@ -1641,7 +1746,7 @@ function EnumEditor({
         open,
         onOpenChange,
         children: [
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             SelectTrigger,
             {
               className: "h-8",
@@ -1650,14 +1755,14 @@ function EnumEditor({
               "aria-describedby": error ? errorId : void 0,
               "data-testid": `edit-${rowId}-${column.id}`,
               autoFocus,
-              children: /* @__PURE__ */ jsx18(SelectValue, {})
+              children: /* @__PURE__ */ jsx19(SelectValue, {})
             }
           ),
-          /* @__PURE__ */ jsx18(SelectContent, { children: column.options.map((option) => /* @__PURE__ */ jsx18(SelectItem, { value: option.value, children: option.label }, option.value)) })
+          /* @__PURE__ */ jsx19(SelectContent, { children: column.options.map((option) => /* @__PURE__ */ jsx19(SelectItem, { value: option.value, children: option.label }, option.value)) })
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx18(EditFieldError, { id: errorId, message: error })
+    error && /* @__PURE__ */ jsx19(EditFieldError, { id: errorId, message: error })
   ] });
 }
 
@@ -1666,9 +1771,9 @@ import { useLayoutEffect, useRef as useRef5 } from "react";
 
 // src/components/ui/textarea.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var Textarea = forwardRef6(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "textarea",
     {
       className: cn(
@@ -1683,7 +1788,7 @@ var Textarea = forwardRef6(({ className, ...props }, ref) => {
 Textarea.displayName = "Textarea";
 
 // src/edit/MultilineStringEditor.tsx
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 function MultilineStringEditor({
   column,
   rowId,
@@ -1707,7 +1812,7 @@ function MultilineStringEditor({
     }
   }, [text]);
   return /* @__PURE__ */ jsxs12("div", { children: [
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21(
       Textarea,
       {
         ref: textareaRef,
@@ -1724,13 +1829,13 @@ function MultilineStringEditor({
         }
       }
     ),
-    error && /* @__PURE__ */ jsx20(EditFieldError, { id: errorId, message: error })
+    error && /* @__PURE__ */ jsx21(EditFieldError, { id: errorId, message: error })
   ] });
 }
 
 // src/edit/NumberEditor.tsx
 import { useEffect as useEffect6, useRef as useRef6, useState as useState6 } from "react";
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 function textFromValue(value) {
   return value === null || value === void 0 ? "" : String(value);
 }
@@ -1751,7 +1856,7 @@ function NumberEditor({
     setText(textFromValue(value));
   }, [value]);
   return /* @__PURE__ */ jsxs13("div", { children: [
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       Input,
       {
         type: "number",
@@ -1770,12 +1875,12 @@ function NumberEditor({
         }
       }
     ),
-    error && /* @__PURE__ */ jsx21(EditFieldError, { id: errorId, message: error })
+    error && /* @__PURE__ */ jsx22(EditFieldError, { id: errorId, message: error })
   ] });
 }
 
 // src/edit/StringEditor.tsx
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 function StringEditor({
   column,
   rowId,
@@ -1786,7 +1891,7 @@ function StringEditor({
 }) {
   const errorId = editErrorId(rowId, column.id);
   return /* @__PURE__ */ jsxs14("div", { children: [
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       Input,
       {
         className: "h-8",
@@ -1799,26 +1904,26 @@ function StringEditor({
         onChange: (event) => onChange(event.target.value)
       }
     ),
-    error && /* @__PURE__ */ jsx22(EditFieldError, { id: errorId, message: error })
+    error && /* @__PURE__ */ jsx23(EditFieldError, { id: errorId, message: error })
   ] });
 }
 
 // src/edit/registry.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function renderDefaultEditWidget(column, rowId, value, onChange, error, autoFocus) {
   switch (column.type) {
     case "string":
-      return column.multiline ? /* @__PURE__ */ jsx23(MultilineStringEditor, { column, rowId, value, onChange, error, autoFocus }) : /* @__PURE__ */ jsx23(StringEditor, { column, rowId, value, onChange, error, autoFocus });
+      return column.multiline ? /* @__PURE__ */ jsx24(MultilineStringEditor, { column, rowId, value, onChange, error, autoFocus }) : /* @__PURE__ */ jsx24(StringEditor, { column, rowId, value, onChange, error, autoFocus });
     case "enum":
-      return /* @__PURE__ */ jsx23(EnumEditor, { column, rowId, value, onChange, error, autoFocus });
+      return /* @__PURE__ */ jsx24(EnumEditor, { column, rowId, value, onChange, error, autoFocus });
     case "boolean":
-      return /* @__PURE__ */ jsx23(BooleanEditor, { column, rowId, value, onChange, error, autoFocus });
+      return /* @__PURE__ */ jsx24(BooleanEditor, { column, rowId, value, onChange, error, autoFocus });
     case "number":
     case "currency":
-      return /* @__PURE__ */ jsx23(NumberEditor, { column, rowId, value, onChange, error, autoFocus });
+      return /* @__PURE__ */ jsx24(NumberEditor, { column, rowId, value, onChange, error, autoFocus });
     case "date":
     case "datetime":
-      return /* @__PURE__ */ jsx23(DateEditor, { column, rowId, value, onChange, error, autoFocus });
+      return /* @__PURE__ */ jsx24(DateEditor, { column, rowId, value, onChange, error, autoFocus });
   }
 }
 
@@ -1931,7 +2036,7 @@ function useEditingState(editing, getRowId) {
 }
 
 // src/edit/renderEditableCell.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function renderEditableCell(column, row, rawValue, ctx) {
   const staticContent = (value2) => column.cell ? column.cell(value2, row) : defaultFormat(column, value2);
   if (!ctx || !isEditable(column, row)) return staticContent(rawValue);
@@ -1943,7 +2048,7 @@ function renderEditableCell(column, row, rawValue, ctx) {
     const autoFocus = ctx.autoFocusTarget?.rowId === rowId && ctx.autoFocusTarget.columnId === column.id;
     const onChange = (next) => ctx.onEdit(column, row, next);
     const editor = column.renderEditCell ? column.renderEditCell(value, row, onChange, error, autoFocus) : renderDefaultEditWidget(column, rowId, value, onChange, error, autoFocus);
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx25(
       "div",
       {
         onKeyDown: (event) => {
@@ -1956,7 +2061,7 @@ function renderEditableCell(column, row, rawValue, ctx) {
       }
     );
   }
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "span",
     {
       role: "button",
@@ -1979,7 +2084,7 @@ function renderEditableCell(column, row, rawValue, ctx) {
 }
 
 // src/edit/EditingBar.tsx
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 function resolveEditLabel(label, changedRowCount, fallback) {
   if (label === void 0) return fallback(changedRowCount);
   return typeof label === "function" ? label(changedRowCount) : label;
@@ -2017,7 +2122,7 @@ function EditingBar({
           ] })
         ] }),
         /* @__PURE__ */ jsxs15("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26(
             Button,
             {
               type: "button",
@@ -2029,7 +2134,7 @@ function EditingBar({
               children: resolveEditLabel(editing.discardLabel, pendingRowCount, () => "Discard")
             }
           ),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26(
             Button,
             {
               type: "button",
@@ -2131,15 +2236,15 @@ function extendRangeForFillToCellRange(base, target, rowIds, columnIds, rowIndex
 }
 
 // src/cell-editing/useCellSelection.ts
-import { useCallback as useCallback2, useMemo as useMemo3, useRef as useRef8, useState as useState8 } from "react";
+import { useCallback as useCallback2, useMemo as useMemo4, useRef as useRef8, useState as useState8 } from "react";
 function useCellSelection({ rowIds, columnIds, onNavigateToRow }) {
   const [selection, setSelectionState] = useState8(void 0);
   const [isDragging, setIsDragging] = useState8(false);
   const [dragFocus, setDragFocus] = useState8(void 0);
   const draggingRef = useRef8(false);
   const dragFocusRef = useRef8(void 0);
-  const rowIndex = useMemo3(() => buildIndexMap(rowIds), [rowIds]);
-  const columnIndex = useMemo3(() => buildIndexMap(columnIds), [columnIds]);
+  const rowIndex = useMemo4(() => buildIndexMap(rowIds), [rowIds]);
+  const columnIndex = useMemo4(() => buildIndexMap(columnIds), [columnIds]);
   const startSelection = useCallback2((cell, options) => {
     setSelectionState((prev) => options?.extend && prev ? { anchor: prev.anchor, focus: cell } : { anchor: cell, focus: cell });
     draggingRef.current = true;
@@ -2193,7 +2298,7 @@ function useCellSelection({ rowIds, columnIds, onNavigateToRow }) {
     setDragFocus(void 0);
     setSelectionState(void 0);
   }, []);
-  const effectiveRange = useMemo3(() => {
+  const effectiveRange = useMemo4(() => {
     if (!selection) return void 0;
     if (isDragging && dragFocus) return { anchor: selection.anchor, focus: dragFocus };
     return selection;
@@ -2229,7 +2334,7 @@ function useCellSelection({ rowIds, columnIds, onNavigateToRow }) {
     setSelectionState(finalRange);
     return { sourceRange, finalRange };
   }, [rowIds, columnIds, rowIndex, columnIndex]);
-  const fillPreviewRange = useMemo3(() => {
+  const fillPreviewRange = useMemo4(() => {
     if (!isFillDragging || !selection || !fillTarget) return void 0;
     return extendRangeForFillToCellRange(selection, fillTarget, rowIds, columnIds, rowIndex, columnIndex);
   }, [isFillDragging, selection, fillTarget, rowIds, columnIds, rowIndex, columnIndex]);
@@ -2367,7 +2472,7 @@ function useCellEditingState(cellEditing, getRowId) {
 }
 
 // src/cell-editing/renderCellModeCell.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function isAtomicEditorType(type) {
   return type === "enum" || type === "boolean" || type === "date" || type === "datetime";
 }
@@ -2378,7 +2483,7 @@ function renderCellModeCell(column, row, rawValue, ctx) {
   const value = ctx.resolveValue(rowId, column.id, rawValue);
   const isThisCellEditing = ctx.editingCell?.rowId === rowId && ctx.editingCell.columnId === column.id && isEditable(column, row);
   if (!isThisCellEditing) {
-    return /* @__PURE__ */ jsx26("span", { "data-testid": `cell-${rowId}-${column.id}`, className: "block w-full", children: staticContent(value) });
+    return /* @__PURE__ */ jsx27("span", { "data-testid": `cell-${rowId}-${column.id}`, className: "block w-full", children: staticContent(value) });
   }
   const isAtomic = isAtomicEditorType(column.type);
   const error = ctx.getError(rowId, column.id);
@@ -2418,12 +2523,12 @@ function renderCellModeCell(column, row, rawValue, ctx) {
     if (validate(currentValue)) ctx.onCancelEdit();
     else ctx.onCommitEdit(row, value);
   }
-  return /* @__PURE__ */ jsx26("div", { onKeyDown: handleKeyDown, onBlur: handleBlur, children: editor });
+  return /* @__PURE__ */ jsx27("div", { onKeyDown: handleKeyDown, onBlur: handleBlur, children: editor });
 }
 
 // src/cell-editing/SelectionOverlay.tsx
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as useState10 } from "react";
-import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 function cellSelector(rowId, columnId) {
   const escape = (value) => typeof CSS !== "undefined" && CSS.escape ? CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
   return `[data-cell-row="${escape(rowId)}"][data-cell-col="${escape(columnId)}"]`;
@@ -2478,7 +2583,7 @@ function SelectionOverlay({
   }, [containerRef.current]);
   if (!rect) return null;
   return /* @__PURE__ */ jsxs16(Fragment2, { children: [
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(
       "div",
       {
         "data-testid": "cell-selection-overlay",
@@ -2487,7 +2592,7 @@ function SelectionOverlay({
         style: { top: rect.top, left: rect.left, width: rect.width, height: rect.height }
       }
     ),
-    previewRect && /* @__PURE__ */ jsx27(
+    previewRect && /* @__PURE__ */ jsx28(
       "div",
       {
         "data-testid": "cell-fill-preview-overlay",
@@ -2496,7 +2601,7 @@ function SelectionOverlay({
         style: { top: previewRect.top, left: previewRect.left, width: previewRect.width, height: previewRect.height }
       }
     ),
-    onFillHandleMouseDown && /* @__PURE__ */ jsx27(
+    onFillHandleMouseDown && /* @__PURE__ */ jsx28(
       "div",
       {
         "data-testid": "cell-fill-handle",
@@ -2701,17 +2806,17 @@ 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 jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
-var DialogOverlay = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
+var DialogOverlay = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -2721,7 +2826,7 @@ var DialogOverlay = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ *
 ));
 DialogOverlay.displayName = "DialogOverlay";
 var DialogContent = forwardRef7(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs17(DialogPrimitive.Portal, { children: [
-  /* @__PURE__ */ jsx28(DialogOverlay, {}),
+  /* @__PURE__ */ jsx29(DialogOverlay, {}),
   /* @__PURE__ */ jsxs17(
     DialogPrimitive.Content,
     {
@@ -2734,8 +2839,8 @@ 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__ */ jsx28(X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx28("span", { className: "sr-only", children: "Close" })
+          /* @__PURE__ */ jsx29(XMarkIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx29("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
@@ -2745,10 +2850,10 @@ DialogContent.displayName = "DialogContent";
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx28("div", { className: cn("flex flex-col gap-1.5", className), ...props });
-var DialogTitle = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+}) => /* @__PURE__ */ jsx29("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+var DialogTitle = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
+var DialogDescription = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
   DialogPrimitive.Description,
   {
     ref,
@@ -2857,7 +2962,7 @@ function canHideGroup(columns, visibility, groupColumnIds) {
 }
 
 // src/column-selector/ColumnSelector.tsx
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 function ColumnSelector({
   columns,
   visibility,
@@ -2903,11 +3008,11 @@ function ColumnSelector({
     if (persistKey) writePersistedColumnOrder(persistKey, next);
   }
   return /* @__PURE__ */ jsxs18(Dialog, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx29(DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx29(Button, { variant: "outline", size: "icon", "aria-label": "Choose columns", children: /* @__PURE__ */ jsx29(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__ */ jsx29(DialogHeader, { children: /* @__PURE__ */ jsx29(DialogTitle, { children: "Columns" }) }),
-      /* @__PURE__ */ jsx29("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: [
-        group && /* @__PURE__ */ jsx29("span", { className: "border-b pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: group }),
+      /* @__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: [
+        group && /* @__PURE__ */ jsx30("span", { className: "border-b pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: group }),
         groupCols.map((column) => {
           const visible = isColumnVisible(visibility, column.id);
           return /* @__PURE__ */ jsxs18(
@@ -2937,14 +3042,14 @@ function ColumnSelector({
                 overId === column.id && draggedId !== null && draggedId !== column.id && "outline -outline-offset-2 outline-2 outline-primary"
               ),
               children: [
-                canReorder && /* @__PURE__ */ jsx29(
-                  GripVertical,
+                canReorder && /* @__PURE__ */ jsx30(
+                  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
                   }
                 ),
-                /* @__PURE__ */ jsx29(
+                /* @__PURE__ */ jsx30(
                   Checkbox,
                   {
                     checked: visible,
@@ -2975,16 +3080,16 @@ function resolveMenuItems(items, ctx) {
 }
 
 // src/menu/ActionsMenu.tsx
-import { MoreVertical } from "lucide-react";
-import { useMemo as useMemo4 } from "react";
+import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+import { useMemo as useMemo5 } from "react";
 
 // src/components/ui/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuContent = forwardRef8(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx30(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx30(
+var DropdownMenuContent = forwardRef8(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx31(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx31(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -2997,7 +3102,7 @@ var DropdownMenuContent = forwardRef8(({ className, sideOffset = 4, ...props },
   }
 ) }));
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = forwardRef8(({ className, danger, ...props }, ref) => /* @__PURE__ */ jsx30(
+var DropdownMenuItem = forwardRef8(({ className, danger, ...props }, ref) => /* @__PURE__ */ jsx31(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -3010,7 +3115,7 @@ var DropdownMenuItem = forwardRef8(({ className, danger, ...props }, ref) => /*
   }
 ));
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuSeparator = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var DropdownMenuSeparator = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -3019,7 +3124,7 @@ var DropdownMenuSeparator = forwardRef8(({ className, ...props }, ref) => /* @__
   }
 ));
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-var DropdownMenuLabel = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var DropdownMenuLabel = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -3030,16 +3135,16 @@ var DropdownMenuLabel = forwardRef8(({ className, ...props }, ref) => /* @__PURE
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
 
 // src/menu/ActionsMenu.tsx
-import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 function ActionsMenu({ items, ctx, triggerLabel }) {
-  const resolved = useMemo4(
+  const resolved = useMemo5(
     () => resolveMenuItems(items, ctx),
     [items, ctx.row, ctx.selectedRows]
   );
   if (resolved.length === 0) return null;
   return /* @__PURE__ */ jsxs19(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx31(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx31(Button, { variant: "ghost", size: "icon", "aria-label": triggerLabel, onClick: stopRowClick, children: /* @__PURE__ */ jsx31(MoreVertical, { className: "h-4 w-4", "aria-hidden": true }) }) }),
-    /* @__PURE__ */ jsx31(DropdownMenuContent, { align: "end", children: resolved.map((item) => /* @__PURE__ */ jsx31(
+    /* @__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,
       {
         danger: item.danger,
@@ -3053,18 +3158,123 @@ 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";
-import { Fragment as Fragment3, useEffect as useEffect12, useMemo as useMemo8, useRef as useRef13, useState as useState16 } from "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
 import {
   useEffect as useEffect9,
   useState as useState12
 } from "react";
-import { jsx as jsx32 } 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);
@@ -3077,7 +3287,7 @@ function AlwaysEditCell(props) {
     if (shouldOpenEnumNow) setEnumOpen(true);
   }, [shouldOpenEnumNow]);
   if (!isEditable(column, row)) {
-    return /* @__PURE__ */ jsx32("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);
@@ -3144,7 +3354,7 @@ function AlwaysEditCell(props) {
     handleModifierCapture(event);
     handleEnumOpenCapture(event);
   }
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx34(
     "fieldset",
     {
       disabled: ctx.disabled,
@@ -3153,7 +3363,7 @@ function AlwaysEditCell(props) {
       onPointerDownCapture: handlePointerDownCapture,
       onClickCapture: handleClickCapture,
       className: "contents",
-      children: column.type === "enum" && !column.renderEditCell ? /* @__PURE__ */ jsx32(
+      children: column.type === "enum" && !column.renderEditCell ? /* @__PURE__ */ jsx34(
         EnumEditor,
         {
           column,
@@ -3214,9 +3424,9 @@ function useStickyGroupHeaderTop(enabled) {
 }
 
 // src/hooks/useVisibleColumns.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 function useVisibleColumns(columns, columnVisibility) {
-  return useMemo5(
+  return useMemo6(
     () => columnVisibility ? columns.filter((column) => isColumnVisible(columnVisibility, column.id)) : columns,
     [columns, columnVisibility]
   );
@@ -3263,10 +3473,10 @@ function processClientData(data, state) {
 }
 
 // src/grid/useGridState.ts
-import { useCallback as useCallback4, useEffect as useEffect11, useMemo as useMemo7, useState as useState15 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect11, useMemo as useMemo8, useState as useState15 } from "react";
 
 // src/hooks/useDebouncedCallback.ts
-import { useEffect as useEffect10, useMemo as useMemo6, useRef as useRef12 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo7, useRef as useRef12 } from "react";
 function useDebouncedCallback(callback, delayMs) {
   const callbackRef = useRef12(callback);
   callbackRef.current = callback;
@@ -3276,7 +3486,7 @@ function useDebouncedCallback(callback, delayMs) {
       clearTimeout(timeoutRef.current);
     };
   }, []);
-  return useMemo6(() => {
+  return useMemo7(() => {
     return {
       run: (...args) => {
         clearTimeout(timeoutRef.current);
@@ -3329,7 +3539,7 @@ function useGridState(dataSource, initialState, externalState, showPagination =
     cancelDebouncedNotify();
     setState(externalState);
   }, [externalState, cancelDebouncedNotify]);
-  const filtersByColumn = useMemo7(() => {
+  const filtersByColumn = useMemo8(() => {
     const map = /* @__PURE__ */ new Map();
     for (const child of state.filter?.filters ?? []) {
       if ("operator" in child) map.set(fieldKey(child.field), child);
@@ -3393,7 +3603,7 @@ function useGridState(dataSource, initialState, externalState, showPagination =
 }
 
 // src/grid/DataGrid.tsx
-import { Fragment as Fragment4, jsx as jsx33, 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;
@@ -3444,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__ */ jsx33(
+      return cellEditingCtx.alwaysEdit ? /* @__PURE__ */ jsx35(
         AlwaysEditCell,
         {
           column,
@@ -3481,6 +3691,9 @@ function DataGrid({
   onSelectedIdsChange,
   testId,
   loading: loadingProp = false,
+  error,
+  onRetry,
+  statusLabels,
   groupBy,
   renderGroupHeader,
   defaultGroupsExpanded = true,
@@ -3489,8 +3702,10 @@ function DataGrid({
   zebra = true,
   showTotals = false,
   editing,
-  cellEditing
+  cellEditing,
+  filterLabels
 }) {
+  const resolvedFilterLabels = useFilterLabels(filterLabels);
   const hasCellEditing = Boolean(cellEditing) && !groupBy;
   const { state, filtersByColumn, setColumnFilter, toggleSort, setPage } = useGridState(
     dataSource,
@@ -3536,11 +3751,11 @@ function DataGrid({
   const atomicGestureRef = useRef13(void 0);
   const visibleColumns = useVisibleColumns(columns, columnVisibility);
   const serverRowCount = dataSource.mode === "server" ? dataSource.rowCount : void 0;
-  const { rows, rowCount } = useMemo8(() => {
+  const { rows, rowCount } = useMemo9(() => {
     if (dataSource.mode === "client") return processClientData(dataSource.data, state);
     return { rows: dataSource.data, rowCount: serverRowCount ?? 0 };
   }, [dataSource.mode, dataSource.data, serverRowCount, state]);
-  const selectedRows = useMemo8(
+  const selectedRows = useMemo9(
     () => rows.filter((row) => selectedIds.has(getRowId(row))),
     [rows, selectedIds, getRowId]
   );
@@ -3559,11 +3774,11 @@ function DataGrid({
     }
     updateSelectedIds(next);
   }
-  const tanstackColumns = useMemo8(
+  const tanstackColumns = useMemo9(
     () => toTanstackColumns(visibleColumns, editingCtxRef, cellEditingCtxRef, atomicGestureRef),
     [visibleColumns]
   );
-  const columnById = useMemo8(() => {
+  const columnById = useMemo9(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) map.set(column.id, column);
     return map;
@@ -3585,13 +3800,15 @@ 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);
   const showDetailColumn = Boolean(renderDetail);
   const totalColumnCount = visibleColumns.length + (showDetailColumn ? 1 : 0) + (showSelectionColumn ? 1 : 0) + (showRowActionsColumn ? 1 : 0);
   const hasFilterRow = visibleColumns.some((column) => isFilterable(column) && column.filterDisplay === "row");
-  const headerRuns = useMemo8(() => computeHeaderRuns(visibleColumns), [visibleColumns]);
+  const headerRuns = useMemo9(() => computeHeaderRuns(visibleColumns), [visibleColumns]);
   const hasHeaderGroups = visibleColumns.some((column) => column.headerGroup);
   const hasColumnSummary = visibleColumns.some((column) => column.summary);
   function renderFilterWidget(column) {
@@ -3602,11 +3819,11 @@ function DataGrid({
   const columnSize = (columnId) => table.getColumn(columnId)?.getSize() ?? DEFAULT_COLUMN_SIZE;
   const leadingStructuralWidth = (showDetailColumn ? DETAIL_COLUMN_WIDTH : 0) + (showSelectionColumn ? SELECTION_COLUMN_WIDTH : 0);
   const trailingStructuralWidth = showRowActionsColumn ? ROW_ACTIONS_COLUMN_WIDTH : 0;
-  const leftPinnedOffsets = useMemo8(
+  const leftPinnedOffsets = useMemo9(
     () => pinnedOffsets(visibleColumns, "left", columnSize, leadingStructuralWidth),
     [visibleColumns, columnSizing, leadingStructuralWidth]
   );
-  const rightPinnedOffsets = useMemo8(
+  const rightPinnedOffsets = useMemo9(
     () => pinnedOffsets(visibleColumns, "right", columnSize, trailingStructuralWidth),
     [visibleColumns, columnSizing, trailingStructuralWidth]
   );
@@ -3656,7 +3873,7 @@ function DataGrid({
       style: pinnedProps?.style
     };
   }
-  const bodyCellPropsByColumn = useMemo8(() => {
+  const bodyCellPropsByColumn = useMemo9(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) map.set(column.id, bodyCellClassAndStyle(column));
     return map;
@@ -3672,7 +3889,7 @@ function DataGrid({
     );
     return { className, style: pinnedProps.style };
   }
-  const leafHeaderCellPropsByColumn = useMemo8(() => {
+  const leafHeaderCellPropsByColumn = useMemo9(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) {
       map.set(
@@ -3682,7 +3899,7 @@ function DataGrid({
     }
     return map;
   }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
-  const filterHeaderCellPropsByColumn = useMemo8(() => {
+  const filterHeaderCellPropsByColumn = useMemo9(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) {
       map.set(column.id, headerCellClassAndStyle(column, "border-b border-border p-2 align-top font-normal"));
@@ -3702,13 +3919,13 @@ function DataGrid({
       `[DataGrid] showPagination={false} but only ${tableRows.length} of ${rowCount} row(s) are rendered, with no pagination UI to reach the rest. Pass an explicit pageSize (via initialState or gridState) that covers every row you want visible, or a dataSource that returns all of them.`
     );
   }, [showPagination, gridState, initialState?.pageSize, tableRows.length, rowCount]);
-  const groupedBuckets = useMemo8(
+  const groupedBuckets = useMemo9(
     () => groupBy ? groupRows(tableRows, (row) => groupBy(row.original)) : void 0,
     [tableRows, groupBy]
   );
   const { theadRef, groupHeaderTop } = useStickyGroupHeaderTop(Boolean(groupBy));
   const shouldVirtualize = Boolean(virtualize) && tableRows.length > (virtualize?.threshold ?? 100);
-  const flatItems = useMemo8(() => {
+  const flatItems = useMemo9(() => {
     if (!shouldVirtualize) return [];
     if (!groupedBuckets) return tableRows.map((row) => ({ kind: "row", row }));
     const items = [];
@@ -3745,15 +3962,15 @@ function DataGrid({
     notifiedForLengthRef.current = tableRows.length;
     virtualize.onEndReached();
   }, [lastVisibleIndex, flatItems.length, tableRows.length, virtualize]);
-  const cellEditingRowIds = useMemo8(
+  const cellEditingRowIds = useMemo9(
     () => hasCellEditing ? tableRows.map((row) => row.id) : EMPTY_ID_ARRAY,
     [hasCellEditing, tableRows]
   );
-  const cellEditingColumnIds = useMemo8(
+  const cellEditingColumnIds = useMemo9(
     () => hasCellEditing ? visibleColumns.map((column) => column.id) : EMPTY_ID_ARRAY,
     [hasCellEditing, visibleColumns]
   );
-  const cellEditingRowIndex = useMemo8(() => buildIndexMap(cellEditingRowIds), [cellEditingRowIds]);
+  const cellEditingRowIndex = useMemo9(() => buildIndexMap(cellEditingRowIds), [cellEditingRowIds]);
   const cellSelection = useCellSelection({
     rowIds: cellEditingRowIds,
     columnIds: cellEditingColumnIds,
@@ -3992,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__ */ jsx33(
+            showDetailColumn && /* @__PURE__ */ jsx35(
               "td",
               {
                 className: isOddRow ? detailCellProps.classNameOdd : detailCellProps.className,
                 style: detailCellProps.style,
-                children: /* @__PURE__ */ jsx33(
+                children: /* @__PURE__ */ jsx35(
                   Button,
                   {
                     type: "button",
@@ -4017,8 +4234,8 @@ function DataGrid({
                       stopRowClick(event);
                       toggleRowExpanded(row.id);
                     },
-                    children: /* @__PURE__ */ jsx33(
-                      ChevronRight,
+                    children: /* @__PURE__ */ jsx35(
+                      ChevronRightIcon2,
                       {
                         className: `h-4 w-4 transition-transform${isExpanded ? " rotate-90" : ""}`,
                         "aria-hidden": true
@@ -4028,12 +4245,12 @@ function DataGrid({
                 )
               }
             ),
-            showSelectionColumn && /* @__PURE__ */ jsx33(
+            showSelectionColumn && /* @__PURE__ */ jsx35(
               "td",
               {
                 className: isOddRow ? selectionCellProps.classNameOdd : selectionCellProps.className,
                 style: selectionCellProps.style,
-                children: /* @__PURE__ */ jsx33(
+                children: /* @__PURE__ */ jsx35(
                   "input",
                   {
                     type: "checkbox",
@@ -4047,7 +4264,7 @@ function DataGrid({
             ),
             row.getAllCells().map((cell) => {
               const cellProps = bodyCellPropsByColumn.get(cell.column.id);
-              return /* @__PURE__ */ jsx33(
+              return /* @__PURE__ */ jsx35(
                 "td",
                 {
                   style: cellProps?.style,
@@ -4059,24 +4276,24 @@ function DataGrid({
                 cell.id
               );
             }),
-            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx33(
+            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx35(
               "td",
               {
                 className: isOddRow ? rowActionsCellProps.classNameOdd : rowActionsCellProps.className,
                 style: rowActionsCellProps.style,
-                children: /* @__PURE__ */ jsx33(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__ */ jsx33("tr", { "data-testid": `${rowTestId}-detail`, children: /* @__PURE__ */ jsx33("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__ */ jsx33(
+      return /* @__PURE__ */ jsx35(
         "td",
         {
           className: cn(cellProps?.className, bgClassName, "font-medium", alignClassName(column)),
@@ -4094,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__ */ jsx33("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__ */ jsx33("td", { className: fillerClass, "aria-hidden": true })
+      showRowActionsColumn && /* @__PURE__ */ jsx35("td", { className: fillerClass, "aria-hidden": true })
     ] });
   }
   function renderTotalsFooter() {
@@ -4105,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__ */ jsx33("tfoot", { children: /* @__PURE__ */ jsxs20("tr", { "data-testid": "totals-row", className: "divide-x divide-border", children: [
-      leadingSpan > 0 && /* @__PURE__ */ jsx33("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__ */ jsx33(
+        return /* @__PURE__ */ jsx35(
           "td",
           {
             className: cn(
@@ -4124,19 +4341,19 @@ function DataGrid({
           column.id
         );
       }),
-      showRowActionsColumn && /* @__PURE__ */ jsx33("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__ */ jsx33("tr", { "data-testid": `group-header-${key}`, children: /* @__PURE__ */ jsx33(
+    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",
@@ -4144,8 +4361,8 @@ function DataGrid({
               onClick: () => toggleGroupExpanded(key),
               "aria-expanded": expanded,
               children: [
-                /* @__PURE__ */ jsx33(
-                  ChevronRight,
+                /* @__PURE__ */ jsx35(
+                  ChevronRightIcon2,
                   {
                     className: `h-4 w-4 shrink-0 transition-transform${expanded ? " rotate-90" : ""}`,
                     "aria-hidden": true
@@ -4163,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}`);
@@ -4172,7 +4389,7 @@ function DataGrid({
     if (item.kind === "header") return renderGroupHeaderTbody(item.key, item.rows, measureRef, index);
     return renderRow(item.row, measureRef, index);
   }
-  return (
+  const grid = (
     // `h-full`/`min-h-0` here and on the two wrappers below are no-ops unless
     // a consumer itself gives <DataGrid> a bounded height (e.g. wraps it in
     // its own `flex-1 min-h-0` container) -- percentage heights fall back to
@@ -4185,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__ */ jsx33(
+    /* @__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,
@@ -4196,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__ */ jsx33(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__ */ jsx33(
-          "div",
-          {
-            "data-testid": "datagrid-loading-overlay",
-            className: "absolute inset-0 z-30 flex items-center justify-center bg-background/60",
-            children: /* @__PURE__ */ jsx33(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,
@@ -4226,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) {
@@ -4239,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,
@@ -4248,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",
@@ -4259,8 +4473,8 @@ function DataGrid({
                                   onClick: (event) => toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
                                   children: [
                                     headerContent,
-                                    sortEntry?.dir === "asc" && /* @__PURE__ */ jsx33(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
-                                    sortEntry?.dir === "desc" && /* @__PURE__ */ jsx33(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 })
                                   ]
                                 }
                               ) : (
@@ -4269,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__ */ jsx33("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__ */ jsx33(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx33(
+                              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": `Filter ${column.header}`,
-                                    children: /* @__PURE__ */ jsx33(
+                                    "aria-label": resolvedFilterLabels.filterAriaLabel(column.header),
+                                    children: /* @__PURE__ */ jsx35(
                                       FunnelIcon7,
                                       {
                                         className: cn(
@@ -4291,10 +4505,10 @@ function DataGrid({
                                     )
                                   }
                                 ) }),
-                                /* @__PURE__ */ jsx33(PopoverContent, { className: "w-auto", children: renderFilterWidget(column) })
+                                /* @__PURE__ */ jsx35(PopoverContent, { className: "w-auto max-w-[var(--radix-popover-content-available-width)]", children: renderFilterWidget(column) })
                               ] })
                             ] }),
-                            enableColumnResizing && /* @__PURE__ */ jsx33(
+                            enableColumnResizing && /* @__PURE__ */ jsx35(
                               "div",
                               {
                                 "data-testid": `resize-handle-${column.id}`,
@@ -4319,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__ */ jsx33(
+                    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,
@@ -4330,13 +4544,13 @@ function DataGrid({
                             "aria-hidden": true
                           }
                         ),
-                        showSelectionColumn && /* @__PURE__ */ jsx33(
+                        showSelectionColumn && /* @__PURE__ */ jsx35(
                           "th",
                           {
                             rowSpan: 2,
                             className: selectionHeaderCellProps.className,
                             style: selectionHeaderCellProps.style,
-                            children: /* @__PURE__ */ jsx33(
+                            children: /* @__PURE__ */ jsx35(
                               "input",
                               {
                                 type: "checkbox",
@@ -4348,7 +4562,7 @@ function DataGrid({
                           }
                         ),
                         headerRuns.map(
-                          (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx33(
+                          (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx35(
                             "th",
                             {
                               colSpan: run.columns.length,
@@ -4358,7 +4572,7 @@ function DataGrid({
                             `group-${run.label}-${run.columns[0].id}`
                           )
                         ),
-                        showRowActionsColumn && /* @__PURE__ */ jsx33(
+                        showRowActionsColumn && /* @__PURE__ */ jsx35(
                           "th",
                           {
                             rowSpan: 2,
@@ -4368,8 +4582,8 @@ function DataGrid({
                           }
                         )
                       ] }, `${headerGroup.id}-groups`),
-                      /* @__PURE__ */ jsxs20("tr", { className: "divide-x divide-border", children: [
-                        !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx33(
+                      /* @__PURE__ */ jsxs21("tr", { className: "divide-x divide-border", children: [
+                        !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx35(
                           "th",
                           {
                             className: detailHeaderCellProps.className,
@@ -4377,12 +4591,12 @@ function DataGrid({
                             "aria-hidden": true
                           }
                         ),
-                        !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx33(
+                        !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx35(
                           "th",
                           {
                             className: selectionHeaderCellProps.className,
                             style: selectionHeaderCellProps.style,
-                            children: /* @__PURE__ */ jsx33(
+                            children: /* @__PURE__ */ jsx35(
                               "input",
                               {
                                 type: "checkbox",
@@ -4398,7 +4612,7 @@ function DataGrid({
                           if (!column || hasHeaderGroups && !column.headerGroup) return null;
                           return renderLeafHeaderCell(column);
                         }),
-                        !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx33(
+                        !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx35(
                           "th",
                           {
                             className: rowActionsHeaderCellProps.className,
@@ -4409,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__ */ jsx33("th", { className: detailHeaderCellProps.className, style: detailHeaderCellProps.style }),
-                    showSelectionColumn && /* @__PURE__ */ jsx33(
+                  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,
@@ -4420,9 +4634,9 @@ function DataGrid({
                     ),
                     visibleColumns.map((column) => {
                       const cellProps = filterHeaderCellPropsByColumn.get(column.id);
-                      return /* @__PURE__ */ jsx33("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__ */ jsx33(
+                    showRowActionsColumn && /* @__PURE__ */ jsx35(
                       "th",
                       {
                         className: rowActionsHeaderCellProps.className,
@@ -4431,8 +4645,8 @@ function DataGrid({
                     )
                   ] })
                 ] }),
-                rows.length === 0 ? /* @__PURE__ */ jsx33("tbody", { children: /* @__PURE__ */ jsx33("tr", { children: /* @__PURE__ */ jsx33("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs20(Fragment4, { children: [
-                  paddingTop > 0 && /* @__PURE__ */ jsx33("tbody", { children: /* @__PURE__ */ jsx33("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx33("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],
@@ -4440,11 +4654,11 @@ function DataGrid({
                       (el) => virtualizer.measureElement(el)
                     )
                   ),
-                  paddingBottom > 0 && /* @__PURE__ */ jsx33("tbody", { children: /* @__PURE__ */ jsx33("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx33("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__ */ jsx33(
+              hasCellEditing && /* @__PURE__ */ jsx35(
                 SelectionOverlay,
                 {
                   containerRef: scrollRef,
@@ -4457,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 ",
@@ -4469,8 +4683,8 @@ function DataGrid({
           rowCount === 1 ? "" : "s",
           ")"
         ] }),
-        /* @__PURE__ */ jsxs20("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsxs21("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx35(
             Button,
             {
               variant: "outline",
@@ -4480,7 +4694,7 @@ function DataGrid({
               children: "Previous"
             }
           ),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx35(
             Button,
             {
               variant: "outline",
@@ -4494,12 +4708,17 @@ function DataGrid({
       ] })
     ] })
   );
+  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 { Fragment as Fragment5, useEffect as useEffect13, useMemo as useMemo10, useRef as useRef14 } from "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
 function flattenTree(roots, accessors, expanded, childrenOverride) {
@@ -4544,7 +4763,7 @@ function computeSelectionStates(roots, accessors, childrenOverride, selectedIds)
 }
 
 // src/tree/useTreeState.ts
-import { useCallback as useCallback5, useMemo as useMemo9, useState as useState17 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo10, useState as useState17 } from "react";
 function useTreeState({
   data,
   getRowId,
@@ -4582,7 +4801,7 @@ function useTreeState({
   );
   const [loadingIds, setLoadingIds] = useState17(/* @__PURE__ */ new Set());
   const [errorIds, setErrorIds] = useState17(/* @__PURE__ */ new Map());
-  const resolveHasChildren = useMemo9(
+  const resolveHasChildren = useMemo10(
     () => hasChildren ?? ((row) => (getChildren(row)?.length ?? 0) > 0),
     [hasChildren, getChildren]
   );
@@ -4661,7 +4880,7 @@ function useTreeState({
 }
 
 // src/tree/TreeDataGrid.tsx
-import { Fragment as Fragment6, jsx as jsx34, 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) {
@@ -4673,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__ */ jsx34(
+  return /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1", style: { paddingLeft: flatRow.depth * indentSize }, children: [
+    flatRow.hasChildren ? /* @__PURE__ */ jsx36(
       "button",
       {
         type: "button",
@@ -4690,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__ */ jsx34(Loader22, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": "true" }) : flatRow.isExpanded ? /* @__PURE__ */ jsx34(ChevronDown2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx34(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__ */ jsx34("span", { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx34("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__ */ jsx34(AlertCircle, { className: "h-3 w-3", "aria-hidden": "true" }),
-      "Failed to load.",
-      /* @__PURE__ */ jsx34("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,
@@ -4737,7 +4964,9 @@ function TreeDataGrid({
   showTotals = false,
   editing
 }) {
-  const accessors = useMemo10(
+  const labels = resolveStatusLabels(statusLabels);
+  const hasError = toErrorInfo(error) !== void 0;
+  const accessors = useMemo11(
     () => ({ getRowId, getChildren, hasChildren }),
     [getRowId, getChildren, hasChildren]
   );
@@ -4765,11 +4994,11 @@ function TreeDataGrid({
     controlledExpandedGroups,
     onExpandedGroupsChange
   );
-  const flatRows = useMemo10(
+  const flatRows = useMemo11(
     () => groupBy ? [] : flattenTree(data, accessors, expanded, childrenMap),
     [groupBy, data, accessors, expanded, childrenMap]
   );
-  const groupedBuckets = useMemo10(
+  const groupedBuckets = useMemo11(
     () => groupBy ? groupRows(data, groupBy).map((bucket) => ({
       key: bucket.key,
       roots: bucket.items,
@@ -4777,7 +5006,7 @@ function TreeDataGrid({
     })) : void 0,
     [groupBy, data, accessors, expanded, childrenMap]
   );
-  const groupedRender = useMemo10(() => {
+  const groupedRender = useMemo11(() => {
     if (!groupedBuckets) return void 0;
     const startIndexByBucket = /* @__PURE__ */ new Map();
     const rows = [];
@@ -4794,7 +5023,7 @@ function TreeDataGrid({
   const showSelectionColumn = controlledSelectedIds !== void 0;
   const totalColumnCount = visibleColumns.length + (showRowActionsColumn ? 1 : 0) + (showSelectionColumn ? 1 : 0);
   const { theadRef, groupHeaderTop } = useStickyGroupHeaderTop(Boolean(groupBy));
-  const selectionStates = useMemo10(
+  const selectionStates = useMemo11(
     () => showSelectionColumn ? computeSelectionStates(data, accessors, childrenMap, controlledSelectedIds ?? EMPTY_SELECTED_IDS) : void 0,
     [showSelectionColumn, data, accessors, childrenMap, controlledSelectedIds]
   );
@@ -4810,7 +5039,7 @@ function TreeDataGrid({
     else next.add(id);
     onSelectedIdsChange?.(next);
   }
-  const selectableFlatRows = useMemo10(
+  const selectableFlatRows = useMemo11(
     () => allFlatRows.filter((flatRow) => !(isRowSelectionDisabled?.(flatRow.row) ?? false)),
     [allFlatRows, isRowSelectionDisabled]
   );
@@ -4824,14 +5053,14 @@ function TreeDataGrid({
     }
     onSelectedIdsChange?.(next);
   }
-  const bodyTdClassByColumn = useMemo10(() => {
+  const bodyTdClassByColumn = useMemo11(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) map.set(column.id, `p-2 ${alignClassName(column)}`);
     return map;
   }, [visibleColumns]);
   const hasColumnSummary = visibleColumns.some((column) => column.summary);
   function renderGroupSummaryCells(rows) {
-    return visibleColumns.map((column) => /* @__PURE__ */ jsx34("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;
@@ -4846,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,
@@ -4859,9 +5088,9 @@ function TreeDataGrid({
           isOddRow && "bg-foreground/5"
         ) : `border-b border-border divide-x divide-border${isOddRow ? " bg-foreground/5" : ""}`,
         children: [
-          showSelectionColumn && /* @__PURE__ */ jsx34("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__ */ jsx34(
+            return /* @__PURE__ */ jsx36(
               Checkbox,
               {
                 "aria-label": `Select row ${flatRow.id}`,
@@ -4872,7 +5101,7 @@ function TreeDataGrid({
               }
             );
           })() }),
-          visibleColumns.map((column) => /* @__PURE__ */ jsx34("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx34(
+          visibleColumns.map((column) => /* @__PURE__ */ jsx36("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx36(
             TreeCell,
             {
               flatRow,
@@ -4880,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__ */ jsx34("td", { className: "p-2", children: /* @__PURE__ */ jsx34(
+          showRowActionsColumn && rowActions && /* @__PURE__ */ jsx36("td", { className: "p-2", children: /* @__PURE__ */ jsx36(
             ActionsMenu,
             {
               items: rowActions,
@@ -4901,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__ */ jsx34(
+  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,
@@ -4913,21 +5144,21 @@ function TreeDataGrid({
         testIdPrefix: "tree-datagrid"
       }
     ),
-    /* @__PURE__ */ jsx34(
+    /* @__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__ */ jsx34("thead", { ref: theadRef, children: /* @__PURE__ */ jsxs21("tr", { className: "divide-x divide-border", children: [
-            showSelectionColumn && /* @__PURE__ */ jsx34(
+        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__ */ jsx34(
+                children: /* @__PURE__ */ jsx36(
                   Checkbox,
                   {
                     "aria-label": "Select all visible rows",
@@ -4937,7 +5168,7 @@ function TreeDataGrid({
                 )
               }
             ),
-            visibleColumns.map((column) => /* @__PURE__ */ jsx34(
+            visibleColumns.map((column) => /* @__PURE__ */ jsx36(
               "th",
               {
                 style: column.width ? { width: column.width } : void 0,
@@ -4949,15 +5180,12 @@ function TreeDataGrid({
               },
               column.id
             )),
-            showRowActionsColumn && /* @__PURE__ */ jsx34("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__ */ jsx34("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx34("tr", { children: /* @__PURE__ */ jsx34("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__ */ jsx34(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__ */ jsx34("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx34(
+            return /* @__PURE__ */ jsxs22(Fragment5, { children: [
+              /* @__PURE__ */ jsx36("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx36(
                 "td",
                 {
                   colSpan: totalColumnCount,
@@ -4966,7 +5194,7 @@ function TreeDataGrid({
                     zebra ? "bg-muted" : "bg-background"
                   ),
                   style: { top: groupHeaderTop },
-                  children: /* @__PURE__ */ jsxs21(
+                  children: /* @__PURE__ */ jsxs22(
                     "button",
                     {
                       type: "button",
@@ -4974,8 +5202,8 @@ function TreeDataGrid({
                       onClick: () => toggleGroupExpanded(bucket.key),
                       "aria-expanded": groupExpanded,
                       children: [
-                        /* @__PURE__ */ jsx34(
-                          ChevronRight2,
+                        /* @__PURE__ */ jsx36(
+                          ChevronRightIcon3,
                           {
                             className: `h-4 w-4 shrink-0 transition-transform${groupExpanded ? " rotate-90" : ""}`,
                             "aria-hidden": true
@@ -4987,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__ */ jsx34(
+                    showSelectionColumn && /* @__PURE__ */ jsx36(
                       "td",
                       {
                         className: cn("p-2", zebra ? "bg-muted" : "bg-background"),
@@ -5001,7 +5229,7 @@ function TreeDataGrid({
                       }
                     ),
                     renderGroupSummaryCells(bucket.roots),
-                    showRowActionsColumn && /* @__PURE__ */ jsx34("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 })
                   ]
                 }
               ),
@@ -5010,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__ */ jsx34("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx34("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__ */ jsx34("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx34(
+            paddingBottom > 0 && /* @__PURE__ */ jsx36("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx36(
               "td",
               {
                 colSpan: totalColumnCount,
@@ -5030,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__ */ jsx34("tfoot", { children: /* @__PURE__ */ jsxs21("tr", { "data-testid": "totals-row", className: "divide-x divide-border", children: [
-            showSelectionColumn && /* @__PURE__ */ jsx34(
+          /* @__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__ */ jsx34(
+            visibleColumns.map((column) => /* @__PURE__ */ jsx36(
               "td",
               {
                 style: column.width ? { width: column.width } : void 0,
@@ -5050,7 +5278,7 @@ function TreeDataGrid({
               },
               column.id
             )),
-            showRowActionsColumn && /* @__PURE__ */ jsx34("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 })
           ] }) })
         ] })
       }
@@ -5069,6 +5297,7 @@ export {
   EditingBar,
   EnumEditor,
   EnumFilter,
+  FilterLabelsProvider,
   MultilineStringEditor,
   NumberComparisonFilter,
   NumberEditor,
@@ -5089,7 +5318,9 @@ export {
   computeFillChanges,
   countVisible,
   defaultAlign,
+  defaultFilterLabels,
   defaultFormat,
+  defaultGridStatusLabels,
   editErrorId,
   evaluateFilter,
   extendRangeForFill,
@@ -5105,6 +5336,7 @@ export {
   isFilterDescriptor,
   isFilterable,
   isSortable,
+  mergeFilterLabels,
   moveColumnBefore,
   normalizeRange,
   orderStorageKeyFor,
@@ -5118,10 +5350,12 @@ export {
   resolveMenuItems,
   storageKeyFor,
   toDate,
+  toErrorInfo,
   useCellEditingState,
   useCellSelection,
   useDebouncedCallback,
   useEditingState,
+  useFilterLabels,
   useGridState,
   useGroupExpansion,
   useStickyGroupHeaderTop,