@x12i/data 1.0.0 → 1.1.0

package/dist/react.js

@@ -0,0 +1,3078 @@
+"use client";
+import {
+  DEFAULT_COLUMN_MAX_WIDTH,
+  DEFAULT_COLUMN_MIN_WIDTH,
+  EMPTY_SELECTION,
+  applySavedView,
+  buildDisplayRows,
+  captureView,
+  clampColumnWidth,
+  clampNav,
+  clearSelection,
+  computeAggregate,
+  computeViewIndexes,
+  countSelected,
+  createCellFormatter,
+  createSearchIndex,
+  createServerRowStore,
+  createViewState,
+  defaultMessages,
+  defineColumns,
+  distinctValues,
+  formatMessage,
+  getColumnValue,
+  gridToCsv,
+  gridToTsv,
+  indexColumns,
+  initialColumnWidth,
+  isEditable,
+  isEmptyValue,
+  isFilterEffective,
+  isFilterable,
+  isNavigationKey,
+  isResizable,
+  isSelected,
+  isSortable,
+  isValuelessOperator,
+  layoutColumns,
+  moveColumn,
+  moveColumnTo,
+  navigate,
+  operatorsFor,
+  resizeColumn,
+  resolveColumnAlign,
+  resolveColumnOrder,
+  resolveEditor,
+  resolveFilterType,
+  resolveMessages,
+  selectAll,
+  selectAllExceptNone,
+  selectOnly,
+  selectRange,
+  setColumnFilter,
+  setPinning,
+  setSort,
+  summarizeSelection,
+  toBoolean,
+  toDayString,
+  toNumber,
+  toServerQuery,
+  toText,
+  toggleGroup,
+  toggleRow,
+  toggleSort
+} from "./chunk-ASP4ABDG.js";
+
+// src/react/data-grid.tsx
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+import { Icon as Icon8 } from "@x12i/icons";
+import { Button as Button4, Spinner, VisuallyHidden as VisuallyHidden4 } from "@x12i/ui";
+import {
+  useCallback as useCallback3,
+  useDeferredValue,
+  useEffect as useEffect3,
+  useImperativeHandle,
+  useLayoutEffect as useLayoutEffect3,
+  useMemo as useMemo2,
+  useRef as useRef7,
+  useState as useState8
+} from "react";
+
+// src/react/editors.tsx
+import { useId, useRef as useRef2 } from "react";
+
+// src/react/internal/fields.tsx
+import { useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+function Checkbox({ checked, label, ...props }) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    if (ref.current !== null) ref.current.indeterminate = checked === "mixed";
+  }, [checked]);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...props,
+      ref,
+      type: "checkbox",
+      "data-kit": "data-grid-checkbox",
+      checked: checked === true,
+      "aria-label": label
+    }
+  );
+}
+function TextInput({ label, ...props }) {
+  return /* @__PURE__ */ jsx("input", { "data-kit": "data-grid-input", "aria-label": label, ...props });
+}
+function SelectInput({ label, ...props }) {
+  return /* @__PURE__ */ jsx("select", { "data-kit": "data-grid-select", "aria-label": label, ...props });
+}
+
+// src/react/editors.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function parseEditorInput(column, input, row, messages) {
+  if (column.parseValue !== void 0) return { ok: true, value: column.parseValue(input, row) };
+  const editor = resolveEditor(column);
+  const text = input.trim();
+  switch (editor) {
+    case "number": {
+      if (text === "") return { ok: true, value: null };
+      let normalized = text.replace(/\s/g, "");
+      if (normalized.includes(",") && normalized.includes(".")) normalized = normalized.replace(/,/g, "");
+      else if (normalized.includes(",")) normalized = normalized.replace(",", ".");
+      const number = Number(normalized);
+      return Number.isFinite(number) ? { ok: true, value: number } : { ok: false, message: messages.invalidNumber };
+    }
+    case "date": {
+      if (text === "") return { ok: true, value: null };
+      return toDayString(text) === null ? { ok: false, message: messages.invalidDate } : { ok: true, value: text };
+    }
+    case "boolean":
+      return { ok: true, value: text === "true" };
+    default:
+      return { ok: true, value: input };
+  }
+}
+function editorStartText(column, value) {
+  if (isEmptyValue(value)) return "";
+  switch (resolveEditor(column)) {
+    case "date":
+      return toDayString(value) ?? "";
+    default:
+      return toText(value);
+  }
+}
+function CellEditor({ column, value, messages, locale, error, onCommit, onCancel }) {
+  const focused = useRef2(false);
+  const finished = useRef2(false);
+  const errorId = useId();
+  const editor = resolveEditor(column);
+  const label = formatMessage(messages.editCell, { column: column.header }, locale);
+  const focusOnce = (element) => {
+    if (element === null || focused.current) return;
+    focused.current = true;
+    element.focus({ preventScroll: true });
+    if (element instanceof HTMLInputElement) element.select();
+  };
+  const commit = (input, source) => {
+    if (finished.current) return;
+    finished.current = true;
+    onCommit(input, source);
+    queueMicrotask(() => {
+      finished.current = false;
+    });
+  };
+  const cancel = () => {
+    if (finished.current) return;
+    finished.current = true;
+    onCancel();
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      commit(event.currentTarget.value, "enter");
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      cancel();
+    }
+  };
+  const shared = {
+    label,
+    "aria-invalid": error === null ? void 0 : true,
+    "aria-describedby": error === null ? void 0 : errorId,
+    onKeyDown,
+    onBlur: (event) => commit(event.currentTarget.value, "blur")
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    editor === "select" ? /* @__PURE__ */ jsxs(
+      SelectInput,
+      {
+        ...shared,
+        ref: focusOnce,
+        defaultValue: editorStartText(column, value),
+        onChange: (event) => commit(event.currentTarget.value, "change"),
+        children: [
+          isEmptyValue(value) ? /* @__PURE__ */ jsx2("option", { value: "" }) : null,
+          (column.options ?? []).map((option) => /* @__PURE__ */ jsx2("option", { value: option.value, children: option.label }, option.value))
+        ]
+      }
+    ) : /* @__PURE__ */ jsx2(
+      TextInput,
+      {
+        ...shared,
+        ref: focusOnce,
+        type: editor === "date" ? "date" : "text",
+        inputMode: editor === "number" ? "decimal" : void 0,
+        defaultValue: editorStartText(column, value)
+      }
+    ),
+    error === null ? null : /* @__PURE__ */ jsx2("span", { id: errorId, role: "alert", "data-kit": "data-grid-edit-error", children: error })
+  ] });
+}
+
+// src/react/filter-bar.tsx
+import { Icon } from "@x12i/icons";
+import { Button, IconButton } from "@x12i/ui";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function FilterBar({ chips, messages, onClearAll }) {
+  if (chips.length === 0) return null;
+  const filters = chips.filter((chip) => chip.kind === "filter").length;
+  return /* @__PURE__ */ jsxs2("ul", { "aria-label": messages.activeFilters, "data-kit": "data-grid-chips", children: [
+    chips.map((chip) => /* @__PURE__ */ jsxs2("li", { "data-kit": "data-grid-chip", "data-kind": chip.kind, children: [
+      /* @__PURE__ */ jsx3("span", { "data-kit-slot": "chip-text", children: chip.text }),
+      /* @__PURE__ */ jsx3(IconButton, { label: chip.removeLabel, variant: "ghost", tone: "neutral", size: "xs", onClick: chip.onRemove, children: /* @__PURE__ */ jsx3(Icon, { name: "close", size: 12 }) })
+    ] }, chip.key)),
+    filters > 1 ? /* @__PURE__ */ jsx3("li", { "data-kit-slot": "chips-clear", children: /* @__PURE__ */ jsx3(Button, { variant: "ghost", tone: "neutral", size: "sm", onClick: onClearAll, children: messages.clearAllFilters }) }) : null
+  ] });
+}
+function groupChipText(messages, column, locale) {
+  return formatMessage(messages.groupedBy, { column }, locale);
+}
+
+// src/react/filters.tsx
+import { Button as Button2 } from "@x12i/ui";
+import { useId as useId2, useState } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function textOrEmpty(value) {
+  return value === void 0 || value === null ? "" : toText(value);
+}
+function parseValue(type, text) {
+  if (text.trim() === "") return void 0;
+  switch (type) {
+    case "number": {
+      const number = Number(text.replace(",", "."));
+      return Number.isNaN(number) ? void 0 : number;
+    }
+    case "boolean":
+      return toBoolean(text) ?? void 0;
+    default:
+      return text;
+  }
+}
+function startText(type, value) {
+  if (value === void 0 || value === null) return "";
+  if (type === "date") return toDayString(value) ?? "";
+  return textOrEmpty(value);
+}
+function FilterEditor({ column, item, choices, messages, onApply }) {
+  const type = resolveFilterType(column);
+  const operators = operatorsFor(type);
+  const fieldId = useId2();
+  const initialOperator = item !== void 0 && operators.includes(item.operator) ? item.operator : operators[0];
+  const [operator, setOperator] = useState(initialOperator);
+  const [first, setFirst] = useState(() => {
+    if (item === void 0) return "";
+    return item.operator === "between" && Array.isArray(item.value) ? startText(type, item.value[0]) : Array.isArray(item.value) ? "" : startText(type, item.value);
+  });
+  const [second, setSecond] = useState(
+    () => item !== void 0 && item.operator === "between" && Array.isArray(item.value) ? startText(type, item.value[1]) : ""
+  );
+  const [picked, setPicked] = useState(
+    () => item !== void 0 && Array.isArray(item.value) && item.operator === "in" ? item.value.map(String) : []
+  );
+  const valueless = isValuelessOperator(operator);
+  const showList = type === "enum" && operator === "in";
+  const between = operator === "between";
+  const submit = (event) => {
+    event?.preventDefault();
+    let candidate;
+    if (valueless) candidate = { field: column.id, operator };
+    else if (showList) candidate = { field: column.id, operator, value: picked };
+    else if (between) candidate = { field: column.id, operator, value: [parseValue(type, first), parseValue(type, second)] };
+    else candidate = { field: column.id, operator, value: parseValue(type, first) };
+    onApply(isFilterEffective(candidate) ? candidate : null);
+  };
+  const inputType = type === "number" ? "number" : type === "date" ? "date" : "text";
+  const valueInput = (text, set, label) => type === "boolean" ? /* @__PURE__ */ jsxs3(SelectInput, { label, value: text, onChange: (event) => set(event.currentTarget.value), children: [
+    /* @__PURE__ */ jsx4("option", { value: "", children: messages.filterAny }),
+    /* @__PURE__ */ jsx4("option", { value: "true", children: messages.yes }),
+    /* @__PURE__ */ jsx4("option", { value: "false", children: messages.no })
+  ] }) : /* @__PURE__ */ jsx4(
+    TextInput,
+    {
+      label,
+      type: inputType,
+      step: type === "number" ? "any" : void 0,
+      value: text,
+      onChange: (event) => set(event.currentTarget.value)
+    }
+  );
+  return /* @__PURE__ */ jsxs3("form", { "data-kit": "data-grid-filter", onSubmit: submit, children: [
+    /* @__PURE__ */ jsxs3("label", { "data-kit": "data-grid-field", htmlFor: `${fieldId}-operator`, children: [
+      /* @__PURE__ */ jsx4("span", { "data-kit-slot": "field-label", children: messages.filterOperator }),
+      /* @__PURE__ */ jsx4(
+        "select",
+        {
+          id: `${fieldId}-operator`,
+          "data-kit": "data-grid-select",
+          value: operator,
+          onChange: (event) => setOperator(event.currentTarget.value),
+          children: operators.map((entry) => /* @__PURE__ */ jsx4("option", { value: entry, children: messages.operators[entry] }, entry))
+        }
+      )
+    ] }),
+    valueless ? null : showList ? /* @__PURE__ */ jsx4("div", { role: "group", "aria-label": messages.filterValue, "data-kit": "data-grid-choices", children: choices.length === 0 ? /* @__PURE__ */ jsx4("span", { "data-kit": "data-grid-hint", children: messages.filterNoOptions }) : choices.map((choice) => /* @__PURE__ */ jsxs3("label", { "data-kit": "data-grid-choice", children: [
+      /* @__PURE__ */ jsx4(
+        Checkbox,
+        {
+          label: choice.label,
+          checked: picked.includes(choice.value),
+          onChange: (event) => {
+            const on = event.currentTarget.checked;
+            setPicked((previous) => on ? [...previous, choice.value] : previous.filter((entry) => entry !== choice.value));
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx4("span", { children: choice.label })
+    ] }, choice.value)) }) : between ? /* @__PURE__ */ jsxs3("div", { "data-kit": "data-grid-range", children: [
+      /* @__PURE__ */ jsxs3("label", { "data-kit": "data-grid-field", children: [
+        /* @__PURE__ */ jsx4("span", { "data-kit-slot": "field-label", children: messages.filterFrom }),
+        valueInput(first, setFirst, messages.filterFrom)
+      ] }),
+      /* @__PURE__ */ jsxs3("label", { "data-kit": "data-grid-field", children: [
+        /* @__PURE__ */ jsx4("span", { "data-kit-slot": "field-label", children: messages.filterTo }),
+        valueInput(second, setSecond, messages.filterTo)
+      ] })
+    ] }) : /* @__PURE__ */ jsxs3("label", { "data-kit": "data-grid-field", children: [
+      /* @__PURE__ */ jsx4("span", { "data-kit-slot": "field-label", children: messages.filterValue }),
+      valueInput(first, setFirst, messages.filterValue)
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { "data-kit": "data-grid-filter-actions", children: [
+      /* @__PURE__ */ jsx4(Button2, { type: "button", variant: "ghost", tone: "neutral", size: "sm", onClick: () => onApply(null), children: messages.filterClear }),
+      /* @__PURE__ */ jsx4(Button2, { type: "submit", size: "sm", children: messages.filterApply })
+    ] })
+  ] });
+}
+
+// src/react/grid-rows.tsx
+import { Icon as Icon4 } from "@x12i/icons";
+import { IconButton as IconButton3, VisuallyHidden as VisuallyHidden2 } from "@x12i/ui";
+import { memo } from "react";
+
+// src/react/cells.tsx
+import { Icon as Icon3 } from "@x12i/icons";
+import { Badge, IconButton as IconButton2, VisuallyHidden } from "@x12i/ui";
+import { useState as useState3 } from "react";
+
+// src/react/internal/format.ts
+function createFormatters(columns, context) {
+  const formatters = /* @__PURE__ */ new Map();
+  for (const column of columns) formatters.set(column.id, createCellFormatter(column, context));
+  return formatters;
+}
+function columnWidth(column, sizing) {
+  const stored = sizing[column.id];
+  return stored === void 0 ? initialColumnWidth(column) : clampColumnWidth(column, stored);
+}
+function plainFormatter(column, context) {
+  const { formatter: _ignored, ...plain } = column;
+  void _ignored;
+  return createCellFormatter(plain, context);
+}
+function formatAggregate(column, value, context) {
+  if (isEmptyValue(value)) return "";
+  if (column.aggregate === "count") {
+    return typeof value === "number" ? new Intl.NumberFormat(context.locale).format(value) : toText(value);
+  }
+  return plainFormatter(column, context)(value, void 0);
+}
+function initialsOf(text) {
+  const words = text.trim().split(/\s+/).filter((word) => word !== "");
+  if (words.length === 0) return "";
+  const first = Array.from(words[0] ?? "")[0] ?? "";
+  const last = words.length > 1 ? Array.from(words[words.length - 1] ?? "")[0] ?? "" : "";
+  return `${first}${last}`.toUpperCase();
+}
+var SAFE_SCHEME = /^(?:https?:|mailto:|tel:)/i;
+var RELATIVE = /^(?:\/(?!\/)|#|\.\.?\/)/;
+var DANGEROUS = /^\s*(?:javascript|data|vbscript):/i;
+function isSafeHref(value) {
+  const trimmed = value.trim();
+  return !DANGEROUS.test(trimmed) && (SAFE_SCHEME.test(trimmed) || RELATIVE.test(trimmed));
+}
+function isAllowedHref(value) {
+  return !DANGEROUS.test(value);
+}
+function describeFilterValue(item, column, context, messages) {
+  if (isValuelessOperator(item.operator)) return "";
+  const format = plainFormatter(column, context);
+  const one = (value2) => {
+    if (isEmptyValue(value2)) return "";
+    if (typeof value2 === "boolean") return value2 ? messages.yes : messages.no;
+    const option = column.options?.find((entry) => String(entry.value) === String(value2));
+    if (option !== void 0) return option.label;
+    return format(value2, void 0);
+  };
+  const value = item.value;
+  if (item.operator === "between" && Array.isArray(value)) {
+    const [from, to] = value;
+    return `${one(from)} \u2013 ${one(to)}`;
+  }
+  if (Array.isArray(value)) return value.map(one).join(", ");
+  return one(value);
+}
+function summarizeFilter(item, column, context, messages) {
+  return formatMessage(
+    messages.filterSummary,
+    {
+      column: column.header,
+      operator: messages.operators[item.operator],
+      value: describeFilterValue(item, column, context, messages)
+    },
+    context.locale
+  ).trim();
+}
+
+// src/react/internal/menu.tsx
+import { Icon as Icon2 } from "@x12i/icons";
+import { useRef as useRef4 } from "react";
+
+// src/react/internal/popover.tsx
+import { useEffect, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState2 } from "react";
+
+// src/react/internal/dom.ts
+var FOCUSABLE = 'input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), a[href], [tabindex]:not([tabindex="-1"]), [role="menuitem"]:not([disabled]), [role="menuitemcheckbox"]:not([disabled])';
+function detectDirection(element) {
+  if (element === null || typeof getComputedStyle !== "function") return "ltr";
+  const attribute = element.closest("[dir]")?.getAttribute("dir");
+  if (attribute === "rtl" || attribute === "ltr") return attribute;
+  return getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr";
+}
+function isTextEntry(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable) return true;
+  if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) return true;
+  if (target instanceof HTMLInputElement) return target.type !== "checkbox" && target.type !== "radio";
+  return false;
+}
+function supportsPopover() {
+  return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype.showPopover === "function";
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), Math.max(min, max));
+}
+
+// src/react/internal/popover.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var MARGIN = 8;
+var GAP = 4;
+function Popover({ open, anchor, onClose, role, label, align = "start", initialFocus = "first", children }) {
+  const ref = useRef3(null);
+  const [placement, setPlacement] = useState2(null);
+  const native = supportsPopover();
+  const close = useRef3(onClose);
+  close.current = onClose;
+  useLayoutEffect2(() => {
+    const element = ref.current;
+    if (!open || element === null || anchor === null) return;
+    if (native) {
+      try {
+        element.showPopover();
+      } catch {
+      }
+    }
+    const place = () => {
+      const a = anchor.getBoundingClientRect();
+      const box = element.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const rtl = detectDirection(anchor) === "rtl";
+      let top = a.bottom + GAP;
+      if (top + box.height > viewportHeight - MARGIN && a.top - GAP - box.height >= MARGIN) {
+        top = a.top - GAP - box.height;
+      }
+      top = clamp(top, MARGIN, viewportHeight - MARGIN - Math.min(box.height, viewportHeight - 2 * MARGIN));
+      const startsAtLeft = rtl ? align === "end" : align === "start";
+      const left = clamp(startsAtLeft ? a.left : a.right - box.width, MARGIN, viewportWidth - MARGIN - box.width);
+      const inline = rtl ? viewportWidth - (left + box.width) : left;
+      setPlacement((previous) => {
+        const next = { top, inline, maxBlock: Math.max(viewportHeight - top - MARGIN, 0) };
+        return previous !== null && previous.top === next.top && previous.inline === next.inline && previous.maxBlock === next.maxBlock ? previous : next;
+      });
+    };
+    place();
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    return () => {
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+      setPlacement(null);
+    };
+  }, [open, anchor, align, native]);
+  const placed = placement !== null;
+  useEffect(() => {
+    const element = ref.current;
+    if (!open || !placed || element === null) return;
+    const first = initialFocus === "first" ? element.querySelector(FOCUSABLE) : null;
+    (first ?? element).focus({ preventScroll: true });
+  }, [open, placed, initialFocus]);
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (ref.current?.contains(target) === true || anchor?.contains(target) === true) return;
+      close.current("outside");
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [open, anchor]);
+  if (!open) return null;
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      onClose("escape");
+    }
+  };
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref,
+      role,
+      "aria-label": label,
+      tabIndex: -1,
+      "data-kit": "data-grid-popover",
+      "data-role": role,
+      ...native ? { popover: "manual" } : {},
+      style: placement === null ? { visibility: "hidden", insetBlockStart: 0, insetInlineStart: 0 } : { insetBlockStart: placement.top, insetInlineStart: placement.inline, maxBlockSize: placement.maxBlock },
+      onKeyDown,
+      onBlur: (event) => {
+        const next = event.relatedTarget;
+        if (!(next instanceof Node)) return;
+        if (ref.current?.contains(next) === true || anchor?.contains(next) === true) return;
+        onClose("blur");
+      },
+      children
+    }
+  );
+}
+
+// src/react/internal/menu.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Menu({ open, anchor, onClose, label, items, align }) {
+  const list = useRef4(null);
+  const enabled = () => Array.from(list.current?.querySelectorAll('[role^="menuitem"]:not([aria-disabled="true"])') ?? []);
+  const onKeyDown = (event) => {
+    const entries = enabled();
+    if (entries.length === 0) return;
+    const current = entries.indexOf(document.activeElement);
+    let next = -1;
+    if (event.key === "ArrowDown") next = current < 0 ? 0 : (current + 1) % entries.length;
+    else if (event.key === "ArrowUp") next = current < 0 ? entries.length - 1 : (current - 1 + entries.length) % entries.length;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = entries.length - 1;
+    else if (event.key === "Tab") {
+      onClose("blur");
+      return;
+    }
+    if (next < 0) return;
+    event.preventDefault();
+    entries[next]?.focus();
+  };
+  return /* @__PURE__ */ jsx6(Popover, { open, anchor, onClose, role: "menu", label, ...align === void 0 ? {} : { align }, children: /* @__PURE__ */ jsx6("div", { ref: list, "data-kit": "data-grid-menu", onKeyDown, children: items.map((item) => {
+    const checkable = item.checked !== void 0;
+    return /* @__PURE__ */ jsx6("div", { role: "none", "data-kit": "data-grid-menu-entry", "data-separator": item.separatorBefore === true ? "" : void 0, children: /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        role: checkable ? "menuitemcheckbox" : "menuitem",
+        "aria-checked": checkable ? item.checked : void 0,
+        "aria-disabled": item.disabled === true ? true : void 0,
+        tabIndex: -1,
+        "data-kit": "data-grid-menu-item",
+        "data-danger": item.danger === true ? "" : void 0,
+        "data-checked": item.checked === true ? "" : void 0,
+        onClick: () => {
+          if (item.disabled === true) return;
+          item.onSelect();
+          if (item.keepOpen !== true) onClose("select");
+        },
+        children: [
+          /* @__PURE__ */ jsx6("span", { "data-kit-slot": "menu-check", "aria-hidden": "true", children: item.checked === true ? /* @__PURE__ */ jsx6(Icon2, { name: "check", size: 16 }) : null }),
+          /* @__PURE__ */ jsx6("span", { "data-kit-slot": "menu-label", children: item.label })
+        ]
+      }
+    ) }, item.id);
+  }) }) });
+}
+
+// src/react/cells.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var TAG_WIDTH = 76;
+var TAG_PADDING = 16;
+function optionFor(column, value) {
+  return column.options?.find((option) => String(option.value) === String(value));
+}
+function Sparkline({ values, label }) {
+  if (values.length === 0) return null;
+  const low = Math.min(...values);
+  const high = Math.max(...values);
+  const span = high - low || 1;
+  const last = Math.max(values.length - 1, 1);
+  const points = values.map((value, index) => `${(index / last * 100).toFixed(2)},${(100 - (value - low) / span * 100).toFixed(2)}`).join(" ");
+  return /* @__PURE__ */ jsx7("svg", { "data-kit": "data-grid-sparkline", viewBox: "0 0 100 100", preserveAspectRatio: "none", role: "img", "aria-label": label, focusable: "false", children: /* @__PURE__ */ jsx7("polyline", { points, fill: "none" }) });
+}
+function ProgressBar({ ratio, label, valueText }) {
+  return /* @__PURE__ */ jsxs5("span", { "data-kit": "data-grid-progress", children: [
+    /* @__PURE__ */ jsx7(
+      "span",
+      {
+        role: "progressbar",
+        "aria-label": label,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": Math.round(ratio * 100),
+        "aria-valuetext": valueText,
+        "data-kit": "data-grid-progress-track",
+        children: /* @__PURE__ */ jsx7("span", { "data-kit": "data-grid-progress-fill", style: { inlineSize: `${(ratio * 100).toFixed(1)}%` } })
+      }
+    ),
+    /* @__PURE__ */ jsx7("span", { "data-kit": "data-grid-progress-text", "aria-hidden": "true", children: valueText })
+  ] });
+}
+function RowActionsCell({ column, row, messages }) {
+  const [anchor, setAnchor] = useState3(null);
+  const [open, setOpen] = useState3(false);
+  const actions = column.actions?.(row) ?? [];
+  if (actions.length === 0) return null;
+  const items = actions.map((action) => ({
+    id: action.id,
+    label: action.label,
+    onSelect: () => action.onSelect(row),
+    ...action.disabled === void 0 ? {} : { disabled: action.disabled },
+    danger: action.tone === "danger"
+  }));
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx7(
+      IconButton2,
+      {
+        ref: setAnchor,
+        label: messages.rowActions,
+        variant: "ghost",
+        tone: "neutral",
+        size: "sm",
+        tabIndex: -1,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "data-grid-primary": "",
+        onClick: () => setOpen((value) => !value),
+        children: /* @__PURE__ */ jsx7(Icon3, { name: "more", size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      Menu,
+      {
+        open,
+        anchor,
+        label: messages.rowActions,
+        items,
+        align: "end",
+        onClose: (reason) => {
+          setOpen(false);
+          if (reason === "escape" || reason === "select") anchor?.closest('[role="gridcell"]')?.focus({ preventScroll: true });
+        }
+      }
+    )
+  ] });
+}
+function renderCellContent(context, options) {
+  const { column, value, text, messages, row } = context;
+  if (column.cell !== void 0) return column.cell(context);
+  const empty = isEmptyValue(value);
+  const editor = resolveEditor(column);
+  if (editor === "boolean" && !options.readOnly && isEditable(column, row) && options.onToggle !== void 0) {
+    const checked = toBoolean(value) === true;
+    return /* @__PURE__ */ jsx7(
+      Checkbox,
+      {
+        checked,
+        label: column.header,
+        tabIndex: -1,
+        "data-grid-primary": "",
+        "data-grid-space": "",
+        onChange: (event) => options.onToggle?.(event.currentTarget.checked)
+      }
+    );
+  }
+  switch (column.cellType) {
+    case "boolean": {
+      const flag = toBoolean(value);
+      if (flag === null) return empty ? null : /* @__PURE__ */ jsx7("span", { "data-kit": "data-grid-text", children: text });
+      return /* @__PURE__ */ jsxs5("span", { "data-kit": "data-grid-boolean", "data-value": flag ? "true" : "false", children: [
+        /* @__PURE__ */ jsx7(Icon3, { name: flag ? "check" : "close", size: 16 }),
+        /* @__PURE__ */ jsx7(VisuallyHidden, { children: flag ? messages.yes : messages.no })
+      ] });
+    }
+    case "status": {
+      if (empty) return null;
+      const option = optionFor(column, value);
+      return /* @__PURE__ */ jsx7(Badge, { tone: option?.tone ?? "neutral", children: option?.label ?? text });
+    }
+    case "tags": {
+      const items = Array.isArray(value) ? value : empty ? [] : [value];
+      if (items.length === 0) return null;
+      const fit = Math.max(1, Math.floor((options.width - TAG_PADDING) / TAG_WIDTH));
+      const shown = items.length > fit ? items.slice(0, Math.max(fit - 1, 1)) : items;
+      const hidden = items.slice(shown.length);
+      const labelOf = (item) => optionFor(column, item)?.label ?? String(item);
+      return /* @__PURE__ */ jsxs5("span", { "data-kit": "data-grid-tags", children: [
+        shown.map((item, index) => /* @__PURE__ */ jsx7(Badge, { size: "sm", tone: optionFor(column, item)?.tone ?? "neutral", children: labelOf(item) }, `${String(item)}:${index}`)),
+        hidden.length > 0 ? /* @__PURE__ */ jsxs5(Badge, { size: "sm", variant: "outline", title: hidden.map(labelOf).join(", "), children: [
+          formatMessage(messages.moreTags, { count: hidden.length }),
+          /* @__PURE__ */ jsx7(VisuallyHidden, { children: `: ${hidden.map(labelOf).join(", ")}` })
+        ] }) : null
+      ] });
+    }
+    case "progress": {
+      if (empty) return null;
+      const max = column.progressMax ?? 100;
+      const number = toNumber(value);
+      const ratio = Number.isNaN(number) || max <= 0 ? 0 : Math.min(Math.max(number / max, 0), 1);
+      return /* @__PURE__ */ jsx7(ProgressBar, { ratio, label: column.header, valueText: text });
+    }
+    case "link": {
+      if (empty) return null;
+      const target = column.href?.(row) ?? (typeof value === "string" ? value : void 0);
+      const allowed = target !== void 0 && (column.href === void 0 ? isSafeHref(target) : isAllowedHref(target));
+      if (!allowed || target === void 0) return /* @__PURE__ */ jsx7("span", { "data-kit": "data-grid-text", children: text });
+      return /* @__PURE__ */ jsx7("a", { href: target, tabIndex: -1, "data-kit": "data-grid-link", "data-grid-primary": "", rel: "noopener noreferrer", children: text });
+    }
+    case "actions":
+      return /* @__PURE__ */ jsx7(RowActionsCell, { column, row, messages });
+    case "avatar": {
+      if (empty) return null;
+      return /* @__PURE__ */ jsxs5("span", { "data-kit": "data-grid-avatar-cell", children: [
+        /* @__PURE__ */ jsx7("span", { "data-kit": "data-grid-avatar", "aria-hidden": "true", children: initialsOf(text) }),
+        /* @__PURE__ */ jsx7("span", { "data-kit": "data-grid-text", title: text, children: text })
+      ] });
+    }
+    case "sparkline": {
+      const series = (Array.isArray(value) ? value : []).map(toNumber).filter((entry) => !Number.isNaN(entry));
+      return /* @__PURE__ */ jsx7(Sparkline, { values: series, label: text });
+    }
+    default:
+      if (empty) return null;
+      return /* @__PURE__ */ jsx7("span", { "data-kit": "data-grid-text", title: text, children: text });
+  }
+}
+
+// src/react/grid-rows.tsx
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var CONTROL_SELECTOR = 'button, a[href], input, select, textarea, label, [role="menuitem"], [role="menuitemcheckbox"]';
+function startedOnControl(event) {
+  const target = event.target;
+  if (!(target instanceof Element)) return false;
+  const control = target.closest(CONTROL_SELECTOR);
+  return control !== null && event.currentTarget.contains(control);
+}
+function cellStyle(info) {
+  const style = { inlineSize: info.width };
+  if (info.pin === "start") style.insetInlineStart = info.pinOffset;
+  if (info.pin === "end") style.insetInlineEnd = info.pinOffset;
+  return style;
+}
+function GridCell({
+  info,
+  index,
+  navRow,
+  cursor,
+  children,
+  state
+}) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      role: "gridcell",
+      "aria-colindex": index + 1,
+      tabIndex: cursor ? 0 : -1,
+      "data-kit": "data-grid-cell",
+      "data-nav-row": navRow,
+      "data-nav-col": index,
+      "data-type": info.kind === "data" ? info.column?.cellType ?? "text" : info.kind,
+      "data-align": info.align,
+      "data-pinned": info.pin ?? void 0,
+      "data-pinned-edge": info.pinEdge ? "" : void 0,
+      "data-first": info.first ? "" : void 0,
+      style: cellStyle(info),
+      ...state,
+      children
+    }
+  );
+}
+function GridRowView(props) {
+  const { item, ariaRowIndex, displayIndex, top, height, columns, slots, totalWidth, selected, cursorCol, env, treegrid } = props;
+  const { messages, locale } = env;
+  const navRow = displayIndex + 1;
+  const style = {
+    transform: `translateY(${top}px)`,
+    inlineSize: totalWidth,
+    ...height === void 0 ? {} : { blockSize: height },
+    ...item.depth > 0 ? { "--_depth": item.depth } : {}
+  };
+  const renderSlots = (renderColumn) => slots.map(
+    (slot, position) => slot.kind === "spacer" ? /* @__PURE__ */ jsx8("div", { role: "presentation", "data-kit": "data-grid-spacer", style: { inlineSize: slot.size } }, `spacer-${position}`) : renderColumn(columns[slot.index], slot.index)
+  );
+  if (item.kind === "detail") {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        ref: props.measureRef,
+        role: "row",
+        "aria-rowindex": ariaRowIndex,
+        "aria-level": treegrid ? item.depth + 1 : void 0,
+        "data-kit": "data-grid-row",
+        "data-kind": "detail",
+        "data-index": displayIndex,
+        style: { ...style, blockSize: void 0 },
+        children: /* @__PURE__ */ jsx8("div", { role: "gridcell", "aria-colindex": 1, "aria-colspan": Math.max(columns.length, 1), "aria-label": messages.detailRegion, "data-kit": "data-grid-detail", children: /* @__PURE__ */ jsx8("div", { "data-kit-slot": "detail-content", style: { inlineSize: props.viewportWidth > 0 ? props.viewportWidth : void 0 }, children: env.renderDetail?.(item.row) }) })
+      }
+    );
+  }
+  if (item.kind === "group") {
+    const label = formatMessage(
+      messages.groupLabel,
+      { value: isEmptyValue(item.value) ? messages.filterBlank : env.formatGroupValue(item.field, item.value), count: item.count },
+      locale
+    );
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        role: "row",
+        "aria-rowindex": ariaRowIndex,
+        "aria-level": item.depth + 1,
+        "aria-expanded": item.expanded,
+        "data-kit": "data-grid-row",
+        "data-kind": "group",
+        "data-index": displayIndex,
+        "data-expanded": item.expanded ? "" : void 0,
+        style,
+        children: renderSlots((info, index) => {
+          const cursor = cursorCol === index;
+          if (info.kind !== "data") return /* @__PURE__ */ jsx8(GridCell, { info, index, navRow, cursor, children: null }, info.id);
+          const aggregate = info.column !== null && info.column.aggregate !== void 0 ? item.aggregates[info.column.id] : void 0;
+          return /* @__PURE__ */ jsx8(GridCell, { info, index, navRow, cursor, children: info.first ? /* @__PURE__ */ jsxs6(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "data-kit": "data-grid-group-toggle",
+              "data-grid-primary": "",
+              "data-grid-space": "",
+              "aria-label": item.expanded ? messages.collapseGroup : messages.expandGroup,
+              onClick: () => env.toggleGroup(item.id),
+              children: [
+                /* @__PURE__ */ jsx8("span", { "data-flip": "", "data-expanded": item.expanded ? "" : void 0, children: /* @__PURE__ */ jsx8(Icon4, { name: item.expanded ? "chevron-down" : "chevron-right", size: 16 }) }),
+                /* @__PURE__ */ jsx8("span", { "data-kit-slot": "group-label", children: label })
+              ]
+            }
+          ) : isEmptyValue(aggregate) ? null : /* @__PURE__ */ jsx8("span", { "data-kit": "data-grid-text", "data-kit-slot": "aggregate", children: env.formatAggregate(info.id, aggregate) }) }, info.id);
+        })
+      }
+    );
+  }
+  if (item.kind === "placeholder") {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        role: "row",
+        "aria-rowindex": ariaRowIndex,
+        "aria-busy": item.failed === true ? void 0 : true,
+        "data-kit": "data-grid-row",
+        "data-kind": "placeholder",
+        "data-failed": item.failed === true ? "" : void 0,
+        "data-index": displayIndex,
+        style,
+        children: renderSlots((info, index) => /* @__PURE__ */ jsx8(GridCell, { info, index, navRow, cursor: cursorCol === index, children: info.kind === "data" ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+          /* @__PURE__ */ jsx8("span", { "data-kit": "data-grid-skeleton", "aria-hidden": "true" }),
+          info.first ? /* @__PURE__ */ jsx8(VisuallyHidden2, { children: item.failed === true ? messages.rowFailed : messages.rowLoading }) : null
+        ] }) : null }, info.id))
+      }
+    );
+  }
+  const { row, id } = item;
+  const selectable = env.selectionMode !== "none" && (env.isRowSelectable?.(row) ?? true);
+  const expandable = env.renderDetail !== void 0 && (env.isRowExpandable?.(row) ?? true);
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      role: "row",
+      "aria-rowindex": ariaRowIndex,
+      "aria-selected": env.selectionMode !== "none" && selectable ? selected : void 0,
+      "aria-level": treegrid ? item.depth + 1 : void 0,
+      "aria-expanded": expandable ? props.expanded : void 0,
+      "data-kit": "data-grid-row",
+      "data-kind": "data",
+      "data-index": displayIndex,
+      "data-row-id": id,
+      "data-selected": selected ? "" : void 0,
+      "data-expanded": props.expanded ? "" : void 0,
+      style,
+      onClick: env.onRowClick === void 0 ? void 0 : (event) => {
+        if (!startedOnControl(event)) env.onRowClick?.(row, event);
+      },
+      children: renderSlots((info, index) => {
+        const cursor = cursorCol === index;
+        if (info.kind === "select") {
+          return /* @__PURE__ */ jsx8(GridCell, { info, index, navRow, cursor, children: selectable ? /* @__PURE__ */ jsx8(
+            Checkbox,
+            {
+              checked: selected,
+              label: messages.selectRow,
+              tabIndex: -1,
+              "data-grid-primary": "",
+              "data-grid-space": "",
+              onChange: (event) => env.toggleSelect(
+                id,
+                displayIndex,
+                env.selectionMode === "multiple" && event.nativeEvent.shiftKey === true
+              )
+            }
+          ) : null }, info.id);
+        }
+        if (info.kind === "expand") {
+          return /* @__PURE__ */ jsx8(GridCell, { info, index, navRow, cursor, children: expandable ? /* @__PURE__ */ jsx8(
+            IconButton3,
+            {
+              label: props.expanded ? messages.collapseRow : messages.expandRow,
+              variant: "ghost",
+              tone: "neutral",
+              size: "sm",
+              tabIndex: -1,
+              "aria-expanded": props.expanded,
+              "data-grid-primary": "",
+              "data-grid-space": "",
+              onClick: () => env.toggleExpand(id),
+              children: /* @__PURE__ */ jsx8("span", { "data-flip": "", children: /* @__PURE__ */ jsx8(Icon4, { name: props.expanded ? "chevron-down" : "chevron-right", size: 16 }) })
+            }
+          ) : null }, info.id);
+        }
+        const column = info.column;
+        const override = props.overrides?.[column.id];
+        const value = override === void 0 ? getColumnValue(column, row) : override.value;
+        const format = env.formatters.get(column.id);
+        const text = format === void 0 ? "" : format(value, row);
+        const editing = props.editingColumnId === column.id;
+        const editable = isEditable(column, row);
+        const state = {
+          "data-editing": editing ? "" : void 0,
+          "data-editable": editable ? "" : void 0,
+          "data-dirty": override !== void 0 && override.status !== "error" ? "" : void 0,
+          "data-pending": override?.status === "pending" ? "" : void 0,
+          "data-error": override?.status === "error" ? "" : void 0
+        };
+        return /* @__PURE__ */ jsx8(GridCell, { info, index, navRow, cursor, state, children: editing ? /* @__PURE__ */ jsx8(
+          CellEditor,
+          {
+            column,
+            value,
+            messages,
+            locale,
+            error: props.editingError,
+            onCommit: env.commitEdit,
+            onCancel: env.cancelEdit
+          }
+        ) : /* @__PURE__ */ jsx8(
+          "span",
+          {
+            "data-kit-slot": "cell-content",
+            onDoubleClick: editable ? () => env.startEdit(id, column.id, row) : void 0,
+            children: renderCellContent(
+              {
+                row,
+                rowId: id,
+                rowIndex: item.index,
+                column,
+                value,
+                text,
+                selected,
+                messages,
+                locale
+              },
+              {
+                width: info.width,
+                readOnly: false,
+                onToggle: (next) => env.toggleBoolean(id, column.id, next, row)
+              }
+            )
+          }
+        ) }, info.id);
+      })
+    }
+  );
+}
+var GridRowItem = memo(GridRowView);
+
+// src/react/header.tsx
+import { Icon as Icon5 } from "@x12i/icons";
+import { IconButton as IconButton4, VisuallyHidden as VisuallyHidden3 } from "@x12i/ui";
+import { memo as memo2, useState as useState4 } from "react";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var RESIZE_STEP = 16;
+function placementOf(event, rtl) {
+  const box = event.currentTarget.getBoundingClientRect();
+  const leftHalf = event.clientX < box.left + box.width / 2;
+  return leftHalf !== rtl ? "before" : "after";
+}
+function ariaSort(direction, sortable) {
+  if (!sortable) return void 0;
+  return direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none";
+}
+function HeaderCellView(props) {
+  const {
+    column,
+    navCol,
+    width,
+    minWidth,
+    maxWidth,
+    pin,
+    pinOffset,
+    pinEdge,
+    sortDirection,
+    sortRank,
+    sortable,
+    filterable,
+    filtered,
+    resizable,
+    cursor,
+    rtl,
+    popover,
+    align,
+    messages,
+    locale,
+    actions,
+    reorderable,
+    dragging,
+    dropPlacement
+  } = props;
+  const [menuAnchor, setMenuAnchor] = useState4(null);
+  const [filterAnchor, setFilterAnchor] = useState4(null);
+  const [drag, setDrag] = useState4(null);
+  const style = { inlineSize: width };
+  if (pin === "start") style.insetInlineStart = pinOffset;
+  if (pin === "end") style.insetInlineEnd = pinOffset;
+  const label = column.headerCell === void 0 ? column.header : column.headerCell({ column, sortDirection, messages });
+  const restoreFocus = (reason) => {
+    if (reason === "escape" || reason === "select") {
+      const cell = menuAnchor?.closest('[role="columnheader"]') ?? filterAnchor?.closest('[role="columnheader"]');
+      cell?.focus({ preventScroll: true });
+    }
+  };
+  const onResizerKeyDown = (event) => {
+    const grow = rtl ? "ArrowLeft" : "ArrowRight";
+    const shrink = rtl ? "ArrowRight" : "ArrowLeft";
+    const step = event.shiftKey ? RESIZE_STEP * 4 : RESIZE_STEP;
+    let next = null;
+    if (event.key === grow) next = width + step;
+    else if (event.key === shrink) next = width - step;
+    else if (event.key === "Home") next = minWidth;
+    else if (event.key === "End") next = maxWidth;
+    if (next === null) return;
+    event.preventDefault();
+    event.stopPropagation();
+    actions.resize(column.id, next, true);
+  };
+  const onDragStart = (event) => {
+    if (drag !== null) {
+      event.preventDefault();
+      return;
+    }
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", column.header);
+    actions.dragStart(column.id);
+  };
+  const onDragOver = (event) => {
+    if (!actions.dragOver(column.id, placementOf(event, rtl))) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  };
+  const onDragLeave = (event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) actions.dragLeave(column.id);
+  };
+  const onDrop = (event) => {
+    event.preventDefault();
+    actions.drop(column.id, placementOf(event, rtl));
+  };
+  const onPointerDown = (event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDrag({ startX: event.clientX, startWidth: width });
+  };
+  const onPointerMove = (event) => {
+    if (drag === null) return;
+    const delta = event.clientX - drag.startX;
+    actions.resize(column.id, drag.startWidth + (rtl ? -delta : delta));
+  };
+  const endDrag = (event) => {
+    if (drag === null) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+    setDrag(null);
+  };
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      role: "columnheader",
+      "aria-colindex": navCol + 1,
+      "aria-sort": ariaSort(sortDirection, sortable),
+      tabIndex: cursor ? 0 : -1,
+      "data-kit": "data-grid-header-cell",
+      "data-nav-row": 0,
+      "data-nav-col": navCol,
+      "data-column": column.id,
+      "data-align": align,
+      "data-sorted": sortDirection ?? void 0,
+      "data-filtered": filtered ? "" : void 0,
+      "data-pinned": pin ?? void 0,
+      "data-pinned-edge": pinEdge ? "" : void 0,
+      "data-resizing": drag === null ? void 0 : "",
+      "data-dragging": dragging ? "" : void 0,
+      "data-drop": dropPlacement ?? void 0,
+      draggable: reorderable ? true : void 0,
+      onDragStart: reorderable ? onDragStart : void 0,
+      onDragOver: reorderable ? onDragOver : void 0,
+      onDragLeave: reorderable ? onDragLeave : void 0,
+      onDrop: reorderable ? onDrop : void 0,
+      onDragEnd: reorderable ? actions.dragEnd : void 0,
+      style,
+      children: [
+        /* @__PURE__ */ jsxs7("div", { "data-kit": "data-grid-header-content", children: [
+          sortable ? /* @__PURE__ */ jsxs7(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "data-kit": "data-grid-sort",
+              "data-grid-primary": "",
+              "data-grid-space": "",
+              onClick: (event) => actions.sort(column.id, event.shiftKey),
+              children: [
+                /* @__PURE__ */ jsx9("span", { "data-kit-slot": "header-label", children: label }),
+                /* @__PURE__ */ jsx9("span", { "data-kit-slot": "sort-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx9(Icon5, { name: sortDirection === "desc" ? "chevron-down" : "chevron-up", size: 12 }) }),
+                sortRank !== null ? /* @__PURE__ */ jsxs7("span", { "data-kit-slot": "sort-rank", children: [
+                  /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", children: sortRank }),
+                  /* @__PURE__ */ jsx9(VisuallyHidden3, { children: formatMessage(messages.sortRank, { rank: sortRank }, locale) })
+                ] }) : null
+              ]
+            }
+          ) : /* @__PURE__ */ jsx9("span", { "data-kit-slot": "header-label", children: label }),
+          filterable ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
+            /* @__PURE__ */ jsx9(
+              IconButton4,
+              {
+                ref: setFilterAnchor,
+                label: formatMessage(messages.filterColumn, { column: column.header }, locale),
+                variant: "ghost",
+                tone: filtered ? "accent" : "neutral",
+                size: "xs",
+                tabIndex: -1,
+                "aria-haspopup": "dialog",
+                "aria-expanded": popover === "filter",
+                "data-kit-slot": "filter-trigger",
+                "data-active": filtered ? "" : void 0,
+                onClick: () => actions.setPopover(column.id, popover === "filter" ? null : "filter"),
+                children: /* @__PURE__ */ jsx9(Icon5, { name: "filter", size: 12 })
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              Popover,
+              {
+                open: popover === "filter",
+                anchor: filterAnchor,
+                role: "dialog",
+                label: formatMessage(messages.filterColumn, { column: column.header }, locale),
+                align: rtl ? "end" : "start",
+                onClose: (reason) => {
+                  actions.closePopover(column.id, "filter");
+                  restoreFocus(reason);
+                },
+                children: popover === "filter" ? actions.renderFilter(column.id, () => {
+                  actions.setPopover(column.id, null);
+                  filterAnchor?.closest('[role="columnheader"]')?.focus({ preventScroll: true });
+                }) : null
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsx9(
+            IconButton4,
+            {
+              ref: setMenuAnchor,
+              label: formatMessage(messages.columnMenu, { column: column.header }, locale),
+              variant: "ghost",
+              tone: "neutral",
+              size: "xs",
+              tabIndex: -1,
+              "aria-haspopup": "menu",
+              "aria-expanded": popover === "menu",
+              "data-kit-slot": "menu-trigger",
+              onClick: () => actions.setPopover(column.id, popover === "menu" ? null : "menu"),
+              children: /* @__PURE__ */ jsx9(Icon5, { name: "chevron-down", size: 12 })
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            Menu,
+            {
+              open: popover === "menu",
+              anchor: menuAnchor,
+              label: formatMessage(messages.columnMenu, { column: column.header }, locale),
+              items: popover === "menu" ? actions.getMenuItems(column.id) : [],
+              align: rtl ? "end" : "start",
+              onClose: (reason) => {
+                actions.closePopover(column.id, "menu");
+                restoreFocus(reason);
+              }
+            }
+          )
+        ] }),
+        resizable ? /* @__PURE__ */ jsx9(
+          "div",
+          {
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": formatMessage(messages.resizeColumn, { column: column.header }, locale),
+            "aria-valuenow": width,
+            "aria-valuemin": minWidth,
+            "aria-valuemax": maxWidth,
+            tabIndex: -1,
+            "data-kit": "data-grid-resizer",
+            "data-active": drag === null ? void 0 : "",
+            onPointerDown,
+            onPointerMove,
+            onPointerUp: endDrag,
+            onPointerCancel: endDrag,
+            onKeyDown: onResizerKeyDown,
+            onClick: (event) => event.stopPropagation(),
+            onDoubleClick: () => actions.resize(column.id, initialColumnWidth(column))
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var HeaderCell = memo2(HeaderCellView);
+
+// src/react/internal/clipboard.ts
+async function writeClipboard(text) {
+  try {
+    if (typeof navigator !== "undefined" && navigator.clipboard !== void 0 && typeof navigator.clipboard.writeText === "function") {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+  }
+  if (typeof document === "undefined") return false;
+  const area = document.createElement("textarea");
+  area.value = text;
+  area.setAttribute("readonly", "");
+  area.style.position = "fixed";
+  area.style.insetBlockStart = "0";
+  area.style.opacity = "0";
+  document.body.append(area);
+  area.select();
+  let copied;
+  try {
+    copied = document.execCommand("copy");
+  } catch {
+    copied = false;
+  }
+  area.remove();
+  return copied;
+}
+function downloadText(text, fileName, type = "text/csv;charset=utf-8") {
+  if (typeof document === "undefined" || typeof URL === "undefined" || typeof URL.createObjectURL !== "function") return;
+  const url = URL.createObjectURL(new Blob([text], { type }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = fileName;
+  link.hidden = true;
+  document.body.append(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+
+// src/react/internal/use-controllable.ts
+import { useCallback, useRef as useRef5, useState as useState5 } from "react";
+function useControllableState(value, defaultValue, onChange) {
+  const [inner, setInner] = useState5(defaultValue);
+  const controlled = value !== void 0;
+  const current = controlled ? value : inner;
+  const latest = useRef5(current);
+  latest.current = current;
+  const isControlled = useRef5(controlled);
+  isControlled.current = controlled;
+  const handler = useRef5(onChange);
+  handler.current = onChange;
+  const set = useCallback((next) => {
+    const resolved = typeof next === "function" ? next(latest.current) : next;
+    if (Object.is(resolved, latest.current)) return;
+    latest.current = resolved;
+    if (!isControlled.current) setInner(resolved);
+    handler.current?.(resolved);
+  }, []);
+  return [current, set];
+}
+function useEvent(callback) {
+  const ref = useRef5(callback);
+  ref.current = callback;
+  return useCallback((...args) => ref.current(...args), []);
+}
+
+// src/react/pagination.tsx
+import { Icon as Icon6 } from "@x12i/icons";
+import { IconButton as IconButton5 } from "@x12i/ui";
+import { useMemo } from "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function Pagination({
+  page,
+  pageSize,
+  total,
+  pageSizeOptions,
+  onPageChange,
+  onPageSizeChange,
+  messages: overrides,
+  locale,
+  disabled = false,
+  className
+}) {
+  const messages = useMemo(() => resolveMessages(overrides), [overrides]);
+  const pages = total === null ? null : Math.max(1, Math.ceil(total / Math.max(pageSize, 1)));
+  const lastPage = pages === null ? Number.POSITIVE_INFINITY : pages - 1;
+  const current = Math.min(Math.max(page, 0), lastPage);
+  const start = total === 0 ? 0 : current * pageSize + 1;
+  const end = total === null ? (current + 1) * pageSize : Math.min((current + 1) * pageSize, total);
+  const atStart = disabled || current <= 0;
+  const atEnd = disabled || current >= lastPage;
+  const go = (target) => onPageChange(Math.min(Math.max(target, 0), lastPage));
+  const sizes = useMemo(() => {
+    const set = /* @__PURE__ */ new Set([...pageSizeOptions ?? [], pageSize]);
+    return [...set].sort((a, b) => a - b);
+  }, [pageSizeOptions, pageSize]);
+  return /* @__PURE__ */ jsxs8("nav", { "aria-label": messages.paginationLabel, "data-kit": "data-grid-pagination", ...className === void 0 ? {} : { className }, children: [
+    onPageSizeChange !== void 0 ? /* @__PURE__ */ jsxs8("label", { "data-kit-slot": "page-size", children: [
+      /* @__PURE__ */ jsx10("span", { children: messages.pageSize }),
+      /* @__PURE__ */ jsx10(
+        SelectInput,
+        {
+          label: messages.pageSize,
+          value: pageSize,
+          disabled,
+          onChange: (event) => onPageSizeChange(Number(event.currentTarget.value)),
+          children: sizes.map((size) => /* @__PURE__ */ jsx10("option", { value: size, children: new Intl.NumberFormat(locale).format(size) }, size))
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsx10("span", { "data-kit-slot": "range", children: total === null ? formatMessage(messages.pageStatus, { page: current + 1, pages: "?" }, locale) : formatMessage(messages.pageRange, { start, end, total }, locale) }),
+    /* @__PURE__ */ jsxs8("span", { "data-kit-slot": "buttons", children: [
+      /* @__PURE__ */ jsx10(IconButton5, { label: messages.firstPage, variant: "ghost", tone: "neutral", size: "sm", disabled: atStart, onClick: () => go(0), children: /* @__PURE__ */ jsxs8("span", { "data-flip": "", "data-kit-slot": "double-chevron", children: [
+        /* @__PURE__ */ jsx10(Icon6, { name: "chevron-left", size: 12 }),
+        /* @__PURE__ */ jsx10(Icon6, { name: "chevron-left", size: 12 })
+      ] }) }),
+      /* @__PURE__ */ jsx10(IconButton5, { label: messages.previousPage, variant: "ghost", tone: "neutral", size: "sm", disabled: atStart, onClick: () => go(current - 1), children: /* @__PURE__ */ jsx10("span", { "data-flip": "", children: /* @__PURE__ */ jsx10(Icon6, { name: "chevron-left", size: 16 }) }) }),
+      pages === null ? null : /* @__PURE__ */ jsx10("span", { "data-kit-slot": "status", children: formatMessage(messages.pageStatus, { page: current + 1, pages }, locale) }),
+      /* @__PURE__ */ jsx10(IconButton5, { label: messages.nextPage, variant: "ghost", tone: "neutral", size: "sm", disabled: atEnd, onClick: () => go(current + 1), children: /* @__PURE__ */ jsx10("span", { "data-flip": "", children: /* @__PURE__ */ jsx10(Icon6, { name: "chevron-right", size: 16 }) }) }),
+      /* @__PURE__ */ jsx10(
+        IconButton5,
+        {
+          label: messages.lastPage,
+          variant: "ghost",
+          tone: "neutral",
+          size: "sm",
+          disabled: atEnd || pages === null,
+          onClick: () => go(lastPage),
+          children: /* @__PURE__ */ jsxs8("span", { "data-flip": "", "data-kit-slot": "double-chevron", children: [
+            /* @__PURE__ */ jsx10(Icon6, { name: "chevron-right", size: 12 }),
+            /* @__PURE__ */ jsx10(Icon6, { name: "chevron-right", size: 12 })
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/react/toolbar.tsx
+import { Icon as Icon7 } from "@x12i/icons";
+import { Button as Button3, IconButton as IconButton6 } from "@x12i/ui";
+import { useState as useState6 } from "react";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+function Toolbar(props) {
+  const { messages, locale, quickFilter, selectedCount, totalCount } = props;
+  const [columnsAnchor, setColumnsAnchor] = useState6(null);
+  const [columnsOpen, setColumnsOpen] = useState6(false);
+  const items = [
+    ...props.columns.map((column) => ({
+      id: column.id,
+      label: column.header,
+      checked: column.visible,
+      keepOpen: true,
+      onSelect: () => props.onToggleColumn(column.id, !column.visible)
+    })),
+    {
+      id: "__show-all",
+      label: messages.showAllColumns,
+      separatorBefore: true,
+      disabled: props.columns.every((column) => column.visible),
+      onSelect: props.onShowAllColumns,
+      keepOpen: true
+    }
+  ];
+  const hasStart = props.start !== void 0 && props.start !== null;
+  const hasEnd = props.end !== void 0 && props.end !== null;
+  const showSelection = selectedCount > 0;
+  const showAnything = props.search || props.columnsMenu || props.exportButton || props.copyButton || showSelection || hasStart || hasEnd;
+  if (!showAnything) return null;
+  const allSelected = totalCount !== null && totalCount > 0 && selectedCount === totalCount;
+  return /* @__PURE__ */ jsxs9("div", { role: "group", "aria-label": messages.toolbarLabel, "data-kit": "data-grid-toolbar", children: [
+    hasStart ? /* @__PURE__ */ jsx11("div", { "data-kit-slot": "toolbar-start", children: props.start }) : null,
+    props.search ? /* @__PURE__ */ jsxs9("div", { "data-kit-slot": "search", children: [
+      /* @__PURE__ */ jsx11("span", { "data-kit-slot": "search-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx11(Icon7, { name: "search", size: 16 }) }),
+      /* @__PURE__ */ jsx11(
+        TextInput,
+        {
+          label: messages.quickSearch,
+          type: "search",
+          value: quickFilter,
+          placeholder: messages.quickSearchPlaceholder,
+          onChange: (event) => props.onQuickFilterChange(event.currentTarget.value),
+          onKeyDown: (event) => {
+            if (event.key === "Escape" && quickFilter !== "") {
+              event.preventDefault();
+              props.onQuickFilterChange("");
+            }
+          }
+        }
+      ),
+      quickFilter !== "" ? /* @__PURE__ */ jsx11(
+        IconButton6,
+        {
+          label: messages.clearSearch,
+          variant: "ghost",
+          tone: "neutral",
+          size: "xs",
+          onClick: () => props.onQuickFilterChange(""),
+          children: /* @__PURE__ */ jsx11(Icon7, { name: "close", size: 12 })
+        }
+      ) : null
+    ] }) : null,
+    showSelection ? /* @__PURE__ */ jsxs9("div", { "data-kit-slot": "selection", children: [
+      /* @__PURE__ */ jsx11("span", { "data-kit-slot": "selection-count", children: allSelected ? formatMessage(messages.allSelected, { count: selectedCount }, locale) : formatMessage(messages.selectedCount, { count: selectedCount }, locale) }),
+      /* @__PURE__ */ jsx11(Button3, { variant: "ghost", tone: "neutral", size: "sm", onClick: props.onClearSelection, children: messages.clearSelection })
+    ] }) : null,
+    /* @__PURE__ */ jsxs9("div", { "data-kit-slot": "toolbar-actions", children: [
+      props.copyButton && showSelection ? /* @__PURE__ */ jsxs9(Button3, { variant: "outline", tone: "neutral", size: "sm", onClick: props.onCopy, children: [
+        /* @__PURE__ */ jsx11(Icon7, { name: "copy", size: 16 }),
+        messages.copySelection
+      ] }) : null,
+      props.exportButton ? /* @__PURE__ */ jsxs9(Button3, { variant: "outline", tone: "neutral", size: "sm", loading: props.exporting, loadingLabel: messages.loading, onClick: props.onExport, children: [
+        /* @__PURE__ */ jsx11(Icon7, { name: "download", size: 16 }),
+        messages.exportCsv
+      ] }) : null,
+      props.columnsMenu ? /* @__PURE__ */ jsxs9(Fragment5, { children: [
+        /* @__PURE__ */ jsxs9(
+          Button3,
+          {
+            ref: setColumnsAnchor,
+            variant: "outline",
+            tone: "neutral",
+            size: "sm",
+            "aria-haspopup": "menu",
+            "aria-expanded": columnsOpen,
+            onClick: () => setColumnsOpen((open) => !open),
+            children: [
+              /* @__PURE__ */ jsx11(Icon7, { name: "eye", size: 16 }),
+              messages.columns
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          Menu,
+          {
+            open: columnsOpen,
+            anchor: columnsAnchor,
+            label: messages.columnsMenuLabel,
+            items,
+            align: "end",
+            onClose: (reason) => {
+              setColumnsOpen(false);
+              if (reason === "escape" || reason === "select") columnsAnchor?.focus({ preventScroll: true });
+            }
+          }
+        )
+      ] }) : null,
+      hasEnd ? /* @__PURE__ */ jsx11("div", { "data-kit-slot": "toolbar-end", children: props.end }) : null
+    ] })
+  ] });
+}
+
+// src/react/use-server-rows.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef6, useState as useState7, useSyncExternalStore } from "react";
+var EMPTY = { version: 0, total: null, loading: false, error: null, stale: false };
+function useServerRowStore({ dataSource, blockSize, query }) {
+  const [store, setStore] = useState7(null);
+  const latest = useRef6({ blockSize, query });
+  latest.current = { blockSize, query };
+  useEffect2(() => {
+    if (dataSource === void 0) {
+      setStore(null);
+      return;
+    }
+    const created = createServerRowStore({ dataSource, blockSize: latest.current.blockSize, query: latest.current.query });
+    setStore(created);
+    return () => {
+      created.destroy();
+    };
+  }, [dataSource]);
+  useEffect2(() => {
+    store?.setBlockSize(blockSize);
+  }, [store, blockSize]);
+  useEffect2(() => {
+    store?.setQuery(query);
+  }, [store, query]);
+  const subscribe = useCallback2((listener) => store === null ? () => {
+  } : store.subscribe(listener), [store]);
+  const getSnapshot = useCallback2(() => store === null ? EMPTY : store.getSnapshot(), [store]);
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return { store, snapshot };
+}
+async function fetchAllRows(dataSource, query, options = {}) {
+  const pageSize = options.pageSize ?? 500;
+  const rows = [];
+  let start = 0;
+  let total = Number.POSITIVE_INFINITY;
+  let cursor;
+  while (start < total) {
+    const request = {
+      startRow: start,
+      endRow: start + pageSize,
+      sort: query.sort,
+      filter: query.filter,
+      group: query.group,
+      ...query.quickFilter === void 0 || query.quickFilter === "" ? {} : { quickFilter: query.quickFilter },
+      ...cursor === void 0 ? {} : { cursor }
+    };
+    const result = await dataSource.getRows(request, options.signal === void 0 ? {} : { signal: options.signal });
+    rows.push(...result.rows);
+    total = result.total;
+    if (result.rows.length === 0) break;
+    start += result.rows.length;
+    if (result.nextCursor !== void 0) {
+      if (result.nextCursor === null) break;
+      cursor = result.nextCursor;
+    }
+  }
+  return rows;
+}
+
+// src/react/data-grid.tsx
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var SYSTEM_COLUMN_WIDTH = 44;
+var DEFAULT_ROW_HEIGHT = 40;
+var DEFAULT_MAX_HEIGHT = 640;
+var ROW_VIRTUALIZE_THRESHOLD = 100;
+var COLUMN_VIRTUALIZE_THRESHOLD = 24;
+var DEFAULT_BLOCK_SIZE = 100;
+var INITIAL_VIEWPORT_WIDTH = 1024;
+var DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
+var DEFAULT_PAGINATION = { page: 0, pageSize: 25 };
+var SELECT_ID = "__select";
+var EXPAND_ID = "__expand";
+var NO_ROWS = [];
+var NO_INDEXES = [];
+var NO_IDS = [];
+var NO_FLAGS = {};
+var NO_DISPLAY = { rows: [], groups: [] };
+function useDebouncedValue(value, delay) {
+  const [debounced, setDebounced] = useState8(value);
+  useEffect3(() => {
+    if (delay <= 0) return;
+    const timer = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return delay <= 0 ? value : debounced;
+}
+function resolveToolbar(option) {
+  if (option === false) return null;
+  const all = { search: true, columns: true, export: true, copy: true };
+  if (option === void 0 || option === true) return all;
+  return { ...all, ...option };
+}
+function sameText(a, b) {
+  if (isEmptyValue(a) && isEmptyValue(b)) return true;
+  return Object.is(a, b) || toText(a) === toText(b);
+}
+function activate(element, event) {
+  element.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, shiftKey: event.shiftKey }));
+}
+function DataGrid(props) {
+  const {
+    columns,
+    rows,
+    dataSource,
+    locale,
+    timeZone,
+    density,
+    dir,
+    height,
+    maxHeight,
+    estimateRowHeight = DEFAULT_ROW_HEIGHT,
+    virtualize = "auto",
+    overscan = 8,
+    columnOverscan = 3,
+    selectionMode = "none",
+    multiSort = true,
+    groupsExpandedByDefault = true,
+    paginated = false,
+    pageSizeOptions = DEFAULT_PAGE_SIZES,
+    renderDetail,
+    detailHeight,
+    isRowSelectable,
+    isRowExpandable,
+    onRowClick,
+    showTotals = false,
+    quickFilterDelay = 250
+  } = props;
+  const serverMode = dataSource !== void 0;
+  const getRowId = useEvent(props.getRowId);
+  const messages = useMemo2(() => resolveMessages(props.messages), [props.messages]);
+  const t = useCallback3(
+    (key, values) => formatMessage(messages[key], values, locale),
+    [messages, locale]
+  );
+  const formatContext = useMemo2(
+    () => ({ ...locale === void 0 ? {} : { locale }, ...timeZone === void 0 ? {} : { timeZone }, labels: { yes: messages.yes, no: messages.no } }),
+    [locale, timeZone, messages.yes, messages.no]
+  );
+  const formatters = useMemo2(() => createFormatters(columns, formatContext), [columns, formatContext]);
+  const byId = useMemo2(() => indexColumns(columns), [columns]);
+  const [initialView] = useState8(() => createViewState(columns));
+  const [sort, setSort2] = useControllableState(props.sort, props.defaultSort ?? [], props.onSortChange);
+  const [filter, setFilter] = useControllableState(props.filter, props.defaultFilter ?? [], props.onFilterChange);
+  const [quickFilter, setQuickFilter] = useControllableState(props.quickFilter, props.defaultQuickFilter ?? "", props.onQuickFilterChange);
+  const [group, setGroup] = useControllableState(props.group, props.defaultGroup ?? [], props.onGroupChange);
+  const [groupExpansion, setGroupExpansion] = useControllableState(props.groupExpansion, props.defaultGroupExpansion ?? NO_FLAGS, props.onGroupExpansionChange);
+  const [columnOrder, setColumnOrder] = useControllableState(props.columnOrder, props.defaultColumnOrder ?? initialView.columnOrder, props.onColumnOrderChange);
+  const [columnVisibility, setColumnVisibility] = useControllableState(props.columnVisibility, props.defaultColumnVisibility ?? initialView.columnVisibility, props.onColumnVisibilityChange);
+  const [columnSizing, setColumnSizing] = useControllableState(props.columnSizing, props.defaultColumnSizing ?? initialView.columnSizing, props.onColumnSizingChange);
+  const [columnPinning, setColumnPinning] = useControllableState(props.columnPinning, props.defaultColumnPinning ?? initialView.columnPinning, props.onColumnPinningChange);
+  const [selection, setSelection] = useControllableState(props.selection, props.defaultSelection ?? EMPTY_SELECTION, props.onSelectionChange);
+  const [expanded, setExpanded] = useControllableState(props.expanded, props.defaultExpanded ?? NO_FLAGS, props.onExpandedChange);
+  const [pagination, setPagination] = useControllableState(props.pagination, props.defaultPagination ?? DEFAULT_PAGINATION, props.onPaginationChange);
+  const effectiveGroup = useMemo2(() => serverMode ? [] : group.filter((item) => byId.has(item.field)), [serverMode, group, byId]);
+  const effectiveFilters = useMemo2(() => filter.filter((item) => byId.has(item.field) && isFilterEffective(item)), [filter, byId]);
+  const [nav, setNav] = useState8({ row: 0, col: 0 });
+  const [editing, setEditing] = useState8(null);
+  const [overrides, setOverrides] = useState8({});
+  const [popover, setPopover] = useState8(null);
+  const [announcement, setAnnouncement] = useState8({ text: "", flip: false });
+  const [exporting, setExporting] = useState8(false);
+  const [rtl, setRtl] = useState8(dir === "rtl");
+  const [rowHeight, setRowHeight] = useState8(estimateRowHeight);
+  const [viewport, setViewport] = useState8({ width: 0, height: 0 });
+  const rootRef = useRef7(null);
+  const scrollerRef = useRef7(null);
+  const headerRef = useRef7(null);
+  const focusRequest = useRef7(false);
+  const scrollRequest = useRef7(false);
+  const selectionAnchor = useRef7(null);
+  const pendingColumnFocus = useRef7(null);
+  const editingRef = useRef7(null);
+  editingRef.current = editing;
+  const announce = useCallback3((text) => {
+    setAnnouncement((previous) => ({ text, flip: previous.text === text ? !previous.flip : previous.flip }));
+  }, []);
+  useLayoutEffect3(() => {
+    setRtl(dir !== void 0 ? dir === "rtl" : detectDirection(rootRef.current) === "rtl");
+  }, [dir]);
+  const layout = useMemo2(
+    () => layoutColumns(columns, { columnOrder, columnVisibility, columnPinning }),
+    [columns, columnOrder, columnVisibility, columnPinning]
+  );
+  const hasSelectColumn = selectionMode !== "none";
+  const hasExpandColumn = renderDetail !== void 0 && !serverMode;
+  const geometry = useMemo2(() => {
+    const system = (kind, id) => ({
+      kind,
+      id,
+      column: null,
+      width: SYSTEM_COLUMN_WIDTH,
+      minWidth: SYSTEM_COLUMN_WIDTH,
+      maxWidth: SYSTEM_COLUMN_WIDTH,
+      pin: "start",
+      pinOffset: 0,
+      pinEdge: false,
+      align: "center",
+      first: false
+    });
+    const data = (id) => {
+      const column = byId.get(id);
+      if (column === void 0) return null;
+      return {
+        kind: "data",
+        id,
+        column,
+        width: columnWidth(column, columnSizing),
+        minWidth: column.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,
+        maxWidth: column.maxWidth ?? DEFAULT_COLUMN_MAX_WIDTH,
+        pin: null,
+        pinOffset: 0,
+        pinEdge: false,
+        align: resolveColumnAlign(column),
+        first: false
+      };
+    };
+    const known = (ids) => ids.map(data).filter((info) => info !== null);
+    const start = [
+      ...hasSelectColumn ? [system("select", SELECT_ID)] : [],
+      ...hasExpandColumn ? [system("expand", EXPAND_ID)] : [],
+      ...known(layout.start)
+    ];
+    const center = known(layout.center);
+    const end = known(layout.end);
+    let offset = 0;
+    for (const info of start) {
+      info.pin = "start";
+      info.pinOffset = offset;
+      offset += info.width;
+    }
+    const startWidth2 = offset;
+    const lastStart = start[start.length - 1];
+    if (lastStart !== void 0) lastStart.pinEdge = true;
+    offset = 0;
+    for (let i = end.length - 1; i >= 0; i -= 1) {
+      const info = end[i];
+      info.pin = "end";
+      info.pinOffset = offset;
+      offset += info.width;
+    }
+    const endWidth2 = offset;
+    const firstEnd = end[0];
+    if (firstEnd !== void 0) firstEnd.pinEdge = true;
+    const centerOffsets2 = [0];
+    for (const info of center) centerOffsets2.push((centerOffsets2[centerOffsets2.length - 1] ?? 0) + info.width);
+    const centerWidth2 = centerOffsets2[centerOffsets2.length - 1] ?? 0;
+    const all = [...start, ...center, ...end];
+    const firstData = all.find((info) => info.kind === "data");
+    if (firstData !== void 0) firstData.first = true;
+    return {
+      all,
+      startCount: start.length,
+      centerCount: center.length,
+      startWidth: startWidth2,
+      centerWidth: centerWidth2,
+      endWidth: endWidth2,
+      centerOffsets: centerOffsets2,
+      totalWidth: startWidth2 + centerWidth2 + endWidth2
+    };
+  }, [byId, columnSizing, hasSelectColumn, hasExpandColumn, layout]);
+  const { all: gridColumns, startCount, centerCount, startWidth, endWidth, centerWidth, centerOffsets, totalWidth } = geometry;
+  const dataColumns = useMemo2(
+    () => gridColumns.flatMap((info) => info.column === null ? [] : [info.column]),
+    [gridColumns]
+  );
+  const hasColumnGroups = dataColumns.some((column) => column.group !== void 0 && column.group !== "");
+  const headerRowCount = hasColumnGroups ? 2 : 1;
+  const headerHeight = rowHeight * headerRowCount;
+  const quickText = useDeferredValue(quickFilter).trim();
+  const serverQuick = useDebouncedValue(quickFilter.trim(), serverMode ? quickFilterDelay : 0);
+  const blockSize = paginated ? Math.max(1, pagination.pageSize) : props.blockSize ?? DEFAULT_BLOCK_SIZE;
+  const queryKey = JSON.stringify([sort, effectiveFilters, serverQuick]);
+  const query = useMemo2(
+    () => toServerQuery(columns, {
+      sort,
+      filter: effectiveFilters,
+      group: [],
+      ...serverQuick === "" ? {} : { quickFilter: serverQuick }
+    }),
+    // `queryKey` stands for the values it was built from, so a new array with the same content is not a new query.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [queryKey, columns]
+  );
+  const { store, snapshot } = useServerRowStore({ dataSource, blockSize, query });
+  const rowsArray = rows ?? NO_ROWS;
+  const hasQuick = quickText !== "";
+  const searchIndex = useMemo2(
+    () => serverMode || !hasQuick ? void 0 : createSearchIndex(rowsArray, columns, formatContext),
+    [serverMode, hasQuick, rowsArray, columns, formatContext]
+  );
+  const indexes = useMemo2(
+    () => serverMode ? NO_INDEXES : computeViewIndexes(rowsArray, columns, {
+      filter: effectiveFilters,
+      sort,
+      quickFilter: quickText,
+      searchIndex,
+      ...locale === void 0 ? {} : { locale },
+      ...timeZone === void 0 ? {} : { timeZone },
+      labels: formatContext.labels
+    }),
+    [serverMode, rowsArray, columns, effectiveFilters, sort, quickText, searchIndex, locale, timeZone, formatContext]
+  );
+  const pageSize = Math.max(1, pagination.pageSize);
+  const totalCount = serverMode ? snapshot.total : indexes.length;
+  const lastPageIndex = totalCount === null ? Number.POSITIVE_INFINITY : Math.max(0, Math.ceil(totalCount / pageSize) - 1);
+  const page = paginated ? Math.min(Math.max(pagination.page, 0), lastPageIndex) : 0;
+  const pageOffset = paginated ? page * pageSize : 0;
+  const pageIndexes = useMemo2(
+    () => !paginated || serverMode ? indexes : indexes.slice(pageOffset, pageOffset + pageSize),
+    [paginated, serverMode, indexes, pageOffset, pageSize]
+  );
+  const withDetail = renderDetail !== void 0;
+  const display = useMemo2(
+    () => serverMode ? NO_DISPLAY : buildDisplayRows(rowsArray, pageIndexes, columns, {
+      getRowId,
+      group: effectiveGroup,
+      groupExpansion,
+      groupsExpandedByDefault,
+      expandedRows: expanded,
+      withDetail,
+      sort,
+      ...locale === void 0 ? {} : { locale }
+    }),
+    [serverMode, rowsArray, pageIndexes, columns, getRowId, effectiveGroup, groupExpansion, groupsExpandedByDefault, expanded, withDetail, sort, locale]
+  );
+  const serverRowCount = snapshot.total === null ? 0 : paginated ? Math.max(0, Math.min(pageSize, snapshot.total - pageOffset)) : snapshot.total;
+  const rowCount = serverMode ? serverRowCount : display.rows.length;
+  const serverItems = useMemo2(() => /* @__PURE__ */ new Map(), [store, snapshot.version, pageOffset]);
+  const getItem = useCallback3(
+    (index) => {
+      if (!serverMode) return display.rows[index];
+      if (index < 0 || index >= serverRowCount) return void 0;
+      const cached = serverItems.get(index);
+      if (cached !== void 0) return cached;
+      const globalIndex = pageOffset + index;
+      const row = store?.getRow(globalIndex);
+      const item = row === void 0 ? { kind: "placeholder", id: `~loading:${globalIndex}`, index: globalIndex, depth: 0, failed: store?.getBlockStatus(globalIndex) === "error" } : { kind: "data", id: getRowId(row, globalIndex), row, index: globalIndex, depth: 0 };
+      serverItems.set(index, item);
+      return item;
+    },
+    [serverMode, display, serverRowCount, serverItems, pageOffset, store, getRowId]
+  );
+  const treegrid = effectiveGroup.length > 0;
+  const footerRows = showTotals ? 1 : 0;
+  const ariaRowOffset = headerRowCount + (treegrid ? 0 : pageOffset);
+  const ariaRowCount = serverMode && snapshot.total === null ? -1 : (treegrid ? rowCount : serverMode ? snapshot.total ?? 0 : paginated ? indexes.length : rowCount) + headerRowCount + footerRows;
+  useLayoutEffect3(() => {
+    const scroller = scrollerRef.current;
+    if (scroller === null) return;
+    const measure = () => {
+      const token = getComputedStyle(scroller).getPropertyValue("--kit-grid-row-height").trim();
+      let next = token.endsWith("px") ? Number.parseFloat(token) : Number.NaN;
+      if (Number.isNaN(next)) {
+        const measured = headerRef.current?.offsetHeight ?? 0;
+        next = measured > 0 ? measured : estimateRowHeight;
+      }
+      setRowHeight((previous) => previous === next ? previous : next);
+    };
+    measure();
+    const header = headerRef.current;
+    if (header === null || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(header);
+    return () => observer.disconnect();
+  }, [density, estimateRowHeight, headerRowCount]);
+  useLayoutEffect3(() => {
+    const scroller = scrollerRef.current;
+    if (scroller === null) return;
+    const read = () => setViewport(
+      (previous) => previous.width === scroller.clientWidth && previous.height === scroller.clientHeight ? previous : { width: scroller.clientWidth, height: scroller.clientHeight }
+    );
+    read();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(read);
+    observer.observe(scroller);
+    return () => observer.disconnect();
+  }, []);
+  const virtualizeRows = virtualize === true || virtualize === "auto" && rowCount > ROW_VIRTUALIZE_THRESHOLD;
+  const virtualizeColumns = !hasColumnGroups && (virtualize === true || virtualize === "auto" && centerCount > COLUMN_VIRTUALIZE_THRESHOLD);
+  const detailEstimate = detailHeight ?? rowHeight * 4;
+  const navClamped = useMemo2(
+    () => clampNav(nav, { rowCount: rowCount + 1, columnCount: Math.max(gridColumns.length, 1), pageSize: 1 }),
+    [nav, rowCount, gridColumns.length]
+  );
+  const cursorRow = navClamped.row - 1;
+  const cursorCenterColumn = navClamped.col - startCount;
+  const rowRange = useCallback3(
+    (range) => {
+      if (!virtualizeRows) return Array.from({ length: range.count }, (_, index) => index);
+      const base = defaultRangeExtractor(range);
+      if (cursorRow < 0 || cursorRow >= range.count || base.includes(cursorRow)) return base;
+      return [...base, cursorRow].sort((a, b) => a - b);
+    },
+    [virtualizeRows, cursorRow]
+  );
+  const estimateRow = useCallback3((index) => getItem(index)?.kind === "detail" ? detailEstimate : rowHeight, [getItem, detailEstimate, rowHeight]);
+  const rowKey = useCallback3((index) => serverMode ? index : getItem(index)?.id ?? index, [serverMode, getItem]);
+  const rowVirtualizer = useVirtualizer({
+    count: rowCount,
+    getScrollElement: () => scrollerRef.current,
+    estimateSize: estimateRow,
+    overscan,
+    scrollMargin: headerHeight,
+    scrollPaddingStart: headerHeight,
+    scrollPaddingEnd: footerRows * rowHeight,
+    getItemKey: rowKey,
+    rangeExtractor: rowRange,
+    // Gives the first render (and the server render) a window before the element is measured.
+    initialRect: {
+      width: 0,
+      height: virtualizeRows ? typeof height === "number" ? height : DEFAULT_MAX_HEIGHT : Math.max(rowCount * rowHeight, 1)
+    }
+  });
+  const columnRange = useCallback3(
+    (range) => {
+      if (!virtualizeColumns) return Array.from({ length: range.count }, (_, index) => index);
+      const base = defaultRangeExtractor(range);
+      if (cursorCenterColumn < 0 || cursorCenterColumn >= range.count || base.includes(cursorCenterColumn)) return base;
+      return [...base, cursorCenterColumn].sort((a, b) => a - b);
+    },
+    [virtualizeColumns, cursorCenterColumn]
+  );
+  const estimateColumn = useCallback3((index) => (centerOffsets[index + 1] ?? 0) - (centerOffsets[index] ?? 0), [centerOffsets]);
+  const columnKey = useCallback3((index) => gridColumns[startCount + index]?.id ?? index, [gridColumns, startCount]);
+  const columnVirtualizer = useVirtualizer({
+    horizontal: true,
+    count: centerCount,
+    getScrollElement: () => scrollerRef.current,
+    estimateSize: estimateColumn,
+    overscan: columnOverscan,
+    scrollMargin: startWidth,
+    scrollPaddingStart: startWidth,
+    scrollPaddingEnd: endWidth,
+    getItemKey: columnKey,
+    rangeExtractor: columnRange,
+    isRtl: rtl,
+    initialRect: { width: virtualizeColumns ? INITIAL_VIEWPORT_WIDTH : Math.max(totalWidth, 1), height: 0 }
+  });
+  useEffect3(() => {
+    rowVirtualizer.measure();
+  }, [rowHeight, detailEstimate]);
+  useEffect3(() => {
+    columnVirtualizer.measure();
+  }, [centerOffsets]);
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  const firstVirtual = virtualRows[0]?.index ?? 0;
+  const lastVirtual = virtualRows[virtualRows.length - 1]?.index ?? 0;
+  const slots = useMemo2(() => {
+    const out = [];
+    for (let i = 0; i < startCount; i += 1) out.push({ kind: "col", index: i });
+    let previous = -1;
+    for (const item of virtualColumns) {
+      const gap = (centerOffsets[item.index] ?? 0) - (previous < 0 ? 0 : centerOffsets[previous + 1] ?? 0);
+      if (gap > 0) out.push({ kind: "spacer", size: gap });
+      out.push({ kind: "col", index: startCount + item.index });
+      previous = item.index;
+    }
+    const tail = centerWidth - (previous < 0 ? 0 : centerOffsets[previous + 1] ?? 0);
+    if (tail > 0) out.push({ kind: "spacer", size: tail });
+    for (let i = startCount + centerCount; i < gridColumns.length; i += 1) out.push({ kind: "col", index: i });
+    return out;
+  }, [virtualColumns, centerOffsets, centerWidth, startCount, centerCount, gridColumns.length]);
+  useEffect3(() => {
+    if (store === null) return;
+    if (snapshot.total === null) {
+      store.request(pageOffset, pageOffset + 1);
+    } else if (rowCount > 0) {
+      const from = Math.max(0, firstVirtual - overscan);
+      store.request(pageOffset + from, pageOffset + Math.min(rowCount, lastVirtual + overscan + 1));
+    }
+  }, [store, snapshot.version, snapshot.total, pageOffset, rowCount, firstVirtual, lastVirtual, overscan]);
+  const resetKey = `${JSON.stringify(sort)}|${JSON.stringify(effectiveFilters)}|${serverMode ? serverQuick : quickText}`;
+  const lastResetKey = useRef7(resetKey);
+  const resetPage = useEvent(() => {
+    if (paginated && pagination.page !== 0) setPagination({ ...pagination, page: 0 });
+  });
+  useEffect3(() => {
+    if (lastResetKey.current === resetKey) return;
+    lastResetKey.current = resetKey;
+    resetPage();
+  }, [resetKey, resetPage]);
+  const clampPage = useEvent(() => {
+    if (paginated && pagination.page !== page) setPagination({ ...pagination, page });
+  });
+  useEffect3(() => {
+    clampPage();
+  }, [page, pagination.page, clampPage]);
+  const loadingFlag = serverMode ? snapshot.loading || store === null : props.loading === true;
+  const filterKey = `${JSON.stringify(effectiveFilters)}|${serverMode ? serverQuick : quickText}`;
+  const lastFilterKey = useRef7(filterKey);
+  const pendingFilterAnnouncement = useRef7(false);
+  useEffect3(() => {
+    if (lastFilterKey.current !== filterKey) {
+      lastFilterKey.current = filterKey;
+      pendingFilterAnnouncement.current = true;
+    }
+    let count;
+    if (serverMode) {
+      const live = store?.getSnapshot();
+      count = live !== void 0 && !live.loading && !live.stale ? live.total : null;
+    } else {
+      count = loadingFlag ? null : totalCount;
+    }
+    if (!pendingFilterAnnouncement.current || count === null) return;
+    pendingFilterAnnouncement.current = false;
+    const active = effectiveFilters.length > 0 || (serverMode ? serverQuick : quickText) !== "";
+    announce(active ? t("announceFiltered", { count }) : t("announceFilterCleared", { count }));
+  }, [filterKey, totalCount, loadingFlag, store, snapshot.version, effectiveFilters.length, serverMode, serverQuick, quickText, announce, t]);
+  useEffect3(() => {
+    setOverrides((previous) => Object.keys(previous).length === 0 ? previous : {});
+  }, [rows, dataSource]);
+  const selectableIds = useMemo2(() => {
+    if (serverMode || selectionMode !== "multiple") return NO_IDS;
+    const out = [];
+    for (const index of indexes) {
+      const row = rowsArray[index];
+      if (isRowSelectable?.(row) === false) continue;
+      out.push(getRowId(row, index));
+    }
+    return out;
+  }, [serverMode, selectionMode, indexes, rowsArray, isRowSelectable, getRowId]);
+  const selectAllState = useMemo2(() => {
+    if (selectionMode !== "multiple") return "none";
+    if (serverMode) {
+      const total = snapshot.total ?? 0;
+      const count = countSelected(selection, total);
+      return count === 0 ? "none" : count >= total ? "all" : "some";
+    }
+    return summarizeSelection(selection, selectableIds);
+  }, [selectionMode, serverMode, snapshot.total, selection, selectableIds]);
+  const selectedCount = countSelected(selection, totalCount ?? 0);
+  const commitSelection = useEvent((next) => {
+    setSelection(next);
+    announce(t("announceSelection", { count: countSelected(next, totalCount ?? 0) }));
+  });
+  const idsBetween = (from, to) => {
+    const ids = [];
+    for (let index = Math.min(from, to); index <= Math.max(from, to); index += 1) {
+      const item = getItem(index);
+      if (item?.kind !== "data") continue;
+      if (isRowSelectable?.(item.row) === false) continue;
+      ids.push(item.id);
+    }
+    return ids;
+  };
+  const toggleSelect = useEvent((rowId, displayIndex, range) => {
+    if (selectionMode === "none") return;
+    if (selectionMode === "single") {
+      commitSelection(isSelected(selection, rowId) ? clearSelection() : selectOnly(rowId));
+      selectionAnchor.current = displayIndex;
+      return;
+    }
+    const target = !isSelected(selection, rowId);
+    const anchor = selectionAnchor.current;
+    if (range && anchor !== null) {
+      const ids = idsBetween(anchor, displayIndex);
+      commitSelection(selectRange(selection, ids, 0, ids.length - 1, target));
+    } else {
+      commitSelection(toggleRow(selection, rowId, target));
+    }
+    selectionAnchor.current = displayIndex;
+  });
+  const toggleSelectAll = useEvent(() => {
+    if (selectionMode !== "multiple") return;
+    if (selectAllState === "all") commitSelection(clearSelection());
+    else commitSelection(serverMode ? selectAllExceptNone() : selectAll(selectableIds));
+  });
+  const totals = useMemo2(() => {
+    if (!showTotals) return {};
+    if (serverMode) return props.totals ?? {};
+    const subset = indexes.map((index) => rowsArray[index]);
+    const out = {};
+    for (const column of dataColumns) {
+      if (column.aggregate !== void 0) out[column.id] = computeAggregate(column, subset);
+    }
+    return out;
+  }, [showTotals, serverMode, props.totals, indexes, rowsArray, dataColumns]);
+  const hasTotals = showTotals && (dataColumns.some((column) => column.aggregate !== void 0 || column.footerCell !== void 0) || Object.keys(totals).length > 0);
+  const formatGroupValue = useCallback3(
+    (field, value) => {
+      const column = byId.get(field);
+      return column === void 0 ? toText(value) : plainFormatter(column, formatContext)(value, void 0);
+    },
+    [byId, formatContext]
+  );
+  const formatColumnAggregate = useCallback3(
+    (columnId, value) => {
+      const column = byId.get(columnId);
+      return column === void 0 ? toText(value) : formatAggregate(column, value, formatContext);
+    },
+    [byId, formatContext]
+  );
+  const totalForAnnouncement = totalCount ?? rowCount;
+  const sortColumn = useEvent((columnId, multi) => {
+    const column = byId.get(columnId);
+    if (column === void 0 || !isSortable(column)) return;
+    const next = toggleSort(sort, columnId, multi && multiSort);
+    setSort2(next);
+    const direction = next.find((item) => item.field === columnId)?.direction;
+    announce(
+      direction === void 0 ? t("announceSortCleared", { count: totalForAnnouncement }) : t("announceSorted", { column: column.header, direction, count: totalForAnnouncement })
+    );
+  });
+  const setColumnSort = (columnId, direction) => {
+    const column = byId.get(columnId);
+    if (column === void 0) return;
+    setSort2(setSort(sort, columnId, direction, false));
+    announce(
+      direction === null ? t("announceSortCleared", { count: totalForAnnouncement }) : t("announceSorted", { column: column.header, direction, count: totalForAnnouncement })
+    );
+  };
+  const resizeTo = useEvent((columnId, width, announceIt) => {
+    const column = byId.get(columnId);
+    if (column === void 0) return;
+    const next = resizeColumn(columns, columnSizing, columnId, width);
+    if (next[columnId] === columnSizing[columnId]) return;
+    setColumnSizing(next);
+    if (announceIt === true) announce(t("announceColumnResized", { column: column.header, width: next[columnId] ?? width }));
+  });
+  const applyMove = (columnId, moved) => {
+    const column = byId.get(columnId);
+    if (column === void 0) return;
+    const fingerprint = (order, pinning) => JSON.stringify([order, pinning.start, pinning.end]);
+    if (fingerprint(moved.columnOrder, moved.columnPinning) === fingerprint(resolveColumnOrder(columns, columnOrder), columnPinning)) return;
+    setColumnOrder(moved.columnOrder);
+    if (moved.columnPinning !== columnPinning) setColumnPinning(moved.columnPinning);
+    const next = layoutColumns(columns, { columnOrder: moved.columnOrder, columnVisibility, columnPinning: moved.columnPinning });
+    const ids = [...next.start, ...next.center, ...next.end];
+    announce(t("announceColumnMoved", { column: column.header, position: ids.indexOf(columnId) + 1, total: ids.length }));
+    pendingColumnFocus.current = columnId;
+  };
+  const moveBy = useEvent((columnId, delta) => {
+    applyMove(columnId, moveColumn(columns, { columnOrder, columnVisibility, columnPinning }, columnId, delta));
+  });
+  const draggedColumn = useRef7(null);
+  const [columnDrag, setColumnDrag] = useState8(null);
+  const zoneOfColumn = (columnId) => layout.start.includes(columnId) ? "start" : layout.end.includes(columnId) ? "end" : layout.center.includes(columnId) ? "center" : null;
+  const dragStartColumn = useEvent((columnId) => {
+    draggedColumn.current = columnId;
+    setColumnDrag({ id: columnId, over: null });
+  });
+  const dragOverColumn = useEvent((targetId, placement) => {
+    const dragged = draggedColumn.current;
+    if (dragged === null || dragged === targetId || zoneOfColumn(dragged) !== zoneOfColumn(targetId)) return false;
+    setColumnDrag(
+      (current) => current === null || current.over?.id === targetId && current.over.placement === placement ? current : { ...current, over: { id: targetId, placement } }
+    );
+    return true;
+  });
+  const dragLeaveColumn = useEvent((targetId) => {
+    setColumnDrag((current) => current?.over?.id === targetId ? { ...current, over: null } : current);
+  });
+  const dragEndColumn = useEvent(() => {
+    draggedColumn.current = null;
+    setColumnDrag(null);
+  });
+  const dropColumn = useEvent((targetId, placement) => {
+    const dragged = draggedColumn.current;
+    dragEndColumn();
+    if (dragged === null) return;
+    applyMove(dragged, moveColumnTo(columns, { columnOrder, columnVisibility, columnPinning }, dragged, targetId, placement));
+  });
+  const hideColumn = (columnId) => {
+    const column = byId.get(columnId);
+    if (column === void 0) return;
+    setColumnVisibility({ ...columnVisibility, [columnId]: false });
+    announce(t("announceColumnHidden", { column: column.header }));
+    setNav((previous) => ({ row: 0, col: Math.min(previous.col, Math.max(gridColumns.length - 2, 0)) }));
+  };
+  const pinColumn = (columnId, side) => {
+    const column = byId.get(columnId);
+    if (column === void 0) return;
+    setColumnPinning(setPinning(columnPinning, columnId, side));
+    if (side !== false) announce(t("announcePinned", { column: column.header, side }));
+    pendingColumnFocus.current = columnId;
+  };
+  const changeGroup = (columnId) => {
+    const column = byId.get(columnId);
+    if (column === void 0) return;
+    const adding = !group.some((item) => item.field === columnId);
+    setGroup(toggleGroup(group, columnId));
+    if (adding) announce(t("announceGrouped", { column: column.header }));
+  };
+  const applyFilter = (columnId, item) => {
+    setFilter(setColumnFilter(filter, columnId, item));
+  };
+  const toggleExpand = useEvent((rowId) => {
+    if (expanded[rowId] === true) {
+      const { [rowId]: _closed, ...rest } = expanded;
+      void _closed;
+      setExpanded(rest);
+    } else setExpanded({ ...expanded, [rowId]: true });
+  });
+  const toggleGroupRow = useEvent((groupId) => {
+    const current = groupExpansion[groupId] ?? groupsExpandedByDefault;
+    setGroupExpansion({ ...groupExpansion, [groupId]: !current });
+  });
+  const applyEdit = useEvent(async (rowId, column, row, value) => {
+    const previousValue = overrides[rowId]?.[column.id]?.value ?? getColumnValue(column, row);
+    if (sameText(previousValue, value)) return;
+    const put = (status, stored) => setOverrides((all) => {
+      const current = all[rowId]?.[column.id];
+      if (status !== "pending" && (current === void 0 || !Object.is(current.value, value))) return all;
+      return { ...all, [rowId]: { ...all[rowId], [column.id]: { value: stored, status } } };
+    });
+    put("pending", value);
+    if (props.onCellEdit === void 0) {
+      put("saved", value);
+      return;
+    }
+    try {
+      await props.onCellEdit({ row, rowId, column, value, previousValue });
+      put("saved", value);
+      announce(t("cellSaved", { column: column.header }));
+    } catch {
+      put("error", previousValue);
+      announce(t("cellEditFailed", { column: column.header }));
+    }
+  });
+  const focusCellSoon = () => {
+    focusRequest.current = true;
+    setNav((previous) => ({ ...previous }));
+  };
+  const startEdit = useEvent((rowId, columnId, row) => {
+    const column = byId.get(columnId);
+    if (column === void 0 || !isEditable(column, row) || resolveEditor(column) === "boolean") return;
+    setOverrides((all) => {
+      const current = all[rowId]?.[columnId];
+      if (current?.status !== "error") return all;
+      const { [columnId]: _failed, ...rest } = all[rowId] ?? {};
+      void _failed;
+      return { ...all, [rowId]: rest };
+    });
+    setEditing({ rowId, columnId, row, error: null });
+  });
+  const cancelEdit = useEvent(() => {
+    setEditing(null);
+    focusCellSoon();
+  });
+  const commitEdit = useEvent((input, source) => {
+    const edit = editingRef.current;
+    if (edit === null) return;
+    const column = byId.get(edit.columnId);
+    if (column === void 0) return;
+    const parsed = parseEditorInput(column, input, edit.row, messages);
+    const problem = parsed.ok ? column.validate?.(parsed.value, edit.row) : parsed.message;
+    if (problem !== void 0 && problem !== null && problem !== "") {
+      if (source === "blur") {
+        setEditing(null);
+        announce(problem);
+      } else {
+        setEditing({ ...edit, error: problem });
+      }
+      return;
+    }
+    if (!parsed.ok) return;
+    setEditing(null);
+    if (source !== "blur") focusCellSoon();
+    void applyEdit(edit.rowId, column, edit.row, parsed.value);
+  });
+  const toggleBoolean = useEvent((rowId, columnId, value, row) => {
+    const column = byId.get(columnId);
+    if (column === void 0 || !isEditable(column, row)) return;
+    const problem = column.validate?.(value, row);
+    if (problem !== void 0 && problem !== null && problem !== "") {
+      announce(problem);
+      return;
+    }
+    void applyEdit(rowId, column, row, value);
+  });
+  const visibleColumnList = dataColumns;
+  const collectRows = useEvent(async () => {
+    if (dataSource !== void 0) return fetchAllRows(dataSource, query);
+    return indexes.map((index) => rowsArray[index]);
+  });
+  const exportCsv = useEvent(async (options) => {
+    const all = await collectRows();
+    return gridToCsv(all, visibleColumnList, { ...formatContext, ...options });
+  });
+  const selectedRows = useEvent(() => {
+    const out = [];
+    if (serverMode) {
+      for (let index = 0; index < serverRowCount; index += 1) {
+        const item = getItem(index);
+        if (item?.kind === "data" && isSelected(selection, item.id)) out.push(item.row);
+      }
+      return out;
+    }
+    for (const index of indexes) {
+      const row = rowsArray[index];
+      if (isSelected(selection, getRowId(row, index))) out.push(row);
+    }
+    return out;
+  });
+  const copySelection = useEvent(async () => {
+    let text;
+    const chosen = selectedRows();
+    if (chosen.length > 0) {
+      text = gridToTsv(chosen, visibleColumnList, { ...formatContext, header: false });
+    } else {
+      const info = gridColumns[navClamped.col];
+      const item = getItem(navClamped.row - 1);
+      if (info?.column == null || item?.kind !== "data") return false;
+      text = formatters.get(info.column.id)?.(getColumnValue(info.column, item.row), item.row) ?? "";
+    }
+    const ok = await writeClipboard(text);
+    announce(ok ? t("copied", { count: Math.max(chosen.length, 1) }) : t("copyFailed"));
+    return ok;
+  });
+  const runExport = useEvent(async () => {
+    setExporting(true);
+    try {
+      const csv = await exportCsv({ bom: true });
+      if (props.onExport !== void 0) props.onExport(csv);
+      else downloadText(csv, props.exportFileName ?? "export.csv");
+    } finally {
+      setExporting(false);
+    }
+  });
+  const moveTo = (next) => {
+    focusRequest.current = true;
+    scrollRequest.current = true;
+    setNav(next);
+  };
+  useImperativeHandle(
+    props.ref,
+    () => ({
+      scrollToIndex: (index) => rowVirtualizer.scrollToIndex(Math.max(0, Math.min(index, rowCount - 1)), { align: "auto" }),
+      scrollToRow: (rowId) => {
+        for (let index = 0; index < rowCount; index += 1) {
+          if (getItem(index)?.id === rowId) {
+            rowVirtualizer.scrollToIndex(index, { align: "auto" });
+            return;
+          }
+        }
+      },
+      focusCell: (row, column) => moveTo(clampNav({ row, col: column }, { rowCount: rowCount + 1, columnCount: Math.max(gridColumns.length, 1), pageSize: 1 })),
+      exportCsv: (options) => exportCsv(options),
+      copySelection: () => copySelection(),
+      getSelectedRows: () => selectedRows(),
+      reload: () => store?.reset(),
+      getViewState: () => ({ sort, filter, group, columnOrder, columnVisibility, columnSizing, columnPinning })
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rowVirtualizer, rowCount, getItem, gridColumns.length, store, sort, filter, group, columnOrder, columnVisibility, columnSizing, columnPinning]
+  );
+  const findCell = (row, col) => scrollerRef.current?.querySelector(`[data-nav-row="${row}"][data-nav-col="${col}"]`) ?? null;
+  useLayoutEffect3(() => {
+    if (!scrollRequest.current) return;
+    scrollRequest.current = false;
+    if (navClamped.row >= 1) rowVirtualizer.scrollToIndex(navClamped.row - 1, { align: "auto" });
+    const centerIndex = navClamped.col - startCount;
+    if (centerIndex >= 0 && centerIndex < centerCount) columnVirtualizer.scrollToIndex(centerIndex, { align: "auto" });
+  }, [nav]);
+  useLayoutEffect3(() => {
+    if (!focusRequest.current) return;
+    const cell = findCell(navClamped.row, navClamped.col);
+    if (cell === null) return;
+    focusRequest.current = false;
+    cell.focus({ preventScroll: true });
+  });
+  useLayoutEffect3(() => {
+    const id = pendingColumnFocus.current;
+    if (id === null) return;
+    const index = gridColumns.findIndex((info) => info.id === id);
+    if (index < 0) return;
+    pendingColumnFocus.current = null;
+    focusRequest.current = true;
+    scrollRequest.current = true;
+    setNav({ row: 0, col: index });
+  }, [gridColumns]);
+  const onFocus = (event) => {
+    const target = event.target;
+    if (target.closest('[data-kit="data-grid-popover"]') !== null) return;
+    const cell = target.closest("[data-nav-row]");
+    if (cell === null) return;
+    const row = Number(cell.dataset["navRow"]);
+    const col = Number(cell.dataset["navCol"]);
+    setNav((previous) => previous.row === row && previous.col === col ? previous : { row, col });
+  };
+  const pageRows = Math.max(1, Math.floor((viewport.height - headerHeight) / rowHeight));
+  const onKeyDown = (event) => {
+    if (event.defaultPrevented) return;
+    const target = event.target;
+    if (isTextEntry(target) || target.closest('[data-kit="data-grid-popover"]') !== null) return;
+    const cell = target.closest("[data-nav-row]");
+    if (cell === null || scrollerRef.current?.contains(cell) !== true) return;
+    const row = Number(cell.dataset["navRow"]);
+    const col = Number(cell.dataset["navCol"]);
+    const onCell = target === cell;
+    const info = gridColumns[col];
+    const key = event.key;
+    const forward = rtl ? "ArrowLeft" : "ArrowRight";
+    const backward = rtl ? "ArrowRight" : "ArrowLeft";
+    if (row === 0 && onCell && info?.column != null) {
+      const column = info.column;
+      if (event.altKey && key === "ArrowDown" || key === "ContextMenu" || event.shiftKey && key === "F10") {
+        event.preventDefault();
+        setPopover({ columnId: column.id, kind: "menu" });
+        return;
+      }
+      if (event.ctrlKey && event.shiftKey && (key === "ArrowLeft" || key === "ArrowRight")) {
+        event.preventDefault();
+        moveBy(column.id, key === backward ? -1 : 1);
+        return;
+      }
+      if (event.shiftKey && !event.ctrlKey && (key === "ArrowLeft" || key === "ArrowRight") && isResizable(column)) {
+        event.preventDefault();
+        resizeTo(column.id, info.width + (key === forward ? 16 : -16), true);
+        return;
+      }
+    }
+    if (onCell && (key === "Enter" || key === " " || key === "F2")) {
+      const primary = cell.querySelector("[data-grid-primary]");
+      if (row === 0) {
+        if ((key === "Enter" || key === " ") && primary !== null) {
+          event.preventDefault();
+          activate(primary, event);
+        }
+        return;
+      }
+      const item = getItem(row - 1);
+      if (item === void 0) return;
+      if (item.kind === "group" && key !== "F2") {
+        event.preventDefault();
+        toggleGroupRow(item.id);
+        return;
+      }
+      if (item.kind === "data") {
+        const column = info?.column;
+        if ((key === "Enter" || key === "F2") && column != null && isEditable(column, item.row) && resolveEditor(column) !== "boolean") {
+          event.preventDefault();
+          startEdit(item.id, column.id, item.row);
+          return;
+        }
+        if (key === " ") {
+          event.preventDefault();
+          if (primary?.hasAttribute("data-grid-space") === true) activate(primary, event);
+          else if (selectionMode !== "none" && isRowSelectable?.(item.row) !== false) toggleSelect(item.id, row - 1, event.shiftKey);
+          return;
+        }
+        if (key === "Enter" && primary !== null) {
+          event.preventDefault();
+          activate(primary, event);
+        }
+      }
+      return;
+    }
+    if (!onCell && (key === "Enter" || key === " ")) return;
+    if ((event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey) {
+      if ((key === "a" || key === "A") && selectionMode === "multiple" && row > 0) {
+        event.preventDefault();
+        if (selectAllState !== "all") toggleSelectAll();
+        return;
+      }
+      if ((key === "c" || key === "C") && row > 0) {
+        event.preventDefault();
+        void copySelection();
+        return;
+      }
+    }
+    if (row > 0 && info?.first === true) {
+      const item = getItem(row - 1);
+      if (item?.kind === "group") {
+        if (key === forward && !item.expanded) {
+          event.preventDefault();
+          toggleGroupRow(item.id);
+          return;
+        }
+        if (key === backward && item.expanded) {
+          event.preventDefault();
+          toggleGroupRow(item.id);
+          return;
+        }
+      }
+    }
+    if (!isNavigationKey(event)) return;
+    if (event.shiftKey && (key === "ArrowLeft" || key === "ArrowRight")) return;
+    event.preventDefault();
+    const bounds = { rowCount: rowCount + 1, columnCount: Math.max(gridColumns.length, 1), pageSize: pageRows, rtl };
+    const from = { row, col };
+    let next = navigate(from, event, bounds);
+    const step = Math.sign(next.row - from.row);
+    while (step !== 0 && next.row > 0 && getItem(next.row - 1)?.kind === "detail") {
+      const moved = { row: next.row + step, col: next.col };
+      if (moved.row < 1 || moved.row > rowCount) {
+        next = from;
+        break;
+      }
+      next = moved;
+    }
+    if (next.row === from.row && next.col === from.col) return;
+    if (event.shiftKey && selectionMode === "multiple" && (key === "ArrowUp" || key === "ArrowDown") && row > 0 && next.row > 0) {
+      const origin = getItem(row - 1);
+      const destination = getItem(next.row - 1);
+      if (origin?.kind === "data" && destination?.kind === "data") {
+        const anchor = selectionAnchor.current ?? row - 1;
+        const ids = idsBetween(anchor, next.row - 1);
+        if (selectionAnchor.current === null) selectionAnchor.current = row - 1;
+        commitSelection(selectRange(clearSelection(), ids, 0, ids.length - 1, true));
+      }
+    }
+    moveTo(next);
+  };
+  const columnChoices = (column) => {
+    if (column.options !== void 0) return column.options.map((option) => ({ value: option.value, label: option.label }));
+    if (serverMode) return [];
+    const format = plainFormatter(column, formatContext);
+    return distinctValues(rowsArray, column).map((value) => ({ value: String(value), label: format(value, void 0) }));
+  };
+  const getMenuItems = useEvent((columnId) => menuItemsFor(columnId));
+  const renderFilter = useEvent((columnId, close) => {
+    const column = byId.get(columnId);
+    if (column === void 0) return null;
+    return /* @__PURE__ */ jsx12(
+      FilterEditor,
+      {
+        column,
+        item: filter.find((entry) => entry.field === columnId),
+        choices: columnChoices(column),
+        messages,
+        onApply: (item) => {
+          applyFilter(columnId, item);
+          close();
+        }
+      }
+    );
+  });
+  const headerActions = useMemo2(
+    () => ({
+      sort: sortColumn,
+      setPopover: (columnId, kind) => setPopover(kind === null ? null : { columnId, kind }),
+      closePopover: (columnId, kind) => setPopover((current) => current !== null && current.columnId === columnId && current.kind === kind ? null : current),
+      resize: resizeTo,
+      getMenuItems,
+      renderFilter,
+      dragStart: dragStartColumn,
+      dragOver: dragOverColumn,
+      dragLeave: dragLeaveColumn,
+      drop: dropColumn,
+      dragEnd: dragEndColumn
+    }),
+    [sortColumn, resizeTo, getMenuItems, renderFilter, dragStartColumn, dragOverColumn, dragLeaveColumn, dropColumn, dragEndColumn]
+  );
+  function menuItemsFor(columnId) {
+    const column = byId.get(columnId);
+    if (column === void 0) return [];
+    const items = [];
+    const direction = sort.find((item) => item.field === columnId)?.direction ?? null;
+    if (isSortable(column)) {
+      items.push({ id: "sort-asc", label: messages.sortAscending, checked: direction === "asc", onSelect: () => setColumnSort(columnId, "asc") });
+      items.push({ id: "sort-desc", label: messages.sortDescending, checked: direction === "desc", onSelect: () => setColumnSort(columnId, "desc") });
+      if (direction !== null) items.push({ id: "sort-clear", label: messages.clearSort, onSelect: () => setColumnSort(columnId, null) });
+    }
+    if (isFilterable(column)) {
+      items.push({
+        id: "filter",
+        label: formatMessage(messages.filterColumn, { column: column.header }, locale),
+        separatorBefore: items.length > 0,
+        onSelect: () => setPopover({ columnId, kind: "filter" })
+      });
+    }
+    if (!serverMode && column.groupable !== false && column.cellType !== "actions") {
+      const grouped = group.some((item) => item.field === columnId);
+      items.push({
+        id: "group",
+        label: formatMessage(grouped ? messages.ungroup : messages.groupBy, { column: column.header }, locale),
+        separatorBefore: items.length > 0,
+        onSelect: () => changeGroup(columnId)
+      });
+    }
+    const zone = layout.start.includes(columnId) ? "start" : layout.end.includes(columnId) ? "end" : "center";
+    const ids = zone === "start" ? layout.start : zone === "end" ? layout.end : layout.center;
+    const position = ids.indexOf(columnId);
+    items.push({ id: "pin-start", label: messages.pinStart, checked: zone === "start", separatorBefore: items.length > 0, onSelect: () => pinColumn(columnId, "start") });
+    items.push({ id: "pin-end", label: messages.pinEnd, checked: zone === "end", onSelect: () => pinColumn(columnId, "end") });
+    if (zone !== "center") items.push({ id: "unpin", label: messages.unpin, onSelect: () => pinColumn(columnId, false) });
+    items.push({ id: "move-earlier", label: messages.moveEarlier, disabled: position <= 0, separatorBefore: true, onSelect: () => moveBy(columnId, -1) });
+    items.push({ id: "move-later", label: messages.moveLater, disabled: position < 0 || position >= ids.length - 1, onSelect: () => moveBy(columnId, 1) });
+    if (column.hideable !== false) items.push({ id: "hide", label: messages.hideColumn, separatorBefore: true, onSelect: () => hideColumn(columnId) });
+    return items;
+  }
+  const chips = [];
+  for (const item of effectiveFilters) {
+    const column = byId.get(item.field);
+    if (column === void 0) continue;
+    const summary = summarizeFilter(item, column, formatContext, messages);
+    chips.push({
+      key: `filter:${item.field}:${item.operator}:${JSON.stringify(item.value)}`,
+      text: summary,
+      removeLabel: formatMessage(messages.removeFilter, { summary }, locale),
+      kind: "filter",
+      onRemove: () => setFilter(filter.filter((entry) => entry !== item))
+    });
+  }
+  for (const item of effectiveGroup) {
+    const column = byId.get(item.field);
+    if (column === void 0) continue;
+    chips.push({
+      key: `group:${item.field}`,
+      text: groupChipText(messages, column.header, locale),
+      removeLabel: formatMessage(messages.removeGrouping, { column: column.header }, locale),
+      kind: "group",
+      onRemove: () => setGroup(group.filter((entry) => entry.field !== item.field))
+    });
+  }
+  const env = useMemo2(
+    () => ({
+      messages,
+      locale,
+      formatters,
+      selectionMode,
+      isRowSelectable,
+      renderDetail,
+      isRowExpandable,
+      formatGroupValue,
+      formatAggregate: formatColumnAggregate,
+      toggleSelect,
+      toggleExpand,
+      toggleGroup: toggleGroupRow,
+      startEdit,
+      commitEdit,
+      cancelEdit,
+      toggleBoolean,
+      onRowClick
+    }),
+    [messages, locale, formatters, selectionMode, isRowSelectable, renderDetail, isRowExpandable, formatGroupValue, formatColumnAggregate, toggleSelect, toggleExpand, toggleGroupRow, startEdit, commitEdit, cancelEdit, toggleBoolean, onRowClick]
+  );
+  const error = serverMode ? snapshot.error : props.error;
+  const hasError = error !== void 0 && error !== null && error !== false;
+  const retry = () => {
+    if (serverMode) store?.retry();
+    props.onRetry?.();
+  };
+  const filteredView = effectiveFilters.length > 0 || (serverMode ? serverQuick : quickText) !== "";
+  const knowsTotal = serverMode ? snapshot.total !== null : true;
+  const showEmpty = !hasError && !loadingFlag && knowsTotal && rowCount === 0;
+  const showLoadingOverlay = !hasError && loadingFlag && rowCount === 0;
+  const showProgress = loadingFlag && rowCount > 0;
+  const toolbar = resolveToolbar(props.toolbar);
+  const toolbarColumns = columns.filter((column) => column.hideable !== false).map((column) => ({ id: column.id, header: column.header, visible: columnVisibility[column.id] !== false }));
+  const clearFilters = () => {
+    setFilter([]);
+    setQuickFilter("");
+  };
+  const groupRuns = useMemo2(() => {
+    if (!hasColumnGroups) return [];
+    const runs = [];
+    gridColumns.forEach((info, index) => {
+      const label = info.column?.group !== void 0 && info.column.group !== "" ? info.column.group : void 0;
+      const last = runs[runs.length - 1];
+      if (last !== void 0 && last.label === label && label !== void 0 && last.pin === info.pin) {
+        last.to = index;
+        last.width += info.width;
+        if (info.pin === "end") last.offset = info.pinOffset;
+        return;
+      }
+      runs.push({ key: `${index}`, label, from: index, to: index, width: info.width, pin: info.pin, offset: info.pinOffset });
+    });
+    return runs;
+  }, [hasColumnGroups, gridColumns]);
+  const sortDirectionOf = (columnId) => sort.find((item) => item.field === columnId)?.direction ?? null;
+  const filteredColumns = new Set(effectiveFilters.map((item) => item.field));
+  const reorderableColumns = gridColumns.filter((info) => info.kind === "data").length > 1;
+  const bodyStyle = { blockSize: rowVirtualizer.getTotalSize(), inlineSize: totalWidth };
+  const rowStyle = { inlineSize: totalWidth };
+  const frameStyle = height === void 0 ? void 0 : { blockSize: height };
+  const scrollerStyle = height === void 0 ? { maxBlockSize: maxHeight ?? DEFAULT_MAX_HEIGHT } : {};
+  const renderHeaderCells = () => slots.map((slot, position) => {
+    if (slot.kind === "spacer") {
+      return /* @__PURE__ */ jsx12("div", { role: "presentation", "data-kit": "data-grid-spacer", style: { inlineSize: slot.size } }, `spacer-${position}`);
+    }
+    const info = gridColumns[slot.index];
+    const cursor = navClamped.row === 0 && navClamped.col === slot.index;
+    if (info.kind !== "data" || info.column === null) {
+      const label = info.kind === "select" ? messages.selectAll : messages.detailRegion;
+      return /* @__PURE__ */ jsx12(
+        "div",
+        {
+          role: "columnheader",
+          "aria-label": label,
+          "aria-colindex": slot.index + 1,
+          tabIndex: cursor ? 0 : -1,
+          "data-kit": "data-grid-header-cell",
+          "data-type": info.kind,
+          "data-nav-row": 0,
+          "data-nav-col": slot.index,
+          "data-pinned": "start",
+          "data-pinned-edge": info.pinEdge ? "" : void 0,
+          style: { inlineSize: info.width, insetInlineStart: info.pinOffset },
+          children: info.kind === "select" && selectionMode === "multiple" ? /* @__PURE__ */ jsx12(
+            Checkbox,
+            {
+              label: messages.selectAll,
+              checked: selectAllState === "all" ? true : selectAllState === "some" ? "mixed" : false,
+              tabIndex: -1,
+              "data-grid-primary": "",
+              "data-grid-space": "",
+              onChange: toggleSelectAll
+            }
+          ) : null
+        },
+        info.id
+      );
+    }
+    const column = info.column;
+    const direction = sortDirectionOf(column.id);
+    return /* @__PURE__ */ jsx12(
+      HeaderCell,
+      {
+        column,
+        navCol: slot.index,
+        width: info.width,
+        minWidth: info.minWidth,
+        maxWidth: info.maxWidth,
+        pin: info.pin,
+        pinOffset: info.pinOffset,
+        pinEdge: info.pinEdge,
+        sortDirection: direction,
+        sortRank: sort.length > 1 && direction !== null ? sort.findIndex((item) => item.field === column.id) + 1 : null,
+        sortable: isSortable(column),
+        filterable: isFilterable(column),
+        filtered: filteredColumns.has(column.id),
+        resizable: isResizable(column),
+        cursor,
+        rtl,
+        popover: popover !== null && popover.columnId === column.id ? popover.kind : null,
+        align: info.align,
+        messages,
+        locale,
+        actions: headerActions,
+        reorderable: reorderableColumns,
+        dragging: columnDrag?.id === column.id,
+        dropPlacement: columnDrag?.over?.id === column.id ? columnDrag.over.placement : null
+      },
+      info.id
+    );
+  });
+  const renderFooterCells = () => gridColumns.map((info, index) => {
+    const column = info.column;
+    const value = column === null ? void 0 : totals[column.id];
+    const text = column === null || value === void 0 ? "" : formatAggregate(column, value, formatContext);
+    let content = text;
+    if (column !== null) {
+      if (column.footerCell !== void 0) content = column.footerCell({ column, value, text, messages });
+      else if (info.first && text === "") content = messages.totals;
+    }
+    return /* @__PURE__ */ jsx12(
+      "div",
+      {
+        role: "gridcell",
+        "aria-colindex": index + 1,
+        "data-kit": "data-grid-cell",
+        "data-type": info.kind === "data" ? "total" : info.kind,
+        "data-align": info.align,
+        "data-pinned": info.pin ?? void 0,
+        "data-pinned-edge": info.pinEdge ? "" : void 0,
+        style: {
+          inlineSize: info.width,
+          ...info.pin === "start" ? { insetInlineStart: info.pinOffset } : {},
+          ...info.pin === "end" ? { insetInlineEnd: info.pinOffset } : {}
+        },
+        children: content === "" ? null : /* @__PURE__ */ jsx12("span", { "data-kit": "data-grid-text", children: content })
+      },
+      info.id
+    );
+  });
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      ref: rootRef,
+      "data-kit": "data-grid",
+      "data-density": density,
+      "data-loading": loadingFlag ? "" : void 0,
+      "data-stale": serverMode && snapshot.stale ? "" : void 0,
+      "data-server": serverMode ? "" : void 0,
+      dir,
+      className: props.className,
+      style: frameStyle,
+      children: [
+        toolbar === null ? null : /* @__PURE__ */ jsx12(
+          Toolbar,
+          {
+            messages,
+            locale,
+            search: toolbar.search,
+            columnsMenu: toolbar.columns,
+            exportButton: toolbar.export,
+            copyButton: toolbar.copy,
+            quickFilter,
+            onQuickFilterChange: setQuickFilter,
+            columns: toolbarColumns,
+            onToggleColumn: (id, visible) => setColumnVisibility({ ...columnVisibility, [id]: visible }),
+            onShowAllColumns: () => setColumnVisibility({}),
+            selectedCount,
+            totalCount,
+            onClearSelection: () => commitSelection(clearSelection()),
+            onCopy: () => void copySelection(),
+            onExport: () => void runExport(),
+            exporting,
+            start: props.toolbarStart,
+            end: props.toolbarEnd
+          }
+        ),
+        /* @__PURE__ */ jsx12(FilterBar, { chips, messages, locale, onClearAll: () => setFilter([]) }),
+        /* @__PURE__ */ jsxs10("div", { "data-kit": "data-grid-viewport", children: [
+          /* @__PURE__ */ jsxs10(
+            "div",
+            {
+              ref: scrollerRef,
+              role: treegrid ? "treegrid" : "grid",
+              "aria-label": props["aria-label"],
+              "aria-labelledby": props["aria-labelledby"],
+              "aria-rowcount": ariaRowCount,
+              "aria-colcount": gridColumns.length,
+              "aria-multiselectable": selectionMode === "multiple" ? true : void 0,
+              "aria-busy": loadingFlag ? true : void 0,
+              "data-kit": "data-grid-scroller",
+              "data-virtual-rows": virtualizeRows ? "" : void 0,
+              "data-virtual-columns": virtualizeColumns ? "" : void 0,
+              style: scrollerStyle,
+              onKeyDown,
+              onFocus,
+              children: [
+                /* @__PURE__ */ jsxs10("div", { role: "rowgroup", "data-kit": "data-grid-header-group", children: [
+                  hasColumnGroups ? /* @__PURE__ */ jsx12("div", { role: "row", "aria-rowindex": 1, "data-kit": "data-grid-group-header", style: rowStyle, children: groupRuns.map(
+                    (run) => run.label === void 0 ? /* @__PURE__ */ jsx12("div", { role: "presentation", "data-kit": "data-grid-group-header-cell", "data-blank": "", style: { inlineSize: run.width } }, run.key) : /* @__PURE__ */ jsx12(
+                      "div",
+                      {
+                        role: "columnheader",
+                        "aria-colindex": run.from + 1,
+                        "aria-colspan": run.to - run.from + 1,
+                        "data-kit": "data-grid-group-header-cell",
+                        "data-pinned": run.pin ?? void 0,
+                        style: {
+                          inlineSize: run.width,
+                          ...run.pin === "start" ? { insetInlineStart: run.offset } : {},
+                          ...run.pin === "end" ? { insetInlineEnd: run.offset } : {}
+                        },
+                        children: run.label
+                      },
+                      run.key
+                    )
+                  ) }) : null,
+                  /* @__PURE__ */ jsx12("div", { ref: headerRef, role: "row", "aria-rowindex": headerRowCount, "data-kit": "data-grid-header", style: rowStyle, children: renderHeaderCells() })
+                ] }),
+                /* @__PURE__ */ jsx12("div", { role: "rowgroup", "data-kit": "data-grid-body", style: bodyStyle, children: virtualRows.map((virtualRow) => {
+                  const item = getItem(virtualRow.index);
+                  if (item === void 0) return null;
+                  const isData = item.kind === "data";
+                  const isEditingRow = isData && editing !== null && editing.rowId === item.id;
+                  return /* @__PURE__ */ jsx12(
+                    GridRowItem,
+                    {
+                      item,
+                      ariaRowIndex: ariaRowOffset + virtualRow.index + 1,
+                      displayIndex: virtualRow.index,
+                      top: virtualRow.start - headerHeight,
+                      height: item.kind === "detail" ? void 0 : rowHeight,
+                      columns: gridColumns,
+                      slots,
+                      totalWidth,
+                      selected: isData && isSelected(selection, item.id),
+                      cursorCol: navClamped.row === virtualRow.index + 1 ? navClamped.col : -1,
+                      editingColumnId: isEditingRow ? editing.columnId : null,
+                      editingError: isEditingRow ? editing.error : null,
+                      overrides: isData ? overrides[item.id] : void 0,
+                      expanded: isData && expanded[item.id] === true,
+                      treegrid,
+                      viewportWidth: viewport.width,
+                      env,
+                      measureRef: item.kind === "detail" ? rowVirtualizer.measureElement : void 0
+                    },
+                    virtualRow.key
+                  );
+                }) }),
+                hasTotals ? /* @__PURE__ */ jsx12("div", { role: "rowgroup", "data-kit": "data-grid-footer-group", children: /* @__PURE__ */ jsx12("div", { role: "row", "aria-rowindex": ariaRowCount < 0 ? ariaRowOffset + rowCount + 1 : ariaRowCount, "data-kit": "data-grid-footer", style: rowStyle, children: renderFooterCells() }) }) : null
+              ]
+            }
+          ),
+          showProgress ? /* @__PURE__ */ jsx12("div", { "data-kit": "data-grid-progressbar", "aria-hidden": "true" }) : null,
+          showLoadingOverlay ? /* @__PURE__ */ jsx12("div", { "data-kit": "data-grid-overlay", "data-state": "loading", style: { insetBlockStart: headerHeight }, children: props.slots?.loading ?? /* @__PURE__ */ jsxs10("div", { role: "status", "data-kit": "data-grid-loading", children: [
+            /* @__PURE__ */ jsx12(Spinner, { size: "md" }),
+            /* @__PURE__ */ jsx12("span", { children: messages.loading })
+          ] }) }) : null,
+          showEmpty ? /* @__PURE__ */ jsx12("div", { "data-kit": "data-grid-overlay", "data-state": "empty", style: { insetBlockStart: headerHeight }, children: props.slots?.empty ?? /* @__PURE__ */ jsxs10("div", { "data-kit": "data-grid-empty", children: [
+            /* @__PURE__ */ jsx12("span", { children: filteredView ? messages.emptyFiltered : messages.empty }),
+            filteredView ? /* @__PURE__ */ jsx12(Button4, { variant: "outline", tone: "neutral", size: "sm", onClick: clearFilters, children: messages.clearFilters }) : null
+          ] }) }) : null,
+          hasError ? /* @__PURE__ */ jsx12("div", { "data-kit": "data-grid-overlay", "data-state": "error", "data-placement": rowCount > 0 ? "banner" : "overlay", style: rowCount > 0 ? void 0 : { insetBlockStart: headerHeight }, children: props.slots?.error !== void 0 ? props.slots.error(error, retry) : /* @__PURE__ */ jsxs10("div", { role: "alert", "data-kit": "data-grid-error", children: [
+            /* @__PURE__ */ jsx12(Icon8, { name: "alert-triangle", size: 20 }),
+            /* @__PURE__ */ jsx12("span", { children: messages.error }),
+            serverMode || props.onRetry !== void 0 ? /* @__PURE__ */ jsx12(Button4, { variant: "outline", tone: "neutral", size: "sm", onClick: retry, children: messages.retry }) : null
+          ] }) }) : null
+        ] }),
+        paginated ? /* @__PURE__ */ jsx12(
+          Pagination,
+          {
+            page,
+            pageSize,
+            total: totalCount,
+            pageSizeOptions,
+            messages: props.messages,
+            ...locale === void 0 ? {} : { locale },
+            onPageChange: (next) => setPagination({ ...pagination, page: next }),
+            onPageSizeChange: (size) => setPagination({ page: 0, pageSize: size })
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs10(VisuallyHidden4, { role: "status", "aria-live": "polite", "aria-atomic": "true", "data-kit": "data-grid-live", children: [
+          announcement.text,
+          announcement.flip ? "\xA0" : ""
+        ] })
+      ]
+    }
+  );
+}
+
+// src/react/use-grid-state.ts
+import { useCallback as useCallback4, useMemo as useMemo3, useState as useState9 } from "react";
+function useGridState({ columns, initial, initialPageSize = 25 }) {
+  const [start] = useState9(() => ({ ...createViewState(columns), ...initial }));
+  const [sort, setSort2] = useState9(start.sort);
+  const [filter, setFilter] = useState9(start.filter);
+  const [group, setGroup] = useState9(start.group);
+  const [columnOrder, setColumnOrder] = useState9(start.columnOrder);
+  const [columnVisibility, setColumnVisibility] = useState9(start.columnVisibility);
+  const [columnSizing, setColumnSizing] = useState9(start.columnSizing);
+  const [columnPinning, setColumnPinning] = useState9(start.columnPinning);
+  const [quickFilter, setQuickFilter] = useState9("");
+  const [selection, setSelection] = useState9(EMPTY_SELECTION);
+  const [pagination, setPagination] = useState9({ page: 0, pageSize: initialPageSize });
+  const view = useMemo3(
+    () => ({ sort, filter, group, columnOrder, columnVisibility, columnSizing, columnPinning }),
+    [sort, filter, group, columnOrder, columnVisibility, columnSizing, columnPinning]
+  );
+  const setView = useCallback4((next) => {
+    setSort2(next.sort);
+    setFilter(next.filter);
+    setGroup(next.group);
+    setColumnOrder(next.columnOrder);
+    setColumnVisibility(next.columnVisibility);
+    setColumnSizing(next.columnSizing);
+    setColumnPinning(next.columnPinning);
+    setPagination((previous) => ({ ...previous, page: 0 }));
+  }, []);
+  const reset = useCallback4(() => {
+    setView(createViewState(columns));
+    setQuickFilter("");
+    setSelection(EMPTY_SELECTION);
+  }, [columns, setView]);
+  const props = useMemo3(
+    () => ({
+      sort,
+      onSortChange: setSort2,
+      filter,
+      onFilterChange: setFilter,
+      quickFilter,
+      onQuickFilterChange: setQuickFilter,
+      group,
+      onGroupChange: setGroup,
+      columnOrder,
+      onColumnOrderChange: setColumnOrder,
+      columnVisibility,
+      onColumnVisibilityChange: setColumnVisibility,
+      columnSizing,
+      onColumnSizingChange: setColumnSizing,
+      columnPinning,
+      onColumnPinningChange: setColumnPinning,
+      selection,
+      onSelectionChange: setSelection,
+      pagination,
+      onPaginationChange: setPagination
+    }),
+    [sort, filter, quickFilter, group, columnOrder, columnVisibility, columnSizing, columnPinning, selection, pagination]
+  );
+  return { props, view, setView, reset };
+}
+
+// src/react/use-saved-views.ts
+import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef8, useState as useState10 } from "react";
+function useSavedViews({ store, columns, grid }) {
+  const [views, setViews] = useState10([]);
+  const [loading, setLoading] = useState10(true);
+  const [error, setError] = useState10(null);
+  const [activeId, setActiveId] = useState10(null);
+  const latest = useRef8({ columns, grid });
+  latest.current = { columns, grid };
+  const alive = useRef8(true);
+  useEffect4(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
+  const refresh = useCallback5(async () => {
+    setLoading(true);
+    try {
+      const list = await store.list();
+      if (!alive.current) return;
+      setViews(list);
+      setError(null);
+    } catch (caught) {
+      if (alive.current) setError(caught);
+    } finally {
+      if (alive.current) setLoading(false);
+    }
+  }, [store]);
+  useEffect4(() => {
+    void refresh();
+  }, [refresh]);
+  const capture = useCallback5(
+    (name) => captureView(latest.current.grid.view, latest.current.columns, name === void 0 ? {} : { name }),
+    []
+  );
+  const save = useCallback5(
+    async (id, name) => {
+      try {
+        await store.save(id, capture(name));
+        if (alive.current) {
+          setActiveId(id);
+          setError(null);
+        }
+        await refresh();
+      } catch (caught) {
+        if (alive.current) setError(caught);
+      }
+    },
+    [store, capture, refresh]
+  );
+  const apply = useCallback5(
+    async (id) => {
+      try {
+        const view = await store.load(id);
+        if (view === null || !alive.current) return false;
+        latest.current.grid.setView(applySavedView(view, latest.current.columns));
+        setActiveId(id);
+        setError(null);
+        return true;
+      } catch (caught) {
+        if (alive.current) setError(caught);
+        return false;
+      }
+    },
+    [store]
+  );
+  const remove = useCallback5(
+    async (id) => {
+      try {
+        await store.delete(id);
+        if (alive.current) setActiveId((current) => current === id ? null : current);
+        await refresh();
+      } catch (caught) {
+        if (alive.current) setError(caught);
+      }
+    },
+    [store, refresh]
+  );
+  return { views, loading, error, activeId, refresh, save, apply, remove, capture };
+}
+export {
+  DataGrid,
+  Pagination,
+  defaultMessages,
+  defineColumns,
+  resolveMessages,
+  useGridState,
+  useSavedViews
+};
+//# sourceMappingURL=react.js.map