@helix-x/datagrid-ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,2351 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/DataGrid.tsx
+
+// src/core/values.ts
+var DEFAULT_WIDTH = 150;
+var DEFAULT_MIN_WIDTH = 60;
+function readPath(row, path) {
+  if (row == null) return void 0;
+  if (!path.includes(".")) return row[path];
+  let current = row;
+  for (const segment of path.split(".")) {
+    if (current == null || typeof current !== "object") return void 0;
+    current = current[segment];
+  }
+  return current;
+}
+function resolveValue(row, column) {
+  if (column.valueGetter) return column.valueGetter(row);
+  const { field } = column;
+  if (!field) return void 0;
+  const nested = readPath(row, field);
+  if (nested !== void 0) return nested;
+  const flat = row?.[field];
+  if (flat !== void 0) return flat;
+  for (const alias of column.fieldAliases ?? []) {
+    const value = readPath(row, alias) ?? row?.[alias];
+    if (value !== void 0) return value;
+  }
+  return void 0;
+}
+function formatValue(value, row, column) {
+  if (column.valueFormatter) return column.valueFormatter(value, row);
+  if (value == null) return "";
+  if (value instanceof Date) return value.toISOString().slice(0, 10);
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  return String(value);
+}
+function exportValue(row, column) {
+  if (column.exportValue) return column.exportValue(row);
+  return formatValue(resolveValue(row, column), row, column);
+}
+function headerText(column) {
+  if (column.headerName) return column.headerName;
+  if (typeof column.header === "string") return column.header;
+  if (typeof column.header === "number") return String(column.header);
+  return column.colId ?? column.field ?? "";
+}
+function columnId(column) {
+  const id = column.colId ?? column.field;
+  if (!id) {
+    throw new Error("@helix-x/datagrid-ui: every column needs a `colId` or a `field`.");
+  }
+  return id;
+}
+function resolveColumn(column) {
+  const minWidth = column.minWidth ?? DEFAULT_MIN_WIDTH;
+  return {
+    ...column,
+    colId: columnId(column),
+    width: Math.max(column.width ?? DEFAULT_WIDTH, minWidth),
+    minWidth,
+    sortable: column.sortable ?? true,
+    resizable: column.resizable ?? true
+  };
+}
+function isEditable(column, row) {
+  if (typeof column.editable === "function") return column.editable(row);
+  return column.editable === true;
+}
+
+// src/core/useColumnState.ts
+function defaultsFrom(columns) {
+  const order = [];
+  const hidden = [];
+  const widths = {};
+  const pinned = {};
+  for (const column of columns) {
+    const id = columnId(column);
+    order.push(id);
+    if (column.hide) hidden.push(id);
+    if (column.width != null) widths[id] = column.width;
+    if (column.pinned) pinned[id] = column.pinned;
+  }
+  return { order, hidden, widths, pinned };
+}
+function mergePersisted(defaults, persisted, knownIds) {
+  if (!persisted) return defaults;
+  const savedOrder = persisted.order.filter((id) => knownIds.has(id));
+  const savedSet = new Set(savedOrder);
+  const order = [...savedOrder];
+  defaults.order.forEach((id, index) => {
+    if (!savedSet.has(id)) order.splice(Math.min(index, order.length), 0, id);
+  });
+  return {
+    order,
+    hidden: (persisted.hidden ?? defaults.hidden).filter((id) => knownIds.has(id)),
+    widths: { ...defaults.widths, ...persisted.widths ?? {} },
+    pinned: { ...defaults.pinned, ...persisted.pinned ?? {} }
+  };
+}
+function useColumnState(columns, persisted, onChange, availableWidth) {
+  const resolved = react.useMemo(() => columns.map((c) => resolveColumn(c)), [columns]);
+  const byId = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const column of resolved) map.set(column.colId, column);
+    return map;
+  }, [resolved]);
+  const defaults = react.useMemo(() => defaultsFrom(columns), [columns]);
+  const [state, setState] = react.useState(
+    () => mergePersisted(defaults, persisted, new Set(defaults.order))
+  );
+  const update = react.useCallback(
+    (mutate) => {
+      setState((current) => {
+        const next = mutate(current);
+        onChange(next);
+        return next;
+      });
+    },
+    [onChange]
+  );
+  const hiddenSet = react.useMemo(() => new Set(state.hidden), [state.hidden]);
+  const allColumns = react.useMemo(
+    () => state.order.map((id) => byId.get(id)).filter((c) => c != null),
+    [state.order, byId]
+  );
+  const visibleColumns = react.useMemo(
+    () => allColumns.filter((column) => !hiddenSet.has(column.colId)).map(
+      (column) => state.widths[column.colId] != null || state.pinned[column.colId] != null ? {
+        ...column,
+        width: Math.max(
+          state.widths[column.colId] ?? column.width,
+          column.minWidth
+        ),
+        pinned: state.pinned[column.colId] ?? column.pinned
+      } : column
+    ),
+    [allColumns, hiddenSet, state.widths, state.pinned]
+  );
+  const layout = react.useMemo(() => {
+    const flexTotal = visibleColumns.reduce((sum, c) => sum + (c.flex ?? 0), 0);
+    const fixedWidth = visibleColumns.reduce(
+      (sum, c) => sum + (c.flex ? 0 : c.width),
+      0
+    );
+    const spare = Math.max(0, availableWidth - fixedWidth);
+    const widthOf = (column) => {
+      if (!column.flex || flexTotal === 0) return column.width;
+      const share = Math.floor(spare * column.flex / flexTotal);
+      const capped = column.maxWidth ? Math.min(share, column.maxWidth) : share;
+      return Math.max(capped, column.minWidth);
+    };
+    const left = visibleColumns.filter((c) => c.pinned === "left");
+    const middle = visibleColumns.filter((c) => !c.pinned);
+    const right = visibleColumns.filter((c) => c.pinned === "right");
+    const items = [];
+    let offset = 0;
+    let leftSticky = 0;
+    for (const column of left) {
+      const width = widthOf(column);
+      items.push({
+        column,
+        colId: column.colId,
+        width,
+        left: offset,
+        pinned: "left",
+        stickyOffset: leftSticky
+      });
+      offset += width;
+      leftSticky += width;
+    }
+    for (const column of middle) {
+      const width = widthOf(column);
+      items.push({ column, colId: column.colId, width, left: offset, stickyOffset: 0 });
+      offset += width;
+    }
+    const rightWidths = right.map(widthOf);
+    let rightSticky = 0;
+    const rightOffsets = [];
+    for (let i = right.length - 1; i >= 0; i--) {
+      rightOffsets[i] = rightSticky;
+      rightSticky += rightWidths[i];
+    }
+    right.forEach((column, index) => {
+      const width = rightWidths[index];
+      items.push({
+        column,
+        colId: column.colId,
+        width,
+        left: offset,
+        pinned: "right",
+        stickyOffset: rightOffsets[index]
+      });
+      offset += width;
+    });
+    return {
+      items,
+      totalWidth: offset,
+      leftPinnedWidth: leftSticky,
+      rightPinnedWidth: rightSticky
+    };
+  }, [visibleColumns, availableWidth]);
+  const isHidden = react.useCallback((colId) => hiddenSet.has(colId), [hiddenSet]);
+  const setHidden = react.useCallback(
+    (colId, hidden) => {
+      update((current) => ({
+        ...current,
+        hidden: hidden ? current.hidden.includes(colId) ? current.hidden : [...current.hidden, colId] : current.hidden.filter((id) => id !== colId)
+      }));
+    },
+    [update]
+  );
+  const setWidth = react.useCallback(
+    (colId, width) => {
+      update((current) => ({
+        ...current,
+        widths: { ...current.widths, [colId]: Math.round(width) }
+      }));
+    },
+    [update]
+  );
+  const setPinned = react.useCallback(
+    (colId, pinned) => {
+      update((current) => {
+        const next = { ...current.pinned };
+        if (pinned) next[colId] = pinned;
+        else delete next[colId];
+        return { ...current, pinned: next };
+      });
+    },
+    [update]
+  );
+  const moveColumn = react.useCallback(
+    (colId, toIndex) => {
+      update((current) => {
+        const from = current.order.indexOf(colId);
+        if (from === -1 || from === toIndex) return current;
+        const order = [...current.order];
+        order.splice(from, 1);
+        order.splice(Math.max(0, Math.min(toIndex, order.length)), 0, colId);
+        return { ...current, order };
+      });
+    },
+    [update]
+  );
+  const reset = react.useCallback(() => {
+    update(() => defaults);
+  }, [update, defaults]);
+  return {
+    allColumns,
+    visibleColumns,
+    layout,
+    state,
+    isHidden,
+    setHidden,
+    setWidth,
+    setPinned,
+    moveColumn,
+    reset
+  };
+}
+function setPath(row, path, value) {
+  if (!path.includes(".")) {
+    return { ...row, [path]: value };
+  }
+  const [head, ...rest] = path.split(".");
+  const current = row[head];
+  return {
+    ...row,
+    [head]: setPath(
+      current ?? {},
+      rest.join("."),
+      value
+    )
+  };
+}
+function useEditModel(onCommit) {
+  const [edit, setEdit] = react.useState(null);
+  const editRef = react.useRef(null);
+  const apply = react.useCallback(
+    (next) => {
+      editRef.current = next;
+      setEdit(next);
+    },
+    []
+  );
+  const patch = react.useCallback((mutate) => {
+    const current = editRef.current;
+    if (!current) return;
+    const next = mutate(current);
+    editRef.current = next;
+    setEdit(next);
+  }, []);
+  const isEditing = react.useCallback(
+    (rowId) => edit?.rowId === rowId,
+    [edit]
+  );
+  const start = react.useCallback(
+    (rowId, row) => {
+      apply({ rowId, draft: row, original: row, errors: {}, isSaving: false });
+    },
+    [apply]
+  );
+  const setField = react.useCallback(
+    (field, value) => {
+      patch((current) => {
+        const errors = { ...current.errors };
+        delete errors[field];
+        return { ...current, draft: setPath(current.draft, field, value), errors };
+      });
+    },
+    [patch]
+  );
+  const cancel = react.useCallback(() => apply(null), [apply]);
+  const commit = react.useCallback(async () => {
+    const state = editRef.current;
+    if (!state || state.isSaving) return;
+    apply({ ...state, isSaving: true });
+    try {
+      const result = await onCommit(state.draft, state.original);
+      if (result.ok) {
+        apply(null);
+        return;
+      }
+      patch((current) => ({ ...current, errors: result.errors, isSaving: false }));
+    } catch (error) {
+      patch((current) => ({
+        ...current,
+        isSaving: false,
+        errors: {
+          ...current.errors,
+          __row__: error instanceof Error ? error.message : "Failed to save the row."
+        }
+      }));
+    }
+  }, [onCommit, apply, patch]);
+  return { edit, isEditing, start, setField, cancel, commit };
+}
+
+// src/types.ts
+var GRID_STATE_VERSION = 1;
+
+// src/core/useGridState.ts
+var PREFIX = "hxg:";
+function read(storageKey) {
+  if (typeof window === "undefined") return void 0;
+  try {
+    const raw = window.localStorage.getItem(PREFIX + storageKey);
+    if (!raw) return void 0;
+    const parsed = JSON.parse(raw);
+    if (!parsed || parsed.v !== GRID_STATE_VERSION) return void 0;
+    return parsed;
+  } catch {
+    return void 0;
+  }
+}
+function write(storageKey, state) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(PREFIX + storageKey, JSON.stringify(state));
+  } catch {
+  }
+}
+function useGridState(storageKey) {
+  const initialRef = react.useRef(
+    storageKey ? read(storageKey) : void 0
+  );
+  const [hasSavedState, setHasSavedState] = react.useState(() => initialRef.current != null);
+  const currentRef = react.useRef(
+    initialRef.current ?? {
+      v: GRID_STATE_VERSION,
+      columns: { order: [], hidden: [], widths: {}, pinned: {} },
+      sort: [],
+      filters: {},
+      pagination: { pageSize: 20 }
+    }
+  );
+  const persist = react.useCallback(
+    (patch) => {
+      if (!storageKey) return;
+      currentRef.current = { ...currentRef.current, ...patch, v: GRID_STATE_VERSION };
+      write(storageKey, currentRef.current);
+      setHasSavedState(true);
+    },
+    [storageKey]
+  );
+  const saveColumns = react.useCallback(
+    (columns) => persist({ columns }),
+    [persist]
+  );
+  const saveSort = react.useCallback((sort) => persist({ sort }), [persist]);
+  const saveFilters = react.useCallback(
+    (filters) => persist({ filters }),
+    [persist]
+  );
+  const savePageSize = react.useCallback(
+    (pageSize) => persist({ pagination: { pageSize } }),
+    [persist]
+  );
+  const clear = react.useCallback(() => {
+    if (!storageKey || typeof window === "undefined") return;
+    try {
+      window.localStorage.removeItem(PREFIX + storageKey);
+    } catch {
+    }
+    setHasSavedState(false);
+  }, [storageKey]);
+  return {
+    initial: initialRef.current,
+    saveColumns,
+    saveSort,
+    saveFilters,
+    savePageSize,
+    clear,
+    hasSavedState
+  };
+}
+function useSelectionModel(rows, getRowId, onSelectionChanged) {
+  const [selectedIds, setSelectedIds] = react.useState(() => /* @__PURE__ */ new Set());
+  const lastToggledIndexRef = react.useRef(null);
+  const rowsRef = react.useRef(rows);
+  rowsRef.current = rows;
+  const getRowIdRef = react.useRef(getRowId);
+  getRowIdRef.current = getRowId;
+  const commit = react.useCallback(
+    (next) => {
+      setSelectedIds(next);
+      onSelectionChanged?.([...next]);
+    },
+    [onSelectionChanged]
+  );
+  const isSelected = react.useCallback((id) => selectedIds.has(id), [selectedIds]);
+  const visibleIds = react.useMemo(() => rows.map(getRowId), [rows, getRowId]);
+  const allVisibleSelected = visibleIds.length > 0 && visibleIds.every((id) => selectedIds.has(id));
+  const someVisibleSelected = !allVisibleSelected && visibleIds.some((id) => selectedIds.has(id));
+  const toggleRow = react.useCallback(
+    (id, index, shiftKey) => {
+      const next = new Set(selectedIds);
+      const anchor = lastToggledIndexRef.current;
+      if (shiftKey && anchor != null && anchor !== index) {
+        const [from, to] = anchor < index ? [anchor, index] : [index, anchor];
+        const shouldSelect = !next.has(id);
+        for (let i = from; i <= to; i++) {
+          const rowId = getRowIdRef.current(rowsRef.current[i]);
+          if (rowId == null) continue;
+          if (shouldSelect) next.add(rowId);
+          else next.delete(rowId);
+        }
+      } else if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      lastToggledIndexRef.current = index;
+      commit(next);
+    },
+    [selectedIds, commit]
+  );
+  const toggleAllVisible = react.useCallback(() => {
+    const next = new Set(selectedIds);
+    if (allVisibleSelected) {
+      for (const id of visibleIds) next.delete(id);
+    } else {
+      for (const id of visibleIds) next.add(id);
+    }
+    lastToggledIndexRef.current = null;
+    commit(next);
+  }, [selectedIds, allVisibleSelected, visibleIds, commit]);
+  const selectAllVisible = react.useCallback(() => {
+    const next = new Set(selectedIds);
+    for (const id of visibleIds) next.add(id);
+    commit(next);
+  }, [selectedIds, visibleIds, commit]);
+  const clear = react.useCallback(() => {
+    lastToggledIndexRef.current = null;
+    commit(/* @__PURE__ */ new Set());
+  }, [commit]);
+  const getSelectedRows = react.useCallback(
+    () => rowsRef.current.filter((row) => selectedIds.has(getRowIdRef.current(row))),
+    [selectedIds]
+  );
+  return {
+    selectedIds,
+    isSelected,
+    allVisibleSelected,
+    someVisibleSelected,
+    toggleRow,
+    toggleAllVisible,
+    clear,
+    selectAllVisible,
+    getSelectedRows
+  };
+}
+function buildRequest(page, pageSize, sortModel, filterModel) {
+  return {
+    startRow: page * pageSize,
+    endRow: page * pageSize + pageSize,
+    sortModel,
+    filterModel,
+    // Sent empty for wire compatibility with grid endpoints that expect them.
+    rowGroupCols: [],
+    valueCols: [],
+    pivotCols: [],
+    pivotMode: false,
+    groupKeys: []
+  };
+}
+function useServerDataSource({
+  dataSource,
+  pageSize,
+  page,
+  sortModel,
+  filterModel,
+  maxCachedBlocks = 3,
+  onError
+}) {
+  const [rows, setRows] = react.useState([]);
+  const [totalRows, setTotalRows] = react.useState(0);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [refreshToken, setRefreshToken] = react.useState(0);
+  const cacheRef = react.useRef(/* @__PURE__ */ new Map());
+  const requestIdRef = react.useRef(0);
+  const abortRef = react.useRef(null);
+  const queryKey = react.useMemo(
+    () => JSON.stringify({ pageSize, sortModel, filterModel }),
+    [pageSize, sortModel, filterModel]
+  );
+  react.useEffect(() => {
+    cacheRef.current.clear();
+  }, [queryKey]);
+  const onErrorRef = react.useRef(onError);
+  react.useEffect(() => {
+    onErrorRef.current = onError;
+  }, [onError]);
+  const dataSourceRef = react.useRef(dataSource);
+  react.useEffect(() => {
+    dataSourceRef.current = dataSource;
+  }, [dataSource]);
+  react.useEffect(() => {
+    const blockKey = `${queryKey}::${page}`;
+    const cached = cacheRef.current.get(blockKey);
+    if (cached) {
+      setRows(cached.rows);
+      setTotalRows(cached.lastRow);
+      setError(null);
+      return;
+    }
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    const requestId = ++requestIdRef.current;
+    setIsLoading(true);
+    setError(null);
+    const request = buildRequest(page, pageSize, sortModel, filterModel);
+    dataSourceRef.current.getRows(request, controller.signal).then((response) => {
+      if (requestId !== requestIdRef.current) return;
+      const lastRow = response.lastRow ?? response.rows.length;
+      cacheRef.current.set(blockKey, { rows: response.rows, lastRow });
+      while (cacheRef.current.size > maxCachedBlocks) {
+        const oldest = cacheRef.current.keys().next().value;
+        if (oldest === void 0) break;
+        cacheRef.current.delete(oldest);
+      }
+      setRows(response.rows);
+      setTotalRows(lastRow);
+      setIsLoading(false);
+    }).catch((err) => {
+      if (controller.signal.aborted) return;
+      if (requestId !== requestIdRef.current) return;
+      setError(err);
+      setIsLoading(false);
+      onErrorRef.current?.(err);
+    });
+    return () => {
+      controller.abort();
+    };
+  }, [queryKey, page, pageSize, sortModel, filterModel, refreshToken, maxCachedBlocks]);
+  const refresh = react.useCallback((options) => {
+    if (options?.purge !== false) cacheRef.current.clear();
+    setRefreshToken((token) => token + 1);
+  }, []);
+  const patchRows = react.useCallback(
+    (updated, getRowId) => {
+      if (updated.length === 0) return;
+      const byId = new Map(updated.map((row) => [getRowId(row), row]));
+      const merge = (list) => {
+        let changed = false;
+        const next = list.map((row) => {
+          const replacement = byId.get(getRowId(row));
+          if (!replacement) return row;
+          changed = true;
+          return replacement;
+        });
+        return changed ? next : list;
+      };
+      setRows(merge);
+      for (const [key, block] of cacheRef.current) {
+        cacheRef.current.set(key, { ...block, rows: merge(block.rows) });
+      }
+    },
+    []
+  );
+  return { rows, totalRows, isLoading, error, refresh, patchRows };
+}
+function useVirtualRows({
+  rowCount,
+  rowHeight,
+  overscan = 6
+}) {
+  const [viewportHeight, setViewportHeightState] = react.useState(0);
+  const [window2, setWindow] = react.useState({ startIndex: 0, endIndex: 0 });
+  const scrollTopRef = react.useRef(0);
+  const frameRef = react.useRef(null);
+  const compute = react.useCallback(
+    (scrollTop, height) => {
+      if (height <= 0 || rowCount === 0) {
+        return { startIndex: 0, endIndex: 0 };
+      }
+      const first = Math.floor(scrollTop / rowHeight);
+      const visible = Math.ceil(height / rowHeight);
+      return {
+        startIndex: Math.max(0, first - overscan),
+        endIndex: Math.min(rowCount, first + visible + overscan)
+      };
+    },
+    [rowCount, rowHeight, overscan]
+  );
+  const apply = react.useCallback(
+    (scrollTop, height) => {
+      const next = compute(scrollTop, height);
+      setWindow(
+        (current) => current.startIndex === next.startIndex && current.endIndex === next.endIndex ? current : next
+      );
+    },
+    [compute]
+  );
+  const onScroll = react.useCallback(
+    (event) => {
+      scrollTopRef.current = event.currentTarget.scrollTop;
+      if (frameRef.current != null) return;
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = null;
+        apply(scrollTopRef.current, viewportHeight);
+      });
+    },
+    [apply, viewportHeight]
+  );
+  const setViewportHeight = react.useCallback((height) => {
+    setViewportHeightState((current) => current === height ? current : height);
+  }, []);
+  react.useEffect(() => {
+    apply(scrollTopRef.current, viewportHeight);
+  }, [apply, viewportHeight]);
+  react.useEffect(
+    () => () => {
+      if (frameRef.current != null) cancelAnimationFrame(frameRef.current);
+    },
+    []
+  );
+  return {
+    window: window2,
+    totalHeight: rowCount * rowHeight,
+    onScroll,
+    setViewportHeight,
+    scrollTopRef
+  };
+}
+
+// src/core/exporters.ts
+function escapeCsv(value, separator) {
+  if (value === "") return "";
+  const needsQuotes = value.includes(separator) || value.includes('"') || value.includes("\n") || value.includes("\r");
+  return needsQuotes ? `"${value.replace(/"/g, '""')}"` : value;
+}
+function toDelimited(rows, columns, separator) {
+  const exportable = columns.filter((column) => !column.suppressExport);
+  const lines = [
+    exportable.map((c) => escapeCsv(headerText(c), separator)).join(separator)
+  ];
+  for (const row of rows) {
+    lines.push(
+      exportable.map((column) => escapeCsv(exportValue(row, column), separator)).join(separator)
+    );
+  }
+  return lines.join("\r\n");
+}
+function toCsv(rows, columns, separator = ",") {
+  return toDelimited(rows, columns, separator);
+}
+function toTsv(rows, columns) {
+  return toDelimited(rows, columns, "	");
+}
+function downloadCsv(content, fileName) {
+  const blob = new Blob(["\uFEFF" + content], {
+    type: "text/csv;charset=utf-8;"
+  });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = fileName.endsWith(".csv") ? fileName : `${fileName}.csv`;
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
+  URL.revokeObjectURL(url);
+}
+async function copyToClipboard(text) {
+  if (navigator?.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand("copy");
+  document.body.removeChild(textarea);
+}
+
+// src/core/filterModel.ts
+var TEXT_FILTER_TYPES = [
+  "contains",
+  "notContains",
+  "equals",
+  "notEqual",
+  "startsWith",
+  "endsWith",
+  "blank",
+  "notBlank"
+];
+var NUMBER_FILTER_TYPES = [
+  "equals",
+  "notEqual",
+  "lessThan",
+  "lessThanOrEqual",
+  "greaterThan",
+  "greaterThanOrEqual",
+  "inRange",
+  "blank",
+  "notBlank"
+];
+var DATE_FILTER_TYPES = [
+  "equals",
+  "notEqual",
+  "before",
+  "after",
+  "inRange",
+  "blank",
+  "notBlank"
+];
+var FILTER_TYPE_LABELS = {
+  contains: "Contains",
+  notContains: "Does not contain",
+  equals: "Equals",
+  notEqual: "Not equal",
+  startsWith: "Starts with",
+  endsWith: "Ends with",
+  blank: "Is empty",
+  notBlank: "Is not empty",
+  lessThan: "Less than",
+  lessThanOrEqual: "Less than or equal",
+  greaterThan: "Greater than",
+  greaterThanOrEqual: "Greater than or equal",
+  inRange: "Between",
+  before: "Before",
+  after: "After"
+};
+function isUnaryFilter(type) {
+  return type === "blank" || type === "notBlank";
+}
+function isRangeFilter(type) {
+  return type === "inRange";
+}
+function defaultFilterType(kind) {
+  switch (kind) {
+    case "text":
+      return "contains";
+    case "number":
+      return "equals";
+    case "date":
+      return "equals";
+    case "set":
+      return "set";
+  }
+}
+function buildTextFilter(type, filter) {
+  if (!isUnaryFilter(type) && filter.trim() === "") return null;
+  return isUnaryFilter(type) ? { filterType: "text", type } : { filterType: "text", type, filter };
+}
+function buildNumberFilter(type, filter, filterTo) {
+  if (isUnaryFilter(type)) return { filterType: "number", type };
+  const from = Number(filter);
+  if (filter.trim() === "" || Number.isNaN(from)) return null;
+  if (isRangeFilter(type)) {
+    const to = Number(filterTo);
+    if (!filterTo || filterTo.trim() === "" || Number.isNaN(to)) return null;
+    return { filterType: "number", type, filter: from, filterTo: to };
+  }
+  return { filterType: "number", type, filter: from };
+}
+function buildDateFilter(type, dateFrom, dateTo) {
+  if (isUnaryFilter(type)) return { filterType: "date", type };
+  if (!dateFrom) return null;
+  if (isRangeFilter(type)) {
+    if (!dateTo) return null;
+    return { filterType: "date", type, dateFrom, dateTo };
+  }
+  return { filterType: "date", type, dateFrom };
+}
+function buildSetFilter(values) {
+  if (values.length === 0) return null;
+  return { filterType: "set", values };
+}
+function withFilter(model, colId, filter) {
+  const next = { ...model };
+  if (filter === null) {
+    delete next[colId];
+  } else {
+    next[colId] = filter;
+  }
+  return next;
+}
+function describeFilter(filter) {
+  switch (filter.filterType) {
+    case "set":
+      return filter.values.length === 1 ? filter.values[0] : `${filter.values.length} selected`;
+    case "text":
+      return isUnaryFilter(filter.type) ? FILTER_TYPE_LABELS[filter.type] : String(filter.filter ?? "");
+    case "number":
+      if (isUnaryFilter(filter.type)) return FILTER_TYPE_LABELS[filter.type];
+      return isRangeFilter(filter.type) ? `${filter.filter} - ${filter.filterTo}` : `${FILTER_TYPE_LABELS[filter.type]} ${filter.filter}`;
+    case "date":
+      if (isUnaryFilter(filter.type)) return FILTER_TYPE_LABELS[filter.type];
+      return isRangeFilter(filter.type) ? `${filter.dateFrom} - ${filter.dateTo}` : `${FILTER_TYPE_LABELS[filter.type]} ${filter.dateFrom}`;
+  }
+}
+function ColumnsPanel({
+  columns,
+  isHidden,
+  onToggle,
+  onMove,
+  onPin,
+  onReset,
+  onClose
+}) {
+  const [search, setSearch] = react.useState("");
+  const filtered = react.useMemo(() => {
+    const needle = search.trim().toLowerCase();
+    if (!needle) return columns;
+    return columns.filter(
+      (column) => headerText(column).toLowerCase().includes(needle)
+    );
+  }, [columns, search]);
+  const visibleCount = columns.filter((c) => !isHidden(c.colId)).length;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-60 shrink-0 flex-col gap-2 border-r border-gray-200 bg-white p-2 dark:border-gray-700 dark:bg-gray-900", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-300", children: "Columns" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Close columns panel",
+          className: "rounded px-1.5 text-sm text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/5",
+          onClick: onClose,
+          children: "\xD7"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "search",
+        className: "h-7 w-full rounded border border-gray-300 bg-white px-2 text-xs text-gray-800 outline-none focus:border-brand-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100",
+        placeholder: "Search columns...",
+        value: search,
+        onChange: (event) => setSearch(event.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[11px] text-gray-500 dark:text-gray-400", children: [
+      visibleCount,
+      " of ",
+      columns.length,
+      " shown"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: filtered.map((column) => {
+      const hidden = isHidden(column.colId);
+      const index = columns.findIndex((c) => c.colId === column.colId);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "group flex items-center gap-1 rounded px-1 py-1 hover:bg-gray-100 dark:hover:bg-white/5",
+          draggable: true,
+          onDragStart: (event) => event.dataTransfer.setData("text/plain", column.colId),
+          onDragOver: (event) => event.preventDefault(),
+          onDrop: (event) => {
+            event.preventDefault();
+            const dragged = event.dataTransfer.getData("text/plain");
+            if (dragged && dragged !== column.colId) onMove(dragged, index);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cursor-grab text-[10px] text-gray-400", "aria-hidden": true, children: "\u283F" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 text-xs text-gray-700 dark:text-gray-200", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  className: "h-3.5 w-3.5 accent-brand-500",
+                  checked: !hidden,
+                  onChange: () => onToggle(column.colId, !hidden)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: headerText(column) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: `shrink-0 rounded px-1 text-[10px] ${column.pinned ? "text-brand-500 dark:text-brand-400" : "text-gray-400 opacity-0 group-hover:opacity-100"}`,
+                title: column.pinned ? `Unpin (${column.pinned})` : "Pin left",
+                onClick: () => onPin(column.colId, column.pinned ? void 0 : "left"),
+                children: "\u{1F4CC}"
+              }
+            )
+          ]
+        },
+        column.colId
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "rounded border border-error-300 px-2 py-1 text-xs font-medium text-error-600 hover:bg-error-50 dark:border-error-700 dark:text-error-400 dark:hover:bg-error-500/10",
+        onClick: onReset,
+        children: "Reset to defaults"
+      }
+    )
+  ] });
+}
+var SELECTION_COLUMN_WIDTH = 40;
+function SelectionCell({
+  checked,
+  indeterminate,
+  onToggle,
+  isHeader,
+  label
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `sticky left-0 z-[3] flex h-full items-center justify-center border-r border-gray-200 dark:border-gray-700 ${isHeader ? "bg-gray-100 dark:bg-gray-800" : "bg-inherit"}`,
+      style: { width: SELECTION_COLUMN_WIDTH, minWidth: SELECTION_COLUMN_WIDTH },
+      onClick: (event) => event.stopPropagation(),
+      onDoubleClick: (event) => event.stopPropagation(),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          className: "h-3.5 w-3.5 cursor-pointer accent-brand-500",
+          checked,
+          "aria-label": label ?? (isHeader ? "Select all rows" : "Select row"),
+          ref: (node) => {
+            if (node) node.indeterminate = indeterminate === true;
+          },
+          onChange: () => void 0,
+          onClick: (event) => onToggle(event.shiftKey)
+        }
+      )
+    }
+  );
+}
+var CELL_INPUT_CLASS = "h-6 w-full rounded border border-gray-300 bg-white px-1.5 text-[11px] text-gray-800 outline-none focus:border-brand-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100";
+function FloatingCell({
+  colId,
+  kind,
+  filter,
+  onFilterChange
+}) {
+  const isFreeText = kind === "text";
+  const [draft, setDraft] = react.useState(
+    filter?.filterType === "text" ? filter.filter ?? "" : ""
+  );
+  react.useEffect(() => {
+    if (!isFreeText) return;
+    setDraft(filter?.filterType === "text" ? filter.filter ?? "" : "");
+  }, [filter, isFreeText]);
+  if (!isFreeText) {
+    const summary = filter ? describeFilter(filter) : "";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "flex h-6 items-center truncate rounded border border-dashed border-gray-300 px-1.5 text-[11px] text-gray-500 dark:border-gray-600 dark:text-gray-400",
+        title: summary,
+        children: summary || /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-50", children: "--" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "search",
+      className: CELL_INPUT_CLASS,
+      value: draft,
+      "aria-label": `Filter ${colId}`,
+      onChange: (event) => {
+        const next = event.target.value;
+        setDraft(next);
+        onFilterChange(colId, buildTextFilter("contains", next));
+      }
+    }
+  );
+}
+function FloatingFilterRow({
+  layout,
+  filterModel,
+  height,
+  selectable,
+  onFilterChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "row",
+      className: "sticky z-10 flex border-b border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800/60",
+      style: {
+        height,
+        width: layout.totalWidth + (selectable ? SELECTION_COLUMN_WIDTH : 0)
+      },
+      children: [
+        selectable && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "sticky left-0 z-[3] h-full border-r border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800",
+            style: { width: SELECTION_COLUMN_WIDTH, minWidth: SELECTION_COLUMN_WIDTH }
+          }
+        ),
+        layout.items.map(({ column, width, pinned, stickyOffset }) => {
+          const style = {
+            width,
+            minWidth: width,
+            maxWidth: width,
+            ...pinned === "left" ? { position: "sticky", left: stickyOffset, zIndex: 3 } : pinned === "right" ? { position: "sticky", right: stickyOffset, zIndex: 3 } : null
+          };
+          const showInput = column.filter && !column.filterParams?.suppressFloatingFilter;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `flex h-full items-center border-r border-gray-200 px-1 dark:border-gray-700 ${pinned ? "bg-gray-50 dark:bg-gray-800" : ""}`,
+              style,
+              children: showInput && column.filter && /* @__PURE__ */ jsxRuntime.jsx(
+                FloatingCell,
+                {
+                  colId: column.colId,
+                  kind: column.filter,
+                  filter: filterModel[column.colId],
+                  onFilterChange
+                }
+              )
+            },
+            column.colId
+          );
+        })
+      ]
+    }
+  );
+}
+var FIELD_CLASS = "h-8 w-full rounded border border-gray-300 bg-white px-2 text-xs text-gray-800 outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100";
+var BUTTON_CLASS = "rounded px-2.5 py-1 text-xs font-medium transition-colors disabled:opacity-50";
+function SetFilterBody({
+  value,
+  setValues,
+  onApply
+}) {
+  const [options, setOptions] = react.useState(
+    Array.isArray(setValues) ? setValues : []
+  );
+  const [isLoading, setIsLoading] = react.useState(typeof setValues === "function");
+  const [search, setSearch] = react.useState("");
+  const [selected, setSelected] = react.useState(
+    () => new Set(value?.filterType === "set" ? value.values : [])
+  );
+  react.useEffect(() => {
+    if (typeof setValues !== "function") {
+      setOptions(Array.isArray(setValues) ? setValues : []);
+      return;
+    }
+    let cancelled = false;
+    setIsLoading(true);
+    setValues().then((loaded) => {
+      if (!cancelled) setOptions(loaded);
+    }).catch(() => {
+      if (!cancelled) setOptions([]);
+    }).finally(() => {
+      if (!cancelled) setIsLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [setValues]);
+  const filtered = react.useMemo(() => {
+    const needle = search.trim().toLowerCase();
+    return needle ? options.filter((o) => o.toLowerCase().includes(needle)) : options;
+  }, [options, search]);
+  const toggle = (option) => {
+    setSelected((current) => {
+      const next = new Set(current);
+      if (next.has(option)) next.delete(option);
+      else next.add(option);
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "search",
+        className: FIELD_CLASS,
+        placeholder: "Search values...",
+        value: search,
+        onChange: (event) => setSearch(event.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-52 overflow-y-auto rounded border border-gray-200 dark:border-gray-700", children: [
+      isLoading && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-2 text-xs text-gray-500 dark:text-gray-400", children: "Loading..." }),
+      !isLoading && filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-2 text-xs text-gray-500 dark:text-gray-400", children: "No values." }),
+      filtered.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          className: "flex cursor-pointer items-center gap-2 px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-white/5",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                className: "h-3.5 w-3.5 accent-brand-500",
+                checked: selected.has(option),
+                onChange: () => toggle(option)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: option })
+          ]
+        },
+        option
+      ))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: `${BUTTON_CLASS} text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5`,
+          onClick: () => {
+            setSelected(/* @__PURE__ */ new Set());
+            onApply(null);
+          },
+          children: "Clear"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: `${BUTTON_CLASS} bg-brand-500 text-white hover:bg-brand-600`,
+          onClick: () => onApply(buildSetFilter([...selected])),
+          children: "Apply"
+        }
+      )
+    ] })
+  ] });
+}
+function FilterPopover({
+  kind,
+  value,
+  setValues,
+  onApply,
+  onClose
+}) {
+  const containerRef = react.useRef(null);
+  const types = kind === "text" ? TEXT_FILTER_TYPES : kind === "number" ? NUMBER_FILTER_TYPES : DATE_FILTER_TYPES;
+  const [type, setType] = react.useState(() => {
+    if (value && value.filterType !== "set") return value.type;
+    return types[0];
+  });
+  const [operand, setOperand] = react.useState(() => {
+    if (!value) return "";
+    if (value.filterType === "text") return value.filter ?? "";
+    if (value.filterType === "number") return value.filter?.toString() ?? "";
+    if (value.filterType === "date") return value.dateFrom ?? "";
+    return "";
+  });
+  const [operandTo, setOperandTo] = react.useState(() => {
+    if (!value) return "";
+    if (value.filterType === "number") return value.filterTo?.toString() ?? "";
+    if (value.filterType === "date") return value.dateTo ?? "";
+    return "";
+  });
+  react.useEffect(() => {
+    const onPointerDown = (event) => {
+      if (!containerRef.current?.contains(event.target)) onClose();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [onClose]);
+  const apply = () => {
+    if (kind === "text") {
+      onApply(buildTextFilter(type, operand));
+    } else if (kind === "number") {
+      onApply(buildNumberFilter(type, operand, operandTo));
+    } else {
+      onApply(buildDateFilter(type, operand, operandTo));
+    }
+  };
+  const inputType = kind === "date" ? "date" : kind === "number" ? "number" : "text";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "absolute right-0 top-full z-30 mt-1 flex w-60 flex-col gap-2 rounded-md border border-gray-200 bg-white p-2 shadow-theme-lg dark:border-gray-700 dark:bg-gray-900",
+      onClick: (event) => event.stopPropagation(),
+      children: kind === "set" ? /* @__PURE__ */ jsxRuntime.jsx(SetFilterBody, { value, setValues, onApply }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            className: FIELD_CLASS,
+            value: type,
+            onChange: (event) => setType(event.target.value),
+            children: types.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option, children: FILTER_TYPE_LABELS[option] ?? option }, option))
+          }
+        ),
+        !isUnaryFilter(type) && /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: inputType,
+            className: FIELD_CLASS,
+            value: operand,
+            autoFocus: true,
+            placeholder: "Value",
+            onChange: (event) => setOperand(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter") apply();
+            }
+          }
+        ),
+        isRangeFilter(type) && /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: inputType,
+            className: FIELD_CLASS,
+            value: operandTo,
+            placeholder: "To",
+            onChange: (event) => setOperandTo(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter") apply();
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: `${BUTTON_CLASS} text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5`,
+              onClick: () => {
+                setOperand("");
+                setOperandTo("");
+                onApply(null);
+              },
+              children: "Clear"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: `${BUTTON_CLASS} bg-brand-500 text-white hover:bg-brand-600`,
+              onClick: apply,
+              children: "Apply"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function SortIndicator({
+  direction,
+  index,
+  showIndex
+}) {
+  if (!direction) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-0 transition-opacity group-hover:opacity-40", "aria-hidden": true, children: "\u2191" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center text-brand-500 dark:text-brand-400", "aria-hidden": true, children: [
+    direction === "asc" ? "\u2191" : "\u2193",
+    showIndex && /* @__PURE__ */ jsxRuntime.jsx("sub", { className: "ml-0.5 text-[9px]", children: index + 1 })
+  ] });
+}
+function GridHeader({
+  layout,
+  sortModel,
+  filterModel,
+  headerHeight,
+  selectable,
+  allSelected,
+  someSelected,
+  onToggleAll,
+  onSort,
+  onFilterChange,
+  onResize,
+  onMove,
+  onPin
+}) {
+  const [openFilter, setOpenFilter] = react.useState(null);
+  const [openMenu, setOpenMenu] = react.useState(null);
+  const [dragColId, setDragColId] = react.useState(null);
+  const resizeRef = react.useRef(
+    null
+  );
+  const startResize = react.useCallback(
+    (event, item) => {
+      event.preventDefault();
+      event.stopPropagation();
+      resizeRef.current = {
+        colId: item.colId,
+        startX: event.clientX,
+        startWidth: item.width
+      };
+      event.target.setPointerCapture(event.pointerId);
+    },
+    []
+  );
+  const onResizeMove = react.useCallback(
+    (event) => {
+      const active = resizeRef.current;
+      if (!active) return;
+      const delta = event.clientX - active.startX;
+      onResize(active.colId, Math.max(40, active.startWidth + delta));
+    },
+    [onResize]
+  );
+  const endResize = react.useCallback((event) => {
+    if (!resizeRef.current) return;
+    resizeRef.current = null;
+    event.target.releasePointerCapture(event.pointerId);
+  }, []);
+  const sortIndexOf = (colId) => sortModel.findIndex((entry) => entry.colId === colId);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "row",
+      className: "sticky top-0 z-10 flex border-b border-gray-300 bg-gray-100 dark:border-gray-600 dark:bg-gray-800",
+      style: {
+        height: headerHeight,
+        width: layout.totalWidth + (selectable ? SELECTION_COLUMN_WIDTH : 0)
+      },
+      children: [
+        selectable && /* @__PURE__ */ jsxRuntime.jsx(
+          SelectionCell,
+          {
+            isHeader: true,
+            checked: allSelected,
+            indeterminate: someSelected,
+            onToggle: onToggleAll,
+            label: "Select all rows on this page"
+          }
+        ),
+        layout.items.map((item, index) => {
+          const { column, width, pinned, stickyOffset } = item;
+          const sortIndex = sortIndexOf(column.colId);
+          const direction = sortIndex === -1 ? void 0 : sortModel[sortIndex].sort;
+          const activeFilter = filterModel[column.colId];
+          const filterKind = column.filter;
+          const style = {
+            width,
+            minWidth: width,
+            maxWidth: width,
+            ...pinned === "left" ? { position: "sticky", left: stickyOffset, zIndex: 3 } : pinned === "right" ? { position: "sticky", right: stickyOffset, zIndex: 3 } : null
+          };
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              role: "columnheader",
+              "aria-sort": direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none",
+              "aria-colindex": index + 1,
+              className: `group relative flex h-full items-center border-r border-gray-300 bg-gray-100 px-2 dark:border-gray-600 dark:bg-gray-800 ${dragColId === column.colId ? "opacity-40" : ""} ${column.headerClassName ?? ""}`,
+              style,
+              draggable: !column.lockPosition,
+              onDragStart: (event) => {
+                setDragColId(column.colId);
+                event.dataTransfer.effectAllowed = "move";
+              },
+              onDragOver: (event) => {
+                if (dragColId && dragColId !== column.colId) event.preventDefault();
+              },
+              onDrop: (event) => {
+                event.preventDefault();
+                if (dragColId && dragColId !== column.colId) onMove(dragColId, index);
+                setDragColId(null);
+              },
+              onDragEnd: () => setDragColId(null),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex min-w-0 flex-1 cursor-pointer items-center gap-1 text-left text-xs font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-300",
+                    disabled: !column.sortable,
+                    onClick: (event) => column.sortable && onSort(column.colId, event.shiftKey),
+                    title: column.sortable ? "Sort (shift-click to add)" : void 0,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: column.header }),
+                      column.sortable && /* @__PURE__ */ jsxRuntime.jsx(
+                        SortIndicator,
+                        {
+                          direction,
+                          index: sortIndex,
+                          showIndex: sortModel.length > 1
+                        }
+                      )
+                    ]
+                  }
+                ),
+                filterKind && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Filter ${column.colId}`,
+                    className: `ml-1 shrink-0 rounded px-1 text-[10px] leading-none ${activeFilter ? "text-brand-500 dark:text-brand-400" : "text-gray-400 opacity-0 group-hover:opacity-100"}`,
+                    title: activeFilter ? describeFilter(activeFilter) : "Filter",
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      setOpenMenu(null);
+                      setOpenFilter(
+                        (current) => current === column.colId ? null : column.colId
+                      );
+                    },
+                    children: "\u25BC"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Options for ${column.colId}`,
+                    className: "ml-0.5 shrink-0 rounded px-1 text-[10px] leading-none text-gray-400 opacity-0 group-hover:opacity-100",
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      setOpenFilter(null);
+                      setOpenMenu((current) => current === column.colId ? null : column.colId);
+                    },
+                    children: "\u22EE"
+                  }
+                ),
+                openFilter === column.colId && filterKind && /* @__PURE__ */ jsxRuntime.jsx(
+                  FilterPopover,
+                  {
+                    kind: filterKind,
+                    value: activeFilter,
+                    setValues: column.filterParams?.values,
+                    onApply: (filter) => {
+                      onFilterChange(column.colId, filter);
+                      setOpenFilter(null);
+                    },
+                    onClose: () => setOpenFilter(null)
+                  }
+                ),
+                openMenu === column.colId && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "absolute right-0 top-full z-30 mt-1 w-36 rounded-md border border-gray-200 bg-white py-1 shadow-theme-lg dark:border-gray-700 dark:bg-gray-900",
+                    onMouseLeave: () => setOpenMenu(null),
+                    children: ["left", "right"].map((side) => /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "block w-full px-3 py-1 text-left text-xs text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-white/5",
+                        onClick: () => {
+                          onPin(column.colId, pinned === side ? void 0 : side);
+                          setOpenMenu(null);
+                        },
+                        children: pinned === side ? `Unpin ${side}` : `Pin ${side}`
+                      },
+                      side
+                    ))
+                  }
+                ),
+                column.resizable && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    role: "separator",
+                    "aria-orientation": "vertical",
+                    className: "absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-brand-400",
+                    onPointerDown: (event) => startResize(event, item),
+                    onPointerMove: onResizeMove,
+                    onPointerUp: endResize,
+                    onPointerCancel: endResize,
+                    onClick: (event) => event.stopPropagation()
+                  }
+                )
+              ]
+            },
+            column.colId
+          );
+        })
+      ]
+    }
+  );
+}
+function GridOverlay({ kind, message }) {
+  if (kind === "loading") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 z-[5] flex items-start justify-center bg-white/60 pt-10 dark:bg-gray-900/60", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-md border border-gray-200 bg-white px-3 py-1.5 text-xs text-gray-600 shadow-theme-sm dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-3 w-3 animate-spin rounded-full border-2 border-brand-400 border-t-transparent" }),
+      message ?? "Loading..."
+    ] }) });
+  }
+  if (kind === "error") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-[5] flex items-start justify-center bg-white/80 pt-10 dark:bg-gray-900/80", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-md rounded-md border border-error-300 bg-error-50 px-3 py-2 text-xs text-error-700 dark:border-error-700 dark:bg-error-500/10 dark:text-error-400", children: message ?? "Something went wrong loading this grid." }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-[5] flex items-start justify-center pt-10", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: message ?? "No records found" }) });
+}
+var BUTTON_CLASS2 = "rounded border border-gray-300 px-2 py-0.5 text-xs text-gray-700 transition-colors hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-white/5";
+function GridPagination({
+  page,
+  pageSize,
+  totalRows,
+  pageSizeOptions,
+  isLoading,
+  onPageChange,
+  onPageSizeChange
+}) {
+  const pageCount = Math.max(1, Math.ceil(totalRows / pageSize));
+  const first = totalRows === 0 ? 0 : page * pageSize + 1;
+  const last = Math.min(totalRows, (page + 1) * pageSize);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-t border-gray-200 bg-gray-50 px-2 py-1.5 dark:border-gray-700 dark:bg-gray-800/60", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-xs text-gray-600 dark:text-gray-300", children: [
+        "Rows",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            className: "ml-1 rounded border border-gray-300 bg-white px-1 py-0.5 text-xs dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100",
+            value: pageSize,
+            onChange: (event) => onPageSizeChange(Number(event.target.value)),
+            children: pageSizeOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option, children: option }, option))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-600 dark:text-gray-300", children: isLoading ? "Loading..." : `${first}-${last} of ${totalRows}` })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: BUTTON_CLASS2,
+          disabled: page === 0,
+          onClick: () => onPageChange(0),
+          children: "\xAB First"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: BUTTON_CLASS2,
+          disabled: page === 0,
+          onClick: () => onPageChange(page - 1),
+          children: "\u2039 Prev"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-1 text-xs text-gray-600 dark:text-gray-300", children: [
+        "Page ",
+        page + 1,
+        " of ",
+        pageCount
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: BUTTON_CLASS2,
+          disabled: page + 1 >= pageCount,
+          onClick: () => onPageChange(page + 1),
+          children: "Next \u203A"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: BUTTON_CLASS2,
+          disabled: page + 1 >= pageCount,
+          onClick: () => onPageChange(pageCount - 1),
+          children: "Last \xBB"
+        }
+      )
+    ] })
+  ] });
+}
+var INPUT_CLASS = "h-7 w-full rounded border px-1.5 text-xs outline-none border-gray-300 bg-white text-gray-800 focus:border-brand-500 focus:ring-1 focus:ring-brand-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100";
+var ERROR_CLASS = "!border-error-500 focus:!border-error-500 focus:!ring-error-500";
+function className(error) {
+  return error ? `${INPUT_CLASS} ${ERROR_CLASS}` : INPUT_CLASS;
+}
+function keyHandler(params) {
+  return (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      params.onCommit();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      params.onCancel();
+    }
+  };
+}
+function TextEditor({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  error,
+  autoFocus,
+  column
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "text",
+      className: className(error),
+      value: value == null ? "" : String(value),
+      autoFocus,
+      placeholder: column.editorParams?.placeholder,
+      title: error,
+      "aria-invalid": error ? true : void 0,
+      onChange: (event) => onChange(event.target.value),
+      onKeyDown: keyHandler({ onCommit, onCancel })
+    }
+  );
+}
+function NumberEditor({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  error,
+  autoFocus
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "number",
+      className: className(error),
+      value: value == null ? "" : String(value),
+      autoFocus,
+      title: error,
+      "aria-invalid": error ? true : void 0,
+      onChange: (event) => onChange(event.target.value === "" ? null : Number(event.target.value)),
+      onKeyDown: keyHandler({ onCommit, onCancel })
+    }
+  );
+}
+function DateEditor({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  error,
+  autoFocus
+}) {
+  const asInputValue = (() => {
+    if (value == null || value === "") return "";
+    const date = value instanceof Date ? value : new Date(String(value));
+    return Number.isNaN(date.getTime()) ? "" : date.toISOString().slice(0, 10);
+  })();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "date",
+      className: className(error),
+      value: asInputValue,
+      autoFocus,
+      title: error,
+      "aria-invalid": error ? true : void 0,
+      onChange: (event) => onChange(event.target.value === "" ? null : event.target.value),
+      onKeyDown: keyHandler({ onCommit, onCancel })
+    }
+  );
+}
+function SelectEditor({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  error,
+  autoFocus,
+  column
+}) {
+  const options = column.editorParams?.options ?? [];
+  const selectedIndex = options.findIndex((option) => option.value === value);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "select",
+    {
+      className: className(error),
+      value: selectedIndex === -1 ? "" : String(selectedIndex),
+      autoFocus,
+      title: error,
+      "aria-invalid": error ? true : void 0,
+      onChange: (event) => {
+        const index = Number(event.target.value);
+        onChange(Number.isNaN(index) ? null : options[index]?.value ?? null);
+      },
+      onKeyDown: keyHandler({ onCommit, onCancel }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "--" }),
+        options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: index, children: option.label }, `${String(option.value)}-${index}`))
+      ]
+    }
+  );
+}
+function CheckboxEditor({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  autoFocus
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "checkbox",
+      className: "h-4 w-4 accent-brand-500",
+      checked: value === true,
+      autoFocus,
+      onChange: (event) => onChange(event.target.checked),
+      onKeyDown: keyHandler({ onCommit, onCancel })
+    }
+  );
+}
+
+// src/components/editors/registry.ts
+var BUILTIN_EDITORS = {
+  text: TextEditor,
+  number: NumberEditor,
+  date: DateEditor,
+  select: SelectEditor,
+  checkbox: CheckboxEditor
+};
+var ALIGN_CLASS = {
+  left: "justify-start text-left",
+  center: "justify-center text-center",
+  right: "justify-end text-right"
+};
+function GridCellInner({
+  item,
+  row,
+  rowIndex,
+  context,
+  api,
+  isRowEditing,
+  draft,
+  errors,
+  isFirstEditable,
+  onFieldChange,
+  onCommit,
+  onCancel
+}) {
+  const { column, width, pinned, stickyOffset } = item;
+  const style = {
+    width,
+    minWidth: width,
+    maxWidth: width,
+    ...pinned === "left" ? { position: "sticky", left: stickyOffset, zIndex: 2 } : pinned === "right" ? { position: "sticky", right: stickyOffset, zIndex: 2 } : null
+  };
+  const custom = typeof column.cellClassName === "function" ? column.cellClassName(row) : column.cellClassName;
+  const base = "flex h-full items-center gap-1 border-r border-gray-200 px-2 text-xs text-gray-700 dark:border-gray-700 dark:text-gray-200 " + (pinned ? "bg-white dark:bg-gray-900 " : "");
+  const alignment = ALIGN_CLASS[column.align ?? "left"];
+  const editing = isRowEditing && draft != null && isEditable(column, row);
+  if (editing) {
+    const field = column.field ?? column.colId;
+    const error = errors[field];
+    const editorValue = resolveValue(draft, column);
+    const Editor = typeof column.editor === "function" ? column.editor : BUILTIN_EDITORS[column.editor ?? "text"];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "gridcell",
+        className: `${base} ${alignment} ${custom ?? ""}`,
+        style,
+        "data-col-id": column.colId,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Editor,
+          {
+            value: editorValue,
+            row: draft,
+            column,
+            context,
+            error,
+            autoFocus: isFirstEditable,
+            onChange: (value2) => onFieldChange(field, value2),
+            onCommit,
+            onCancel
+          }
+        )
+      }
+    );
+  }
+  const value = resolveValue(row, column);
+  const formatted = formatValue(value, row, column);
+  const content = column.cellRenderer ? column.cellRenderer({
+    row,
+    rowIndex,
+    value,
+    formatted,
+    column,
+    context,
+    api
+  }) : formatted;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "gridcell",
+      className: `${base} ${alignment} ${custom ?? ""}`,
+      style,
+      "data-col-id": column.colId,
+      title: column.cellRenderer ? void 0 : formatted || void 0,
+      children: column.cellRenderer ? content : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatted })
+    }
+  );
+}
+var GridCell = react.memo(GridCellInner);
+function GridRowInner({
+  row,
+  rowId,
+  rowIndex,
+  top,
+  height,
+  layout,
+  context,
+  api,
+  selectable,
+  isSelected,
+  isRowEditing,
+  draft,
+  errors,
+  isSaving,
+  onToggleSelect,
+  onFieldChange,
+  onCommit,
+  onCancel,
+  onRowDoubleClick,
+  onFilesDropped
+}) {
+  const [isDropTarget, setIsDropTarget] = react.useState(false);
+  const rowError = errors.__row__;
+  const firstEditableColId = isRowEditing ? layout.items.find((item) => isEditable(item.column, row))?.colId : void 0;
+  const background = isRowEditing ? "bg-brand-25 dark:bg-brand-500/10" : isSelected ? "bg-brand-50 dark:bg-brand-500/15" : rowIndex % 2 === 1 ? "bg-gray-50/60 dark:bg-white/[0.02]" : "bg-white dark:bg-gray-900";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "row",
+      "aria-rowindex": rowIndex + 1,
+      "aria-selected": selectable ? isSelected : void 0,
+      className: `absolute left-0 flex border-b border-gray-200 dark:border-gray-700 ${background} hover:bg-brand-25 dark:hover:bg-white/[0.04] ${isSaving ? "opacity-60" : ""} ${isDropTarget ? "outline-2 -outline-offset-2 outline-dashed outline-brand-500" : ""}`,
+      style: { top, height, width: layout.totalWidth + (selectable ? 40 : 0) },
+      onDoubleClick: () => onRowDoubleClick(rowId, row),
+      title: rowError,
+      onDragOver: onFilesDropped ? (event) => {
+        if (!event.dataTransfer.types.includes("Files")) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+        if (!isDropTarget) setIsDropTarget(true);
+      } : void 0,
+      onDragLeave: onFilesDropped ? () => setIsDropTarget(false) : void 0,
+      onDrop: onFilesDropped ? (event) => {
+        if (!event.dataTransfer.types.includes("Files")) return;
+        event.preventDefault();
+        setIsDropTarget(false);
+        const files = Array.from(event.dataTransfer.files);
+        if (files.length > 0) onFilesDropped(row, files);
+      } : void 0,
+      children: [
+        selectable && /* @__PURE__ */ jsxRuntime.jsx(
+          SelectionCell,
+          {
+            checked: isSelected,
+            onToggle: (shiftKey) => onToggleSelect(rowId, rowIndex, shiftKey)
+          }
+        ),
+        layout.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          GridCell,
+          {
+            item,
+            row,
+            rowIndex,
+            context,
+            api,
+            isRowEditing,
+            draft,
+            errors,
+            isFirstEditable: item.colId === firstEditableColId,
+            onFieldChange,
+            onCommit,
+            onCancel
+          },
+          item.colId
+        ))
+      ]
+    }
+  );
+}
+var GridRow = react.memo(GridRowInner);
+var DEFAULT_PAGE_SIZES = [10, 20, 50, 100];
+function DataGrid({
+  columns,
+  dataSource,
+  getRowId,
+  context,
+  storageKey,
+  rowHeight = 36,
+  headerHeight = 36,
+  floatingFilter = true,
+  selectable = true,
+  defaultPageSize = 20,
+  pageSizeOptions = DEFAULT_PAGE_SIZES,
+  onRowCommit,
+  onSelectionChanged,
+  onRowFilesDropped,
+  onError,
+  toolbar,
+  emptyMessage,
+  exportFileName = "export",
+  className: className2 = "",
+  height = "70vh",
+  apiRef
+}) {
+  const persisted = useGridState(storageKey);
+  const [sortModel, setSortModel] = react.useState(
+    () => persisted.initial?.sort ?? []
+  );
+  const [filterModel, setFilterModel] = react.useState(
+    () => persisted.initial?.filters ?? {}
+  );
+  const [pageSize, setPageSize] = react.useState(
+    () => persisted.initial?.pagination.pageSize ?? defaultPageSize
+  );
+  const [page, setPage] = react.useState(0);
+  const [showColumnsPanel, setShowColumnsPanel] = react.useState(false);
+  const viewportRef = react.useRef(null);
+  const [viewportWidth, setViewportWidth] = react.useState(0);
+  const floatingFilterHeight = floatingFilter ? 28 : 0;
+  react.useLayoutEffect(() => {
+    const element = viewportRef.current;
+    if (!element) return;
+    const observer = new ResizeObserver((entries) => {
+      const rect = entries[0]?.contentRect;
+      if (!rect) return;
+      setViewportWidth(rect.width);
+      setViewportHeightRef.current(
+        Math.max(0, rect.height - headerHeight - floatingFilterHeight)
+      );
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [headerHeight, floatingFilterHeight]);
+  const columnState = useColumnState(
+    columns,
+    persisted.initial?.columns,
+    persisted.saveColumns,
+    viewportWidth - (selectable ? 40 : 0)
+  );
+  const { rows, totalRows, isLoading, error, refresh, patchRows } = useServerDataSource(
+    { dataSource, pageSize, page, sortModel, filterModel, onError }
+  );
+  react.useEffect(() => {
+    if (isLoading || totalRows === 0) return;
+    const pageCount = Math.max(1, Math.ceil(totalRows / pageSize));
+    if (page > pageCount - 1) setPage(pageCount - 1);
+  }, [totalRows, pageSize, page, isLoading]);
+  const virtual = useVirtualRows({ rowCount: rows.length, rowHeight });
+  const setViewportHeightRef = react.useRef(virtual.setViewportHeight);
+  setViewportHeightRef.current = virtual.setViewportHeight;
+  const selection = useSelectionModel(rows, getRowId, onSelectionChanged);
+  const noopCommit = react.useCallback(() => ({ ok: true }), []);
+  const editing = useEditModel(onRowCommit ?? noopCommit);
+  const applySort = react.useCallback(
+    (next) => {
+      setSortModel(next);
+      persisted.saveSort(next);
+      setPage(0);
+    },
+    [persisted]
+  );
+  const applyFilters = react.useCallback(
+    (next) => {
+      setFilterModel(next);
+      persisted.saveFilters(next);
+      setPage(0);
+    },
+    [persisted]
+  );
+  const onSort = react.useCallback(
+    (colId, additive) => {
+      const existing = sortModel.find((entry) => entry.colId === colId);
+      const others = sortModel.filter((entry) => entry.colId !== colId);
+      const next = !existing ? [...additive ? sortModel : [], { colId, sort: "asc" }] : existing.sort === "asc" ? [...additive ? others : [], { colId, sort: "desc" }] : additive ? others : [];
+      applySort(next);
+    },
+    [sortModel, applySort]
+  );
+  const onFilterChange = react.useCallback(
+    (colId, filter) => {
+      applyFilters(withFilter(filterModel, colId, filter));
+    },
+    [filterModel, applyFilters]
+  );
+  const onPageSizeChange = react.useCallback(
+    (next) => {
+      setPageSize(next);
+      persisted.savePageSize(next);
+      setPage(0);
+    },
+    [persisted]
+  );
+  const latest = react.useRef({
+    rows,
+    selection,
+    columnState,
+    filterModel,
+    sortModel,
+    editing,
+    getRowId
+  });
+  latest.current = {
+    rows,
+    selection,
+    columnState,
+    filterModel,
+    sortModel,
+    editing,
+    getRowId
+  };
+  const api = react.useMemo(
+    () => ({
+      refresh: (options) => refresh(options),
+      getDisplayedRows: () => latest.current.rows,
+      getSelectedRows: () => latest.current.selection.getSelectedRows(),
+      getSelectedIds: () => [...latest.current.selection.selectedIds],
+      clearSelection: () => latest.current.selection.clear(),
+      selectAll: () => latest.current.selection.selectAllVisible(),
+      exportCsv: (options) => {
+        const source = options?.onlySelected ? latest.current.selection.getSelectedRows() : latest.current.rows;
+        const csv = toCsv(
+          source,
+          latest.current.columnState.visibleColumns,
+          options?.separator ?? ","
+        );
+        downloadCsv(csv, options?.fileName ?? exportFileName);
+      },
+      copySelectionToClipboard: async () => {
+        const selected = latest.current.selection.getSelectedRows();
+        const source = selected.length > 0 ? selected : latest.current.rows;
+        await copyToClipboard(
+          toTsv(source, latest.current.columnState.visibleColumns)
+        );
+      },
+      getFilterModel: () => latest.current.filterModel,
+      setFilterModel: applyFilters,
+      getSortModel: () => latest.current.sortModel,
+      setSortModel: applySort,
+      resetColumns: () => {
+        latest.current.columnState.reset();
+        persisted.clear();
+      },
+      updateRows: (updated) => patchRows(updated, latest.current.getRowId),
+      startEditing: (rowId) => {
+        const row = latest.current.rows.find(
+          (candidate) => latest.current.getRowId(candidate) === rowId
+        );
+        if (row) latest.current.editing.start(rowId, row);
+      },
+      stopEditing: () => latest.current.editing.cancel()
+    }),
+    [refresh, applyFilters, applySort, patchRows, persisted, exportFileName]
+  );
+  react.useImperativeHandle(apiRef, () => api, [api]);
+  const onRowDoubleClick = react.useCallback(
+    (rowId, row) => {
+      if (onRowCommit) editing.start(rowId, row);
+    },
+    [onRowCommit, editing]
+  );
+  const editingRowId = editing.edit?.rowId ?? null;
+  const cancelEditRef = react.useRef(editing.cancel);
+  cancelEditRef.current = editing.cancel;
+  react.useEffect(() => {
+    if (editingRowId == null) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (!target.closest('[data-hxg-editing-row="true"]')) cancelEditRef.current();
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [editingRowId]);
+  const emptyContext = react.useMemo(() => ({}), []);
+  const cellContext = context ?? emptyContext;
+  const { startIndex, endIndex } = virtual.window;
+  const visibleRows = rows.slice(startIndex, endIndex);
+  const showEmpty = !isLoading && !error && rows.length === 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900 ${className2}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-gray-200 bg-gray-50 px-2 py-1.5 dark:border-gray-700 dark:bg-gray-800/60", children: [
+          toolbar?.(api),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "rounded border border-gray-300 px-2 py-0.5 text-xs text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-white/5",
+                onClick: () => setShowColumnsPanel((current) => !current),
+                children: "Columns"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "rounded border border-gray-300 px-2 py-0.5 text-xs text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-white/5",
+                onClick: () => api.exportCsv(),
+                children: "Export CSV"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1", children: [
+          showColumnsPanel && /* @__PURE__ */ jsxRuntime.jsx(
+            ColumnsPanel,
+            {
+              columns: columnState.allColumns,
+              isHidden: columnState.isHidden,
+              onToggle: columnState.setHidden,
+              onMove: columnState.moveColumn,
+              onPin: columnState.setPinned,
+              onReset: () => {
+                columnState.reset();
+                persisted.clear();
+              },
+              onClose: () => setShowColumnsPanel(false)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: viewportRef,
+              role: "grid",
+              "aria-rowcount": totalRows,
+              "aria-colcount": columnState.layout.items.length,
+              "aria-busy": isLoading,
+              className: "relative min-w-0 flex-1 overflow-auto",
+              style: { height },
+              onScroll: virtual.onScroll,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  GridHeader,
+                  {
+                    layout: columnState.layout,
+                    sortModel,
+                    filterModel,
+                    headerHeight,
+                    selectable,
+                    allSelected: selection.allVisibleSelected,
+                    someSelected: selection.someVisibleSelected,
+                    onToggleAll: selection.toggleAllVisible,
+                    onSort,
+                    onFilterChange,
+                    onResize: columnState.setWidth,
+                    onMove: columnState.moveColumn,
+                    onPin: columnState.setPinned
+                  }
+                ),
+                floatingFilter && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { top: headerHeight, position: "sticky", zIndex: 9 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  FloatingFilterRow,
+                  {
+                    layout: columnState.layout,
+                    filterModel,
+                    height: floatingFilterHeight,
+                    selectable,
+                    onFilterChange
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "relative",
+                    style: {
+                      height: virtual.totalHeight,
+                      width: columnState.layout.totalWidth + (selectable ? 40 : 0)
+                    },
+                    children: visibleRows.map((row, offset) => {
+                      const rowIndex = startIndex + offset;
+                      const rowId = getRowId(row);
+                      const isRowEditing = editing.edit?.rowId === rowId;
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          "data-hxg-editing-row": isRowEditing ? "true" : void 0,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            GridRow,
+                            {
+                              row,
+                              rowId,
+                              rowIndex,
+                              top: rowIndex * rowHeight,
+                              height: rowHeight,
+                              layout: columnState.layout,
+                              context: cellContext,
+                              api,
+                              selectable,
+                              isSelected: selection.isSelected(rowId),
+                              isRowEditing,
+                              draft: isRowEditing ? editing.edit?.draft ?? null : null,
+                              errors: isRowEditing ? editing.edit?.errors ?? {} : {},
+                              isSaving: isRowEditing && editing.edit?.isSaving === true,
+                              onToggleSelect: selection.toggleRow,
+                              onFieldChange: editing.setField,
+                              onCommit: editing.commit,
+                              onCancel: editing.cancel,
+                              onRowDoubleClick,
+                              onFilesDropped: onRowFilesDropped
+                            }
+                          )
+                        },
+                        rowId
+                      );
+                    })
+                  }
+                ),
+                isLoading && /* @__PURE__ */ jsxRuntime.jsx(GridOverlay, { kind: "loading" }),
+                error != null && /* @__PURE__ */ jsxRuntime.jsx(
+                  GridOverlay,
+                  {
+                    kind: "error",
+                    message: error instanceof Error ? error.message : String(error)
+                  }
+                ),
+                showEmpty && /* @__PURE__ */ jsxRuntime.jsx(GridOverlay, { kind: "empty", message: emptyMessage })
+              ]
+            }
+          )
+        ] }),
+        editing.edit && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-brand-200 bg-brand-25 px-2 py-1.5 dark:border-brand-500/30 dark:bg-brand-500/10", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-auto text-xs text-gray-600 dark:text-gray-300", children: editing.edit.errors.__row__ ?? "Editing row \u2014 Enter to save, Escape to cancel." }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "rounded border border-gray-300 px-2 py-0.5 text-xs text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-200",
+              onClick: editing.cancel,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "rounded bg-brand-500 px-2.5 py-0.5 text-xs font-medium text-white hover:bg-brand-600 disabled:opacity-50",
+              disabled: editing.edit.isSaving,
+              onClick: editing.commit,
+              children: editing.edit.isSaving ? "Saving..." : "Save"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          GridPagination,
+          {
+            page,
+            pageSize,
+            totalRows,
+            pageSizeOptions,
+            isLoading,
+            onPageChange: setPage,
+            onPageSizeChange
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.BUILTIN_EDITORS = BUILTIN_EDITORS;
+exports.CheckboxEditor = CheckboxEditor;
+exports.ColumnsPanel = ColumnsPanel;
+exports.DATE_FILTER_TYPES = DATE_FILTER_TYPES;
+exports.DataGrid = DataGrid;
+exports.DateEditor = DateEditor;
+exports.FILTER_TYPE_LABELS = FILTER_TYPE_LABELS;
+exports.FilterPopover = FilterPopover;
+exports.GRID_STATE_VERSION = GRID_STATE_VERSION;
+exports.GridOverlay = GridOverlay;
+exports.GridPagination = GridPagination;
+exports.NUMBER_FILTER_TYPES = NUMBER_FILTER_TYPES;
+exports.NumberEditor = NumberEditor;
+exports.SelectEditor = SelectEditor;
+exports.TEXT_FILTER_TYPES = TEXT_FILTER_TYPES;
+exports.TextEditor = TextEditor;
+exports.buildDateFilter = buildDateFilter;
+exports.buildNumberFilter = buildNumberFilter;
+exports.buildSetFilter = buildSetFilter;
+exports.buildTextFilter = buildTextFilter;
+exports.columnId = columnId;
+exports.copyToClipboard = copyToClipboard;
+exports.defaultFilterType = defaultFilterType;
+exports.describeFilter = describeFilter;
+exports.downloadCsv = downloadCsv;
+exports.exportValue = exportValue;
+exports.formatValue = formatValue;
+exports.headerText = headerText;
+exports.isEditable = isEditable;
+exports.isRangeFilter = isRangeFilter;
+exports.isUnaryFilter = isUnaryFilter;
+exports.resolveColumn = resolveColumn;
+exports.resolveValue = resolveValue;
+exports.toCsv = toCsv;
+exports.toDelimited = toDelimited;
+exports.toTsv = toTsv;
+exports.useColumnState = useColumnState;
+exports.useEditModel = useEditModel;
+exports.useGridState = useGridState;
+exports.useSelectionModel = useSelectionModel;
+exports.useServerDataSource = useServerDataSource;
+exports.useVirtualRows = useVirtualRows;
+exports.withFilter = withFilter;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map