@bmsuisse/datagrid 0.23.0

package/dist/index.js

@@ -0,0 +1,2494 @@
+// src/filter/types.ts
+function isFilterDescriptor(node) {
+  return "operator" in node;
+}
+function isCompositeFilterDescriptor(node) {
+  return "logic" in node;
+}
+var UNARY_OPERATORS = /* @__PURE__ */ new Set([
+  "isEmpty",
+  "isNotEmpty",
+  "isNull",
+  "isNotNull"
+]);
+function fieldKey(field) {
+  return Array.isArray(field) ? field.join(".") : field;
+}
+
+// src/filter/evaluate.ts
+import { parseISO } from "date-fns";
+function getFieldValue(row, field) {
+  const segments = fieldKey(field).split(".");
+  let current = row;
+  for (const segment of segments) {
+    if (current === null || typeof current !== "object") return void 0;
+    current = current[segment];
+  }
+  return current;
+}
+function isNullish(value) {
+  return value === null || value === void 0;
+}
+function isEmptyValue(value) {
+  if (isNullish(value)) return true;
+  if (typeof value === "string") return value.length === 0;
+  if (Array.isArray(value)) return value.length === 0;
+  return false;
+}
+function toEpochMs(value) {
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value.getTime();
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    const parsed = parseISO(value);
+    return Number.isNaN(parsed.getTime()) ? null : parsed.getTime();
+  }
+  return null;
+}
+function asFiniteNumber(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (value.trim() === "") return null;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+function normalizeForCompare(value) {
+  if (isNullish(value)) return null;
+  if (typeof value === "number") return value;
+  if (typeof value === "boolean") return value ? 1 : 0;
+  return String(value);
+}
+function compareValues(a, b) {
+  if (a instanceof Date || b instanceof Date) {
+    const ta = toEpochMs(a);
+    const tb = toEpochMs(b);
+    return ta === null || tb === null ? null : ta - tb;
+  }
+  const na = normalizeForCompare(a);
+  const nb = normalizeForCompare(b);
+  if (na === null || nb === null) return null;
+  const numA = asFiniteNumber(na);
+  const numB = asFiniteNumber(nb);
+  if (numA !== null && numB !== null) return numA - numB;
+  const sa = String(na);
+  const sb = String(nb);
+  if (sa < sb) return -1;
+  if (sa > sb) return 1;
+  return 0;
+}
+function valuesEqual(rowValue, target, ignoreCase) {
+  if (ignoreCase && typeof rowValue === "string" && typeof target === "string") {
+    return rowValue.toLowerCase() === target.toLowerCase();
+  }
+  if (rowValue === target) return true;
+  return compareValues(rowValue, target) === 0;
+}
+function stringMatch(rowValue, needle, ignoreCase, test) {
+  if (typeof rowValue !== "string" || typeof needle !== "string") return false;
+  const haystack = ignoreCase ? rowValue.toLowerCase() : rowValue;
+  const target = ignoreCase ? needle.toLowerCase() : needle;
+  return test(haystack, target);
+}
+function isTwoElementArray(value) {
+  return Array.isArray(value) && value.length === 2;
+}
+function evaluateLeaf(row, filter) {
+  const rowValue = getFieldValue(row, filter.field);
+  const { operator, value, ignoreCase } = filter;
+  switch (operator) {
+    case "isNull":
+      return isNullish(rowValue);
+    case "isNotNull":
+      return !isNullish(rowValue);
+    case "isEmpty":
+      return isEmptyValue(rowValue);
+    case "isNotEmpty":
+      return !isEmptyValue(rowValue);
+    case "eq":
+      return !isNullish(rowValue) && valuesEqual(rowValue, value, ignoreCase);
+    case "neq":
+      return !isNullish(rowValue) && !valuesEqual(rowValue, value, ignoreCase);
+    case "lt":
+    case "lte":
+    case "gt":
+    case "gte": {
+      const cmp = compareValues(rowValue, value);
+      if (cmp === null) return false;
+      if (operator === "lt") return cmp < 0;
+      if (operator === "lte") return cmp <= 0;
+      if (operator === "gt") return cmp > 0;
+      return cmp >= 0;
+    }
+    case "between": {
+      if (isNullish(rowValue) || !isTwoElementArray(value)) return false;
+      const [boundA, boundB] = value;
+      const cmpA = compareValues(rowValue, boundA);
+      const cmpB = compareValues(rowValue, boundB);
+      if (cmpA === null || cmpB === null) return false;
+      return cmpA >= 0 && cmpB <= 0 || cmpA <= 0 && cmpB >= 0;
+    }
+    case "in":
+      return !isNullish(rowValue) && Array.isArray(value) && value.some((candidate) => valuesEqual(rowValue, candidate, ignoreCase));
+    case "notIn":
+      return !isNullish(rowValue) && Array.isArray(value) && !value.some((candidate) => valuesEqual(rowValue, candidate, ignoreCase));
+    case "contains":
+      return stringMatch(rowValue, value, ignoreCase, (h, n) => h.includes(n));
+    case "doesNotContain":
+      return !isNullish(rowValue) && !stringMatch(rowValue, value, ignoreCase, (h, n) => h.includes(n));
+    case "startsWith":
+      return stringMatch(rowValue, value, ignoreCase, (h, n) => h.startsWith(n));
+    case "endsWith":
+      return stringMatch(rowValue, value, ignoreCase, (h, n) => h.endsWith(n));
+  }
+}
+function evaluateFilter(row, filter) {
+  if (!filter) return true;
+  if (isCompositeFilterDescriptor(filter)) {
+    return filter.logic === "and" ? filter.filters.every((child) => evaluateFilter(row, child)) : filter.filters.some((child) => evaluateFilter(row, child));
+  }
+  return evaluateLeaf(row, filter);
+}
+
+// src/filter/BooleanFilter.tsx
+import { FunnelIcon } from "@heroicons/react/24/outline";
+
+// src/components/ui/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function stopRowClick(event) {
+  event.stopPropagation();
+}
+
+// src/components/ui/button.tsx
+import { jsx } 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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+      },
+      size: {
+        default: "h-9 px-3",
+        sm: "h-8 px-2 text-xs",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+  }
+);
+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";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = forwardRef2(({ className, align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx2(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = "PopoverContent";
+
+// src/components/ui/select.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown } from "lucide-react";
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = forwardRef3(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx3(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx3(ChevronDown, { 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(
+  SelectPrimitive.Content,
+  {
+    ref,
+    position,
+    className: cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+      position === "popper" && "translate-y-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx3(SelectPrimitive.Viewport, { className: "p-1", children })
+  }
+) }));
+SelectContent.displayName = "SelectContent";
+var SelectItem = forwardRef3(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...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 })
+    ]
+  }
+));
+SelectItem.displayName = "SelectItem";
+
+// src/filter/BooleanFilter.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var BOOLEAN_CHOICES = [
+  { value: "all", label: "All" },
+  { value: "yes", label: "Yes" },
+  { value: "no", label: "No" }
+];
+function choiceOf(value) {
+  if (!value) return "all";
+  if (value.operator === "eq") {
+    if (value.value === true) return "yes";
+    if (value.value === false) return "no";
+    return "all";
+  }
+  if (value.operator === "neq") {
+    if (value.value === true) return "no";
+    if (value.value === false) return "yes";
+    return "all";
+  }
+  return "all";
+}
+function BooleanFilter({
+  column,
+  value,
+  onChange,
+  bare = false
+}) {
+  const choice = choiceOf(value);
+  const isFiltered = choice !== "all";
+  const summary = choice === "yes" ? "Yes" : choice === "no" ? "No" : "";
+  function emit(next) {
+    if (next === "all") {
+      onChange(void 0);
+      return;
+    }
+    onChange({ field: column.id, operator: "eq", value: next === "yes" });
+  }
+  const panel = /* @__PURE__ */ jsxs2(
+    Select,
+    {
+      value: choice,
+      onValueChange: (next) => {
+        const match = BOOLEAN_CHOICES.find((option) => option.value === next)?.value;
+        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)) })
+      ]
+    }
+  );
+  if (bare) {
+    return /* @__PURE__ */ jsx4("div", { "data-testid": `filter-${column.id}`, children: panel });
+  }
+  return /* @__PURE__ */ jsxs2(Popover, { children: [
+    /* @__PURE__ */ jsx4(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}`,
+        "data-testid": `filter-${column.id}`,
+        children: [
+          /* @__PURE__ */ jsx4(FunnelIcon, { className: "h-3.5 w-3.5 shrink-0 opacity-70", "aria-hidden": true }),
+          isFiltered && /* @__PURE__ */ jsx4("span", { className: "truncate", children: summary })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx4(PopoverContent, { className: "w-40 p-2", children: panel })
+  ] });
+}
+
+// src/filter/DateRangeFilter.tsx
+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 { DayPicker } from "react-day-picker";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Calendar({ className, ...props }) {
+  return /* @__PURE__ */ jsx5(DayPicker, { className: cn("p-3", className), ...props });
+}
+
+// src/filter/DateRangeFilter.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var PRESETS = [
+  {
+    key: "today",
+    label: "Today",
+    range: (today) => ({ from: startOfDay(today), to: endOfDay(today) })
+  },
+  {
+    key: "last7",
+    label: "Last 7 days",
+    range: (today) => ({ from: startOfDay(subDays(today, 6)), to: endOfDay(today) })
+  },
+  {
+    key: "thisMonth",
+    label: "This month",
+    range: (today) => ({ from: startOfMonth(today), to: endOfMonth(today) })
+  }
+];
+function isStringPair(value) {
+  return Array.isArray(value) && value.length === 2 && typeof value[0] === "string" && typeof value[1] === "string";
+}
+function parseBound(value) {
+  return parseISO2(value);
+}
+function rangeOf(value) {
+  if (!value || value.operator !== "between" || !isStringPair(value.value)) return void 0;
+  const from = parseBound(value.value[0]);
+  const to = parseBound(value.value[1]);
+  if (Number.isNaN(from.getTime()) || Number.isNaN(to.getTime())) return void 0;
+  return { from, to };
+}
+function isoOf(date, columnType) {
+  return columnType === "datetime" ? date.toISOString() : format(date, "yyyy-MM-dd");
+}
+function DateRangeFilter({
+  column,
+  value,
+  onChange,
+  today = /* @__PURE__ */ new Date(),
+  bare = false
+}) {
+  const range = rangeOf(value);
+  function emit(next) {
+    if (!next?.from || !next.to) {
+      onChange(void 0);
+      return;
+    }
+    const to = column.type === "datetime" ? endOfDay(next.to) : next.to;
+    onChange({
+      field: column.id,
+      operator: "between",
+      value: [isoOf(next.from, column.type), isoOf(to, column.type)]
+    });
+  }
+  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 panel = /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap gap-2", children: [
+      PRESETS.map((preset) => /* @__PURE__ */ jsx6(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: () => emit(preset.range(today)),
+          children: preset.label
+        },
+        preset.key
+      )),
+      /* @__PURE__ */ jsx6(Button, { type: "button", variant: "outline", size: "sm", onClick: () => emit(void 0), children: "Custom" })
+    ] }),
+    /* @__PURE__ */ jsx6(Calendar, { mode: "range", selected: range, onSelect: emit, numberOfMonths: 1 })
+  ] });
+  if (bare) {
+    return /* @__PURE__ */ jsx6("div", { "data-testid": `filter-${column.id}`, children: panel });
+  }
+  return /* @__PURE__ */ jsxs3(Popover, { children: [
+    /* @__PURE__ */ jsx6(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}`,
+        "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__ */ jsx6(PopoverContent, { className: "w-auto", children: panel })
+  ] });
+}
+
+// src/filter/EnumFilter.tsx
+import { FunnelIcon as FunnelIcon2 } from "@heroicons/react/24/outline";
+import { useMemo, 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 { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Checkbox = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      // A fixed 3px radius, not the theme's scaled `rounded-sm` — that
+      // token is meant for buttons/cards sized well above 16px, and on a
+      // box this small it reads as a circle (radio button) instead of a
+      // checkbox once an app's `--radius` grows past shadcn's default.
+      "peer h-4 w-4 shrink-0 rounded-[3px] border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
+      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" }) })
+  }
+));
+Checkbox.displayName = "Checkbox";
+
+// src/components/ui/input.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Input = forwardRef5(({ className, type, ...props }, ref) => {
+  return /* @__PURE__ */ jsx8(
+    "input",
+    {
+      type,
+      className: cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Input.displayName = "Input";
+
+// src/filter/EnumFilter.tsx
+import { jsx as jsx9, 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");
+}
+function toggle(selected, optionValue) {
+  return selected.includes(optionValue) ? selected.filter((v) => v !== optionValue) : [...selected, optionValue];
+}
+function EnumFilter({
+  column,
+  value,
+  onChange,
+  bare = false
+}) {
+  const [search, setSearch] = useState("");
+  const selected = selectedValuesOf(value);
+  const visibleOptions = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    if (!term) return column.options;
+    return column.options.filter((option) => option.label.toLowerCase().includes(term));
+  }, [column.options, search]);
+  function emit(next) {
+    onChange(next.length === 0 ? void 0 : { field: column.id, operator: "in", value: next });
+  }
+  const visibleValues = visibleOptions.map((option) => option.value);
+  const visibleSelectedCount = visibleValues.filter((v) => selected.includes(v)).length;
+  const allVisibleSelected = visibleValues.length > 0 && visibleSelectedCount === visibleValues.length;
+  const someVisibleSelected = visibleSelectedCount > 0 && !allVisibleSelected;
+  function toggleSelectAllVisible() {
+    if (allVisibleSelected) {
+      emit(selected.filter((v) => !visibleValues.includes(v)));
+      return;
+    }
+    const next = new Set(selected);
+    for (const v of visibleValues) next.add(v);
+    emit([...next]);
+  }
+  const isFiltered = selected.length > 0;
+  const summary = `${selected.length} selected`;
+  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(
+      Input,
+      {
+        placeholder: `Search ${column.header.toLowerCase()}...`,
+        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(
+        Checkbox,
+        {
+          checked: someVisibleSelected ? "indeterminate" : allVisibleSelected,
+          disabled: visibleValues.length === 0,
+          onCheckedChange: toggleSelectAllVisible,
+          "aria-label": "Select all"
+        }
+      ),
+      "Select all"
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "flex max-h-60 flex-col gap-1 overflow-y-auto", children: visibleOptions.length === 0 ? /* @__PURE__ */ jsx9("p", { className: "py-2 text-center text-sm text-muted-foreground", children: "No matches." }) : visibleOptions.map((option) => /* @__PURE__ */ jsxs4(
+      "label",
+      {
+        className: "flex items-center gap-2 rounded-sm px-1 py-1 text-sm hover:bg-accent hover:text-accent-foreground",
+        children: [
+          /* @__PURE__ */ jsx9(
+            Checkbox,
+            {
+              checked: selected.includes(option.value),
+              onCheckedChange: () => emit(toggle(selected, option.value))
+            }
+          ),
+          option.label
+        ]
+      },
+      option.value
+    )) })
+  ] });
+  if (bare) {
+    return /* @__PURE__ */ jsx9("div", { "data-testid": `filter-${column.id}`, children: panel });
+  }
+  return /* @__PURE__ */ jsxs4(Popover, { children: [
+    /* @__PURE__ */ jsx9(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}`,
+        "data-testid": `filter-${column.id}`,
+        children: [
+          /* @__PURE__ */ jsx9(FunnelIcon2, { className: "h-3.5 w-3.5 shrink-0 opacity-70", "aria-hidden": true }),
+          isFiltered && /* @__PURE__ */ jsx9("span", { className: "truncate", children: summary })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx9(PopoverContent, { className: "w-64 p-2", children: panel })
+  ] });
+}
+
+// src/filter/NumberComparisonFilter.tsx
+import { FunnelIcon as FunnelIcon3 } from "@heroicons/react/24/outline";
+import { useEffect, useId, useRef, useState as useState2 } from "react";
+
+// src/column/format.ts
+import { parseISO as parseISO3 } from "date-fns";
+function defaultAlign(column) {
+  switch (column.type) {
+    case "number":
+    case "currency":
+      return "right";
+    case "boolean":
+      return "center";
+    case "string":
+    case "enum":
+    case "date":
+    case "datetime":
+      return "left";
+  }
+}
+var ALIGN_CLASS_NAME = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+function alignClassName(column) {
+  return ALIGN_CLASS_NAME[defaultAlign(column)];
+}
+function toDate(value) {
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
+  if (typeof value === "number") {
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+  if (typeof value === "string") {
+    const date = parseISO3(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+  return null;
+}
+function toNumber(value) {
+  if (typeof value === "number") return Number.isNaN(value) ? null : value;
+  if (typeof value === "string" && value.trim() !== "") {
+    const parsed = Number(value);
+    return Number.isNaN(parsed) ? null : parsed;
+  }
+  return null;
+}
+function defaultFormat(column, value) {
+  if (value === null || value === void 0) return "";
+  switch (column.type) {
+    case "string":
+      return String(value);
+    case "number": {
+      const num = toNumber(value);
+      return num === null ? String(value) : num.toLocaleString();
+    }
+    case "currency": {
+      const num = toNumber(value);
+      if (num === null) return String(value);
+      return new Intl.NumberFormat(void 0, {
+        style: "currency",
+        currency: column.currency ?? "USD"
+      }).format(num);
+    }
+    case "date": {
+      const date = toDate(value);
+      return date === null ? String(value) : date.toLocaleDateString();
+    }
+    case "datetime": {
+      const date = toDate(value);
+      return date === null ? String(value) : date.toLocaleString();
+    }
+    case "boolean": {
+      if (typeof value === "boolean") return value ? "Yes" : "No";
+      if (typeof value === "string") {
+        const normalized = value.trim().toLowerCase();
+        if (normalized === "true") return "Yes";
+        if (normalized === "false") return "No";
+      }
+      if (typeof value === "number") return value !== 0 ? "Yes" : "No";
+      return String(value);
+    }
+    case "enum": {
+      const match = column.options.find((option) => option.value === String(value));
+      return match ? match.label : String(value);
+    }
+  }
+}
+
+// src/filter/numberRangeShared.ts
+function isNumberPair(value) {
+  return Array.isArray(value) && value.length === 2 && typeof value[0] === "number" && typeof value[1] === "number";
+}
+function rangeOf2(value) {
+  if (!value) return { min: void 0, max: void 0 };
+  if (value.operator === "between" && isNumberPair(value.value)) {
+    const [min, max] = value.value;
+    return { min, max };
+  }
+  if (value.operator === "gte" && typeof value.value === "number") {
+    return { min: value.value, max: void 0 };
+  }
+  if (value.operator === "lte" && typeof value.value === "number") {
+    return { min: void 0, max: value.value };
+  }
+  return { min: void 0, max: void 0 };
+}
+function descriptorFor(field, range) {
+  const { min, max } = range;
+  if (min !== void 0 && max !== void 0) {
+    const [lower, upper] = min <= max ? [min, max] : [max, min];
+    return { field, operator: "between", value: [lower, upper] };
+  }
+  if (min !== void 0) return { field, operator: "gte", value: min };
+  if (max !== void 0) return { field, operator: "lte", value: max };
+  return void 0;
+}
+
+// src/filter/NumberComparisonFilter.tsx
+import { Fragment, jsx as jsx10, 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" }
+];
+var OPERATOR_SYMBOL = {
+  gt: ">",
+  gte: "\u2265",
+  lt: "<",
+  lte: "\u2264",
+  eq: "=",
+  neq: "\u2260"
+};
+var DEFAULT_OPERATOR = "gt";
+var NUMBER_OPERATOR_VALUES = new Set(NUMBER_OPERATORS.map((option) => option.value));
+function isNumberOperator(operator) {
+  return operator !== void 0 && NUMBER_OPERATOR_VALUES.has(operator);
+}
+function parseNumber(raw) {
+  if (raw.trim() === "") return void 0;
+  const parsed = Number(raw);
+  return Number.isNaN(parsed) ? void 0 : parsed;
+}
+function stateFromValue(value) {
+  if (!value) return { operator: DEFAULT_OPERATOR, text: "", text2: "" };
+  if (value.operator === "between" && isNumberPair(value.value)) {
+    return { operator: "between", text: String(value.value[0]), text2: String(value.value[1]) };
+  }
+  if (isNumberOperator(value.operator) && typeof value.value === "number") {
+    return { operator: value.operator, text: value.value.toString(), text2: "" };
+  }
+  return { operator: DEFAULT_OPERATOR, text: "", text2: "" };
+}
+function NumberComparisonFilter({
+  column,
+  value,
+  onChange,
+  bare = true
+}) {
+  const initial = stateFromValue(value);
+  const [operator, setOperator] = useState2(initial.operator);
+  const [text, setText] = useState2(initial.text);
+  const [text2, setText2] = useState2(initial.text2);
+  const operatorId = useId();
+  const valueId = useId();
+  const lastEmittedRef = useRef(value);
+  useEffect(() => {
+    if (value === lastEmittedRef.current) return;
+    lastEmittedRef.current = value;
+    const next = stateFromValue(value);
+    setOperator(next.operator);
+    setText(next.text);
+    setText2(next.text2);
+  }, [value]);
+  function emit(nextOperator, nextText, nextText2) {
+    let next;
+    if (nextOperator === "between") {
+      const min = parseNumber(nextText);
+      const max = parseNumber(nextText2);
+      next = min !== void 0 && max !== void 0 ? { field: column.id, operator: "between", value: [min, max] } : void 0;
+    } else {
+      const num = parseNumber(nextText);
+      next = num !== void 0 ? { field: column.id, operator: nextOperator, value: num } : void 0;
+    }
+    lastEmittedRef.current = next;
+    onChange(next);
+  }
+  const isBetween = operator === "between";
+  const isFiltered = value !== void 0;
+  const summary = (() => {
+    if (!value) return "";
+    if (value.operator === "between" && isNumberPair(value.value)) {
+      const [lo, hi] = value.value;
+      return `${defaultFormat(column, lo)} \u2013 ${defaultFormat(column, hi)}`;
+    }
+    if (isNumberOperator(value.operator) && value.operator !== "between" && typeof value.value === "number") {
+      return `${OPERATOR_SYMBOL[value.operator]} ${defaultFormat(column, value.value)}`;
+    }
+    return "";
+  })();
+  const panel = /* @__PURE__ */ jsxs5("div", { className: "flex w-full max-w-[220px] flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs5(
+      Select,
+      {
+        value: operator,
+        onValueChange: (next) => {
+          const nextOperator = NUMBER_OPERATORS.find((option) => option.value === next)?.value;
+          if (!nextOperator) return;
+          setOperator(nextOperator);
+          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__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx10(
+        Input,
+        {
+          id: valueId,
+          type: "number",
+          className: "min-w-0",
+          "aria-label": isBetween ? `${column.header} minimum` : column.header,
+          placeholder: isBetween ? "Min" : "Value",
+          value: text,
+          onChange: (event) => {
+            setText(event.target.value);
+            emit(operator, event.target.value, text2);
+          }
+        }
+      ),
+      isBetween && /* @__PURE__ */ jsxs5(Fragment, { children: [
+        /* @__PURE__ */ jsx10("span", { className: "shrink-0 text-xs text-muted-foreground", children: "to" }),
+        /* @__PURE__ */ jsx10(
+          Input,
+          {
+            type: "number",
+            className: "min-w-0",
+            "aria-label": `${column.header} maximum`,
+            placeholder: "Max",
+            value: text2,
+            onChange: (event) => {
+              setText2(event.target.value);
+              emit(operator, text, event.target.value);
+            }
+          }
+        )
+      ] })
+    ] })
+  ] });
+  if (bare) {
+    return /* @__PURE__ */ jsx10("div", { "data-testid": `filter-${column.id}`, children: panel });
+  }
+  return /* @__PURE__ */ jsxs5(Popover, { children: [
+    /* @__PURE__ */ jsx10(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}`,
+        "data-testid": `filter-${column.id}`,
+        children: [
+          /* @__PURE__ */ jsx10(FunnelIcon3, { className: "h-3.5 w-3.5 shrink-0 opacity-70", "aria-hidden": true }),
+          isFiltered && /* @__PURE__ */ jsx10("span", { className: "truncate", children: summary })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx10(PopoverContent, { className: "w-auto p-3", children: panel })
+  ] });
+}
+
+// src/filter/NumberRangeFilter.tsx
+import { FunnelIcon as FunnelIcon4 } from "@heroicons/react/24/outline";
+import { useEffect as useEffect2, useId as useId2, useRef as useRef2, useState as useState3 } from "react";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+function parseNumber2(raw) {
+  if (raw.trim() === "") return void 0;
+  const parsed = Number(raw);
+  return Number.isNaN(parsed) ? void 0 : parsed;
+}
+function NumberRangeFilter({
+  column,
+  value,
+  onChange,
+  bare = false
+}) {
+  const initial = rangeOf2(value);
+  const [minText, setMinText] = useState3(initial.min?.toString() ?? "");
+  const [maxText, setMaxText] = useState3(initial.max?.toString() ?? "");
+  const minId = useId2();
+  const maxId = useId2();
+  const lastEmittedRef = useRef2(value);
+  useEffect2(() => {
+    if (value === lastEmittedRef.current) return;
+    lastEmittedRef.current = value;
+    const next = rangeOf2(value);
+    setMinText(next.min?.toString() ?? "");
+    setMaxText(next.max?.toString() ?? "");
+  }, [value]);
+  function emit(nextMinText, nextMaxText) {
+    const next = descriptorFor(column.id, {
+      min: parseNumber2(nextMinText),
+      max: parseNumber2(nextMaxText)
+    });
+    lastEmittedRef.current = next;
+    onChange(next);
+  }
+  const { min, max } = rangeOf2(value);
+  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(
+      Input,
+      {
+        id: minId,
+        type: "number",
+        "aria-label": `${column.header} minimum`,
+        placeholder: "Min",
+        className: "min-w-0",
+        value: minText,
+        onChange: (event) => {
+          setMinText(event.target.value);
+          emit(event.target.value, maxText);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx11("span", { className: "shrink-0 text-xs text-muted-foreground", children: "to" }),
+    /* @__PURE__ */ jsx11(
+      Input,
+      {
+        id: maxId,
+        type: "number",
+        "aria-label": `${column.header} maximum`,
+        placeholder: "Max",
+        className: "min-w-0",
+        value: maxText,
+        onChange: (event) => {
+          setMaxText(event.target.value);
+          emit(minText, event.target.value);
+        }
+      }
+    )
+  ] });
+  if (bare) {
+    return /* @__PURE__ */ jsx11("div", { "data-testid": `filter-${column.id}`, children: panel });
+  }
+  return /* @__PURE__ */ jsxs6(Popover, { children: [
+    /* @__PURE__ */ jsx11(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}`,
+        "data-testid": `filter-${column.id}`,
+        children: [
+          /* @__PURE__ */ jsx11(FunnelIcon4, { className: "h-3.5 w-3.5 shrink-0 opacity-70", "aria-hidden": true }),
+          isFiltered && /* @__PURE__ */ jsx11("span", { className: "truncate", children: summary })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx11(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 useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState4 } from "react";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var BAR_HEIGHT_PX = 56;
+var DEFAULT_BUCKETS = 24;
+function tLog(v) {
+  return Math.sign(v) * Math.log10(Math.abs(v) + 1);
+}
+function tInv(t) {
+  return Math.sign(t) * (10 ** Math.abs(t) - 1);
+}
+function NumberHistogramFilter({
+  column,
+  value,
+  onChange,
+  allValues,
+  loadValues,
+  format: format2 = (v) => v.toLocaleString(),
+  buckets = DEFAULT_BUCKETS,
+  bare = true
+}) {
+  const [openState, setOpen] = useState4(false);
+  const open = bare || openState;
+  const trackRef = useRef3(null);
+  const [minOnTop, setMinOnTop] = useState4(false);
+  const [loadedValues, setLoadedValues] = useState4([]);
+  const [loading, setLoading] = useState4(false);
+  const { min, max } = rangeOf2(value);
+  useEffect3(() => {
+    if (!open || !loadValues) return;
+    let cancelled = false;
+    setLoading(true);
+    loadValues().then((values) => {
+      if (!cancelled) setLoadedValues(values);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, loadValues]);
+  const sourceValues = allValues ?? loadedValues;
+  const nums = useMemo2(
+    () => 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 activeMin = min ?? dataMin;
+  const activeMax = max ?? dataMax;
+  const [minText, setMinText] = useState4("");
+  const [maxText, setMaxText] = useState4("");
+  useEffect3(() => {
+    if (!open) return;
+    setMinText(Number.isFinite(activeMin) ? String(Math.round(activeMin)) : "");
+    setMaxText(Number.isFinite(activeMax) ? String(Math.round(activeMax)) : "");
+  }, [open, loading]);
+  const logDataMin = Number.isFinite(dataMin) ? tLog(dataMin) : 0;
+  const logDataMax = Number.isFinite(dataMax) ? tLog(dataMax) : 1;
+  const logStep = (logDataMax - logDataMin) / 200;
+  const logPct = useCallback(
+    (v) => logDataMax === logDataMin ? 0 : (tLog(v) - logDataMin) / (logDataMax - logDataMin) * 100,
+    [logDataMin, logDataMax]
+  );
+  const histBars = useMemo2(() => {
+    if (!nums.length || dataMin === dataMax || !Number.isFinite(dataMin) || !Number.isFinite(dataMax)) return [];
+    const step = (logDataMax - logDataMin) / buckets;
+    const counts = Array(buckets).fill(0);
+    for (const v of nums) {
+      const i = Math.min(Math.floor((tLog(v) - logDataMin) / step), buckets - 1);
+      counts[i] = (counts[i] ?? 0) + 1;
+    }
+    const peak = Math.max(...counts);
+    return counts.map((count, i) => ({
+      count,
+      heightPx: peak > 0 ? Math.max(count / peak * BAR_HEIGHT_PX, 2) : 2,
+      active: tInv(logDataMin + i * step) < activeMax && tInv(logDataMin + (i + 1) * step) > activeMin
+    }));
+  }, [nums, dataMin, dataMax, logDataMin, logDataMax, buckets, activeMin, activeMax]);
+  function emit(nextMin, nextMax) {
+    onChange(
+      descriptorFor(column.id, {
+        min: nextMin !== void 0 && nextMin <= dataMin ? void 0 : nextMin,
+        max: nextMax !== void 0 && nextMax >= dataMax ? void 0 : nextMax
+      })
+    );
+  }
+  function handleMinChange(actual) {
+    emit(Math.min(actual, activeMax - 1), max);
+  }
+  function handleMaxChange(actual) {
+    emit(min, Math.max(actual, activeMin + 1));
+  }
+  function handleTrackHover(event) {
+    if (!trackRef.current || !Number.isFinite(dataMin) || !Number.isFinite(dataMax)) return;
+    const rect = trackRef.current.getBoundingClientRect();
+    const ratio = (event.clientX - rect.left) / rect.width;
+    const logHover = logDataMin + ratio * (logDataMax - logDataMin);
+    setMinOnTop(Math.abs(logHover - tLog(activeMin)) <= Math.abs(logHover - tLog(activeMax)));
+  }
+  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(
+      "div",
+      {
+        className: cn("flex-1 rounded-sm", bar.active ? "bg-primary/70" : "bg-muted-foreground/20"),
+        style: { height: bar.heightPx }
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsxs7("div", { ref: trackRef, className: "relative h-5", onMouseMove: handleTrackHover, children: [
+      /* @__PURE__ */ jsx12(
+        "input",
+        {
+          type: "range",
+          "aria-label": `${column.header} minimum (slider)`,
+          min: logDataMin,
+          max: logDataMax,
+          step: logStep,
+          value: tLog(activeMin),
+          onChange: (event) => handleMinChange(tInv(Number.parseFloat(event.target.value))),
+          className: "absolute inset-0 h-full w-full cursor-pointer opacity-0",
+          style: { zIndex: minOnTop ? 5 : 3 }
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        "input",
+        {
+          type: "range",
+          "aria-label": `${column.header} maximum (slider)`,
+          min: logDataMin,
+          max: logDataMax,
+          step: logStep,
+          value: tLog(activeMax),
+          onChange: (event) => handleMaxChange(tInv(Number.parseFloat(event.target.value))),
+          className: "absolute inset-0 h-full w-full cursor-pointer opacity-0",
+          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(
+        "div",
+        {
+          className: "absolute h-full rounded-full bg-primary",
+          style: { left: `${logPct(activeMin)}%`, right: `${100 - logPct(activeMax)}%` }
+        }
+      ) }),
+      [activeMin, activeMax].map((v, i) => /* @__PURE__ */ jsx12(
+        "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",
+          style: { left: `${logPct(v)}%` }
+        },
+        i
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx12(
+        Input,
+        {
+          type: "text",
+          inputMode: "numeric",
+          "aria-label": `${column.header} minimum`,
+          value: minText,
+          onChange: (event) => {
+            setMinText(event.target.value);
+            const parsed = Number.parseFloat(event.target.value.replace(/[^0-9.-]/g, ""));
+            if (!Number.isNaN(parsed)) handleMinChange(parsed);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx12("span", { className: "shrink-0 text-xs text-muted-foreground", children: "to" }),
+      /* @__PURE__ */ jsx12(
+        Input,
+        {
+          type: "text",
+          inputMode: "numeric",
+          "aria-label": `${column.header} maximum`,
+          value: maxText,
+          onChange: (event) => {
+            setMaxText(event.target.value);
+            const parsed = Number.parseFloat(event.target.value.replace(/[^0-9.-]/g, ""));
+            if (!Number.isNaN(parsed)) handleMaxChange(parsed);
+          }
+        }
+      )
+    ] }),
+    isFiltered && /* @__PURE__ */ jsx12(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onChange(void 0), children: "Clear" })
+  ] });
+  if (bare) {
+    return /* @__PURE__ */ jsx12("div", { "data-testid": `filter-${column.id}`, children: panel });
+  }
+  return /* @__PURE__ */ jsxs7(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx12(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}`,
+        "data-testid": `filter-${column.id}`,
+        children: [
+          /* @__PURE__ */ jsx12(FunnelIcon5, { className: "h-3.5 w-3.5 shrink-0 opacity-70", "aria-hidden": true }),
+          isFiltered && /* @__PURE__ */ jsx12("span", { className: "truncate", children: summary })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx12(PopoverContent, { className: "w-80", children: panel })
+  ] });
+}
+
+// src/column/types.ts
+function getColumnValue(column, row) {
+  if (column.accessorFn) return column.accessorFn(row);
+  if (column.accessorKey) return row[column.accessorKey];
+  return void 0;
+}
+function isSortable(column) {
+  return column.sortable === true;
+}
+function isFilterable(column) {
+  return column.filterable === true;
+}
+
+// src/filter/facetedValues.ts
+function withoutColumn(filter, columnId) {
+  if (!filter) return null;
+  if (!isCompositeFilterDescriptor(filter)) {
+    return fieldKey(filter.field) === columnId ? null : filter;
+  }
+  const kept = filter.filters.map((child) => withoutColumn(child, columnId)).filter((child) => child !== null);
+  if (kept.length === 0) return null;
+  return { logic: filter.logic, filters: kept };
+}
+function facetedNumberValues(data, column, filter) {
+  const withoutSelf = withoutColumn(filter, column.id);
+  const values = [];
+  for (const row of data) {
+    if (!evaluateFilter(row, withoutSelf)) continue;
+    const raw = getColumnValue(column, row);
+    if (typeof raw === "number") {
+      values.push(Number.isFinite(raw) ? raw : null);
+    } else if (raw == null) {
+      values.push(null);
+    } else {
+      const parsed = Number(raw);
+      values.push(Number.isFinite(parsed) ? parsed : null);
+    }
+  }
+  return values;
+}
+
+// src/filter/StringFilter.tsx
+import { FunnelIcon as FunnelIcon6 } from "@heroicons/react/24/outline";
+import { useId as useId3 } from "react";
+import { jsx as jsx13, 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" }
+];
+var DEFAULT_OPERATOR2 = "contains";
+function StringFilter({
+  column,
+  value,
+  onChange,
+  bare = false
+}) {
+  const operator = value?.operator ?? DEFAULT_OPERATOR2;
+  const text = typeof value?.value === "string" ? value.value : "";
+  const inputId = useId3();
+  const isFiltered = text !== "";
+  function emit(nextOperator, nextText) {
+    if (nextText === "") {
+      onChange(void 0);
+      return;
+    }
+    onChange({ field: column.id, operator: nextOperator, value: nextText });
+  }
+  const panel = /* @__PURE__ */ jsxs8("div", { className: "flex w-full max-w-[220px] flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs8(
+      Select,
+      {
+        value: operator,
+        onValueChange: (next) => {
+          const nextOperator = STRING_OPERATORS.find((option) => option.value === next)?.value;
+          if (nextOperator) 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__ */ jsx13(
+      Input,
+      {
+        id: inputId,
+        value: text,
+        placeholder: `Filter ${column.header.toLowerCase()}...`,
+        onChange: (event) => emit(operator, event.target.value)
+      }
+    )
+  ] });
+  if (bare) {
+    return /* @__PURE__ */ jsx13("div", { "data-testid": `filter-${column.id}`, children: panel });
+  }
+  return /* @__PURE__ */ jsxs8(Popover, { children: [
+    /* @__PURE__ */ jsx13(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}`,
+        "data-testid": `filter-${column.id}`,
+        children: [
+          /* @__PURE__ */ jsx13(FunnelIcon6, { className: "h-3.5 w-3.5 shrink-0 opacity-70", "aria-hidden": true }),
+          isFiltered && /* @__PURE__ */ jsx13("span", { className: "truncate", children: text })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx13(PopoverContent, { className: "w-auto p-3", children: panel })
+  ] });
+}
+
+// src/filter/registry.tsx
+import { jsx as jsx14 } 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 });
+    case "enum":
+      return /* @__PURE__ */ jsx14(EnumFilter, { column, value, onChange, bare });
+    case "boolean":
+      return /* @__PURE__ */ jsx14(BooleanFilter, { column, value, onChange, bare });
+    case "number":
+    case "currency":
+      return /* @__PURE__ */ jsx14(NumberRangeFilter, { column, value, onChange, bare });
+    case "date":
+    case "datetime":
+      return /* @__PURE__ */ jsx14(DateRangeFilter, { column, value, onChange, bare });
+  }
+}
+
+// src/column-selector/ColumnSelector.tsx
+import { Columns3 } from "lucide-react";
+import { useEffect as useEffect4 } from "react";
+
+// src/components/ui/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogOverlay = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn("fixed inset-0 z-50 bg-black/50", className),
+    ...props
+  }
+));
+DialogOverlay.displayName = "DialogOverlay";
+var DialogContent = forwardRef6(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(DialogPrimitive.Portal, { children: [
+  /* @__PURE__ */ jsx15(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs9(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-background p-6 shadow-lg",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs9(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100", children: [
+          /* @__PURE__ */ jsx15(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx15("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = "DialogContent";
+var DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx15("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+var DialogTitle = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+
+// src/column-selector/persistence.ts
+function storageKeyFor(persistKey) {
+  return `bmsui-datagrid:columns:${persistKey}`;
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function readPersistedVisibility(persistKey) {
+  const raw = window.localStorage.getItem(storageKeyFor(persistKey));
+  if (raw === null) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    return isPlainObject(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function writePersistedVisibility(persistKey, visibility) {
+  window.localStorage.setItem(storageKeyFor(persistKey), JSON.stringify(visibility));
+}
+
+// src/column-selector/visibility.ts
+function isColumnVisible(visibility, columnId) {
+  return visibility[columnId] !== false;
+}
+function countVisible(columns, visibility) {
+  return columns.filter((column) => isColumnVisible(visibility, column.id)).length;
+}
+function groupColumns(columns) {
+  const ungrouped = [];
+  const named = /* @__PURE__ */ new Map();
+  for (const column of columns) {
+    if (column.group === void 0) {
+      ungrouped.push(column);
+      continue;
+    }
+    const bucket = named.get(column.group);
+    if (bucket) bucket.push(column);
+    else named.set(column.group, [column]);
+  }
+  const result = [];
+  if (ungrouped.length > 0) result.push({ group: void 0, columns: ungrouped });
+  for (const [group, groupedColumns] of named) result.push({ group, columns: groupedColumns });
+  return result;
+}
+function canHideColumn(columns, visibility, columnId) {
+  if (!isColumnVisible(visibility, columnId)) return true;
+  return countVisible(columns, visibility) > 1;
+}
+function canHideGroup(columns, visibility, groupColumnIds) {
+  const groupIds = new Set(groupColumnIds);
+  const visibleOutsideGroup = columns.filter(
+    (column) => !groupIds.has(column.id) && isColumnVisible(visibility, column.id)
+  ).length;
+  return visibleOutsideGroup > 0;
+}
+
+// src/column-selector/ColumnSelector.tsx
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+function ColumnSelector({
+  columns,
+  visibility,
+  onVisibilityChange,
+  persistKey,
+  trigger,
+  open,
+  onOpenChange
+}) {
+  useEffect4(() => {
+    if (!persistKey) return;
+    const restored = readPersistedVisibility(persistKey);
+    if (restored) onVisibilityChange({ ...visibility, ...restored });
+  }, [persistKey]);
+  function commit(next) {
+    onVisibilityChange(next);
+    if (persistKey) writePersistedVisibility(persistKey, next);
+  }
+  function toggleColumn(columnId) {
+    if (!canHideColumn(columns, visibility, columnId)) return;
+    commit({ ...visibility, [columnId]: !isColumnVisible(visibility, columnId) });
+  }
+  const totalVisible = countVisible(columns, visibility);
+  const groups = groupColumns(columns);
+  return /* @__PURE__ */ jsxs10(Dialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx16(DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx16(Button, { variant: "outline", size: "icon", "aria-label": "Choose columns", children: /* @__PURE__ */ jsx16(Columns3, { className: "h-4 w-4", "aria-hidden": true }) }) }),
+    /* @__PURE__ */ jsxs10(DialogContent, { className: "w-fit max-w-[calc(100vw-2rem)] sm:max-w-2xl", children: [
+      /* @__PURE__ */ jsx16(DialogHeader, { children: /* @__PURE__ */ jsx16(DialogTitle, { children: "Columns" }) }),
+      /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap gap-x-8 gap-y-5", children: groups.map(({ group, columns: groupCols }) => /* @__PURE__ */ jsxs10("div", { className: "flex min-w-32 flex-col gap-1.5", children: [
+        group && /* @__PURE__ */ jsx16("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__ */ jsxs10(
+            "label",
+            {
+              className: "flex items-center gap-2 rounded-md px-1.5 py-1 text-sm hover:bg-accent/50 focus-within:bg-accent/50",
+              children: [
+                /* @__PURE__ */ jsx16(
+                  Checkbox,
+                  {
+                    checked: visible,
+                    disabled: visible && totalVisible <= 1,
+                    onCheckedChange: () => toggleColumn(column.id)
+                  }
+                ),
+                column.header
+              ]
+            },
+            column.id
+          );
+        })
+      ] }, group ?? "__ungrouped__")) })
+    ] })
+  ] });
+}
+
+// src/menu/resolveMenuItems.ts
+function resolveMenuItems(items, ctx) {
+  const resolved = [];
+  for (const item of items) {
+    const isVisible = item.visible ? item.visible(ctx) : true;
+    if (!isVisible) continue;
+    resolved.push({ ...item, isDisabled: item.disabled ? item.disabled(ctx) : false });
+  }
+  return resolved;
+}
+
+// src/menu/ActionsMenu.tsx
+import { MoreVertical } from "lucide-react";
+
+// src/components/ui/dropdown-menu.tsx
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuContent = forwardRef7(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx17(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = forwardRef7(({ className, danger, ...props }, ref) => /* @__PURE__ */ jsx17(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      danger && "text-destructive focus:bg-destructive/10 focus:text-destructive",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var DropdownMenuLabel = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+
+// src/menu/ActionsMenu.tsx
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+function ActionsMenu({ items, ctx, triggerLabel }) {
+  const resolved = resolveMenuItems(items, ctx);
+  if (resolved.length === 0) return null;
+  return /* @__PURE__ */ jsxs11(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx18(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx18(Button, { variant: "ghost", size: "icon", "aria-label": triggerLabel, onClick: stopRowClick, children: /* @__PURE__ */ jsx18(MoreVertical, { className: "h-4 w-4", "aria-hidden": true }) }) }),
+    /* @__PURE__ */ jsx18(DropdownMenuContent, { align: "end", children: resolved.map((item) => /* @__PURE__ */ jsx18(
+      DropdownMenuItem,
+      {
+        danger: item.danger,
+        disabled: item.isDisabled,
+        onSelect: () => item.onSelect(ctx),
+        children: item.label
+      },
+      item.id
+    )) })
+  ] });
+}
+
+// src/grid/DataGrid.tsx
+import { BarsArrowDownIcon, BarsArrowUpIcon, 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 Fragment2, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef5, useState as useState6 } from "react";
+
+// src/grid/processClientData.ts
+function makeComparator(sort) {
+  return (a, b) => {
+    for (const { field, dir } of sort) {
+      const av = getFieldValue(a, field);
+      const bv = getFieldValue(b, field);
+      const aNull = av === null || av === void 0;
+      const bNull = bv === null || bv === void 0;
+      if (aNull && bNull) continue;
+      if (aNull) return 1;
+      if (bNull) return -1;
+      const cmp = compareValues(av, bv) ?? 0;
+      if (cmp !== 0) return dir === "asc" ? cmp : -cmp;
+    }
+    return 0;
+  };
+}
+function processClientData(data, state) {
+  const filtered = state.filter ? data.filter((row) => evaluateFilter(row, state.filter)) : data;
+  const sorted = state.sort.length > 0 ? [...filtered].sort(makeComparator(state.sort)) : filtered;
+  const start = state.page * state.pageSize;
+  const rows = sorted.slice(start, start + state.pageSize);
+  return { rows, rowCount: sorted.length };
+}
+
+// src/grid/useGridState.ts
+import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo4, useState as useState5 } from "react";
+
+// src/hooks/useDebouncedCallback.ts
+import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef4 } from "react";
+function useDebouncedCallback(callback, delayMs) {
+  const callbackRef = useRef4(callback);
+  callbackRef.current = callback;
+  const timeoutRef = useRef4(void 0);
+  useEffect5(() => {
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  return useMemo3(() => {
+    return {
+      run: (...args) => {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+          callbackRef.current(...args);
+        }, delayMs);
+      },
+      cancel: () => {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [delayMs]);
+}
+
+// src/grid/useGridState.ts
+var DEFAULT_STATE = { filter: null, sort: [], page: 0, pageSize: 20 };
+var FILTER_CHANGE_DEBOUNCE_MS = 300;
+function nextSortDir(current, descFirst) {
+  const [first, second] = descFirst ? ["desc", "asc"] : ["asc", "desc"];
+  if (current === void 0) return first;
+  if (current === first) return second;
+  return void 0;
+}
+function useGridState(dataSource, initialState, externalState) {
+  const [state, setState] = useState5(
+    () => externalState ?? { ...DEFAULT_STATE, ...initialState }
+  );
+  const notifyRaw = useCallback2(
+    (next) => {
+      if (dataSource.mode === "server") dataSource.onStateChange(next);
+    },
+    [dataSource]
+  );
+  const { run: notifyDebounced, cancel: cancelDebouncedNotify } = useDebouncedCallback(
+    notifyRaw,
+    FILTER_CHANGE_DEBOUNCE_MS
+  );
+  const notifyNow = useCallback2(
+    (next) => {
+      cancelDebouncedNotify();
+      notifyRaw(next);
+    },
+    [notifyRaw, cancelDebouncedNotify]
+  );
+  useEffect6(() => {
+    if (!externalState) return;
+    cancelDebouncedNotify();
+    setState(externalState);
+  }, [externalState, cancelDebouncedNotify]);
+  const filtersByColumn = useMemo4(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const child of state.filter?.filters ?? []) {
+      if ("operator" in child) map.set(fieldKey(child.field), child);
+    }
+    return map;
+  }, [state.filter]);
+  const setColumnFilter = useCallback2(
+    (columnId, next) => {
+      setState((prev) => {
+        const remaining = (prev.filter?.filters ?? []).filter(
+          (f) => !("operator" in f) || fieldKey(f.field) !== columnId
+        );
+        const filters = next ? [...remaining, next] : remaining;
+        const nextState = {
+          ...prev,
+          filter: filters.length > 0 ? { logic: "and", filters } : null,
+          page: 0
+        };
+        notifyDebounced(nextState);
+        return nextState;
+      });
+    },
+    [notifyDebounced]
+  );
+  const toggleSort = useCallback2(
+    (columnId, additive, descFirst = false) => {
+      setState((prev) => {
+        const existing = prev.sort.find((s) => s.field === columnId);
+        const dir = nextSortDir(existing?.dir, descFirst);
+        const withoutColumn2 = prev.sort.filter((s) => s.field !== columnId);
+        const base = additive ? withoutColumn2 : [];
+        const sort = dir ? [...base, { field: columnId, dir }] : base;
+        const nextState = { ...prev, sort };
+        notifyNow(nextState);
+        return nextState;
+      });
+    },
+    [notifyNow]
+  );
+  const setPage = useCallback2(
+    (page) => {
+      setState((prev) => {
+        const nextState = { ...prev, page };
+        notifyNow(nextState);
+        return nextState;
+      });
+    },
+    [notifyNow]
+  );
+  const setPageSize = useCallback2(
+    (pageSize) => {
+      setState((prev) => {
+        const nextState = { ...prev, pageSize, page: 0 };
+        notifyNow(nextState);
+        return nextState;
+      });
+    },
+    [notifyNow]
+  );
+  return { state, filtersByColumn, setColumnFilter, toggleSort, setPage, setPageSize };
+}
+
+// src/grid/DataGrid.tsx
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+var gridTableFeatures = tableFeatures({ columnSizingFeature, columnResizingFeature });
+var DEFAULT_COLUMN_SIZE = 150;
+function pinnedOffsets(visibleColumns, side, getSize) {
+  const offsets = /* @__PURE__ */ new Map();
+  let cursor = 0;
+  const ordered = side === "left" ? visibleColumns : [...visibleColumns].reverse();
+  for (const column of ordered) {
+    if (column.pinned !== side) continue;
+    offsets.set(column.id, cursor);
+    cursor += getSize(column.id);
+  }
+  return offsets;
+}
+function computeHeaderRuns(columns) {
+  const runs = [];
+  for (const column of columns) {
+    const last = runs[runs.length - 1];
+    if (column.headerGroup && last?.kind === "group" && last.label === column.headerGroup) {
+      last.columns.push(column);
+    } else if (column.headerGroup) {
+      runs.push({ kind: "group", label: column.headerGroup, columns: [column] });
+    } else {
+      runs.push({ kind: "single", column });
+    }
+  }
+  return runs;
+}
+function toTanstackColumns(columns) {
+  return columns.map((column) => ({
+    id: column.id,
+    header: column.header,
+    size: column.width,
+    accessorFn: (row) => getColumnValue(column, row),
+    cell: (info) => column.cell ? column.cell(info.getValue(), info.row.original) : defaultFormat(column, info.getValue())
+  }));
+}
+function DataGrid({
+  columns,
+  dataSource,
+  getRowId,
+  rowActions,
+  headerActions,
+  enableMultiSort = false,
+  initialState,
+  columnVisibility,
+  renderDetail,
+  enableColumnResizing = false,
+  columnResizeMode = "onChange",
+  columnSizing,
+  onColumnSizingChange,
+  virtualize,
+  showPagination = true,
+  getRowProps,
+  getRowTestId,
+  gridState,
+  selectedIds: controlledSelectedIds,
+  onSelectedIdsChange,
+  testId,
+  loading: loadingProp = false
+}) {
+  const { state, filtersByColumn, setColumnFilter, toggleSort, setPage } = useGridState(
+    dataSource,
+    initialState,
+    gridState
+  );
+  const [internalSelectedIds, setInternalSelectedIds] = useState6(/* @__PURE__ */ new Set());
+  const selectedIds = controlledSelectedIds ?? internalSelectedIds;
+  function updateSelectedIds(next) {
+    setInternalSelectedIds(next);
+    onSelectedIdsChange?.(next);
+  }
+  const [expandedIds, setExpandedIds] = useState6(/* @__PURE__ */ new Set());
+  function toggleRowExpanded(id) {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+  const visibleColumns = useMemo5(
+    () => columnVisibility ? columns.filter((column) => isColumnVisible(columnVisibility, column.id)) : columns,
+    [columns, columnVisibility]
+  );
+  const serverRowCount = dataSource.mode === "server" ? dataSource.rowCount : void 0;
+  const { rows, rowCount } = useMemo5(() => {
+    if (dataSource.mode === "client") return processClientData(dataSource.data, state);
+    return { rows: dataSource.data, rowCount: serverRowCount ?? 0 };
+  }, [dataSource.mode, dataSource.data, serverRowCount, state]);
+  const selectedRows = useMemo5(
+    () => rows.filter((row) => selectedIds.has(getRowId(row))),
+    [rows, selectedIds, getRowId]
+  );
+  const allOnPageSelected = rows.length > 0 && rows.every((row) => selectedIds.has(getRowId(row)));
+  function toggleRowSelected(id) {
+    const next = new Set(selectedIds);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    updateSelectedIds(next);
+  }
+  function toggleAllOnPageSelected() {
+    const next = new Set(selectedIds);
+    for (const row of rows) {
+      if (allOnPageSelected) next.delete(getRowId(row));
+      else next.add(getRowId(row));
+    }
+    updateSelectedIds(next);
+  }
+  const tanstackColumns = useMemo5(() => toTanstackColumns(visibleColumns), [visibleColumns]);
+  const columnById = useMemo5(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const column of visibleColumns) map.set(column.id, column);
+    return map;
+  }, [visibleColumns]);
+  const table = useTable({
+    features: gridTableFeatures,
+    data: rows,
+    columns: tanstackColumns,
+    getRowId,
+    enableColumnResizing,
+    columnResizeMode,
+    ...columnSizing ? {
+      state: { columnSizing },
+      onColumnSizingChange: (updater) => {
+        const next = typeof updater === "function" ? updater(columnSizing) : updater;
+        onColumnSizingChange?.(next);
+      }
+    } : {}
+  });
+  const pageCount = Math.max(1, Math.ceil(rowCount / state.pageSize));
+  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 = useMemo5(() => computeHeaderRuns(visibleColumns), [visibleColumns]);
+  const hasHeaderGroups = visibleColumns.some((column) => column.headerGroup);
+  function renderFilterWidget(column) {
+    const value = filtersByColumn.get(column.id);
+    const onChange = (next) => setColumnFilter(column.id, next);
+    return column.renderFilter ? column.renderFilter(value, onChange, state.filter) : renderDefaultFilterWidget(column, value, onChange);
+  }
+  const columnSize = (columnId) => table.getColumn(columnId)?.getSize() ?? DEFAULT_COLUMN_SIZE;
+  const leftPinnedOffsets = pinnedOffsets(visibleColumns, "left", columnSize);
+  const rightPinnedOffsets = pinnedOffsets(visibleColumns, "right", columnSize);
+  function pinnedCellProps(column, area = "body") {
+    const bg = area === "header" ? "bg-muted" : "bg-background";
+    if (column.pinned === "left") {
+      return { className: cn("sticky z-10", bg), style: { left: leftPinnedOffsets.get(column.id), width: columnSize(column.id) } };
+    }
+    if (column.pinned === "right") {
+      return { className: cn("sticky z-10", bg), style: { right: rightPinnedOffsets.get(column.id), width: columnSize(column.id) } };
+    }
+    if (enableColumnResizing) return { style: { width: columnSize(column.id) } };
+    return { style: column.width ? { width: column.width } : void 0 };
+  }
+  const tableRows = table.getRowModel().rows;
+  const shouldVirtualize = Boolean(virtualize) && tableRows.length > (virtualize?.threshold ?? 100);
+  const scrollRef = useRef5(null);
+  const virtualizer = useVirtualizer({
+    count: tableRows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => virtualize?.estimatedRowHeight ?? 40,
+    overscan: virtualize?.overscan ?? 10,
+    enabled: shouldVirtualize
+  });
+  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;
+  const lastVisibleIndex = virtualItems.length > 0 ? virtualItems[virtualItems.length - 1].index : -1;
+  const notifiedForLengthRef = useRef5(-1);
+  useEffect7(() => {
+    if (!virtualize?.onEndReached) return;
+    if (lastVisibleIndex < 0 || lastVisibleIndex < tableRows.length - 1) return;
+    if (virtualize.hasMore === false) return;
+    if (notifiedForLengthRef.current === tableRows.length) return;
+    notifiedForLengthRef.current = tableRows.length;
+    virtualize.onEndReached();
+  }, [lastVisibleIndex, tableRows.length, virtualize]);
+  function renderRow(row, measureRef) {
+    const isExpanded = expandedIds.has(row.id);
+    const rowProps = getRowProps?.(row.original);
+    const rowTestId = getRowTestId?.(row.original) ?? `row-${row.id}`;
+    return /* @__PURE__ */ jsxs12("tbody", { ref: measureRef, "data-index": row.index, children: [
+      /* @__PURE__ */ jsxs12(
+        "tr",
+        {
+          ...rowProps,
+          "data-testid": rowTestId,
+          className: cn(rowProps?.className, row.index % 2 === 1 && "bg-foreground/5"),
+          children: [
+            showDetailColumn && /* @__PURE__ */ jsx19("td", { className: "border-b p-2", children: /* @__PURE__ */ jsx19(
+              "button",
+              {
+                type: "button",
+                "aria-label": `${isExpanded ? "Collapse" : "Expand"} row ${row.id}`,
+                "aria-expanded": isExpanded,
+                onClick: (event) => {
+                  stopRowClick(event);
+                  toggleRowExpanded(row.id);
+                },
+                children: /* @__PURE__ */ jsx19(ChevronRight, { className: cn("h-4 w-4 transition-transform", isExpanded && "rotate-90"), "aria-hidden": true })
+              }
+            ) }),
+            showSelectionColumn && /* @__PURE__ */ jsx19("td", { className: "border-b p-2", children: /* @__PURE__ */ jsx19(
+              "input",
+              {
+                type: "checkbox",
+                "aria-label": `Select row ${row.id}`,
+                checked: selectedIds.has(row.id),
+                onClick: stopRowClick,
+                onChange: () => toggleRowSelected(row.id)
+              }
+            ) }),
+            row.getAllCells().map((cell) => {
+              const cellColumn = columnById.get(cell.column.id);
+              const pinnedProps = cellColumn && (cellColumn.pinned || enableColumnResizing) ? pinnedCellProps(cellColumn) : void 0;
+              return /* @__PURE__ */ jsx19("td", { style: pinnedProps?.style, className: cn("border-b p-2", pinnedProps?.className), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
+            }),
+            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx19("td", { className: "border-b p-2", children: /* @__PURE__ */ jsx19(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` }) })
+          ]
+        }
+      ),
+      showDetailColumn && isExpanded && renderDetail && /* @__PURE__ */ jsx19("tr", { "data-testid": `${rowTestId}-detail`, children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, className: "border-b p-2", children: renderDetail(row.original) }) })
+    ] }, row.id);
+  }
+  return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-2", "data-testid": "datagrid", children: [
+    showSelectionColumn && headerActions && /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between text-sm", children: [
+      /* @__PURE__ */ jsxs12("span", { children: [
+        selectedRows.length,
+        " selected"
+      ] }),
+      /* @__PURE__ */ jsx19(ActionsMenu, { items: headerActions, ctx: { selectedRows }, triggerLabel: "Bulk actions" })
+    ] }),
+    /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
+      loading && /* @__PURE__ */ jsx19(
+        "div",
+        {
+          "data-testid": "datagrid-loading-overlay",
+          className: "absolute inset-0 z-10 flex items-center justify-center bg-background/60",
+          children: /* @__PURE__ */ jsx19(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground", "aria-hidden": true })
+        }
+      ),
+      /* @__PURE__ */ jsx19(
+        "div",
+        {
+          ref: scrollRef,
+          "data-testid": testId,
+          className: cn("overflow-x-auto rounded-md border", shouldVirtualize && "overflow-y-auto"),
+          style: shouldVirtualize ? { maxHeight: virtualize?.maxBodyHeight ?? 480 } : void 0,
+          children: /* @__PURE__ */ jsxs12("table", { className: "w-full border-collapse text-sm", children: [
+            /* @__PURE__ */ jsxs12("thead", { className: "bg-muted", children: [
+              table.getHeaderGroups().map((headerGroup) => {
+                const headerById = new Map(headerGroup.headers.map((header) => [header.id, header]));
+                function renderLeafHeaderCell(column, rowSpan) {
+                  const header = headerById.get(column.id);
+                  if (!header) return null;
+                  const sortEntry = state.sort.find((s) => s.field === column.id);
+                  const sortable = isSortable(column);
+                  const filterable = isFilterable(column) && column.filterDisplay !== "row";
+                  const pinnedProps = pinnedCellProps(column, "header");
+                  return /* @__PURE__ */ jsxs12(
+                    "th",
+                    {
+                      rowSpan,
+                      style: pinnedProps.style,
+                      className: cn("relative border-b p-2 font-medium", alignClassName(column), pinnedProps.className),
+                      children: [
+                        /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
+                          /* @__PURE__ */ jsxs12(
+                            "button",
+                            {
+                              type: "button",
+                              className: cn(
+                                "flex items-center gap-1 rounded-sm px-1",
+                                sortable && "hover:bg-accent hover:text-accent-foreground"
+                              ),
+                              disabled: !sortable,
+                              onClick: (event) => sortable && toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
+                              children: [
+                                column.renderHeader ? column.renderHeader(column) : column.header,
+                                sortable && sortEntry?.dir === "asc" && /* @__PURE__ */ jsx19(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
+                                sortable && sortEntry?.dir === "desc" && /* @__PURE__ */ jsx19(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
+                              ]
+                            }
+                          ),
+                          filterable && /* @__PURE__ */ jsxs12(Popover, { children: [
+                            /* @__PURE__ */ jsx19(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx19(FunnelIcon7, { className: "h-3 w-3", "aria-hidden": true }) }) }),
+                            /* @__PURE__ */ jsx19(PopoverContent, { children: renderFilterWidget(column) })
+                          ] })
+                        ] }),
+                        enableColumnResizing && /* @__PURE__ */ jsx19(
+                          "div",
+                          {
+                            "data-testid": `resize-handle-${column.id}`,
+                            onMouseDown: header.getResizeHandler(),
+                            onTouchStart: header.getResizeHandler(),
+                            className: "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none hover:bg-accent"
+                          }
+                        )
+                      ]
+                    },
+                    header.id
+                  );
+                }
+                return /* @__PURE__ */ jsxs12(Fragment2, { children: [
+                  hasHeaderGroups && /* @__PURE__ */ jsxs12("tr", { "data-testid": "header-group-row", children: [
+                    showDetailColumn && /* @__PURE__ */ jsx19("th", { rowSpan: 2, className: "border-b p-2", "aria-hidden": true }),
+                    showSelectionColumn && /* @__PURE__ */ jsx19("th", { rowSpan: 2, className: "border-b p-2", children: /* @__PURE__ */ jsx19(
+                      "input",
+                      {
+                        type: "checkbox",
+                        "aria-label": "Select all rows on this page",
+                        checked: allOnPageSelected,
+                        onChange: toggleAllOnPageSelected
+                      }
+                    ) }),
+                    headerRuns.map(
+                      (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx19(
+                        "th",
+                        {
+                          colSpan: run.columns.length,
+                          className: "border-b p-2 text-center font-medium",
+                          children: run.label
+                        },
+                        `group-${run.label}-${run.columns[0].id}`
+                      )
+                    ),
+                    showRowActionsColumn && /* @__PURE__ */ jsx19("th", { rowSpan: 2, className: "border-b p-2", "aria-label": "Row actions" })
+                  ] }, `${headerGroup.id}-groups`),
+                  /* @__PURE__ */ jsxs12("tr", { children: [
+                    !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2", "aria-hidden": true }),
+                    !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2", children: /* @__PURE__ */ jsx19(
+                      "input",
+                      {
+                        type: "checkbox",
+                        "aria-label": "Select all rows on this page",
+                        checked: allOnPageSelected,
+                        onChange: toggleAllOnPageSelected
+                      }
+                    ) }),
+                    headerGroup.headers.map((header) => {
+                      const column = columnById.get(header.id);
+                      if (!column || hasHeaderGroups && !column.headerGroup) return null;
+                      return renderLeafHeaderCell(column);
+                    }),
+                    !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2", "aria-label": "Row actions" })
+                  ] }, headerGroup.id)
+                ] }, headerGroup.id);
+              }),
+              hasFilterRow && /* @__PURE__ */ jsxs12("tr", { "data-testid": "filter-row", children: [
+                showDetailColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2" }),
+                showSelectionColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2" }),
+                visibleColumns.map((column) => {
+                  const pinnedProps = pinnedCellProps(column, "header");
+                  return /* @__PURE__ */ jsx19(
+                    "th",
+                    {
+                      style: pinnedProps.style,
+                      className: cn("border-b p-2 align-top font-normal", alignClassName(column), pinnedProps.className),
+                      children: isFilterable(column) && column.filterDisplay === "row" ? renderFilterWidget(column) : null
+                    },
+                    column.id
+                  );
+                }),
+                showRowActionsColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2" })
+              ] })
+            ] }),
+            rows.length === 0 ? /* @__PURE__ */ jsx19("tbody", { children: /* @__PURE__ */ jsx19("tr", { children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
+              paddingTop > 0 && /* @__PURE__ */ jsx19("tbody", { children: /* @__PURE__ */ jsx19("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }) }),
+              virtualItems.map(
+                (virtualItem) => renderRow(tableRows[virtualItem.index], (el) => virtualizer.measureElement(el))
+              ),
+              paddingBottom > 0 && /* @__PURE__ */ jsx19("tbody", { children: /* @__PURE__ */ jsx19("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingBottom } }) }) })
+            ] }) : tableRows.map((row) => renderRow(row))
+          ] })
+        }
+      )
+    ] }),
+    showPagination && /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between text-sm", children: [
+      /* @__PURE__ */ jsxs12("span", { children: [
+        "Page ",
+        state.page + 1,
+        " of ",
+        pageCount,
+        " (",
+        rowCount,
+        " row",
+        rowCount === 1 ? "" : "s",
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxs12("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx19(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            disabled: state.page <= 0,
+            onClick: () => setPage(state.page - 1),
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsx19(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            disabled: state.page >= pageCount - 1,
+            onClick: () => setPage(state.page + 1),
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// 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 { useEffect as useEffect8, useMemo as useMemo7, useRef as useRef6 } from "react";
+
+// src/tree/flattenTree.ts
+function flattenTree(roots, accessors, expanded, childrenOverride) {
+  const { getRowId, getChildren } = accessors;
+  const resolveHasChildren = accessors.hasChildren ?? ((row) => (getChildren(row)?.length ?? 0) > 0);
+  const out = [];
+  function visit(row, depth) {
+    const id = getRowId(row);
+    const isExpanded = Boolean(expanded[id]);
+    out.push({ row, id, depth, hasChildren: resolveHasChildren(row), isExpanded });
+    if (!isExpanded) return;
+    const children = childrenOverride.get(id) ?? getChildren(row) ?? [];
+    for (const child of children) visit(child, depth + 1);
+  }
+  for (const root of roots) visit(root, 0);
+  return out;
+}
+
+// src/tree/useTreeState.ts
+import { useCallback as useCallback3, useMemo as useMemo6, useState as useState7 } from "react";
+function useTreeState({
+  data,
+  getRowId,
+  getChildren,
+  hasChildren,
+  onLoadChildren,
+  expanded: controlledExpanded,
+  onExpandedChange
+}) {
+  const [internalExpanded, setInternalExpanded] = useState7({});
+  const expanded = controlledExpanded ?? internalExpanded;
+  const setExpanded = useCallback3(
+    (updater) => {
+      if (controlledExpanded) {
+        onExpandedChange?.(updater(controlledExpanded));
+      } else {
+        setInternalExpanded(updater);
+      }
+    },
+    [controlledExpanded, onExpandedChange]
+  );
+  const [childrenMap, setChildrenMap] = useState7(/* @__PURE__ */ new Map());
+  const [loadingIds, setLoadingIds] = useState7(/* @__PURE__ */ new Set());
+  const [errorIds, setErrorIds] = useState7(/* @__PURE__ */ new Map());
+  const resolveHasChildren = useMemo6(
+    () => hasChildren ?? ((row) => (getChildren(row)?.length ?? 0) > 0),
+    [hasChildren, getChildren]
+  );
+  const loadChildrenFor = useCallback3(
+    async (row) => {
+      const id = getRowId(row);
+      const cached = childrenMap.get(id);
+      if (cached) return cached;
+      const eager = getChildren(row);
+      if (eager && eager.length > 0) return eager;
+      if (!onLoadChildren) return eager ?? [];
+      setLoadingIds((prev) => new Set(prev).add(id));
+      setErrorIds((prev) => {
+        if (!prev.has(id)) return prev;
+        const next = new Map(prev);
+        next.delete(id);
+        return next;
+      });
+      try {
+        const result = await onLoadChildren(row);
+        setChildrenMap((prev) => new Map(prev).set(id, result));
+        return result;
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to load children.";
+        setErrorIds((prev) => new Map(prev).set(id, message));
+        throw error;
+      } finally {
+        setLoadingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+      }
+    },
+    [childrenMap, getChildren, getRowId, onLoadChildren]
+  );
+  const toggleExpand = useCallback3(
+    (row) => {
+      const id = getRowId(row);
+      const willExpand = !expanded[id];
+      setExpanded((prev) => ({ ...prev, [id]: willExpand }));
+      if (willExpand && resolveHasChildren(row)) {
+        loadChildrenFor(row).catch(() => {
+        });
+      }
+    },
+    [expanded, getRowId, loadChildrenFor, resolveHasChildren, setExpanded]
+  );
+  const retry = useCallback3(
+    (row) => {
+      loadChildrenFor(row).catch(() => {
+      });
+    },
+    [loadChildrenFor]
+  );
+  const expandToLevel = useCallback3(
+    async (level) => {
+      const nextExpanded = { ...expanded };
+      async function visit(row, depth) {
+        if (depth >= level || !resolveHasChildren(row)) return;
+        nextExpanded[getRowId(row)] = true;
+        let children;
+        try {
+          children = await loadChildrenFor(row);
+        } catch {
+          return;
+        }
+        for (const child of children) await visit(child, depth + 1);
+      }
+      for (const root of data) await visit(root, 0);
+      setExpanded(() => nextExpanded);
+    },
+    [data, expanded, getRowId, loadChildrenFor, resolveHasChildren, setExpanded]
+  );
+  return { expanded, childrenMap, loadingIds, errorIds, toggleExpand, retry, expandToLevel };
+}
+
+// src/tree/TreeDataGrid.tsx
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+function renderCell(column, row) {
+  const value = getColumnValue(column, row);
+  return column.cell ? column.cell(value, row) : defaultFormat(column, value);
+}
+function TreeCell({
+  flatRow,
+  column,
+  indentSize,
+  isLoading,
+  error,
+  onToggle,
+  onRetry
+}) {
+  return /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", style: { paddingLeft: flatRow.depth * indentSize }, children: [
+    flatRow.hasChildren ? /* @__PURE__ */ jsx20(
+      "button",
+      {
+        type: "button",
+        onClick: (event) => {
+          stopRowClick(event);
+          onToggle();
+        },
+        disabled: isLoading,
+        "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__ */ jsx20(Loader22, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": "true" }) : flatRow.isExpanded ? /* @__PURE__ */ jsx20(ChevronDown2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx20(ChevronRight2, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+      }
+    ) : /* @__PURE__ */ jsx20("span", { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx20("span", { className: "truncate", children: renderCell(column, flatRow.row) }),
+    flatRow.isExpanded && error ? /* @__PURE__ */ jsxs13("span", { className: "ml-1 flex shrink-0 items-center gap-1 text-xs text-destructive", children: [
+      /* @__PURE__ */ jsx20(AlertCircle, { className: "h-3 w-3", "aria-hidden": "true" }),
+      "Failed to load.",
+      /* @__PURE__ */ jsx20("button", { type: "button", className: "underline underline-offset-2", onClick: onRetry, children: "Retry" })
+    ] }) : null
+  ] });
+}
+function TreeDataGrid({
+  columns,
+  data,
+  treeColumnId,
+  getRowId,
+  getChildren,
+  hasChildren,
+  onLoadChildren,
+  initialExpandedLevel = 0,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  indentSize = 20,
+  getRowProps,
+  getRowTestId,
+  rowActions,
+  virtualizeThreshold = 100,
+  estimatedRowHeight = 40,
+  maxBodyHeight = 480
+}) {
+  const accessors = useMemo7(
+    () => ({ getRowId, getChildren, hasChildren }),
+    [getRowId, getChildren, hasChildren]
+  );
+  const { expanded, childrenMap, loadingIds, errorIds, toggleExpand, retry, expandToLevel } = useTreeState({
+    data,
+    getRowId,
+    getChildren,
+    hasChildren,
+    onLoadChildren,
+    expanded: controlledExpanded,
+    onExpandedChange
+  });
+  const didAutoExpand = useRef6(false);
+  useEffect8(() => {
+    if (didAutoExpand.current) return;
+    didAutoExpand.current = true;
+    if (initialExpandedLevel > 0) void expandToLevel(initialExpandedLevel);
+  }, []);
+  const flatRows = useMemo7(
+    () => flattenTree(data, accessors, expanded, childrenMap),
+    [data, accessors, expanded, childrenMap]
+  );
+  const treeColId = treeColumnId ?? columns[0]?.id;
+  const showRowActionsColumn = Boolean(rowActions?.length);
+  const totalColumnCount = columns.length + (showRowActionsColumn ? 1 : 0);
+  const scrollRef = useRef6(null);
+  const shouldVirtualize = flatRows.length > virtualizeThreshold;
+  const virtualizer = useVirtualizer2({
+    count: flatRows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => estimatedRowHeight,
+    overscan: 10,
+    enabled: shouldVirtualize
+  });
+  function renderRow(flatRow, index, measureRef) {
+    const rowProps = getRowProps?.(flatRow.row, flatRow.depth, index);
+    const rowTestId = getRowTestId?.(flatRow.row) ?? `tree-row-${flatRow.id}`;
+    return /* @__PURE__ */ jsxs13(
+      "tr",
+      {
+        ref: measureRef,
+        ...rowProps,
+        "data-testid": rowTestId,
+        className: cn("border-b", rowProps?.className, index % 2 === 1 && "bg-foreground/5"),
+        children: [
+          columns.map((column) => /* @__PURE__ */ jsx20("td", { className: cn("p-2", alignClassName(column)), children: column.id === treeColId ? /* @__PURE__ */ jsx20(
+            TreeCell,
+            {
+              flatRow,
+              column,
+              indentSize,
+              isLoading: loadingIds.has(flatRow.id),
+              error: errorIds.get(flatRow.id),
+              onToggle: () => toggleExpand(flatRow.row),
+              onRetry: () => retry(flatRow.row)
+            }
+          ) : renderCell(column, flatRow.row) }, column.id)),
+          showRowActionsColumn && rowActions && /* @__PURE__ */ jsx20("td", { className: "p-2", children: /* @__PURE__ */ jsx20(
+            ActionsMenu,
+            {
+              items: rowActions,
+              ctx: { row: flatRow.row },
+              triggerLabel: `Row actions for ${flatRow.id}`
+            }
+          ) })
+        ]
+      },
+      flatRow.id
+    );
+  }
+  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__ */ jsx20("div", { className: "flex flex-col gap-2", "data-testid": "tree-datagrid", children: /* @__PURE__ */ jsx20(
+    "div",
+    {
+      ref: scrollRef,
+      className: shouldVirtualize ? "overflow-y-auto" : void 0,
+      style: shouldVirtualize ? { maxHeight: maxBodyHeight } : void 0,
+      children: /* @__PURE__ */ jsxs13("table", { className: "w-full border-collapse text-sm", children: [
+        /* @__PURE__ */ jsx20("thead", { children: /* @__PURE__ */ jsxs13("tr", { children: [
+          columns.map((column) => /* @__PURE__ */ jsx20(
+            "th",
+            {
+              style: column.width ? { width: column.width } : void 0,
+              className: cn("border-b p-2 font-medium", alignClassName(column)),
+              children: column.header
+            },
+            column.id
+          )),
+          showRowActionsColumn && /* @__PURE__ */ jsx20("th", { className: "border-b p-2", "aria-label": "Row actions" })
+        ] }) }),
+        /* @__PURE__ */ jsx20("tbody", { children: flatRows.length === 0 ? /* @__PURE__ */ jsx20("tr", { children: /* @__PURE__ */ jsx20("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: "No results." }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs13(Fragment4, { children: [
+          paddingTop > 0 && /* @__PURE__ */ jsx20("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx20("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__ */ jsx20("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx20(
+            "td",
+            {
+              colSpan: totalColumnCount,
+              style: { padding: 0, border: "none", height: paddingBottom }
+            }
+          ) })
+        ] }) : flatRows.map((flatRow, index) => renderRow(flatRow, index)) })
+      ] })
+    }
+  ) });
+}
+export {
+  ActionsMenu,
+  BooleanFilter,
+  ColumnSelector,
+  DataGrid,
+  DateRangeFilter,
+  EnumFilter,
+  NumberComparisonFilter,
+  NumberHistogramFilter,
+  NumberRangeFilter,
+  StringFilter,
+  TreeDataGrid,
+  UNARY_OPERATORS,
+  alignClassName,
+  canHideColumn,
+  canHideGroup,
+  countVisible,
+  defaultAlign,
+  defaultFormat,
+  evaluateFilter,
+  facetedNumberValues,
+  fieldKey,
+  flattenTree,
+  getColumnValue,
+  groupColumns,
+  isColumnVisible,
+  isCompositeFilterDescriptor,
+  isFilterDescriptor,
+  isFilterable,
+  isSortable,
+  processClientData,
+  renderDefaultFilterWidget,
+  resolveMenuItems,
+  storageKeyFor,
+  useDebouncedCallback,
+  useGridState,
+  useTreeState
+};
+//# sourceMappingURL=index.js.map