@alaarab/ogrid-vue 2.1.2 → 2.1.4

package/dist/esm/index.js

@@ -1,16 +1,4337 @@
-// Re-export core types + utils
+import { injectGlobalStyles, Z_INDEX, getStatusBarParts, measureRange, flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, validateColumns, validateRowIds, computeRowSelectionState, UndoRedoStack, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, computeAggregations, getDataGridStatusBarConfig, computeVisibleRange, computeTotalHeight, buildHeaderRows, ROW_NUMBER_COLUMN_WIDTH, getHeaderFilterConfig, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, resolveCellDisplayContent, resolveCellStyle, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, measureColumnContentWidth, getPinStateForColumn, parseValue, applyFillValues, applyCellDeletion, computeTabNavigation, computeArrowNavigation, computeNextSortState, mergeFilter, applyRangeRowSelection, getScrollTopForRow, getCellValue, calculateDropTarget, reorderColumnArray, computeAutoScrollSpeed } from '@alaarab/ogrid-core';
 export * from '@alaarab/ogrid-core';
-export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
-// Shared components
-export { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
-export { StatusBar } from './components/StatusBar';
-// Composables
-export { useOGrid, useDataGridState, useActiveCell, useCellEditing, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useFillHandle, useUndoRedo, useContextMenu, useColumnResize, useColumnReorder, useVirtualScroll, useFilterOptions, useDebounce, useDebouncedCallback, useTableLayout, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useRichSelectState, useSideBarState, useColumnPinning, useColumnHeaderMenuState, useDataGridTableSetup, } from './composables';
-// View model utilities (for UI packages)
-export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './utils';
-// DataGridTable factory (for UI packages)
-export { createDataGridTable } from './components/createDataGridTable';
-// InlineCellEditor factory (for UI packages)
-export { createInlineCellEditor } from './components/createInlineCellEditor';
-// OGrid factory (for UI packages)
-export { createOGrid } from './components/createOGrid';
+export { buildInlineEditorProps, buildPopoverEditorProps, getCellRenderDescriptor, getHeaderFilterConfig, isInSelectionRange, normalizeSelectionRange, resolveCellDisplayContent, resolveCellStyle, toUserLike } from '@alaarab/ogrid-core';
+import { defineComponent, ref, computed, onMounted, watch, toValue, onUnmounted, h, shallowRef, triggerRef, nextTick, Teleport, isRef, isReadonly, unref, customRef } from 'vue';
+
+// src/index.ts
+var MarchingAntsOverlay = defineComponent({
+  name: "MarchingAntsOverlay",
+  props: {
+    /** Ref to the positioned container that wraps the table (must have position: relative) */
+    containerRef: { type: Object, required: true },
+    /** Current selection range — solid green border */
+    selectionRange: { type: Object, default: null },
+    /** Copy range — animated dashed border */
+    copyRange: { type: Object, default: null },
+    /** Cut range — animated dashed border */
+    cutRange: { type: Object, default: null },
+    /** Column offset — 1 when checkbox column is present, else 0 */
+    colOffset: { type: Number, required: true },
+    /** Items array — triggers re-measurement when data changes (e.g., sorting) */
+    items: { type: Array, required: true },
+    /** Visible columns — triggers re-measurement when columns are hidden/shown */
+    visibleColumns: { type: Array, default: void 0 },
+    /** Column sizing overrides — triggers re-measurement when columns are resized */
+    columnSizingOverrides: { type: Object, required: true },
+    /** Column order — triggers re-measurement when columns are reordered */
+    columnOrder: { type: Array, default: void 0 }
+  },
+  setup(props) {
+    const selRect = ref(null);
+    const clipRect = ref(null);
+    let rafId = 0;
+    let ro;
+    const clipRange = computed(() => props.copyRange ?? props.cutRange);
+    const measureAll = () => {
+      const container = toValue(props.containerRef);
+      if (!container) {
+        selRect.value = null;
+        clipRect.value = null;
+        return;
+      }
+      selRect.value = props.selectionRange ? measureRange(container, props.selectionRange, props.colOffset) : null;
+      clipRect.value = clipRange.value ? measureRange(container, clipRange.value, props.colOffset) : null;
+    };
+    onMounted(() => {
+      injectGlobalStyles("ogrid-marching-ants-keyframes", "@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}");
+    });
+    watch([() => props.selectionRange, clipRange, () => toValue(props.containerRef), () => props.items, () => props.visibleColumns, () => props.columnSizingOverrides, () => props.columnOrder], () => {
+      if (!props.selectionRange && !clipRange.value) {
+        selRect.value = null;
+        clipRect.value = null;
+        return;
+      }
+      rafId = requestAnimationFrame(measureAll);
+      const container = toValue(props.containerRef);
+      if (container) {
+        ro?.disconnect();
+        ro = new ResizeObserver(measureAll);
+        ro.observe(container);
+      }
+    }, { immediate: true });
+    onUnmounted(() => {
+      cancelAnimationFrame(rafId);
+      ro?.disconnect();
+    });
+    const clipRangeMatchesSel = computed(() => {
+      const sel = props.selectionRange;
+      const clip = clipRange.value;
+      return sel != null && clip != null && sel.startRow === clip.startRow && sel.startCol === clip.startCol && sel.endRow === clip.endRow && sel.endCol === clip.endCol;
+    });
+    return () => {
+      if (!selRect.value && !clipRect.value) return null;
+      return h("div", { style: { position: "relative" } }, [
+        // Selection range: solid green border (hidden when clipboard range overlaps)
+        selRect.value && !clipRangeMatchesSel.value ? h("svg", {
+          style: {
+            position: "absolute",
+            top: `${selRect.value.top}px`,
+            left: `${selRect.value.left}px`,
+            width: `${selRect.value.width}px`,
+            height: `${selRect.value.height}px`,
+            pointerEvents: "none",
+            zIndex: Z_INDEX.SELECTION_OVERLAY,
+            overflow: "visible"
+          },
+          "aria-hidden": "true"
+        }, [
+          h("rect", {
+            x: 1,
+            y: 1,
+            width: Math.max(0, selRect.value.width - 2),
+            height: Math.max(0, selRect.value.height - 2),
+            fill: "none",
+            stroke: "var(--ogrid-selection, #217346)",
+            "stroke-width": 2
+          })
+        ]) : null,
+        // Copy/Cut range: animated marching ants
+        clipRect.value ? h("svg", {
+          style: {
+            position: "absolute",
+            top: `${clipRect.value.top}px`,
+            left: `${clipRect.value.left}px`,
+            width: `${clipRect.value.width}px`,
+            height: `${clipRect.value.height}px`,
+            pointerEvents: "none",
+            zIndex: Z_INDEX.CLIPBOARD_OVERLAY,
+            overflow: "visible"
+          },
+          "aria-hidden": "true"
+        }, [
+          h("rect", {
+            x: 1,
+            y: 1,
+            width: Math.max(0, clipRect.value.width - 2),
+            height: Math.max(0, clipRect.value.height - 2),
+            fill: "none",
+            stroke: "var(--ogrid-selection, #217346)",
+            "stroke-width": 2,
+            "stroke-dasharray": "4 4",
+            style: {
+              animation: "ogrid-marching-ants 0.5s linear infinite"
+            }
+          })
+        ]) : null
+      ]);
+    };
+  }
+});
+var StatusBar = defineComponent({
+  name: "StatusBar",
+  props: {
+    totalCount: { type: Number, required: true },
+    filteredCount: { type: Number, default: void 0 },
+    selectedCount: { type: Number, default: void 0 },
+    selectedCellCount: { type: Number, default: void 0 },
+    aggregation: { type: Object, default: void 0 },
+    suppressRowCount: { type: Boolean, default: false }
+  },
+  setup(props) {
+    return () => {
+      const parts = getStatusBarParts(props);
+      return h("div", {
+        role: "status",
+        "aria-live": "polite",
+        style: {
+          marginTop: "auto",
+          padding: "6px 12px",
+          borderTop: "1px solid var(--ogrid-border, rgba(0,0,0,0.12))",
+          backgroundColor: "var(--ogrid-header-bg, rgba(0,0,0,0.04))",
+          display: "flex",
+          alignItems: "center",
+          gap: "16px",
+          fontSize: "0.875rem"
+        }
+      }, parts.map(
+        (p, i) => h("span", {
+          key: p.key,
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "4px",
+            ...i < parts.length - 1 ? { marginRight: "16px", borderRight: "1px solid var(--ogrid-border, rgba(0,0,0,0.12))", paddingRight: "16px" } : {}
+          }
+        }, [
+          h("span", { style: { color: "var(--ogrid-fg-secondary, rgba(0,0,0,0.6))" } }, p.label),
+          h("span", { style: { fontWeight: "600" } }, p.value.toLocaleString())
+        ])
+      ));
+    };
+  }
+});
+function useFilterOptions(dataSource, fields) {
+  const filterOptions = ref({});
+  const loadingOptions = ref({});
+  const fieldsKey = computed(() => [...fields.value].sort().join(","));
+  const load = async () => {
+    const ds = dataSource.value;
+    const currentFields = fields.value;
+    const fetcher = "fetchFilterOptions" in ds && typeof ds.fetchFilterOptions === "function" ? ds.fetchFilterOptions.bind(ds) : void 0;
+    if (!fetcher) {
+      filterOptions.value = {};
+      loadingOptions.value = {};
+      return;
+    }
+    const loading = {};
+    currentFields.forEach((f) => {
+      loading[f] = true;
+    });
+    loadingOptions.value = loading;
+    const results = {};
+    await Promise.all(
+      currentFields.map(async (field) => {
+        try {
+          results[field] = await fetcher(field);
+        } catch {
+          results[field] = [];
+        }
+      })
+    );
+    filterOptions.value = results;
+    loadingOptions.value = {};
+  };
+  watch([dataSource, fieldsKey], () => {
+    load().catch(() => {
+    });
+  }, { immediate: true });
+  return { filterOptions, loadingOptions };
+}
+var DEFAULT_PANELS = ["columns", "filters"];
+function useSideBarState(params) {
+  const { config } = params;
+  const isEnabled = config != null && config !== false;
+  const parsed = (() => {
+    if (!isEnabled || config === true) {
+      return { panels: DEFAULT_PANELS, position: "right", defaultPanel: null };
+    }
+    const def = config;
+    return {
+      panels: def.panels ?? DEFAULT_PANELS,
+      position: def.position ?? "right",
+      defaultPanel: def.defaultPanel ?? null
+    };
+  })();
+  const activePanel = ref(parsed.defaultPanel);
+  const setActivePanel = (panel) => {
+    activePanel.value = panel;
+  };
+  const toggle = (panel) => {
+    activePanel.value = activePanel.value === panel ? null : panel;
+  };
+  const close = () => {
+    activePanel.value = null;
+  };
+  const isOpen = computed(() => activePanel.value !== null);
+  return {
+    isEnabled,
+    activePanel,
+    setActivePanel,
+    panels: parsed.panels,
+    position: parsed.position,
+    isOpen,
+    toggle,
+    close
+  };
+}
+
+// src/composables/useOGrid.ts
+var DEFAULT_PAGE_SIZE = 25;
+var EMPTY_LOADING_OPTIONS = {};
+function useOGrid(props) {
+  const columnProps = computed(() => {
+    const p = props.value;
+    return {
+      columns: p.columns,
+      columnOrder: p.columnOrder,
+      onColumnOrderChange: p.onColumnOrderChange,
+      onColumnResized: p.onColumnResized,
+      onColumnPinned: p.onColumnPinned,
+      columnChooser: p.columnChooser
+    };
+  });
+  const dataProps = computed(() => {
+    const p = props.value;
+    const data = "data" in p ? p.data : void 0;
+    const dataSource = "dataSource" in p ? p.dataSource : void 0;
+    if (data && dataSource) {
+      console.warn("[OGrid] Both data and dataSource provided. dataSource takes precedence.");
+    }
+    return {
+      getRowId: p.getRowId,
+      data,
+      dataSource
+    };
+  });
+  const controlledState = computed(() => {
+    const p = props.value;
+    return {
+      page: p.page,
+      pageSize: p.pageSize,
+      sort: p.sort,
+      filters: p.filters,
+      visibleColumns: p.visibleColumns,
+      isLoading: p.isLoading
+    };
+  });
+  const callbacks = computed(() => {
+    const p = props.value;
+    return {
+      onPageChange: p.onPageChange,
+      onPageSizeChange: p.onPageSizeChange,
+      onSortChange: p.onSortChange,
+      onFiltersChange: p.onFiltersChange,
+      onVisibleColumnsChange: p.onVisibleColumnsChange,
+      onFirstDataRendered: p.onFirstDataRendered,
+      onError: p.onError
+    };
+  });
+  const defaults = computed(() => {
+    const p = props.value;
+    return {
+      defaultPageSize: p.defaultPageSize ?? DEFAULT_PAGE_SIZE,
+      defaultSortBy: p.defaultSortBy,
+      defaultSortDirection: p.defaultSortDirection ?? "asc",
+      entityLabelPlural: p.entityLabelPlural ?? "items"
+    };
+  });
+  const columnChooserPlacement = computed(
+    () => columnProps.value.columnChooser === false ? "none" : columnProps.value.columnChooser === "sidebar" ? "sidebar" : "toolbar"
+  );
+  const columns = computed(() => flattenColumns(columnProps.value.columns));
+  const isServerSide = computed(() => dataProps.value.dataSource != null);
+  const isClientSide = computed(() => !isServerSide.value);
+  const internalData = ref([]);
+  const internalLoading = ref(false);
+  const displayData = computed(() => dataProps.value.data ?? internalData.value);
+  const displayLoading = computed(() => controlledState.value.isLoading ?? internalLoading.value);
+  const defaultSortField = computed(() => defaults.value.defaultSortBy ?? columns.value[0]?.columnId ?? "");
+  const internalPage = ref(1);
+  const internalPageSize = ref(defaults.value.defaultPageSize);
+  const internalSort = ref({
+    field: defaultSortField.value,
+    direction: defaults.value.defaultSortDirection
+  });
+  const internalFilters = ref({});
+  const internalVisibleColumns = ref((() => {
+    const visible = columns.value.filter((c) => c.defaultVisible !== false).map((c) => c.columnId);
+    return new Set(visible.length > 0 ? visible : columns.value.map((c) => c.columnId));
+  })());
+  const columnWidthOverrides = ref({});
+  const pinnedOverrides = ref({});
+  const page = computed(() => controlledState.value.page ?? internalPage.value);
+  const pageSize = computed(() => controlledState.value.pageSize ?? internalPageSize.value);
+  const sort = computed(() => controlledState.value.sort ?? internalSort.value);
+  const filters = computed(() => controlledState.value.filters ?? internalFilters.value);
+  const visibleColumns = computed(() => controlledState.value.visibleColumns ?? internalVisibleColumns.value);
+  const setPage = (p) => {
+    if (controlledState.value.page === void 0) internalPage.value = p;
+    callbacks.value.onPageChange?.(p);
+  };
+  const setPageSize = (size) => {
+    if (controlledState.value.pageSize === void 0) internalPageSize.value = size;
+    callbacks.value.onPageSizeChange?.(size);
+    setPage(1);
+  };
+  const setSort = (s) => {
+    if (controlledState.value.sort === void 0) internalSort.value = s;
+    callbacks.value.onSortChange?.(s);
+    setPage(1);
+  };
+  const setFilters = (f) => {
+    if (controlledState.value.filters === void 0) internalFilters.value = f;
+    callbacks.value.onFiltersChange?.(f);
+    setPage(1);
+  };
+  const setVisibleColumns = (cols) => {
+    if (controlledState.value.visibleColumns === void 0) internalVisibleColumns.value = cols;
+    callbacks.value.onVisibleColumnsChange?.(cols);
+  };
+  const handleSort = (columnKey, direction) => {
+    setSort(computeNextSortState(sort.value, columnKey, direction));
+  };
+  const handleFilterChange = (key, value) => {
+    setFilters(mergeFilter(filters.value, key, value));
+  };
+  const handleVisibilityChange = (columnKey, isVisible) => {
+    const next = new Set(visibleColumns.value);
+    if (isVisible) next.add(columnKey);
+    else next.delete(columnKey);
+    setVisibleColumns(next);
+  };
+  const internalSelectedRows = ref(/* @__PURE__ */ new Set());
+  const selectedRowsProp = computed(() => props.value.selectedRows);
+  const effectiveSelectedRows = computed(() => selectedRowsProp.value ?? internalSelectedRows.value);
+  const handleSelectionChange = (event) => {
+    if (selectedRowsProp.value === void 0) {
+      internalSelectedRows.value = new Set(event.selectedRowIds);
+    }
+    props.value.onSelectionChange?.(event);
+  };
+  const multiSelectFilterFields = computed(() => getMultiSelectFilterFields(columns.value));
+  const filterOptionsSource = computed(() => dataProps.value.dataSource ?? { fetchFilterOptions: void 0 });
+  const { filterOptions: serverFilterOptions, loadingOptions: loadingFilterOptions } = useFilterOptions(filterOptionsSource, multiSelectFilterFields);
+  const hasServerFilterOptions = computed(() => dataProps.value.dataSource?.fetchFilterOptions != null);
+  const clientFilterOptions = computed(() => {
+    if (hasServerFilterOptions.value) return serverFilterOptions.value;
+    return deriveFilterOptionsFromData(displayData.value, columns.value);
+  });
+  const clientItemsAndTotal = computed(() => {
+    if (!isClientSide.value) return null;
+    const rows = processClientSideData(
+      displayData.value,
+      columns.value,
+      filters.value,
+      sort.value.field,
+      sort.value.direction
+    );
+    const total = rows.length;
+    const start = (page.value - 1) * pageSize.value;
+    const paged = rows.slice(start, start + pageSize.value);
+    return { items: paged, totalCount: total };
+  });
+  const serverItems = ref([]);
+  const serverTotalCount = ref(0);
+  const loading = ref(false);
+  let fetchId = 0;
+  let isDestroyed = false;
+  const refreshCounter = ref(0);
+  const doFetch = () => {
+    if (!isServerSide.value || !dataProps.value.dataSource) {
+      if (!isServerSide.value) loading.value = false;
+      return;
+    }
+    const id = ++fetchId;
+    loading.value = true;
+    dataProps.value.dataSource.fetchPage({
+      page: page.value,
+      pageSize: pageSize.value,
+      sort: { field: sort.value.field, direction: sort.value.direction },
+      filters: filters.value
+    }).then((res) => {
+      if (id !== fetchId || isDestroyed) return;
+      serverItems.value = res.items;
+      serverTotalCount.value = res.totalCount;
+    }).catch((err) => {
+      if (id !== fetchId || isDestroyed) return;
+      callbacks.value.onError?.(err);
+      serverItems.value = [];
+      serverTotalCount.value = 0;
+    }).finally(() => {
+      if (id === fetchId && !isDestroyed) loading.value = false;
+    });
+  };
+  onMounted(() => {
+    validateColumns(columns.value);
+    doFetch();
+  });
+  watch(
+    [() => dataProps.value.dataSource, page, pageSize, () => sort.value.field, () => sort.value.direction, filters, refreshCounter],
+    () => {
+      doFetch();
+    }
+  );
+  onUnmounted(() => {
+    isDestroyed = true;
+  });
+  const displayItems = computed(
+    () => isClientSide.value && clientItemsAndTotal.value ? clientItemsAndTotal.value.items : serverItems.value
+  );
+  const displayTotalCount = computed(
+    () => isClientSide.value && clientItemsAndTotal.value ? clientItemsAndTotal.value.totalCount : serverTotalCount.value
+  );
+  let firstDataRendered = false;
+  let rowIdsValidated = false;
+  watch(displayItems, (items) => {
+    if (!firstDataRendered && items.length > 0) {
+      firstDataRendered = true;
+      callbacks.value.onFirstDataRendered?.();
+    }
+    if (!rowIdsValidated && items.length > 0) {
+      rowIdsValidated = true;
+      validateRowIds(items, dataProps.value.getRowId);
+    }
+  });
+  const hasActiveFilters = computed(() => Object.values(filters.value).some((v) => v !== void 0));
+  const columnChooserColumns = computed(
+    () => columns.value.map((c) => ({
+      columnId: c.columnId,
+      name: c.name,
+      required: c.required === true
+    }))
+  );
+  const statusBarConfig = computed(() => {
+    const sb = props.value.statusBar;
+    if (!sb) return void 0;
+    if (typeof sb === "object") return sb;
+    const totalData = isClientSide.value ? dataProps.value.data?.length ?? 0 : serverTotalCount.value;
+    const filteredData = displayTotalCount.value;
+    return {
+      totalCount: totalData,
+      filteredCount: hasActiveFilters.value ? filteredData : void 0,
+      selectedCount: effectiveSelectedRows.value.size,
+      suppressRowCount: true
+    };
+  });
+  const handleColumnResized = (columnId, width) => {
+    columnWidthOverrides.value = { ...columnWidthOverrides.value, [columnId]: width };
+    columnProps.value.onColumnResized?.(columnId, width);
+  };
+  const handleColumnPinned = (columnId, pinned) => {
+    if (pinned === null) {
+      const { [columnId]: _removed, ...rest } = pinnedOverrides.value;
+      pinnedOverrides.value = rest;
+    } else {
+      pinnedOverrides.value = { ...pinnedOverrides.value, [columnId]: pinned };
+    }
+    columnProps.value.onColumnPinned?.(columnId, pinned);
+  };
+  const sideBarStateRef = shallowRef(useSideBarState({ config: props.value.sideBar }));
+  watch(() => props.value.sideBar, (newConfig) => {
+    sideBarStateRef.value = useSideBarState({ config: newConfig });
+  });
+  const filterableColumns = computed(
+    () => columns.value.filter((c) => c.filterable && c.filterable.type).map((c) => ({
+      columnId: c.columnId,
+      name: c.name,
+      filterField: c.filterable?.filterField ?? c.columnId,
+      filterType: c.filterable?.type
+    }))
+  );
+  const sideBarProps = computed(() => {
+    const sideBarState = sideBarStateRef.value;
+    if (!sideBarState.isEnabled) return null;
+    sideBarState.activePanel.value;
+    sideBarState.isOpen.value;
+    return {
+      get activePanel() {
+        return sideBarState.activePanel.value;
+      },
+      onPanelChange: sideBarState.setActivePanel,
+      panels: sideBarState.panels,
+      position: sideBarState.position,
+      get isOpen() {
+        return sideBarState.isOpen.value;
+      },
+      toggle: sideBarState.toggle,
+      close: sideBarState.close,
+      columns: columnChooserColumns.value,
+      visibleColumns: visibleColumns.value,
+      onVisibilityChange: handleVisibilityChange,
+      onSetVisibleColumns: setVisibleColumns,
+      filterableColumns: filterableColumns.value,
+      filters: filters.value,
+      onFilterChange: handleFilterChange,
+      filterOptions: clientFilterOptions.value
+    };
+  });
+  const clearAllFilters = () => setFilters({});
+  const isLoadingResolved = computed(() => isServerSide.value && loading.value || displayLoading.value);
+  const dataGridProps = computed(() => {
+    const p = props.value;
+    const ds = dataProps.value.dataSource;
+    return {
+      items: displayItems.value,
+      columns: columnProps.value.columns,
+      getRowId: dataProps.value.getRowId,
+      sortBy: sort.value.field,
+      sortDirection: sort.value.direction,
+      onColumnSort: handleSort,
+      visibleColumns: visibleColumns.value,
+      columnOrder: columnProps.value.columnOrder,
+      onColumnOrderChange: columnProps.value.onColumnOrderChange,
+      onColumnResized: handleColumnResized,
+      onColumnPinned: handleColumnPinned,
+      pinnedColumns: pinnedOverrides.value,
+      initialColumnWidths: columnWidthOverrides.value,
+      editable: p.editable,
+      cellSelection: p.cellSelection,
+      onCellValueChanged: p.onCellValueChanged,
+      onUndo: p.onUndo,
+      onRedo: p.onRedo,
+      canUndo: p.canUndo,
+      canRedo: p.canRedo,
+      rowSelection: p.rowSelection ?? "none",
+      selectedRows: effectiveSelectedRows.value,
+      onSelectionChange: handleSelectionChange,
+      showRowNumbers: p.showRowNumbers,
+      currentPage: page.value,
+      pageSize: pageSize.value,
+      statusBar: statusBarConfig.value,
+      isLoading: isLoadingResolved.value,
+      filters: filters.value,
+      onFilterChange: handleFilterChange,
+      filterOptions: clientFilterOptions.value,
+      loadingFilterOptions: ds?.fetchFilterOptions ? loadingFilterOptions.value : EMPTY_LOADING_OPTIONS,
+      peopleSearch: ds?.searchPeople,
+      getUserByEmail: ds?.getUserByEmail,
+      layoutMode: p.layoutMode,
+      suppressHorizontalScroll: p.suppressHorizontalScroll,
+      stickyHeader: p.stickyHeader ?? true,
+      columnReorder: p.columnReorder,
+      virtualScroll: p.virtualScroll,
+      rowHeight: p.rowHeight,
+      density: p.density ?? "normal",
+      "aria-label": p["aria-label"],
+      "aria-labelledby": p["aria-labelledby"],
+      emptyState: {
+        hasActiveFilters: hasActiveFilters.value,
+        onClearAll: clearAllFilters,
+        message: p.emptyState?.message,
+        render: p.emptyState?.render
+      }
+    };
+  });
+  const pagination = computed(() => ({
+    page: page.value,
+    pageSize: pageSize.value,
+    displayTotalCount: displayTotalCount.value,
+    setPage,
+    setPageSize,
+    pageSizeOptions: props.value.pageSizeOptions,
+    entityLabelPlural: defaults.value.entityLabelPlural
+  }));
+  const columnChooser = computed(() => ({
+    columns: columnChooserColumns.value,
+    visibleColumns: visibleColumns.value,
+    onVisibilityChange: handleVisibilityChange,
+    placement: columnChooserPlacement.value
+  }));
+  const layout = computed(() => ({
+    toolbar: props.value.toolbar,
+    toolbarBelow: props.value.toolbarBelow,
+    className: props.value.className,
+    emptyState: props.value.emptyState,
+    sideBarProps: sideBarProps.value,
+    fullScreen: props.value.fullScreen
+  }));
+  const filtersResult = computed(() => ({
+    hasActiveFilters: hasActiveFilters.value,
+    setFilters
+  }));
+  const api = computed(() => ({
+    setRowData: (d) => {
+      if (!isServerSide.value) internalData.value = d;
+    },
+    setLoading: (v) => {
+      internalLoading.value = v;
+    },
+    getColumnState: () => ({
+      visibleColumns: Array.from(visibleColumns.value),
+      sort: sort.value,
+      columnOrder: columnProps.value.columnOrder ?? void 0,
+      columnWidths: Object.keys(columnWidthOverrides.value).length > 0 ? columnWidthOverrides.value : void 0,
+      filters: Object.keys(filters.value).length > 0 ? filters.value : void 0,
+      pinnedColumns: Object.keys(pinnedOverrides.value).length > 0 ? pinnedOverrides.value : void 0
+    }),
+    applyColumnState: (state) => {
+      if (state.visibleColumns) setVisibleColumns(new Set(state.visibleColumns));
+      if (state.sort) setSort(state.sort);
+      if (state.columnOrder && columnProps.value.onColumnOrderChange) columnProps.value.onColumnOrderChange(state.columnOrder);
+      if (state.columnWidths) columnWidthOverrides.value = state.columnWidths;
+      if (state.filters) setFilters(state.filters);
+      if (state.pinnedColumns) pinnedOverrides.value = state.pinnedColumns;
+    },
+    setFilterModel: setFilters,
+    getSelectedRows: () => Array.from(effectiveSelectedRows.value),
+    setSelectedRows: (rowIds) => {
+      if (selectedRowsProp.value === void 0) internalSelectedRows.value = new Set(rowIds);
+    },
+    selectAll: () => {
+      const allIds = new Set(displayItems.value.map((item) => dataProps.value.getRowId(item)));
+      if (selectedRowsProp.value === void 0) internalSelectedRows.value = allIds;
+      props.value.onSelectionChange?.({ selectedRowIds: Array.from(allIds), selectedItems: displayItems.value });
+    },
+    deselectAll: () => {
+      if (selectedRowsProp.value === void 0) internalSelectedRows.value = /* @__PURE__ */ new Set();
+      props.value.onSelectionChange?.({ selectedRowIds: [], selectedItems: [] });
+    },
+    clearFilters: () => setFilters({}),
+    clearSort: () => setSort({ field: defaultSortField.value, direction: defaults.value.defaultSortDirection }),
+    resetGridState: (options) => {
+      setFilters({});
+      setSort({ field: defaultSortField.value, direction: defaults.value.defaultSortDirection });
+      if (!options?.keepSelection) {
+        if (selectedRowsProp.value === void 0) internalSelectedRows.value = /* @__PURE__ */ new Set();
+        props.value.onSelectionChange?.({ selectedRowIds: [], selectedItems: [] });
+      }
+    },
+    getDisplayedRows: () => displayItems.value,
+    refreshData: () => {
+      if (isServerSide.value) refreshCounter.value++;
+    },
+    scrollToRow: () => {
+    },
+    getColumnOrder: () => columnProps.value.columnOrder ?? columns.value.map((c) => c.columnId),
+    setColumnOrder: (order) => {
+      columnProps.value.onColumnOrderChange?.(order);
+    }
+  }));
+  return {
+    dataGridProps,
+    pagination,
+    columnChooser,
+    layout,
+    filters: filtersResult,
+    api
+  };
+}
+function useRowSelection(params) {
+  const {
+    items,
+    getRowId,
+    rowSelection,
+    controlledSelectedRows,
+    onSelectionChange
+  } = params;
+  const internalSelectedRows = shallowRef(/* @__PURE__ */ new Set());
+  let lastClickedRow = -1;
+  const selectedRowIds = computed(() => {
+    const controlled = controlledSelectedRows.value;
+    if (controlled != null) {
+      return controlled instanceof Set ? controlled : new Set(controlled);
+    }
+    return internalSelectedRows.value;
+  });
+  const updateSelection = (newSelectedIds) => {
+    if (controlledSelectedRows.value !== void 0) {
+      if (!isReadonly(controlledSelectedRows)) {
+        controlledSelectedRows.value = newSelectedIds;
+      }
+    } else {
+      internalSelectedRows.value = newSelectedIds;
+    }
+    onSelectionChange?.({
+      selectedRowIds: Array.from(newSelectedIds),
+      selectedItems: items.value.filter((item) => newSelectedIds.has(getRowId(item)))
+    });
+  };
+  const handleRowCheckboxChange = (rowId, checked, rowIndex, shiftKey) => {
+    if (rowSelection.value === "single") {
+      updateSelection(checked ? /* @__PURE__ */ new Set([rowId]) : /* @__PURE__ */ new Set());
+      lastClickedRow = rowIndex;
+      return;
+    }
+    const currentItems = items.value;
+    let next;
+    if (shiftKey && lastClickedRow >= 0 && lastClickedRow !== rowIndex) {
+      next = applyRangeRowSelection(lastClickedRow, rowIndex, checked, currentItems, getRowId, selectedRowIds.value);
+    } else {
+      next = new Set(selectedRowIds.value);
+      if (checked) next.add(rowId);
+      else next.delete(rowId);
+    }
+    lastClickedRow = rowIndex;
+    updateSelection(next);
+  };
+  const handleSelectAll = (checked) => {
+    if (checked) {
+      updateSelection(new Set(items.value.map((item) => getRowId(item))));
+    } else {
+      updateSelection(/* @__PURE__ */ new Set());
+    }
+  };
+  const allSelected = computed(
+    () => computeRowSelectionState(selectedRowIds.value, items.value, getRowId).allSelected
+  );
+  const someSelected = computed(
+    () => computeRowSelectionState(selectedRowIds.value, items.value, getRowId).someSelected
+  );
+  return {
+    selectedRowIds,
+    updateSelection,
+    handleRowCheckboxChange,
+    handleSelectAll,
+    allSelected,
+    someSelected
+  };
+}
+function useCellEditing(params) {
+  const editingCell = shallowRef(null);
+  const pendingEditorValue = ref(void 0);
+  const setEditingCell = (cell) => {
+    if (cell && params?.scrollToRow && params?.getRowIndex) {
+      const rowIndex = params.getRowIndex(cell.rowId);
+      if (rowIndex >= 0) {
+        params.scrollToRow(rowIndex, "center");
+      }
+    }
+    editingCell.value = cell;
+  };
+  const setPendingEditorValue = (value) => {
+    pendingEditorValue.value = value;
+  };
+  return {
+    editingCell,
+    setEditingCell,
+    pendingEditorValue,
+    setPendingEditorValue
+  };
+}
+function useActiveCell(wrapperRef, editingCell) {
+  const activeCell = shallowRef(null);
+  let pendingRaf = 0;
+  const setActiveCell = (cell) => {
+    const prev = activeCell.value;
+    if (prev === cell) return;
+    if (prev && cell && prev.rowIndex === cell.rowIndex && prev.columnIndex === cell.columnIndex) return;
+    activeCell.value = cell;
+  };
+  watch(
+    [activeCell, () => editingCell?.value],
+    () => {
+      if (pendingRaf) {
+        cancelAnimationFrame(pendingRaf);
+        pendingRaf = 0;
+      }
+      if (activeCell.value == null || !wrapperRef?.value || editingCell?.value != null) return;
+      const { rowIndex, columnIndex } = activeCell.value;
+      pendingRaf = requestAnimationFrame(() => {
+        pendingRaf = 0;
+        const wrapper = wrapperRef.value;
+        if (!wrapper) return;
+        const current = activeCell.value;
+        if (!current || current.rowIndex !== rowIndex || current.columnIndex !== columnIndex) return;
+        const selector = `[data-row-index="${rowIndex}"][data-col-index="${columnIndex}"]`;
+        const cell = wrapper.querySelector(selector);
+        if (cell) {
+          const thead = wrapper.querySelector("thead");
+          const headerHeight = thead ? thead.getBoundingClientRect().height : 0;
+          const wrapperRect = wrapper.getBoundingClientRect();
+          const cellRect = cell.getBoundingClientRect();
+          const visibleTop = wrapperRect.top + headerHeight;
+          if (cellRect.top < visibleTop) {
+            wrapper.scrollTop -= visibleTop - cellRect.top;
+          } else if (cellRect.bottom > wrapperRect.bottom) {
+            wrapper.scrollTop += cellRect.bottom - wrapperRect.bottom;
+          }
+          if (cellRect.left < wrapperRect.left) {
+            wrapper.scrollLeft -= wrapperRect.left - cellRect.left;
+          } else if (cellRect.right > wrapperRect.right) {
+            wrapper.scrollLeft += cellRect.right - wrapperRect.right;
+          }
+          if (document.activeElement !== cell && typeof cell.focus === "function") {
+            cell.focus({ preventScroll: true });
+          }
+        }
+      });
+    },
+    { flush: "post" }
+  );
+  onUnmounted(() => {
+    if (pendingRaf) {
+      cancelAnimationFrame(pendingRaf);
+      pendingRaf = 0;
+    }
+  });
+  return { activeCell, setActiveCell };
+}
+function useLatestRef(source) {
+  let value = unref(source);
+  return customRef((track, trigger) => ({
+    get() {
+      if (isRef(source)) {
+        value = source.value;
+      }
+      return value;
+    },
+    set(newValue) {
+      value = newValue;
+      trigger();
+    }
+  }));
+}
+
+// src/composables/useCellSelection.ts
+var DRAG_ATTR = "data-drag-range";
+var DRAG_ANCHOR_ATTR = "data-drag-anchor";
+var AUTO_SCROLL_EDGE = 40;
+var AUTO_SCROLL_INTERVAL = 16;
+function useCellSelection(params) {
+  const paramsRef = useLatestRef(params);
+  const { wrapperRef, setActiveCell } = params;
+  const getColOffset = () => isRef(params.colOffset) ? params.colOffset.value : params.colOffset;
+  const selectionRange = shallowRef(null);
+  const isDragging = ref(false);
+  const isDraggingInternal = ref(false);
+  const isUnmounted = ref(false);
+  let dragMoved = false;
+  let dragStart = null;
+  let rafId = 0;
+  let liveDragRange = null;
+  let autoScrollInterval = null;
+  let lastMousePos = null;
+  const setSelectionRange = (next) => {
+    if (rangesEqual(selectionRange.value, next)) return;
+    selectionRange.value = next;
+  };
+  const handleCellMouseDown = (e, rowIndex, globalColIndex) => {
+    if (e.button !== 0) return;
+    const colOffset = getColOffset();
+    if (globalColIndex < colOffset) return;
+    e.preventDefault();
+    const dataColIndex = globalColIndex - colOffset;
+    const currentRange = selectionRange.value;
+    if (e.shiftKey && currentRange != null) {
+      setSelectionRange(
+        normalizeSelectionRange({
+          startRow: currentRange.startRow,
+          startCol: currentRange.startCol,
+          endRow: rowIndex,
+          endCol: dataColIndex
+        })
+      );
+      setActiveCell({ rowIndex, columnIndex: globalColIndex });
+    } else {
+      dragStart = { row: rowIndex, col: dataColIndex };
+      dragMoved = false;
+      const initial = {
+        startRow: rowIndex,
+        startCol: dataColIndex,
+        endRow: rowIndex,
+        endCol: dataColIndex
+      };
+      setSelectionRange(initial);
+      liveDragRange = initial;
+      setActiveCell({ rowIndex, columnIndex: globalColIndex });
+      isDraggingInternal.value = true;
+      setTimeout(() => applyDragAttrs(initial), 0);
+    }
+  };
+  const handleSelectAllCells = () => {
+    const { rowCount, visibleColCount } = paramsRef.value;
+    if (rowCount.value === 0 || visibleColCount.value === 0) return;
+    setSelectionRange({
+      startRow: 0,
+      startCol: 0,
+      endRow: rowCount.value - 1,
+      endCol: visibleColCount.value - 1
+    });
+    setActiveCell({ rowIndex: 0, columnIndex: getColOffset() });
+  };
+  const markedCells = /* @__PURE__ */ new Set();
+  let cellIndex = null;
+  const buildCellIndex = () => {
+    const wrapper = wrapperRef.value;
+    if (!wrapper) return;
+    cellIndex = /* @__PURE__ */ new Map();
+    const cells = wrapper.querySelectorAll("[data-row-index][data-col-index]");
+    for (let i = 0; i < cells.length; i++) {
+      const el = cells[i];
+      const r = el.getAttribute("data-row-index") ?? "";
+      const c = el.getAttribute("data-col-index") ?? "";
+      cellIndex.set(`${r},${c}`, el);
+    }
+  };
+  const styleCellInRange = (el, r, c, minR, maxR, minC, maxC, anchor) => {
+    if (!el.hasAttribute(DRAG_ATTR)) el.setAttribute(DRAG_ATTR, "");
+    const isAnchor = anchor && r === anchor.row && c === anchor.col;
+    if (isAnchor) {
+      if (!el.hasAttribute(DRAG_ANCHOR_ATTR)) el.setAttribute(DRAG_ANCHOR_ATTR, "");
+    } else {
+      if (el.hasAttribute(DRAG_ANCHOR_ATTR)) el.removeAttribute(DRAG_ANCHOR_ATTR);
+    }
+    const shadows = [];
+    if (r === minR) shadows.push("inset 0 2px 0 0 var(--ogrid-selection, #217346)");
+    if (r === maxR) shadows.push("inset 0 -2px 0 0 var(--ogrid-selection, #217346)");
+    if (c === minC) shadows.push("inset 2px 0 0 0 var(--ogrid-selection, #217346)");
+    if (c === maxC) shadows.push("inset -2px 0 0 0 var(--ogrid-selection, #217346)");
+    el.style.boxShadow = shadows.length > 0 ? shadows.join(", ") : "";
+    markedCells.add(el);
+  };
+  const unstyleCell = (el) => {
+    el.removeAttribute(DRAG_ATTR);
+    el.removeAttribute(DRAG_ANCHOR_ATTR);
+    el.style.boxShadow = "";
+  };
+  const applyDragAttrs = (range) => {
+    const wrapper = wrapperRef.value;
+    if (!wrapper) return;
+    const minR = Math.min(range.startRow, range.endRow);
+    const maxR = Math.max(range.startRow, range.endRow);
+    const minC = Math.min(range.startCol, range.endCol);
+    const maxC = Math.max(range.startCol, range.endCol);
+    const anchor = dragStart;
+    const colOff = getColOffset();
+    for (const el of markedCells) {
+      const r = parseInt(el.getAttribute("data-row-index") ?? "", 10);
+      const c = parseInt(el.getAttribute("data-col-index") ?? "", 10) - colOff;
+      const stillInRange = r >= minR && r <= maxR && c >= minC && c <= maxC;
+      if (!stillInRange) {
+        unstyleCell(el);
+        markedCells.delete(el);
+      }
+    }
+    if (!cellIndex) buildCellIndex();
+    for (let r = minR; r <= maxR; r++) {
+      for (let c = minC; c <= maxC; c++) {
+        const key = `${r},${c + colOff}`;
+        let el = cellIndex?.get(key);
+        if (el && !el.isConnected) {
+          buildCellIndex();
+          el = cellIndex?.get(key);
+        }
+        if (el) {
+          styleCellInRange(el, r, c, minR, maxR, minC, maxC, anchor);
+        }
+      }
+    }
+  };
+  const clearDragAttrs = () => {
+    for (const el of markedCells) {
+      unstyleCell(el);
+    }
+    markedCells.clear();
+    cellIndex = null;
+  };
+  const resolveRange = (cx, cy) => {
+    if (!dragStart) return null;
+    const target = document.elementFromPoint(cx, cy);
+    const cell = target?.closest?.("[data-row-index][data-col-index]");
+    if (!cell) return null;
+    const r = parseInt(cell.getAttribute("data-row-index") ?? "", 10);
+    const c = parseInt(cell.getAttribute("data-col-index") ?? "", 10);
+    const colOffset = getColOffset();
+    if (Number.isNaN(r) || Number.isNaN(c) || c < colOffset) return null;
+    const dataCol = c - colOffset;
+    return normalizeSelectionRange({
+      startRow: dragStart.row,
+      startCol: dragStart.col,
+      endRow: r,
+      endCol: dataCol
+    });
+  };
+  const stopAutoScroll = () => {
+    if (autoScrollInterval) {
+      clearInterval(autoScrollInterval);
+      autoScrollInterval = null;
+    }
+  };
+  const updateAutoScroll = () => {
+    const wrapper = wrapperRef.value;
+    if (!wrapper || !lastMousePos || !isDraggingInternal.value) {
+      stopAutoScroll();
+      return;
+    }
+    const rect = wrapper.getBoundingClientRect();
+    let dx = 0;
+    let dy = 0;
+    if (lastMousePos.cy < rect.top + AUTO_SCROLL_EDGE) {
+      dy = -computeAutoScrollSpeed(rect.top + AUTO_SCROLL_EDGE - lastMousePos.cy);
+    } else if (lastMousePos.cy > rect.bottom - AUTO_SCROLL_EDGE) {
+      dy = computeAutoScrollSpeed(lastMousePos.cy - (rect.bottom - AUTO_SCROLL_EDGE));
+    }
+    if (lastMousePos.cx < rect.left + AUTO_SCROLL_EDGE) {
+      dx = -computeAutoScrollSpeed(rect.left + AUTO_SCROLL_EDGE - lastMousePos.cx);
+    } else if (lastMousePos.cx > rect.right - AUTO_SCROLL_EDGE) {
+      dx = computeAutoScrollSpeed(lastMousePos.cx - (rect.right - AUTO_SCROLL_EDGE));
+    }
+    if (dx === 0 && dy === 0) {
+      stopAutoScroll();
+      return;
+    }
+    if (!autoScrollInterval) {
+      autoScrollInterval = setInterval(() => {
+        const w = wrapperRef.value;
+        const p = lastMousePos;
+        if (!w || !p || !isDraggingInternal.value) {
+          stopAutoScroll();
+          return;
+        }
+        const r = w.getBoundingClientRect();
+        let sdx = 0;
+        let sdy = 0;
+        if (p.cy < r.top + AUTO_SCROLL_EDGE) sdy = -computeAutoScrollSpeed(r.top + AUTO_SCROLL_EDGE - p.cy);
+        else if (p.cy > r.bottom - AUTO_SCROLL_EDGE) sdy = computeAutoScrollSpeed(p.cy - (r.bottom - AUTO_SCROLL_EDGE));
+        if (p.cx < r.left + AUTO_SCROLL_EDGE) sdx = -computeAutoScrollSpeed(r.left + AUTO_SCROLL_EDGE - p.cx);
+        else if (p.cx > r.right - AUTO_SCROLL_EDGE) sdx = computeAutoScrollSpeed(p.cx - (r.right - AUTO_SCROLL_EDGE));
+        if (sdx === 0 && sdy === 0) {
+          stopAutoScroll();
+          return;
+        }
+        w.scrollTop += sdy;
+        w.scrollLeft += sdx;
+        const newRange = resolveRange(p.cx, p.cy);
+        if (newRange) {
+          liveDragRange = newRange;
+          applyDragAttrs(newRange);
+        }
+      }, AUTO_SCROLL_INTERVAL);
+    }
+  };
+  const onMove = (e) => {
+    if (!isDraggingInternal.value || !dragStart) return;
+    if (!dragMoved) {
+      dragMoved = true;
+      isDragging.value = true;
+      buildCellIndex();
+    }
+    lastMousePos = { cx: e.clientX, cy: e.clientY };
+    updateAutoScroll();
+    if (rafId) cancelAnimationFrame(rafId);
+    rafId = requestAnimationFrame(() => {
+      rafId = 0;
+      if (!lastMousePos) return;
+      const newRange = resolveRange(lastMousePos.cx, lastMousePos.cy);
+      if (!newRange) return;
+      const prev = liveDragRange;
+      if (prev && prev.startRow === newRange.startRow && prev.startCol === newRange.startCol && prev.endRow === newRange.endRow && prev.endCol === newRange.endCol) {
+        return;
+      }
+      liveDragRange = newRange;
+      applyDragAttrs(newRange);
+    });
+  };
+  const onUp = () => {
+    if (!isDraggingInternal.value) return;
+    stopAutoScroll();
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+      rafId = 0;
+    }
+    isDraggingInternal.value = false;
+    const wasDrag = dragMoved;
+    if (wasDrag) {
+      if (lastMousePos) {
+        const flushed = resolveRange(lastMousePos.cx, lastMousePos.cy);
+        if (flushed) liveDragRange = flushed;
+      }
+      const finalRange = liveDragRange;
+      if (finalRange) {
+        setSelectionRange(finalRange);
+        setActiveCell({
+          rowIndex: finalRange.endRow,
+          columnIndex: finalRange.endCol + getColOffset()
+        });
+      }
+    }
+    clearDragAttrs();
+    liveDragRange = null;
+    lastMousePos = null;
+    dragStart = null;
+    if (wasDrag) isDragging.value = false;
+  };
+  const onMoveSafe = (e) => {
+    if (isUnmounted.value) return;
+    onMove(e);
+  };
+  const onUpSafe = () => {
+    if (isUnmounted.value) return;
+    onUp();
+  };
+  onMounted(() => {
+    window.addEventListener("mousemove", onMoveSafe, true);
+    window.addEventListener("mouseup", onUpSafe, true);
+  });
+  onUnmounted(() => {
+    isUnmounted.value = true;
+    window.removeEventListener("mousemove", onMoveSafe, true);
+    window.removeEventListener("mouseup", onUpSafe, true);
+    if (rafId) cancelAnimationFrame(rafId);
+    stopAutoScroll();
+  });
+  return {
+    selectionRange,
+    setSelectionRange,
+    handleCellMouseDown,
+    handleSelectAllCells,
+    isDragging
+  };
+}
+function useContextMenu() {
+  const contextMenuPosition = shallowRef(null);
+  const setContextMenuPosition = (pos) => {
+    contextMenuPosition.value = pos;
+  };
+  const handleCellContextMenu = (e) => {
+    e.preventDefault?.();
+    contextMenuPosition.value = { x: e.clientX, y: e.clientY };
+  };
+  const closeContextMenu = () => {
+    contextMenuPosition.value = null;
+  };
+  return {
+    contextMenuPosition,
+    setContextMenuPosition,
+    handleCellContextMenu,
+    closeContextMenu
+  };
+}
+function useClipboard(params) {
+  const {
+    items,
+    visibleCols,
+    selectionRange,
+    activeCell,
+    editable,
+    onCellValueChanged,
+    beginBatch,
+    endBatch
+  } = params;
+  const getColOffset = () => isRef(params.colOffset) ? params.colOffset.value : params.colOffset;
+  const cutRange = shallowRef(null);
+  const copyRange = shallowRef(null);
+  const internalClipboardRef = ref(null);
+  const getEffectiveRange = () => {
+    const sel = selectionRange.value;
+    const ac = activeCell.value;
+    const colOffset = getColOffset();
+    return sel ?? (ac != null ? { startRow: ac.rowIndex, startCol: ac.columnIndex - colOffset, endRow: ac.rowIndex, endCol: ac.columnIndex - colOffset } : null);
+  };
+  const handleCopy = () => {
+    const range = getEffectiveRange();
+    if (range == null) return;
+    const norm = normalizeSelectionRange(range);
+    const tsv = formatSelectionAsTsv(items.value, visibleCols.value, norm);
+    internalClipboardRef.value = tsv;
+    copyRange.value = norm;
+    void navigator.clipboard.writeText(tsv).catch((err) => {
+      if (typeof console !== "undefined") console.warn("[OGrid] Clipboard write failed:", err);
+    });
+  };
+  const handleCut = () => {
+    if (editable.value === false) return;
+    const range = getEffectiveRange();
+    if (range == null || onCellValueChanged.value == null) return;
+    const norm = normalizeSelectionRange(range);
+    cutRange.value = norm;
+    copyRange.value = null;
+    handleCopy();
+    copyRange.value = null;
+  };
+  const handlePaste = async () => {
+    if (editable.value === false) return;
+    const callback = onCellValueChanged.value;
+    if (callback == null) return;
+    let text;
+    try {
+      text = await navigator.clipboard.readText();
+    } catch {
+      text = "";
+    }
+    if (!text.trim() && internalClipboardRef.value != null) {
+      text = internalClipboardRef.value;
+    }
+    if (!text.trim()) return;
+    const norm = getEffectiveRange();
+    const anchorRow = norm ? norm.startRow : 0;
+    const anchorCol = norm ? norm.startCol : 0;
+    const currentItems = items.value;
+    const currentCols = visibleCols.value;
+    const parsedRows = parseTsvClipboard(text);
+    beginBatch?.();
+    const pasteEvents = applyPastedValues(parsedRows, anchorRow, anchorCol, currentItems, currentCols);
+    for (const evt of pasteEvents) callback(evt);
+    if (cutRange.value) {
+      const cutEvents = applyCutClear(cutRange.value, currentItems, currentCols);
+      for (const evt of cutEvents) callback(evt);
+      cutRange.value = null;
+    }
+    endBatch?.();
+    copyRange.value = null;
+  };
+  const clearClipboardRanges = () => {
+    copyRange.value = null;
+    cutRange.value = null;
+  };
+  return { handleCopy, handleCut, handlePaste, cutRange, copyRange, clearClipboardRanges };
+}
+function useKeyboardNavigation(params) {
+  const paramsRef = useLatestRef(params);
+  const handleGridKeyDown = (e) => {
+    const { data, state, handlers, features } = paramsRef.value;
+    const items = data.items.value;
+    const visibleCols = data.visibleCols.value;
+    const { getRowId } = data;
+    const colOffset = isRef(data.colOffset) ? data.colOffset.value : data.colOffset;
+    const hasCheckboxCol = data.hasCheckboxCol.value;
+    const visibleColumnCount = data.visibleColumnCount.value;
+    const activeCell = state.activeCell.value;
+    const selectionRange = state.selectionRange.value;
+    const editingCell = state.editingCell.value;
+    const selectedRowIds = state.selectedRowIds.value;
+    const { setActiveCell, setSelectionRange, setEditingCell, handleRowCheckboxChange, handleCopy, handleCut, handlePaste, setContextMenu, onUndo, onRedo, clearClipboardRanges } = handlers;
+    const editable = features.editable.value;
+    const onCellValueChanged = features.onCellValueChanged.value;
+    const rowSelection = features.rowSelection.value;
+    const wrapperRef = features.wrapperRef;
+    const scrollToRow = features.scrollToRow;
+    const maxRowIndex = items.length - 1;
+    const maxColIndex = visibleColumnCount - 1 + colOffset;
+    if (items.length === 0) return;
+    if (activeCell === null) {
+      if (["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Tab", "Enter", "Home", "End"].includes(e.key)) {
+        setActiveCell({ rowIndex: 0, columnIndex: colOffset });
+        e.preventDefault();
+      }
+      return;
+    }
+    const { rowIndex, columnIndex } = activeCell;
+    const dataColIndex = columnIndex - colOffset;
+    const shift = e.shiftKey;
+    const isEmptyAt = (r, c) => {
+      if (r < 0 || r >= items.length || c < 0 || c >= visibleCols.length) return true;
+      const v = getCellValue(items[r], visibleCols[c]);
+      return v == null || v === "";
+    };
+    switch (e.key) {
+      case "c":
+        if (e.ctrlKey || e.metaKey) {
+          if (editingCell != null) break;
+          e.preventDefault();
+          handleCopy();
+        }
+        break;
+      case "x":
+        if (e.ctrlKey || e.metaKey) {
+          if (editingCell != null) break;
+          e.preventDefault();
+          handleCut();
+        }
+        break;
+      case "v":
+        if (e.ctrlKey || e.metaKey) {
+          if (editingCell != null) break;
+          e.preventDefault();
+          void handlePaste();
+        }
+        break;
+      case "ArrowDown":
+      case "ArrowUp":
+      case "ArrowRight":
+      case "ArrowLeft": {
+        e.preventDefault();
+        const { newRowIndex, newColumnIndex, newRange } = computeArrowNavigation({
+          direction: e.key,
+          rowIndex,
+          columnIndex,
+          dataColIndex,
+          colOffset,
+          maxRowIndex,
+          maxColIndex,
+          visibleColCount: visibleCols.length,
+          isCtrl: e.ctrlKey || e.metaKey,
+          isShift: shift,
+          selectionRange,
+          isEmptyAt
+        });
+        setSelectionRange(newRange);
+        setActiveCell({ rowIndex: newRowIndex, columnIndex: newColumnIndex });
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          scrollToRow?.(newRowIndex, "center");
+        }
+        break;
+      }
+      case "Tab": {
+        e.preventDefault();
+        const { rowIndex: newRowTab, columnIndex: newColTab } = computeTabNavigation(
+          rowIndex,
+          columnIndex,
+          maxRowIndex,
+          maxColIndex,
+          colOffset,
+          e.shiftKey
+        );
+        const newDataColTab = newColTab - colOffset;
+        setSelectionRange({ startRow: newRowTab, startCol: newDataColTab, endRow: newRowTab, endCol: newDataColTab });
+        setActiveCell({ rowIndex: newRowTab, columnIndex: newColTab });
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        const newRowHome = e.ctrlKey ? 0 : rowIndex;
+        setSelectionRange({ startRow: newRowHome, startCol: 0, endRow: newRowHome, endCol: 0 });
+        setActiveCell({ rowIndex: newRowHome, columnIndex: colOffset });
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        const newRowEnd = e.ctrlKey ? maxRowIndex : rowIndex;
+        setSelectionRange({ startRow: newRowEnd, startCol: visibleColumnCount - 1, endRow: newRowEnd, endCol: visibleColumnCount - 1 });
+        setActiveCell({ rowIndex: newRowEnd, columnIndex: maxColIndex });
+        break;
+      }
+      case "Enter":
+      case "F2": {
+        e.preventDefault();
+        if (dataColIndex >= 0 && dataColIndex < visibleCols.length) {
+          const col = visibleCols[dataColIndex];
+          const item = items[rowIndex];
+          if (item && col) {
+            const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
+            if (editable !== false && colEditable && onCellValueChanged != null) {
+              setEditingCell({ rowId: getRowId(item), columnId: col.columnId });
+            }
+          }
+        }
+        break;
+      }
+      case "Escape":
+        e.preventDefault();
+        if (editingCell != null) {
+          setEditingCell(null);
+        } else {
+          clearClipboardRanges?.();
+          setActiveCell(null);
+          setSelectionRange(null);
+        }
+        break;
+      case " ":
+        if (rowSelection !== "none" && columnIndex === 0 && hasCheckboxCol) {
+          e.preventDefault();
+          const item = items[rowIndex];
+          if (item) {
+            const id = getRowId(item);
+            const isSelected = selectedRowIds.has(id);
+            handleRowCheckboxChange(id, !isSelected, rowIndex, e.shiftKey);
+          }
+        }
+        break;
+      case "z":
+        if (e.ctrlKey || e.metaKey) {
+          if (editingCell == null) {
+            if (e.shiftKey && onRedo) {
+              e.preventDefault();
+              onRedo();
+            } else if (!e.shiftKey && onUndo) {
+              e.preventDefault();
+              onUndo();
+            }
+          }
+        }
+        break;
+      case "y":
+        if (e.ctrlKey || e.metaKey) {
+          if (editingCell == null && onRedo) {
+            e.preventDefault();
+            onRedo();
+          }
+        }
+        break;
+      case "a":
+        if (e.ctrlKey || e.metaKey) {
+          if (editingCell != null) break;
+          e.preventDefault();
+          if (items.length > 0 && visibleColumnCount > 0) {
+            setSelectionRange({ startRow: 0, startCol: 0, endRow: items.length - 1, endCol: visibleColumnCount - 1 });
+            setActiveCell({ rowIndex: 0, columnIndex: colOffset });
+          }
+        }
+        break;
+      case "Delete":
+      case "Backspace": {
+        if (editingCell != null) break;
+        if (editable === false) break;
+        if (onCellValueChanged == null) break;
+        const range = selectionRange ?? (activeCell != null ? { startRow: activeCell.rowIndex, startCol: activeCell.columnIndex - colOffset, endRow: activeCell.rowIndex, endCol: activeCell.columnIndex - colOffset } : null);
+        if (range == null) break;
+        e.preventDefault();
+        const deleteEvents = applyCellDeletion(range, items, visibleCols);
+        for (const evt of deleteEvents) onCellValueChanged(evt);
+        break;
+      }
+      case "F10":
+        if (e.shiftKey) {
+          e.preventDefault();
+          if (activeCell != null && wrapperRef.value) {
+            const sel = `[data-row-index="${activeCell.rowIndex}"][data-col-index="${activeCell.columnIndex}"]`;
+            const cell = wrapperRef.value.querySelector(sel);
+            if (cell) {
+              const rect = cell.getBoundingClientRect();
+              setContextMenu({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
+            } else {
+              setContextMenu({ x: 100, y: 100 });
+            }
+          } else {
+            setContextMenu({ x: 100, y: 100 });
+          }
+        }
+        break;
+    }
+  };
+  return { handleGridKeyDown };
+}
+var DRAG_ATTR2 = "data-drag-range";
+function useFillHandle(params) {
+  const {
+    items,
+    visibleCols,
+    editable,
+    onCellValueChanged,
+    selectionRange,
+    setSelectionRange,
+    setActiveCell,
+    wrapperRef,
+    beginBatch,
+    endBatch,
+    visibleRange
+  } = params;
+  const getColOffset = () => isRef(params.colOffset) ? params.colOffset.value : params.colOffset;
+  const fillDrag = shallowRef(null);
+  let fillDragEnd = { endRow: 0, endCol: 0 };
+  let rafId = 0;
+  let liveFillRange = null;
+  let moveListener = null;
+  let upListener = null;
+  const setFillDrag = (value) => {
+    fillDrag.value = value;
+  };
+  const cleanup = () => {
+    if (moveListener) {
+      window.removeEventListener("mousemove", moveListener, true);
+      moveListener = null;
+    }
+    if (upListener) {
+      window.removeEventListener("mouseup", upListener, true);
+      upListener = null;
+    }
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+      rafId = 0;
+    }
+  };
+  watch(fillDrag, (drag, _oldDrag, onCleanup) => {
+    if (!drag || editable.value === false || !onCellValueChanged.value || !wrapperRef.value) {
+      cleanup();
+      return;
+    }
+    fillDragEnd = { endRow: drag.startRow, endCol: drag.startCol };
+    liveFillRange = null;
+    const markedCells = /* @__PURE__ */ new Set();
+    let fillCellIndex = null;
+    const buildFillCellIndex = () => {
+      const wrapper = wrapperRef.value;
+      if (!wrapper) return;
+      fillCellIndex = /* @__PURE__ */ new Map();
+      const cells = wrapper.querySelectorAll("[data-row-index][data-col-index]");
+      for (let i = 0; i < cells.length; i++) {
+        const el = cells[i];
+        const r = el.getAttribute("data-row-index") ?? "";
+        const c = el.getAttribute("data-col-index") ?? "";
+        fillCellIndex.set(`${r},${c}`, el);
+      }
+    };
+    buildFillCellIndex();
+    const applyDragAttrs = (range) => {
+      const wrapper = wrapperRef.value;
+      if (!wrapper) return;
+      const minR = Math.min(range.startRow, range.endRow);
+      const maxR = Math.max(range.startRow, range.endRow);
+      const minC = Math.min(range.startCol, range.endCol);
+      const maxC = Math.max(range.startCol, range.endCol);
+      const colOff = getColOffset();
+      for (const el of markedCells) {
+        const r = parseInt(el.getAttribute("data-row-index") ?? "", 10);
+        const c = parseInt(el.getAttribute("data-col-index") ?? "", 10) - colOff;
+        if (!(r >= minR && r <= maxR && c >= minC && c <= maxC)) {
+          el.removeAttribute(DRAG_ATTR2);
+          markedCells.delete(el);
+        }
+      }
+      for (let r = minR; r <= maxR; r++) {
+        for (let c = minC; c <= maxC; c++) {
+          const key = `${r},${c + colOff}`;
+          let el = fillCellIndex?.get(key);
+          if (el && !el.isConnected) {
+            buildFillCellIndex();
+            el = fillCellIndex?.get(key);
+          }
+          if (el) {
+            if (!el.hasAttribute(DRAG_ATTR2)) el.setAttribute(DRAG_ATTR2, "");
+            markedCells.add(el);
+          }
+        }
+      }
+    };
+    const clearDragAttrs = () => {
+      for (const el of markedCells) {
+        el.removeAttribute(DRAG_ATTR2);
+      }
+      markedCells.clear();
+      fillCellIndex = null;
+    };
+    let lastFillMousePos = null;
+    const resolveRange = (cx, cy) => {
+      const target = document.elementFromPoint(cx, cy);
+      const cell = target?.closest?.("[data-row-index][data-col-index]");
+      if (!cell || !wrapperRef.value?.contains(cell)) return null;
+      const r = parseInt(cell.getAttribute("data-row-index") ?? "", 10);
+      const c = parseInt(cell.getAttribute("data-col-index") ?? "", 10);
+      const colOffset = getColOffset();
+      if (Number.isNaN(r) || Number.isNaN(c) || c < colOffset) return null;
+      const dataCol = c - colOffset;
+      return normalizeSelectionRange({
+        startRow: drag.startRow,
+        startCol: drag.startCol,
+        endRow: r,
+        endCol: dataCol
+      });
+    };
+    moveListener = (e) => {
+      lastFillMousePos = { cx: e.clientX, cy: e.clientY };
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        rafId = 0;
+        if (!lastFillMousePos) return;
+        const newRange = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
+        if (!newRange) return;
+        const prev = liveFillRange;
+        if (prev && prev.startRow === newRange.startRow && prev.startCol === newRange.startCol && prev.endRow === newRange.endRow && prev.endCol === newRange.endCol) return;
+        liveFillRange = newRange;
+        fillDragEnd = { endRow: newRange.endRow, endCol: newRange.endCol };
+        applyDragAttrs(newRange);
+      });
+    };
+    upListener = () => {
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+        rafId = 0;
+      }
+      if (lastFillMousePos) {
+        const flushed = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
+        if (flushed) {
+          liveFillRange = flushed;
+          fillDragEnd = { endRow: flushed.endRow, endCol: flushed.endCol };
+        }
+      }
+      clearDragAttrs();
+      const end = fillDragEnd;
+      const norm = normalizeSelectionRange({
+        startRow: drag.startRow,
+        startCol: drag.startCol,
+        endRow: end.endRow,
+        endCol: end.endCol
+      });
+      const vr = visibleRange?.value;
+      if (vr) {
+        norm.startRow = Math.max(norm.startRow, vr.startIndex);
+        norm.endRow = Math.min(norm.endRow, vr.endIndex);
+      }
+      setSelectionRange(norm);
+      setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + getColOffset() });
+      const currentItems = items.value;
+      const currentCols = visibleCols.value;
+      const callback = onCellValueChanged.value;
+      if (callback) {
+        const fillEvents = applyFillValues(norm, drag.startRow, drag.startCol, currentItems, currentCols);
+        if (fillEvents.length > 0) {
+          beginBatch?.();
+          for (const evt of fillEvents) callback(evt);
+          endBatch?.();
+        }
+      }
+      fillDrag.value = null;
+      liveFillRange = null;
+      cleanup();
+    };
+    window.addEventListener("mousemove", moveListener, true);
+    window.addEventListener("mouseup", upListener, true);
+    onCleanup(() => {
+      cleanup();
+    });
+  });
+  onUnmounted(() => cleanup());
+  const handleFillHandleMouseDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const range = selectionRange.value;
+    if (!range) return;
+    fillDrag.value = { startRow: range.startRow, startCol: range.startCol };
+  };
+  return { fillDrag, setFillDrag, handleFillHandleMouseDown };
+}
+function useUndoRedo(params) {
+  const { onCellValueChanged, maxUndoDepth = 100 } = params;
+  const stack = new UndoRedoStack(maxUndoDepth);
+  const canUndo = ref(false);
+  const canRedo = ref(false);
+  const updateFlags = () => {
+    canUndo.value = stack.canUndo;
+    canRedo.value = stack.canRedo;
+  };
+  const wrapped = onCellValueChanged ? (event) => {
+    stack.record(event);
+    if (!stack.isBatching) {
+      updateFlags();
+    }
+    onCellValueChanged(event);
+  } : void 0;
+  const beginBatch = () => {
+    stack.beginBatch();
+  };
+  const endBatch = () => {
+    stack.endBatch();
+    updateFlags();
+  };
+  const undo = () => {
+    if (!onCellValueChanged) return;
+    const lastBatch = stack.undo();
+    if (!lastBatch) return;
+    updateFlags();
+    for (let i = lastBatch.length - 1; i >= 0; i--) {
+      const ev = lastBatch[i];
+      onCellValueChanged({ ...ev, oldValue: ev.newValue, newValue: ev.oldValue });
+    }
+  };
+  const redo = () => {
+    if (!onCellValueChanged) return;
+    const nextBatch = stack.redo();
+    if (!nextBatch) return;
+    updateFlags();
+    for (const ev of nextBatch) {
+      onCellValueChanged(ev);
+    }
+  };
+  return {
+    onCellValueChanged: wrapped,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    beginBatch,
+    endBatch,
+    maxUndoDepth
+  };
+}
+function useTableLayout(params) {
+  const {
+    wrapperRef,
+    visibleCols,
+    flatColumns,
+    hasCheckboxCol,
+    initialColumnWidths,
+    onColumnResized
+  } = params;
+  const containerWidth = ref(0);
+  let resizeObserver;
+  const measure = () => {
+    const el = wrapperRef.value;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const cs = window.getComputedStyle(el);
+    const borderX = (parseFloat(cs.borderLeftWidth || "0") || 0) + (parseFloat(cs.borderRightWidth || "0") || 0);
+    containerWidth.value = Math.max(0, rect.width - borderX);
+  };
+  onMounted(() => {
+    const el = wrapperRef.value;
+    if (el) {
+      if (typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(measure);
+        resizeObserver.observe(el);
+      }
+      measure();
+    }
+  });
+  onUnmounted(() => {
+    resizeObserver?.disconnect();
+  });
+  const columnSizingOverrides = ref((() => {
+    if (!initialColumnWidths) return {};
+    const result = {};
+    for (const [id, width] of Object.entries(initialColumnWidths)) {
+      result[id] = { widthPx: width };
+    }
+    return result;
+  })());
+  const setColumnSizingOverrides = (value) => {
+    columnSizingOverrides.value = value;
+  };
+  const minTableWidth = computed(() => {
+    const checkboxW = hasCheckboxCol.value ? CHECKBOX_COLUMN_WIDTH : 0;
+    return visibleCols.value.reduce(
+      (sum, c) => sum + (c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH) + CELL_PADDING,
+      checkboxW
+    );
+  });
+  watch(flatColumns, (cols) => {
+    const colIds = new Set(cols.map((c) => c.columnId));
+    const prev = columnSizingOverrides.value;
+    const keys = Object.keys(prev);
+    const kept = keys.filter((id) => colIds.has(id));
+    if (kept.length < keys.length) {
+      const next = {};
+      for (const id of kept) next[id] = prev[id];
+      columnSizingOverrides.value = next;
+    }
+  });
+  const desiredTableWidth = computed(() => {
+    const checkboxW = hasCheckboxCol.value ? CHECKBOX_COLUMN_WIDTH : 0;
+    return visibleCols.value.reduce((sum, c) => {
+      const override = columnSizingOverrides.value[c.columnId];
+      const w = override ? override.widthPx : c.idealWidth ?? c.defaultWidth ?? c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+      return sum + Math.max(c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, w) + CELL_PADDING;
+    }, checkboxW);
+  });
+  return {
+    containerWidth,
+    minTableWidth,
+    desiredTableWidth,
+    columnSizingOverrides,
+    setColumnSizingOverrides,
+    onColumnResized
+  };
+}
+function useColumnPinning(params) {
+  const { columns, pinnedColumns: controlledPinnedColumns, onColumnPinned } = params;
+  const initialPinnedColumns = {};
+  for (const col of columns.value) {
+    if (col.pinned) {
+      initialPinnedColumns[col.columnId] = col.pinned;
+    }
+  }
+  const internalPinnedColumns = ref(initialPinnedColumns);
+  const pinnedColumns = computed(() => controlledPinnedColumns?.value ?? internalPinnedColumns.value);
+  const pinColumn = (columnId, side) => {
+    const next = { ...pinnedColumns.value, [columnId]: side };
+    internalPinnedColumns.value = next;
+    onColumnPinned?.(columnId, side);
+  };
+  const unpinColumn = (columnId) => {
+    const { [columnId]: _removed, ...next } = pinnedColumns.value;
+    internalPinnedColumns.value = next;
+    onColumnPinned?.(columnId, null);
+  };
+  const isPinned = (columnId) => {
+    return pinnedColumns.value[columnId];
+  };
+  const computeLeftOffsets = (visibleCols, columnWidths, defaultWidth, hasCheckboxColumn, checkboxColumnWidth) => {
+    const offsets = {};
+    let left = hasCheckboxColumn ? checkboxColumnWidth : 0;
+    for (const col of visibleCols) {
+      if (pinnedColumns.value[col.columnId] === "left") {
+        offsets[col.columnId] = left;
+        left += columnWidths[col.columnId] ?? defaultWidth;
+      }
+    }
+    return offsets;
+  };
+  const computeRightOffsets = (visibleCols, columnWidths, defaultWidth) => {
+    const offsets = {};
+    let right = 0;
+    for (let i = visibleCols.length - 1; i >= 0; i--) {
+      const col = visibleCols[i];
+      if (pinnedColumns.value[col.columnId] === "right") {
+        offsets[col.columnId] = right;
+        right += columnWidths[col.columnId] ?? defaultWidth;
+      }
+    }
+    return offsets;
+  };
+  return {
+    pinnedColumns,
+    pinColumn,
+    unpinColumn,
+    isPinned,
+    computeLeftOffsets,
+    computeRightOffsets
+  };
+}
+function useColumnHeaderMenuState(params) {
+  const {
+    columns,
+    pinnedColumns,
+    onPinColumn,
+    onUnpinColumn,
+    onSort,
+    onColumnResized,
+    onAutosizeColumn,
+    sortBy,
+    sortDirection
+  } = params;
+  const isOpen = ref(false);
+  const openForColumn = ref(null);
+  const anchorElement = ref(null);
+  const open = (columnId, anchorEl) => {
+    openForColumn.value = columnId;
+    anchorElement.value = anchorEl;
+    isOpen.value = true;
+  };
+  const close = () => {
+    isOpen.value = false;
+    openForColumn.value = null;
+    anchorElement.value = null;
+  };
+  const currentColumn = computed(
+    () => openForColumn.value ? columns.value.find((c) => c.columnId === openForColumn.value) : void 0
+  );
+  const currentPinState = computed(
+    () => openForColumn.value ? pinnedColumns.value[openForColumn.value] : void 0
+  );
+  const canPinLeft = computed(() => currentPinState.value !== "left");
+  const canPinRight = computed(() => currentPinState.value !== "right");
+  const canUnpin = computed(() => !!currentPinState.value);
+  const currentSort = computed(() => {
+    if (!openForColumn.value || !sortBy?.value || sortBy.value !== openForColumn.value) {
+      return null;
+    }
+    return sortDirection?.value ?? null;
+  });
+  const isSortable = computed(() => {
+    const col = currentColumn.value;
+    return col?.sortable !== false;
+  });
+  const isResizable = ref(true);
+  const handlePinLeft = () => {
+    if (openForColumn.value && canPinLeft.value) {
+      onPinColumn(openForColumn.value, "left");
+      close();
+    }
+  };
+  const handlePinRight = () => {
+    if (openForColumn.value && canPinRight.value) {
+      onPinColumn(openForColumn.value, "right");
+      close();
+    }
+  };
+  const handleUnpin = () => {
+    if (openForColumn.value && canUnpin.value) {
+      onUnpinColumn(openForColumn.value);
+      close();
+    }
+  };
+  const handleSortAsc = () => {
+    if (openForColumn.value && onSort) {
+      onSort(openForColumn.value, "asc");
+      close();
+    }
+  };
+  const handleSortDesc = () => {
+    if (openForColumn.value && onSort) {
+      onSort(openForColumn.value, "desc");
+      close();
+    }
+  };
+  const handleClearSort = () => {
+    if (openForColumn.value && onSort) {
+      onSort(openForColumn.value, null);
+      close();
+    }
+  };
+  const handleAutosizeThis = () => {
+    const resizer = onAutosizeColumn ?? onColumnResized;
+    if (!openForColumn.value || !resizer || !isResizable.value) return;
+    const col = currentColumn.value;
+    resizer(openForColumn.value, measureColumnContentWidth(openForColumn.value, col?.minWidth));
+    close();
+  };
+  const handleAutosizeAll = () => {
+    const resizer = onAutosizeColumn ?? onColumnResized;
+    if (!resizer) return;
+    columns.value.forEach((col) => {
+      resizer(col.columnId, measureColumnContentWidth(col.columnId, col.minWidth));
+    });
+    close();
+  };
+  return {
+    isOpen,
+    openForColumn,
+    anchorElement,
+    open,
+    close,
+    handlePinLeft,
+    handlePinRight,
+    handleUnpin,
+    handleSortAsc,
+    handleSortDesc,
+    handleClearSort,
+    handleAutosizeThis,
+    handleAutosizeAll,
+    canPinLeft,
+    canPinRight,
+    canUnpin,
+    currentSort,
+    isSortable,
+    isResizable
+  };
+}
+
+// src/composables/useDataGridState.ts
+var NOOP = () => {
+};
+var NOOP_ASYNC = async () => {
+};
+var NOOP_MOUSE = (_e, _r, _c) => {
+};
+var NOOP_KEY = (_e) => {
+};
+var NOOP_CTX = (_e) => {
+};
+function useDataGridState(params) {
+  const { props, wrapperRef } = params;
+  const items = computed(() => props.value.items);
+  const getRowId = props.value.getRowId;
+  const rowSelectionProp = computed(() => props.value.rowSelection ?? "none");
+  const controlledSelectedRows = computed(() => props.value.selectedRows);
+  const editableProp = computed(() => props.value.editable);
+  const cellSelection = computed(() => props.value.cellSelection !== false);
+  const pinnedColumnsProp = computed(() => props.value.pinnedColumns);
+  const undoRedo = useUndoRedo({ onCellValueChanged: props.value.onCellValueChanged });
+  const onCellValueChanged = computed(() => undoRedo.onCellValueChanged);
+  const flatColumnsRaw = computed(() => flattenColumns(props.value.columns));
+  const flatColumns = computed(() => {
+    const pinned = pinnedColumnsProp.value;
+    if (!pinned || Object.keys(pinned).length === 0) return flatColumnsRaw.value;
+    return flatColumnsRaw.value.map((col) => {
+      const override = pinned[col.columnId];
+      if (override && col.pinned !== override) return { ...col, pinned: override };
+      return col;
+    });
+  });
+  const visibleCols = computed(() => {
+    const vis = props.value.visibleColumns;
+    const order = props.value.columnOrder;
+    const filtered = vis ? flatColumns.value.filter((c) => vis.has(c.columnId)) : flatColumns.value;
+    if (!order?.length) return filtered;
+    const orderMap = /* @__PURE__ */ new Map();
+    for (let i = 0; i < order.length; i++) {
+      orderMap.set(order[i], i);
+    }
+    return [...filtered].sort((a, b) => {
+      const ia = orderMap.get(a.columnId) ?? -1;
+      const ib = orderMap.get(b.columnId) ?? -1;
+      if (ia === -1 && ib === -1) return 0;
+      if (ia === -1) return 1;
+      if (ib === -1) return -1;
+      return ia - ib;
+    });
+  });
+  const visibleColumnCount = computed(() => visibleCols.value.length);
+  const hasCheckboxCol = computed(() => rowSelectionProp.value === "multiple");
+  const hasRowNumbersCol = computed(() => !!props.value.showRowNumbers);
+  const specialColsCount = computed(() => (hasCheckboxCol.value ? 1 : 0) + (hasRowNumbersCol.value ? 1 : 0));
+  const totalColCount = computed(() => visibleColumnCount.value + specialColsCount.value);
+  const colOffset = specialColsCount;
+  const rowIndexByRowId = shallowRef(/* @__PURE__ */ new Map());
+  watch(items, (newItems) => {
+    const m = rowIndexByRowId.value;
+    m.clear();
+    newItems.forEach((item, idx) => m.set(getRowId(item), idx));
+    triggerRef(rowIndexByRowId);
+  }, { immediate: true });
+  const rowSelectionResult = useRowSelection({
+    items,
+    getRowId,
+    rowSelection: rowSelectionProp,
+    controlledSelectedRows,
+    onSelectionChange: props.value.onSelectionChange
+  });
+  const { editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue } = useCellEditing();
+  const { activeCell, setActiveCell } = useActiveCell(wrapperRef, editingCell);
+  const rowCount = computed(() => items.value.length);
+  const visColCount = computed(() => visibleCols.value.length);
+  const {
+    selectionRange,
+    setSelectionRange,
+    handleCellMouseDown: handleCellMouseDownBase,
+    handleSelectAllCells,
+    isDragging
+  } = useCellSelection({
+    colOffset,
+    rowCount,
+    visibleColCount: visColCount,
+    setActiveCell,
+    wrapperRef
+  });
+  const { contextMenuPosition, setContextMenuPosition, handleCellContextMenu, closeContextMenu } = useContextMenu();
+  const { handleCopy, handleCut, handlePaste, cutRange, copyRange, clearClipboardRanges } = useClipboard({
+    items,
+    visibleCols,
+    colOffset,
+    selectionRange,
+    activeCell,
+    editable: editableProp,
+    onCellValueChanged,
+    beginBatch: undoRedo.beginBatch,
+    endBatch: undoRedo.endBatch
+  });
+  const handleCellMouseDown = (e, rowIndex, globalColIndex) => {
+    if (e.button !== 0) return;
+    wrapperRef.value?.focus({ preventScroll: true });
+    clearClipboardRanges();
+    handleCellMouseDownBase(e, rowIndex, globalColIndex);
+  };
+  const { handleGridKeyDown } = useKeyboardNavigation({
+    data: { items, visibleCols, colOffset, hasCheckboxCol, visibleColumnCount, getRowId },
+    state: { activeCell, selectionRange, editingCell, selectedRowIds: rowSelectionResult.selectedRowIds },
+    handlers: {
+      setActiveCell,
+      setSelectionRange,
+      setEditingCell,
+      handleRowCheckboxChange: rowSelectionResult.handleRowCheckboxChange,
+      handleCopy,
+      handleCut,
+      handlePaste,
+      setContextMenu: setContextMenuPosition,
+      onUndo: undoRedo.undo,
+      onRedo: undoRedo.redo,
+      clearClipboardRanges
+    },
+    features: {
+      editable: editableProp,
+      onCellValueChanged,
+      rowSelection: rowSelectionProp,
+      wrapperRef
+    }
+  });
+  const { handleFillHandleMouseDown } = useFillHandle({
+    items,
+    visibleCols,
+    editable: editableProp,
+    onCellValueChanged,
+    selectionRange,
+    setSelectionRange,
+    setActiveCell,
+    colOffset,
+    wrapperRef,
+    beginBatch: undoRedo.beginBatch,
+    endBatch: undoRedo.endBatch
+  });
+  const {
+    containerWidth,
+    minTableWidth,
+    desiredTableWidth,
+    columnSizingOverrides,
+    setColumnSizingOverrides
+  } = useTableLayout({
+    wrapperRef,
+    visibleCols,
+    flatColumns,
+    hasCheckboxCol,
+    initialColumnWidths: props.value.initialColumnWidths,
+    onColumnResized: (columnId, width) => props.value.onColumnResized?.(columnId, width)
+  });
+  const pinningResult = useColumnPinning({
+    columns: flatColumns,
+    pinnedColumns: pinnedColumnsProp,
+    onColumnPinned: props.value.onColumnPinned
+  });
+  const handleAutosizeColumn = (columnId, width) => {
+    setColumnSizingOverrides({ ...columnSizingOverrides.value, [columnId]: { widthPx: width } });
+    props.value.onColumnResized?.(columnId, width);
+  };
+  const headerMenuResult = useColumnHeaderMenuState({
+    columns: flatColumns,
+    pinnedColumns: pinningResult.pinnedColumns,
+    onPinColumn: pinningResult.pinColumn,
+    onUnpinColumn: pinningResult.unpinColumn,
+    onSort: props.value.onColumnSort,
+    onColumnResized: props.value.onColumnResized,
+    onAutosizeColumn: handleAutosizeColumn,
+    sortBy: computed(() => props.value.sortBy),
+    sortDirection: computed(() => props.value.sortDirection)
+  });
+  const measuredColumnWidths = ref({});
+  watch(
+    [visibleCols, containerWidth, columnSizingOverrides],
+    () => {
+      void nextTick(() => {
+        const wrapper = wrapperRef.value;
+        if (!wrapper) return;
+        const headerCells = wrapper.querySelectorAll("th[data-column-id]");
+        if (headerCells.length === 0) return;
+        const measured = {};
+        headerCells.forEach((cell) => {
+          const colId = cell.getAttribute("data-column-id");
+          if (colId) measured[colId] = cell.offsetWidth;
+        });
+        const prev = measuredColumnWidths.value;
+        const keys = Object.keys(measured);
+        let changed = keys.length !== Object.keys(prev).length;
+        if (!changed) {
+          for (const key of keys) {
+            if (prev[key] !== measured[key]) {
+              changed = true;
+              break;
+            }
+          }
+        }
+        if (changed) measuredColumnWidths.value = measured;
+      });
+    },
+    { flush: "post" }
+  );
+  const columnWidthMap = computed(() => {
+    const map = {};
+    for (const col of visibleCols.value) {
+      const override = columnSizingOverrides.value[col.columnId];
+      map[col.columnId] = override ? override.widthPx : col.idealWidth ?? col.defaultWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+    }
+    return map;
+  });
+  const leftOffsets = computed(
+    () => pinningResult.computeLeftOffsets(visibleCols.value, columnWidthMap.value, DEFAULT_MIN_COLUMN_WIDTH, hasCheckboxCol.value, CHECKBOX_COLUMN_WIDTH)
+  );
+  const rightOffsets = computed(
+    () => pinningResult.computeRightOffsets(visibleCols.value, columnWidthMap.value, DEFAULT_MIN_COLUMN_WIDTH)
+  );
+  const aggregation = computed(
+    () => computeAggregations(items.value, visibleCols.value, cellSelection.value ? selectionRange.value : null)
+  );
+  const statusBarConfig = computed(() => {
+    const base = getDataGridStatusBarConfig(
+      props.value.statusBar,
+      items.value.length,
+      rowSelectionResult.selectedRowIds.value.size
+    );
+    if (!base) return null;
+    return { ...base, aggregation: aggregation.value ?? void 0 };
+  });
+  const showEmptyInGrid = computed(() => items.value.length === 0 && !!props.value.emptyState && !props.value.isLoading);
+  const hasCellSelection = computed(() => selectionRange.value != null || activeCell.value != null);
+  const headerFilterInput = computed(() => ({
+    sortBy: props.value.sortBy,
+    sortDirection: props.value.sortDirection,
+    onColumnSort: props.value.onColumnSort,
+    filters: props.value.filters,
+    onFilterChange: props.value.onFilterChange,
+    filterOptions: props.value.filterOptions,
+    loadingFilterOptions: props.value.loadingFilterOptions,
+    peopleSearch: props.value.peopleSearch
+  }));
+  const cellDescriptorInput = computed(() => ({
+    editingCell: editingCell.value,
+    activeCell: cellSelection.value ? activeCell.value : null,
+    selectionRange: cellSelection.value ? selectionRange.value : null,
+    cutRange: cellSelection.value ? cutRange.value : null,
+    copyRange: cellSelection.value ? copyRange.value : null,
+    colOffset: colOffset.value,
+    itemsLength: items.value.length,
+    getRowId,
+    editable: editableProp.value,
+    onCellValueChanged: onCellValueChanged.value,
+    isDragging: cellSelection.value ? isDragging.value : false
+  }));
+  const popoverAnchorEl = ref(null);
+  const setPopoverAnchorEl = (el) => {
+    popoverAnchorEl.value = el;
+  };
+  const commitCellEdit = (item, columnId, oldValue, newValue, rowIndex, globalColIndex) => {
+    const col = visibleCols.value.find((c) => c.columnId === columnId);
+    if (col) {
+      const result = parseValue(newValue, oldValue, item, col);
+      if (!result.valid) {
+        setEditingCell(null);
+        setPopoverAnchorEl(null);
+        setPendingEditorValue(void 0);
+        return;
+      }
+      newValue = result.value;
+    }
+    onCellValueChanged.value?.({
+      item,
+      columnId,
+      oldValue,
+      newValue,
+      rowIndex
+    });
+    setEditingCell(null);
+    setPopoverAnchorEl(null);
+    setPendingEditorValue(void 0);
+    if (rowIndex < items.value.length - 1) {
+      setActiveCell({ rowIndex: rowIndex + 1, columnIndex: globalColIndex });
+    }
+  };
+  const cancelPopoverEdit = () => {
+    setEditingCell(null);
+    setPopoverAnchorEl(null);
+    setPendingEditorValue(void 0);
+  };
+  const layoutState = computed(() => ({
+    flatColumns: flatColumns.value,
+    visibleCols: visibleCols.value,
+    visibleColumnCount: visibleColumnCount.value,
+    totalColCount: totalColCount.value,
+    colOffset: colOffset.value,
+    hasCheckboxCol: hasCheckboxCol.value,
+    hasRowNumbersCol: hasRowNumbersCol.value,
+    rowIndexByRowId: rowIndexByRowId.value,
+    containerWidth: containerWidth.value,
+    minTableWidth: minTableWidth.value,
+    desiredTableWidth: desiredTableWidth.value,
+    columnSizingOverrides: columnSizingOverrides.value,
+    setColumnSizingOverrides,
+    onColumnResized: props.value.onColumnResized,
+    measuredColumnWidths: measuredColumnWidths.value,
+    stickyHeader: props.value.stickyHeader ?? true
+  }));
+  const rowSelectionState = computed(() => ({
+    selectedRowIds: rowSelectionResult.selectedRowIds.value,
+    updateSelection: rowSelectionResult.updateSelection,
+    handleRowCheckboxChange: rowSelectionResult.handleRowCheckboxChange,
+    handleSelectAll: rowSelectionResult.handleSelectAll,
+    allSelected: rowSelectionResult.allSelected.value,
+    someSelected: rowSelectionResult.someSelected.value
+  }));
+  const editingState = computed(() => ({
+    editingCell: editingCell.value,
+    setEditingCell,
+    pendingEditorValue: pendingEditorValue.value,
+    setPendingEditorValue,
+    commitCellEdit,
+    cancelPopoverEdit,
+    popoverAnchorEl: popoverAnchorEl.value,
+    setPopoverAnchorEl
+  }));
+  const interactionState = computed(() => ({
+    activeCell: cellSelection.value ? activeCell.value : null,
+    setActiveCell: cellSelection.value ? setActiveCell : NOOP,
+    selectionRange: cellSelection.value ? selectionRange.value : null,
+    setSelectionRange: cellSelection.value ? setSelectionRange : NOOP,
+    handleCellMouseDown: cellSelection.value ? handleCellMouseDown : NOOP_MOUSE,
+    handleSelectAllCells: cellSelection.value ? handleSelectAllCells : NOOP,
+    hasCellSelection: cellSelection.value ? hasCellSelection.value : false,
+    handleGridKeyDown: cellSelection.value ? handleGridKeyDown : NOOP_KEY,
+    handleFillHandleMouseDown: cellSelection.value ? handleFillHandleMouseDown : NOOP,
+    handleCopy: cellSelection.value ? handleCopy : NOOP,
+    handleCut: cellSelection.value ? handleCut : NOOP,
+    handlePaste: cellSelection.value ? handlePaste : NOOP_ASYNC,
+    cutRange: cellSelection.value ? cutRange.value : null,
+    copyRange: cellSelection.value ? copyRange.value : null,
+    clearClipboardRanges: cellSelection.value ? clearClipboardRanges : NOOP,
+    canUndo: undoRedo.canUndo.value,
+    canRedo: undoRedo.canRedo.value,
+    onUndo: undoRedo.undo,
+    onRedo: undoRedo.redo,
+    isDragging: cellSelection.value ? isDragging.value : false
+  }));
+  const contextMenuState = computed(() => ({
+    menuPosition: cellSelection.value ? contextMenuPosition.value : null,
+    setMenuPosition: cellSelection.value ? setContextMenuPosition : NOOP,
+    handleCellContextMenu: cellSelection.value ? handleCellContextMenu : NOOP_CTX,
+    closeContextMenu: cellSelection.value ? closeContextMenu : NOOP
+  }));
+  const viewModelsState = computed(() => ({
+    headerFilterInput: headerFilterInput.value,
+    cellDescriptorInput: cellDescriptorInput.value,
+    statusBarConfig: statusBarConfig.value,
+    showEmptyInGrid: showEmptyInGrid.value,
+    onCellError: props.value.onCellError
+  }));
+  const pinningState = computed(() => ({
+    pinnedColumns: pinningResult.pinnedColumns.value,
+    pinColumn: pinningResult.pinColumn,
+    unpinColumn: pinningResult.unpinColumn,
+    isPinned: pinningResult.isPinned,
+    leftOffsets: leftOffsets.value,
+    rightOffsets: rightOffsets.value,
+    headerMenu: {
+      isOpen: headerMenuResult.isOpen.value,
+      openForColumn: headerMenuResult.openForColumn.value,
+      anchorElement: headerMenuResult.anchorElement.value,
+      open: headerMenuResult.open,
+      close: headerMenuResult.close,
+      handlePinLeft: headerMenuResult.handlePinLeft,
+      handlePinRight: headerMenuResult.handlePinRight,
+      handleUnpin: headerMenuResult.handleUnpin,
+      handleSortAsc: headerMenuResult.handleSortAsc,
+      handleSortDesc: headerMenuResult.handleSortDesc,
+      handleClearSort: headerMenuResult.handleClearSort,
+      handleAutosizeThis: headerMenuResult.handleAutosizeThis,
+      handleAutosizeAll: headerMenuResult.handleAutosizeAll,
+      canPinLeft: headerMenuResult.canPinLeft.value,
+      canPinRight: headerMenuResult.canPinRight.value,
+      canUnpin: headerMenuResult.canUnpin.value,
+      currentSort: headerMenuResult.currentSort.value,
+      isSortable: headerMenuResult.isSortable.value,
+      isResizable: headerMenuResult.isResizable.value
+    }
+  }));
+  return {
+    layout: layoutState,
+    rowSelection: rowSelectionState,
+    editing: editingState,
+    interaction: interactionState,
+    contextMenu: contextMenuState,
+    viewModels: viewModelsState,
+    pinning: pinningState
+  };
+}
+function useColumnResize(params) {
+  const {
+    columnSizingOverrides,
+    setColumnSizingOverrides,
+    minWidth = 80,
+    defaultWidth = 120,
+    onColumnResized
+  } = params;
+  let rafId = 0;
+  let cleanupFn = null;
+  onUnmounted(() => {
+    cleanupFn?.();
+    cleanupFn = null;
+  });
+  const handleResizeStart = (e, col) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const startX = e.clientX;
+    const columnId = col.columnId;
+    const thEl = e.currentTarget.parentElement;
+    const startWidth = thEl ? thEl.getBoundingClientRect().width : columnSizingOverrides.value[columnId]?.widthPx ?? col.idealWidth ?? col.defaultWidth ?? defaultWidth;
+    let latestWidth = startWidth;
+    const prevCursor = document.body.style.cursor;
+    const prevUserSelect = document.body.style.userSelect;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    const flushWidth = () => {
+      setColumnSizingOverrides({
+        ...columnSizingOverrides.value,
+        [columnId]: { widthPx: latestWidth }
+      });
+    };
+    const onMove = (moveEvent) => {
+      const deltaX = moveEvent.clientX - startX;
+      latestWidth = Math.max(minWidth, startWidth + deltaX);
+      if (!rafId) {
+        rafId = requestAnimationFrame(() => {
+          rafId = 0;
+          flushWidth();
+        });
+      }
+    };
+    const cleanup = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      cleanupFn = null;
+      document.body.style.cursor = prevCursor;
+      document.body.style.userSelect = prevUserSelect;
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+        rafId = 0;
+      }
+    };
+    const onUp = () => {
+      cleanup();
+      flushWidth();
+      onColumnResized?.(columnId, latestWidth);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    cleanupFn = cleanup;
+  };
+  const getColumnWidth = (col) => {
+    return columnSizingOverrides.value[col.columnId]?.widthPx ?? col.idealWidth ?? col.defaultWidth ?? defaultWidth;
+  };
+  return { handleResizeStart, getColumnWidth };
+}
+function useDebounce(value, delayMs) {
+  const debouncedValue = ref(value.value);
+  let timeoutId;
+  watch(value, (newVal) => {
+    if (timeoutId !== void 0) clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      debouncedValue.value = newVal;
+    }, delayMs);
+  });
+  onUnmounted(() => {
+    if (timeoutId !== void 0) clearTimeout(timeoutId);
+  });
+  return debouncedValue;
+}
+function useDebouncedCallback(fn, delayMs) {
+  let timeoutId;
+  let latestFn = fn;
+  let latestArgs;
+  const debounced = ((...args) => {
+    latestFn = fn;
+    latestArgs = args;
+    if (timeoutId !== void 0) clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      latestFn(...args);
+      latestArgs = void 0;
+      timeoutId = void 0;
+    }, delayMs);
+  });
+  debounced.cancel = () => {
+    if (timeoutId !== void 0) clearTimeout(timeoutId);
+    timeoutId = void 0;
+    latestArgs = void 0;
+  };
+  debounced.flush = () => {
+    if (timeoutId !== void 0 && latestArgs !== void 0) {
+      clearTimeout(timeoutId);
+      timeoutId = void 0;
+      const args = latestArgs;
+      latestArgs = void 0;
+      latestFn(...args);
+    }
+  };
+  onUnmounted(() => {
+    if (timeoutId !== void 0) clearTimeout(timeoutId);
+  });
+  return debounced;
+}
+function useTextFilterState(params) {
+  const { textValue = "", onTextChange } = params;
+  const tempTextValue = ref(textValue);
+  watch(params.isFilterOpen, (open) => {
+    if (open) {
+      tempTextValue.value = params.textValue ?? "";
+    }
+  });
+  const setTempTextValue = (v) => {
+    tempTextValue.value = v;
+  };
+  const handleTextApply = () => {
+    onTextChange?.(tempTextValue.value.trim());
+  };
+  const handleTextClear = () => {
+    tempTextValue.value = "";
+  };
+  return {
+    tempTextValue,
+    setTempTextValue,
+    handleTextApply,
+    handleTextClear
+  };
+}
+var SEARCH_DEBOUNCE_MS = 150;
+var EMPTY_OPTIONS = [];
+function useMultiSelectFilterState(params) {
+  const { onFilterChange } = params;
+  const tempSelected = ref(new Set(params.selectedValues ?? EMPTY_OPTIONS));
+  const searchText = ref("");
+  const debouncedSearchText = useDebounce(searchText, SEARCH_DEBOUNCE_MS);
+  watch(params.isFilterOpen, (open) => {
+    if (open) {
+      tempSelected.value = new Set(params.selectedValues ?? EMPTY_OPTIONS);
+      searchText.value = "";
+    }
+  });
+  const filteredOptions = computed(() => {
+    const safeOptions = params.options ?? EMPTY_OPTIONS;
+    if (!debouncedSearchText.value.trim()) return safeOptions;
+    const searchLower = debouncedSearchText.value.toLowerCase().trim();
+    return safeOptions.filter((opt) => opt.toLowerCase().includes(searchLower));
+  });
+  const setTempSelected = (v) => {
+    tempSelected.value = v;
+  };
+  const setSearchText = (v) => {
+    searchText.value = v;
+  };
+  const handleCheckboxChange = (option, checked) => {
+    const next = new Set(tempSelected.value);
+    if (checked) next.add(option);
+    else next.delete(option);
+    tempSelected.value = next;
+  };
+  const handleSelectAll = () => {
+    tempSelected.value = new Set(filteredOptions.value);
+  };
+  const handleClearSelection = () => {
+    tempSelected.value = /* @__PURE__ */ new Set();
+  };
+  const handleApplyMultiSelect = () => {
+    onFilterChange?.(Array.from(tempSelected.value));
+  };
+  return {
+    tempSelected,
+    setTempSelected,
+    searchText,
+    setSearchText,
+    debouncedSearchText,
+    filteredOptions,
+    handleCheckboxChange,
+    handleSelectAll,
+    handleClearSelection,
+    handleApplyMultiSelect
+  };
+}
+var PEOPLE_SEARCH_DEBOUNCE_MS = 300;
+function usePeopleFilterState(params) {
+  const { onUserChange, filterType } = params;
+  const peopleInputRef = ref(null);
+  let peopleSearchTimeout;
+  const peopleSuggestions = ref([]);
+  const isPeopleLoading = ref(false);
+  const peopleSearchText = ref("");
+  const setPeopleSearchText = (v) => {
+    peopleSearchText.value = v;
+  };
+  watch(params.isFilterOpen, (open) => {
+    if (open) {
+      peopleSearchText.value = "";
+      peopleSuggestions.value = [];
+      if (filterType === "people") {
+        setTimeout(() => peopleInputRef.value?.focus(), 50);
+      }
+    }
+  });
+  watch(
+    [peopleSearchText, () => params.peopleSearch, params.isFilterOpen],
+    ([searchText, search, isOpen]) => {
+      if (peopleSearchTimeout) clearTimeout(peopleSearchTimeout);
+      if (!search || !isOpen || filterType !== "people") return;
+      if (!searchText.trim()) {
+        peopleSuggestions.value = [];
+        return;
+      }
+      isPeopleLoading.value = true;
+      peopleSearchTimeout = setTimeout(async () => {
+        try {
+          const results = await search(searchText);
+          peopleSuggestions.value = results.slice(0, 10);
+        } catch {
+          peopleSuggestions.value = [];
+        } finally {
+          isPeopleLoading.value = false;
+        }
+      }, PEOPLE_SEARCH_DEBOUNCE_MS);
+    }
+  );
+  onUnmounted(() => {
+    if (peopleSearchTimeout) clearTimeout(peopleSearchTimeout);
+  });
+  const handleUserSelect = (user) => {
+    onUserChange?.(user);
+  };
+  const handleClearUser = () => {
+    onUserChange?.(void 0);
+  };
+  return {
+    peopleSuggestions,
+    isPeopleLoading,
+    peopleSearchText,
+    setPeopleSearchText,
+    peopleInputRef,
+    handleUserSelect,
+    handleClearUser
+  };
+}
+function useDateFilterState(params) {
+  const { onDateChange } = params;
+  const tempDateFrom = ref(params.dateValue?.from ?? "");
+  const tempDateTo = ref(params.dateValue?.to ?? "");
+  watch(params.isFilterOpen, (open) => {
+    if (open) {
+      tempDateFrom.value = params.dateValue?.from ?? "";
+      tempDateTo.value = params.dateValue?.to ?? "";
+    }
+  });
+  const setTempDateFrom = (v) => {
+    tempDateFrom.value = v;
+  };
+  const setTempDateTo = (v) => {
+    tempDateTo.value = v;
+  };
+  const handleDateApply = () => {
+    const from = tempDateFrom.value || void 0;
+    const to = tempDateTo.value || void 0;
+    onDateChange?.(from || to ? { from, to } : void 0);
+  };
+  const handleDateClear = () => {
+    tempDateFrom.value = "";
+    tempDateTo.value = "";
+  };
+  return {
+    tempDateFrom,
+    setTempDateFrom,
+    tempDateTo,
+    setTempDateTo,
+    handleDateApply,
+    handleDateClear
+  };
+}
+
+// src/composables/useColumnHeaderFilterState.ts
+var EMPTY_OPTIONS2 = [];
+function useColumnHeaderFilterState(params) {
+  const {
+    filterType,
+    onSort
+  } = params;
+  const safeSelectedValues = () => params.selectedValues ?? EMPTY_OPTIONS2;
+  const headerRef = ref(null);
+  const popoverRef = ref(null);
+  const isFilterOpen = ref(false);
+  const popoverPosition = ref(null);
+  const setFilterOpen = (open) => {
+    isFilterOpen.value = open;
+  };
+  const textFilterState = useTextFilterState({
+    textValue: params.textValue,
+    onTextChange: params.onTextChange,
+    isFilterOpen
+  });
+  const multiSelectFilterState = useMultiSelectFilterState({
+    selectedValues: params.selectedValues,
+    onFilterChange: params.onFilterChange,
+    options: params.options,
+    isFilterOpen
+  });
+  const peopleFilterState = usePeopleFilterState({
+    selectedUser: params.selectedUser,
+    onUserChange: params.onUserChange,
+    peopleSearch: params.peopleSearch,
+    isFilterOpen,
+    filterType
+  });
+  const dateFilterState = useDateFilterState({
+    dateValue: params.dateValue,
+    onDateChange: params.onDateChange,
+    isFilterOpen
+  });
+  watch(isFilterOpen, (open) => {
+    if (!open) {
+      popoverPosition.value = null;
+    }
+  });
+  let clickOutsideHandler = null;
+  let keyDownHandler = null;
+  let clickOutsideTimeout;
+  const setupListeners = () => {
+    cleanupListeners();
+    clickOutsideHandler = (e) => {
+      const target = e.target;
+      if (popoverRef.value && !popoverRef.value.contains(target) && headerRef.value && !headerRef.value.contains(target)) {
+        isFilterOpen.value = false;
+      }
+    };
+    keyDownHandler = (e) => {
+      if (e.key === "Escape" || e.key === "Esc") {
+        e.preventDefault();
+        e.stopPropagation();
+        isFilterOpen.value = false;
+      }
+    };
+    clickOutsideTimeout = setTimeout(() => {
+      if (clickOutsideHandler) document.addEventListener("mousedown", clickOutsideHandler);
+    }, 0);
+    document.addEventListener("keydown", keyDownHandler, true);
+  };
+  const cleanupListeners = () => {
+    if (clickOutsideTimeout) clearTimeout(clickOutsideTimeout);
+    if (clickOutsideHandler) document.removeEventListener("mousedown", clickOutsideHandler);
+    if (keyDownHandler) document.removeEventListener("keydown", keyDownHandler, true);
+    clickOutsideHandler = null;
+    keyDownHandler = null;
+  };
+  watch(isFilterOpen, (open) => {
+    if (open) setupListeners();
+    else cleanupListeners();
+  });
+  onUnmounted(() => cleanupListeners());
+  const handleFilterIconClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!isFilterOpen.value && headerRef.value) {
+      const rect = headerRef.value.getBoundingClientRect();
+      popoverPosition.value = { top: rect.bottom + 4, left: rect.left };
+    }
+    isFilterOpen.value = !isFilterOpen.value;
+  };
+  const handleSortClick = (e) => {
+    e.stopPropagation();
+    onSort?.();
+  };
+  const handleApplyMultiSelect = () => {
+    multiSelectFilterState.handleApplyMultiSelect();
+    isFilterOpen.value = false;
+  };
+  const handleTextApply = () => {
+    textFilterState.handleTextApply();
+    isFilterOpen.value = false;
+  };
+  const handleUserSelect = (user) => {
+    peopleFilterState.handleUserSelect(user);
+    isFilterOpen.value = false;
+  };
+  const handleClearUser = () => {
+    peopleFilterState.handleClearUser();
+    isFilterOpen.value = false;
+  };
+  const handleDateApply = () => {
+    dateFilterState.handleDateApply();
+    isFilterOpen.value = false;
+  };
+  const handlePopoverClick = (e) => e.stopPropagation();
+  const handleInputFocus = (e) => e.stopPropagation();
+  const handleInputMouseDown = (e) => e.stopPropagation();
+  const handleInputClick = (e) => e.stopPropagation();
+  const handleInputKeyDown = (e) => {
+    if (e.key !== "Escape" && e.key !== "Esc") e.stopPropagation();
+  };
+  const hasActiveFilter = computed(() => {
+    if (filterType === "multiSelect") return safeSelectedValues().length > 0;
+    if (filterType === "text") return !!(params.textValue ?? "").trim();
+    if (filterType === "people") return !!params.selectedUser;
+    if (filterType === "date") return !!(params.dateValue?.from || params.dateValue?.to);
+    return false;
+  });
+  return {
+    headerRef,
+    popoverRef,
+    peopleInputRef: peopleFilterState.peopleInputRef,
+    isFilterOpen,
+    setFilterOpen,
+    tempSelected: multiSelectFilterState.tempSelected,
+    setTempSelected: multiSelectFilterState.setTempSelected,
+    tempTextValue: textFilterState.tempTextValue,
+    setTempTextValue: textFilterState.setTempTextValue,
+    searchText: multiSelectFilterState.searchText,
+    setSearchText: multiSelectFilterState.setSearchText,
+    debouncedSearchText: multiSelectFilterState.debouncedSearchText,
+    filteredOptions: multiSelectFilterState.filteredOptions,
+    peopleSuggestions: peopleFilterState.peopleSuggestions,
+    isPeopleLoading: peopleFilterState.isPeopleLoading,
+    peopleSearchText: peopleFilterState.peopleSearchText,
+    setPeopleSearchText: peopleFilterState.setPeopleSearchText,
+    tempDateFrom: dateFilterState.tempDateFrom,
+    setTempDateFrom: dateFilterState.setTempDateFrom,
+    tempDateTo: dateFilterState.tempDateTo,
+    setTempDateTo: dateFilterState.setTempDateTo,
+    hasActiveFilter,
+    popoverPosition,
+    handlers: {
+      handleFilterIconClick,
+      handleApplyMultiSelect,
+      handleTextApply,
+      handleTextClear: textFilterState.handleTextClear,
+      handleUserSelect,
+      handleClearUser,
+      handleCheckboxChange: multiSelectFilterState.handleCheckboxChange,
+      handleSelectAll: multiSelectFilterState.handleSelectAll,
+      handleClearSelection: multiSelectFilterState.handleClearSelection,
+      handlePopoverClick,
+      handleInputFocus,
+      handleInputMouseDown,
+      handleInputClick,
+      handleInputKeyDown,
+      handleDateApply,
+      handleDateClear: dateFilterState.handleDateClear,
+      handleSortClick
+    }
+  };
+}
+function useColumnChooserState(params) {
+  const { columns, visibleColumns, onVisibilityChange } = params;
+  const open = ref(false);
+  let keyDownHandler = null;
+  const setupEscapeHandler = () => {
+    cleanupEscapeHandler();
+    keyDownHandler = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        open.value = false;
+      }
+    };
+    document.addEventListener("keydown", keyDownHandler, true);
+  };
+  const cleanupEscapeHandler = () => {
+    if (keyDownHandler) {
+      document.removeEventListener("keydown", keyDownHandler, true);
+      keyDownHandler = null;
+    }
+  };
+  watch(open, (isOpen) => {
+    if (isOpen) setupEscapeHandler();
+    else cleanupEscapeHandler();
+  });
+  onUnmounted(() => cleanupEscapeHandler());
+  const setOpen = (value) => {
+    open.value = value;
+  };
+  const handleToggle = () => {
+    open.value = !open.value;
+  };
+  const handleClose = () => {
+    open.value = false;
+  };
+  const handleCheckboxChange = (columnKey) => {
+    return (visible) => {
+      onVisibilityChange(columnKey, visible);
+    };
+  };
+  const handleSelectAll = () => {
+    columns.value.forEach((col) => {
+      if (!visibleColumns.value.has(col.columnId)) {
+        onVisibilityChange(col.columnId, true);
+      }
+    });
+  };
+  const handleClearAll = () => {
+    columns.value.forEach((col) => {
+      if (!col.required && visibleColumns.value.has(col.columnId)) {
+        onVisibilityChange(col.columnId, false);
+      }
+    });
+  };
+  const visibleCount = computed(() => visibleColumns.value.size);
+  const totalCount = computed(() => columns.value.length);
+  return {
+    open,
+    setOpen,
+    handleToggle,
+    handleClose,
+    handleCheckboxChange,
+    handleSelectAll,
+    handleClearAll,
+    visibleCount,
+    totalCount
+  };
+}
+function useInlineCellEditorState(params) {
+  const { value, editorType, onCommit, onCancel } = params;
+  const localValue = ref(
+    value !== null && value !== void 0 ? String(value) : ""
+  );
+  const setLocalValue = (v) => {
+    localValue.value = v;
+  };
+  const commit = (v) => {
+    onCommit(v);
+  };
+  const cancel = () => {
+    onCancel();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      cancel();
+    }
+    if (e.key === "Enter" && editorType === "text") {
+      e.preventDefault();
+      e.stopPropagation();
+      commit(localValue.value);
+    }
+  };
+  const handleBlur = () => {
+    if (editorType === "text") {
+      commit(localValue.value);
+    }
+  };
+  return {
+    localValue,
+    setLocalValue,
+    handleKeyDown,
+    handleBlur,
+    commit,
+    cancel
+  };
+}
+function useRichSelectState(params) {
+  const { values, formatValue, onCommit, onCancel } = params;
+  const searchText = ref("");
+  const highlightedIndex = ref(0);
+  const setSearchText = (text) => {
+    searchText.value = text;
+  };
+  const getDisplayText = (value) => {
+    if (formatValue) return formatValue(value);
+    return value != null ? String(value) : "";
+  };
+  const filteredValues = computed(() => {
+    if (!searchText.value.trim()) return values;
+    const lower = searchText.value.toLowerCase();
+    return values.filter((v) => getDisplayText(v).toLowerCase().includes(lower));
+  });
+  const selectValue = (value) => {
+    onCommit(value);
+  };
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        highlightedIndex.value = Math.min(highlightedIndex.value + 1, filteredValues.value.length - 1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0);
+        break;
+      case "Enter":
+        e.preventDefault();
+        e.stopPropagation();
+        if (filteredValues.value.length > 0 && highlightedIndex.value < filteredValues.value.length) {
+          selectValue(filteredValues.value[highlightedIndex.value]);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        e.stopPropagation();
+        onCancel();
+        break;
+    }
+  };
+  return {
+    searchText,
+    setSearchText,
+    filteredValues,
+    highlightedIndex,
+    handleKeyDown,
+    selectValue,
+    getDisplayText
+  };
+}
+var RESIZE_HANDLE_ZONE = 8;
+var MIN_DRAG_DISTANCE = 5;
+function useColumnReorder(params) {
+  const { columnOrder, onColumnOrderChange, tableRef, pinnedColumns } = params;
+  const isDragging = ref(false);
+  const dropIndicatorX = ref(null);
+  let draggedColumnId = null;
+  let draggedPinState = "unpinned";
+  let rafId = 0;
+  let cleanupFn = null;
+  onUnmounted(() => {
+    cleanupFn?.();
+    cleanupFn = null;
+  });
+  const handleHeaderMouseDown = (columnId, event) => {
+    if (event.button !== 0) return;
+    const th = event.target.closest("th");
+    if (th) {
+      const rect = th.getBoundingClientRect();
+      if (event.clientX > rect.right - RESIZE_HANDLE_ZONE) return;
+    }
+    event.preventDefault();
+    const table = tableRef.value;
+    if (!table) return;
+    if (!onColumnOrderChange.value) return;
+    draggedColumnId = columnId;
+    draggedPinState = getPinStateForColumn(
+      columnId,
+      pinnedColumns?.value
+    );
+    dropIndicatorX.value = null;
+    const startX = event.clientX;
+    let hasMoved = false;
+    let latestMouseX = event.clientX;
+    let targetIndex = -1;
+    const prevCursor = document.body.style.cursor;
+    const prevUserSelect = document.body.style.userSelect;
+    document.body.style.cursor = "grabbing";
+    document.body.style.userSelect = "none";
+    const onMove = (moveEvent) => {
+      if (!hasMoved && Math.abs(moveEvent.clientX - startX) < MIN_DRAG_DISTANCE) return;
+      if (!hasMoved) {
+        hasMoved = true;
+        isDragging.value = true;
+      }
+      latestMouseX = moveEvent.clientX;
+      if (!rafId) {
+        rafId = requestAnimationFrame(() => {
+          rafId = 0;
+          const tableEl = tableRef.value;
+          if (!tableEl || !draggedColumnId) return;
+          const result = calculateDropTarget({
+            mouseX: latestMouseX,
+            columnOrder: columnOrder.value,
+            draggedColumnId,
+            draggedPinState,
+            tableElement: tableEl,
+            pinnedColumns: pinnedColumns?.value
+          });
+          if (result) {
+            targetIndex = result.targetIndex;
+            dropIndicatorX.value = result.indicatorX;
+          } else {
+            dropIndicatorX.value = null;
+          }
+        });
+      }
+    };
+    const cleanup = () => {
+      window.removeEventListener("mousemove", onMove, true);
+      window.removeEventListener("mouseup", onUp, true);
+      cleanupFn = null;
+      document.body.style.cursor = prevCursor;
+      document.body.style.userSelect = prevUserSelect;
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+        rafId = 0;
+      }
+    };
+    const onUp = () => {
+      cleanup();
+      if (hasMoved && draggedColumnId && targetIndex >= 0 && onColumnOrderChange.value) {
+        const newOrder = reorderColumnArray(
+          columnOrder.value,
+          draggedColumnId,
+          targetIndex
+        );
+        onColumnOrderChange.value(newOrder);
+      }
+      draggedColumnId = null;
+      isDragging.value = false;
+      dropIndicatorX.value = null;
+      targetIndex = -1;
+    };
+    window.addEventListener("mousemove", onMove, true);
+    window.addEventListener("mouseup", onUp, true);
+    cleanupFn = cleanup;
+  };
+  return { isDragging, dropIndicatorX, handleHeaderMouseDown };
+}
+function useVirtualScroll(params) {
+  const { totalRows, rowHeight, enabled, overscan = 5 } = params;
+  const containerRef = ref(null);
+  const scrollTop = ref(0);
+  const containerHeight = ref(0);
+  let rafId = 0;
+  let resizeObserver;
+  let prevObservedEl = null;
+  const visibleRange = computed(() => {
+    if (!enabled.value) {
+      return { startIndex: 0, endIndex: totalRows.value - 1, offsetTop: 0, offsetBottom: 0 };
+    }
+    return computeVisibleRange(
+      scrollTop.value,
+      rowHeight,
+      containerHeight.value,
+      totalRows.value,
+      overscan
+    );
+  });
+  const totalHeight = computed(() => {
+    if (!enabled.value) return 0;
+    return computeTotalHeight(totalRows.value, rowHeight);
+  });
+  const onScroll = () => {
+    if (!rafId) {
+      rafId = requestAnimationFrame(() => {
+        rafId = 0;
+        const el = containerRef.value;
+        if (el) {
+          scrollTop.value = el.scrollTop;
+        }
+      });
+    }
+  };
+  const measure = () => {
+    const el = containerRef.value;
+    if (!el) return;
+    containerHeight.value = el.clientHeight;
+  };
+  watch(containerRef, (el) => {
+    if (el === prevObservedEl) return;
+    if (prevObservedEl) {
+      prevObservedEl.removeEventListener("scroll", onScroll);
+    }
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = void 0;
+    }
+    prevObservedEl = el;
+    if (el) {
+      el.addEventListener("scroll", onScroll, { passive: true });
+      if (typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(measure);
+        resizeObserver.observe(el);
+      }
+      measure();
+      scrollTop.value = el.scrollTop;
+    }
+  });
+  onUnmounted(() => {
+    const el = containerRef.value;
+    if (el) {
+      el.removeEventListener("scroll", onScroll);
+    }
+    resizeObserver?.disconnect();
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+      rafId = 0;
+    }
+  });
+  const scrollToRow = (index, align = "start") => {
+    const el = containerRef.value;
+    if (!el) return;
+    el.scrollTop = getScrollTopForRow(index, rowHeight, containerHeight.value, align);
+  };
+  return { containerRef, visibleRange, totalHeight, scrollToRow };
+}
+function useDataGridTableSetup(params) {
+  const { props: propsRef } = params;
+  const wrapperRef = ref(null);
+  const tableContainerRef = ref(null);
+  const tableRef = ref(null);
+  const lastMouseShift = ref(false);
+  const state = useDataGridState({ props: propsRef, wrapperRef });
+  const columnOrderRef = computed(() => {
+    const p = propsRef.value;
+    if (p.columnOrder) return p.columnOrder;
+    return flattenColumns(p.columns).filter((c) => p.visibleColumns?.has(c.columnId) ?? true).map((c) => c.columnId);
+  });
+  const onColumnOrderChangeRef = computed(() => propsRef.value.onColumnOrderChange);
+  const columnReorder = useColumnReorder({
+    columnOrder: columnOrderRef,
+    onColumnOrderChange: onColumnOrderChangeRef,
+    tableRef
+  });
+  const virtualScrollEnabled = computed(() => propsRef.value.virtualScroll?.enabled ?? false);
+  const totalRowsRef = computed(() => propsRef.value.items.length);
+  const rowHeight = propsRef.value.virtualScroll?.rowHeight ?? 36;
+  const overscan = propsRef.value.virtualScroll?.overscan ?? 5;
+  const virtualScroll = useVirtualScroll({
+    totalRows: totalRowsRef,
+    rowHeight,
+    enabled: virtualScrollEnabled,
+    overscan
+  });
+  const columnSizingOverridesRef = computed(() => state.layout.value.columnSizingOverrides);
+  const columnResize = useColumnResize({
+    columnSizingOverrides: columnSizingOverridesRef,
+    setColumnSizingOverrides: (v) => state.layout.value.setColumnSizingOverrides(v)
+  });
+  return {
+    wrapperRef,
+    tableContainerRef,
+    tableRef,
+    lastMouseShift,
+    state,
+    columnReorder,
+    virtualScroll,
+    virtualScrollEnabled,
+    columnResize
+  };
+}
+function getCellInteractionProps(descriptor, columnId, handlers) {
+  const base = {
+    "data-row-index": descriptor.rowIndex,
+    "data-col-index": descriptor.globalColIndex,
+    ...descriptor.isInRange ? { "data-in-range": "true" } : {},
+    tabindex: descriptor.isActive ? 0 : -1,
+    onMousedown: (e) => handlers.handleCellMouseDown(e, descriptor.rowIndex, descriptor.globalColIndex),
+    onClick: () => handlers.setActiveCell({ rowIndex: descriptor.rowIndex, columnIndex: descriptor.globalColIndex }),
+    onContextmenu: (e) => handlers.handleCellContextMenu(e)
+  };
+  if (descriptor.canEditAny) {
+    base.role = "button";
+    base.onDblclick = () => handlers.setEditingCell({ rowId: descriptor.rowId, columnId });
+  }
+  return base;
+}
+var NOOP2 = () => {
+};
+function createDataGridTable(ui) {
+  return defineComponent({
+    name: "DataGridTable",
+    props: {
+      gridProps: { type: Object, required: true }
+    },
+    setup(props) {
+      const propsRef = computed(() => props.gridProps);
+      const {
+        wrapperRef,
+        tableContainerRef,
+        tableRef,
+        lastMouseShift,
+        state,
+        columnReorder: { isDragging: isReorderDragging, dropIndicatorX, handleHeaderMouseDown: handleReorderMouseDown },
+        virtualScroll: { containerRef: vsContainerRef, visibleRange, totalHeight: _totalHeight, scrollToRow: _scrollToRow },
+        virtualScrollEnabled,
+        columnResize: { handleResizeStart, getColumnWidth }
+      } = useDataGridTableSetup({ props: propsRef });
+      const onWrapperMousedown = (e) => {
+        lastMouseShift.value = e.shiftKey;
+      };
+      const onContextmenu = (e) => e.preventDefault();
+      const stopPropagation = (e) => e.stopPropagation();
+      const headerRowsComputed = computed(() => buildHeaderRows(propsRef.value.columns, propsRef.value.visibleColumns));
+      const columnMetaCache = computed(() => {
+        const layout = state.layout.value;
+        const pinning = state.pinning.value;
+        const { visibleCols, columnSizingOverrides, measuredColumnWidths } = layout;
+        const { leftOffsets, rightOffsets } = pinning;
+        const cellStyles = {};
+        const cellClasses = {};
+        const hdrStyles = {};
+        const hdrClasses = {};
+        for (let colIdx = 0; colIdx < visibleCols.length; colIdx++) {
+          const col = visibleCols[colIdx];
+          const isPinnedLeft = col.pinned === "left";
+          const isPinnedRight = col.pinned === "right";
+          const columnWidth = getColumnWidth(col);
+          const hasResizeOverride = !!columnSizingOverrides[col.columnId];
+          const measuredW = measuredColumnWidths[col.columnId];
+          const baseMinWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+          const effectiveMinWidth = hasResizeOverride ? columnWidth : Math.max(baseMinWidth, measuredW ?? 0);
+          const tdStyle = {
+            minWidth: `${effectiveMinWidth}px`,
+            width: `${columnWidth}px`,
+            maxWidth: `${columnWidth}px`
+          };
+          const hdrStyle = {
+            minWidth: `${effectiveMinWidth}px`,
+            width: `${columnWidth}px`,
+            maxWidth: `${columnWidth}px`
+          };
+          const tdClassParts = ["ogrid-data-cell"];
+          const hdrClassParts = ["ogrid-header-cell"];
+          if (isPinnedLeft) {
+            tdClassParts.push("ogrid-data-cell--pinned-left");
+            tdStyle.left = `${leftOffsets[col.columnId] ?? 0}px`;
+            hdrClassParts.push("ogrid-header-cell--pinned-left");
+            hdrStyle.left = `${leftOffsets[col.columnId] ?? 0}px`;
+          } else if (isPinnedRight) {
+            tdClassParts.push("ogrid-data-cell--pinned-right");
+            tdStyle.right = `${rightOffsets[col.columnId] ?? 0}px`;
+            hdrClassParts.push("ogrid-header-cell--pinned-right");
+            hdrStyle.right = `${rightOffsets[col.columnId] ?? 0}px`;
+          }
+          cellStyles[col.columnId] = tdStyle;
+          cellClasses[col.columnId] = tdClassParts.join(" ");
+          hdrStyles[col.columnId] = hdrStyle;
+          hdrClasses[col.columnId] = hdrClassParts.join(" ");
+        }
+        return { cellStyles, cellClasses, hdrStyles, hdrClasses };
+      });
+      return () => {
+        const p = props.gridProps;
+        const layout = state.layout.value;
+        const rowSel = state.rowSelection.value;
+        const editing = state.editing.value;
+        const interaction = state.interaction.value;
+        const ctxMenu = state.contextMenu.value;
+        const viewModels = state.viewModels.value;
+        const pinning = state.pinning.value;
+        const { headerMenu } = pinning;
+        const {
+          visibleCols,
+          hasCheckboxCol,
+          hasRowNumbersCol,
+          colOffset: _colOffset,
+          containerWidth,
+          minTableWidth,
+          desiredTableWidth
+        } = layout;
+        const currentPage = p.currentPage ?? 1;
+        const pageSize = p.pageSize ?? 25;
+        const rowNumberOffset = hasRowNumbersCol ? (currentPage - 1) * pageSize : 0;
+        const { selectedRowIds, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected } = rowSel;
+        const { editingCell: _editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl } = editing;
+        const {
+          setActiveCell,
+          setSelectionRange,
+          handleCellMouseDown,
+          handleSelectAllCells,
+          selectionRange,
+          hasCellSelection,
+          handleGridKeyDown,
+          handleFillHandleMouseDown,
+          handleCopy,
+          handleCut,
+          handlePaste,
+          cutRange: _cutRange,
+          copyRange: _copyRange,
+          canUndo,
+          canRedo,
+          onUndo,
+          onRedo,
+          isDragging: _isDragging
+        } = interaction;
+        const { menuPosition, handleCellContextMenu, closeContextMenu } = ctxMenu;
+        const { headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError: _onCellError } = viewModels;
+        const items = p.items;
+        const getRowId = p.getRowId;
+        const layoutMode = p.layoutMode ?? "fill";
+        const rowSelection = p.rowSelection ?? "none";
+        const suppressHorizontalScroll = p.suppressHorizontalScroll;
+        const stickyHeader = p.stickyHeader ?? true;
+        const isLoading = p.isLoading ?? false;
+        const loadingMessage = p.loadingMessage ?? "Loading\u2026";
+        const ariaLabel = p["aria-label"];
+        const ariaLabelledBy = p["aria-labelledby"];
+        const fitToContent = layoutMode === "content";
+        const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
+        const headerRows = headerRowsComputed.value;
+        const editCallbacks = { commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit };
+        const interactionHandlers = { handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu };
+        const handleSingleRowClick = (e) => {
+          if (rowSelection !== "single") return;
+          const tr = e.currentTarget;
+          const rowId = tr.dataset.rowId;
+          if (!rowId) return;
+          rowSel.updateSelection(selectedRowIds.has(rowId) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([rowId]));
+        };
+        const renderCellContent = (item, col, rowIndex, colIdx) => {
+          const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInput);
+          if (descriptor.mode === "editing-inline") {
+            const editorProps = buildInlineEditorProps(item, col, descriptor, editCallbacks);
+            return h(
+              "div",
+              { class: "ogrid-editing-cell" },
+              h(ui.InlineCellEditor, {
+                value: editorProps.value,
+                item: editorProps.item,
+                column: editorProps.column,
+                rowIndex: editorProps.rowIndex,
+                editorType: editorProps.editorType,
+                onCommit: editorProps.onCommit,
+                onCancel: editorProps.onCancel
+              })
+            );
+          }
+          if (descriptor.mode === "editing-popover" && typeof col.cellEditor === "function") {
+            const editorProps = buildPopoverEditorProps(item, col, descriptor, pendingEditorValue, editCallbacks);
+            const CustomEditor = col.cellEditor;
+            return h("div", [
+              h("div", {
+                ref: (el) => {
+                  if (el) setPopoverAnchorEl(el);
+                },
+                class: "ogrid-popover-anchor",
+                "aria-hidden": "true"
+              }),
+              popoverAnchorEl ? h(CustomEditor, editorProps) : null
+            ]);
+          }
+          const content = resolveCellDisplayContent(col, item, descriptor.displayValue);
+          const cellStyle = resolveCellStyle(col, item);
+          const interactionProps2 = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
+          const cellClasses = ["ogrid-cell-content"];
+          if (col.type === "numeric") cellClasses.push("ogrid-cell-content--numeric");
+          else if (col.type === "boolean") cellClasses.push("ogrid-cell-content--boolean");
+          if (descriptor.canEditAny) cellClasses.push("ogrid-cell-content--editable");
+          if (descriptor.isActive && !descriptor.isInRange) cellClasses.push("ogrid-cell-content--active");
+          if (descriptor.isInRange) cellClasses.push("ogrid-cell-in-range");
+          if (descriptor.isInCutRange) cellClasses.push("ogrid-cell-cut");
+          const styledContent = cellStyle ? h("span", { style: cellStyle }, content) : content;
+          return h("div", {
+            ...interactionProps2,
+            class: cellClasses.join(" ")
+          }, [
+            styledContent,
+            ...descriptor.canEditAny && descriptor.isSelectionEndCell ? [
+              h("div", {
+                onMousedown: handleFillHandleMouseDown,
+                "aria-label": "Fill handle",
+                class: "ogrid-fill-handle"
+              })
+            ] : []
+          ]);
+        };
+        const { cellStyles: colCellStyles, cellClasses: colCellClasses, hdrStyles: colHdrStyles, hdrClasses: colHdrClasses } = columnMetaCache.value;
+        const columnLayouts = visibleCols.map((col) => ({
+          col,
+          tdClasses: colCellClasses[col.columnId] || "ogrid-data-cell",
+          tdDynamicStyle: colCellStyles[col.columnId] || {}
+        }));
+        const getHeaderClassAndStyle = (col) => {
+          const base = colHdrStyles[col.columnId] || {};
+          return {
+            classes: colHdrClasses[col.columnId] || "ogrid-header-cell",
+            style: { ...base, cursor: isReorderDragging.value ? "grabbing" : "grab" }
+          };
+        };
+        const wrapperStyle = {
+          position: "relative",
+          flex: "1",
+          minHeight: isLoading && items.length === 0 ? "200px" : "0",
+          width: fitToContent ? "fit-content" : "100%",
+          maxWidth: "100%",
+          overflowX: suppressHorizontalScroll ? "hidden" : allowOverflowX ? "auto" : "hidden",
+          overflowY: "auto",
+          backgroundColor: "#fff",
+          willChange: "scroll-position"
+        };
+        if (p.rowHeight) {
+          wrapperStyle["--ogrid-row-height"] = `${p.rowHeight}px`;
+        }
+        return h("div", { class: "ogrid-outer-container" }, [
+          // Scrollable wrapper
+          h("div", {
+            ref: (el) => {
+              wrapperRef.value = el;
+              vsContainerRef.value = el;
+            },
+            tabindex: 0,
+            role: "region",
+            "aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : "Data grid"),
+            "aria-labelledby": ariaLabelledBy,
+            onMousedown: onWrapperMousedown,
+            onKeydown: handleGridKeyDown,
+            onContextmenu,
+            "data-overflow-x": allowOverflowX ? "true" : "false",
+            style: wrapperStyle
+          }, [
+            h("div", { class: "ogrid-scroll-wrapper" }, [
+              h("div", { style: { minWidth: allowOverflowX ? `${minTableWidth}px` : void 0 } }, [
+                h("div", {
+                  ref: (el) => {
+                    tableContainerRef.value = el;
+                  },
+                  class: ["ogrid-table-container", isLoading && items.length > 0 ? "ogrid-table-container--loading" : ""]
+                }, [
+                  // Drop indicator for column reorder
+                  ...isReorderDragging.value && dropIndicatorX.value !== null ? [
+                    h("div", {
+                      class: "ogrid-drop-indicator",
+                      style: { left: `${dropIndicatorX.value}px` }
+                    })
+                  ] : [],
+                  // Table
+                  h("table", {
+                    ref: (el) => {
+                      tableRef.value = el;
+                    },
+                    class: "ogrid-table",
+                    style: { minWidth: `${minTableWidth}px` }
+                  }, [
+                    // Header
+                    h(
+                      "thead",
+                      { class: stickyHeader ? "ogrid-thead ogrid-sticky-header" : "ogrid-thead" },
+                      headerRows.map(
+                        (row, rowIdx) => h("tr", { key: rowIdx, class: "ogrid-header-row" }, [
+                          // Checkbox header cell
+                          ...rowIdx === headerRows.length - 1 && hasCheckboxCol ? [
+                            h(
+                              "th",
+                              {
+                                class: "ogrid-checkbox-header",
+                                style: {
+                                  width: `${CHECKBOX_COLUMN_WIDTH}px`,
+                                  minWidth: `${CHECKBOX_COLUMN_WIDTH}px`,
+                                  maxWidth: `${CHECKBOX_COLUMN_WIDTH}px`
+                                }
+                              },
+                              ui.renderCheckbox({
+                                modelValue: allSelected,
+                                // Indeterminate only when some (but not all) rows are selected
+                                indeterminate: someSelected && !allSelected,
+                                ariaLabel: "Select all rows",
+                                onChange: (c) => handleSelectAll(!!c)
+                              })
+                            )
+                          ] : [],
+                          // Checkbox spacer in group header row
+                          ...rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol ? [
+                            h("th", {
+                              rowSpan: headerRows.length - 1,
+                              class: "ogrid-checkbox-spacer",
+                              style: { width: `${CHECKBOX_COLUMN_WIDTH}px`, minWidth: `${CHECKBOX_COLUMN_WIDTH}px` }
+                            })
+                          ] : [],
+                          // Row numbers header
+                          ...rowIdx === headerRows.length - 1 && hasRowNumbersCol ? [
+                            h("th", {
+                              class: "ogrid-row-number-header",
+                              style: {
+                                width: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                minWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                maxWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                position: "sticky",
+                                left: hasCheckboxCol ? `${CHECKBOX_COLUMN_WIDTH}px` : "0",
+                                zIndex: 3
+                              }
+                            }, "#")
+                          ] : [],
+                          // Row numbers spacer
+                          ...rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol ? [
+                            h("th", {
+                              rowSpan: headerRows.length - 1,
+                              class: "ogrid-row-number-spacer",
+                              style: {
+                                width: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                position: "sticky",
+                                left: hasCheckboxCol ? `${CHECKBOX_COLUMN_WIDTH}px` : "0",
+                                zIndex: 3
+                              }
+                            })
+                          ] : [],
+                          // Header cells
+                          ...row.map((cell, cellIdx) => {
+                            if (cell.isGroup) {
+                              return h("th", {
+                                key: cellIdx,
+                                colSpan: cell.colSpan,
+                                scope: "colgroup",
+                                class: "ogrid-column-group-header"
+                              }, cell.label);
+                            }
+                            if (!cell.columnDef) return null;
+                            const col = cell.columnDef;
+                            const { classes: headerClasses, style: headerStyle } = getHeaderClassAndStyle(col);
+                            return h("th", {
+                              key: col.columnId,
+                              scope: "col",
+                              "data-column-id": col.columnId,
+                              rowSpan: headerRows.length > 1 ? headerRows.length - rowIdx : void 0,
+                              class: headerClasses,
+                              style: headerStyle,
+                              onMousedown: (e) => handleReorderMouseDown(col.columnId, e)
+                            }, [
+                              h("div", { class: "ogrid-header-content" }, [
+                                h(ui.ColumnHeaderFilter, getHeaderFilterConfig(col, headerFilterInput)),
+                                h("button", {
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    headerMenu.open(col.columnId, e.currentTarget);
+                                  },
+                                  "aria-label": "Column options",
+                                  title: "Column options",
+                                  class: "ogrid-column-menu-btn"
+                                }, "\u22EE")
+                              ]),
+                              h("div", {
+                                onMousedown: (e) => {
+                                  setActiveCell(null);
+                                  setSelectionRange(null);
+                                  wrapperRef.value?.focus({ preventScroll: true });
+                                  e.stopPropagation();
+                                  handleResizeStart(e, col);
+                                },
+                                class: "ogrid-resize-handle"
+                              })
+                            ]);
+                          })
+                        ])
+                      )
+                    ),
+                    // Body
+                    ...!showEmptyInGrid ? [
+                      h("tbody", {}, (() => {
+                        const vsEnabled = virtualScrollEnabled.value;
+                        const vr = visibleRange.value;
+                        const startIdx = vsEnabled ? vr.startIndex : 0;
+                        const endIdx = vsEnabled ? Math.min(vr.endIndex, items.length - 1) : items.length - 1;
+                        const rows = [];
+                        if (vsEnabled && vr.offsetTop > 0) {
+                          rows.push(h("tr", { key: "__vs-top", style: { height: `${vr.offsetTop}px` } }));
+                        }
+                        for (let rowIndex = startIdx; rowIndex <= endIdx; rowIndex++) {
+                          const item = items[rowIndex];
+                          if (!item) continue;
+                          const rowIdStr = getRowId(item);
+                          const isSelected = selectedRowIds.has(rowIdStr);
+                          rows.push(h("tr", {
+                            key: rowIdStr,
+                            "data-row-id": rowIdStr,
+                            onClick: handleSingleRowClick,
+                            style: { cursor: rowSelection === "single" ? "pointer" : void 0 }
+                          }, [
+                            // Checkbox cell
+                            ...hasCheckboxCol ? [
+                              h(
+                                "td",
+                                {
+                                  class: "ogrid-checkbox-cell",
+                                  style: {
+                                    width: `${CHECKBOX_COLUMN_WIDTH}px`,
+                                    minWidth: `${CHECKBOX_COLUMN_WIDTH}px`,
+                                    maxWidth: `${CHECKBOX_COLUMN_WIDTH}px`
+                                  }
+                                },
+                                h(
+                                  "div",
+                                  {
+                                    "data-row-index": rowIndex,
+                                    "data-col-index": 0,
+                                    onClick: stopPropagation,
+                                    class: "ogrid-checkbox-wrapper"
+                                  },
+                                  ui.renderCheckbox({
+                                    modelValue: isSelected,
+                                    ariaLabel: `Select row ${rowIndex + 1}`,
+                                    onChange: (checked) => handleRowCheckboxChange(rowIdStr, checked, rowIndex, lastMouseShift.value)
+                                  })
+                                )
+                              )
+                            ] : [],
+                            // Row numbers cell
+                            ...hasRowNumbersCol ? [
+                              h("td", {
+                                class: "ogrid-row-number-cell",
+                                style: {
+                                  width: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                  minWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                  maxWidth: `${ROW_NUMBER_COLUMN_WIDTH}px`,
+                                  padding: "6px",
+                                  position: "sticky",
+                                  left: hasCheckboxCol ? `${CHECKBOX_COLUMN_WIDTH}px` : "0",
+                                  zIndex: 2
+                                }
+                              }, String(rowNumberOffset + rowIndex + 1))
+                            ] : [],
+                            // Data cells
+                            ...columnLayouts.map(
+                              (cl, colIdx) => h("td", {
+                                key: cl.col.columnId,
+                                "data-column-id": cl.col.columnId,
+                                class: cl.tdClasses,
+                                style: cl.tdDynamicStyle
+                              }, [renderCellContent(item, cl.col, rowIndex, colIdx)])
+                            )
+                          ]));
+                        }
+                        if (vsEnabled && vr.offsetBottom > 0) {
+                          rows.push(h("tr", { key: "__vs-bottom", style: { height: `${vr.offsetBottom}px` } }));
+                        }
+                        return rows;
+                      })())
+                    ] : []
+                  ]),
+                  // Empty state
+                  ...showEmptyInGrid && p.emptyState ? [
+                    ui.renderEmptyState(p.emptyState)
+                  ] : []
+                ])
+              ])
+            ])
+          ]),
+          // Context menu (teleported to body)
+          ...menuPosition ? [
+            h(
+              Teleport,
+              { to: "body" },
+              h(ui.GridContextMenu, {
+                x: menuPosition.x,
+                y: menuPosition.y,
+                hasSelection: hasCellSelection,
+                canUndo,
+                canRedo,
+                onUndo: onUndo ?? NOOP2,
+                onRedo: onRedo ?? NOOP2,
+                onCopy: handleCopy,
+                onCut: handleCut,
+                onPaste: () => {
+                  void handlePaste();
+                },
+                onSelectAll: handleSelectAllCells,
+                onClose: closeContextMenu
+              })
+            )
+          ] : [],
+          // Marching ants overlay
+          h(MarchingAntsOverlay, {
+            containerRef: tableContainerRef,
+            selectionRange,
+            copyRange: _copyRange,
+            cutRange: _cutRange,
+            colOffset: _colOffset,
+            items,
+            visibleColumns: p.visibleColumns instanceof Set ? Array.from(p.visibleColumns) : p.visibleColumns,
+            columnSizingOverrides: layout.columnSizingOverrides,
+            columnOrder: p.columnOrder
+          }),
+          // Column header menu
+          h(ui.ColumnHeaderMenu, {
+            isOpen: headerMenu.isOpen,
+            anchorElement: headerMenu.anchorElement,
+            onClose: headerMenu.close,
+            onPinLeft: headerMenu.handlePinLeft,
+            onPinRight: headerMenu.handlePinRight,
+            onUnpin: headerMenu.handleUnpin,
+            onSortAsc: headerMenu.handleSortAsc,
+            onSortDesc: headerMenu.handleSortDesc,
+            onClearSort: headerMenu.handleClearSort,
+            onAutosizeThis: headerMenu.handleAutosizeThis,
+            onAutosizeAll: headerMenu.handleAutosizeAll,
+            canPinLeft: headerMenu.canPinLeft,
+            canPinRight: headerMenu.canPinRight,
+            canUnpin: headerMenu.canUnpin,
+            currentSort: headerMenu.currentSort,
+            isSortable: headerMenu.isSortable,
+            isResizable: headerMenu.isResizable
+          }),
+          // Status bar
+          ...statusBarConfig ? [
+            h(StatusBar, {
+              totalCount: statusBarConfig.totalCount,
+              filteredCount: statusBarConfig.filteredCount,
+              selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size,
+              selectedCellCount: selectionRange ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1) : void 0,
+              aggregation: statusBarConfig.aggregation,
+              suppressRowCount: statusBarConfig.suppressRowCount
+            })
+          ] : [],
+          // Loading overlay
+          ...isLoading ? [
+            h(
+              "div",
+              { class: "ogrid-loading-overlay" },
+              ui.renderSpinner(loadingMessage)
+            )
+          ] : []
+        ]);
+      };
+    }
+  });
+}
+var editorWrapperStyle = {
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  padding: "0 2px",
+  boxSizing: "border-box"
+};
+function createInlineCellEditor(options) {
+  const { renderCheckbox, renderDatePicker } = options;
+  return defineComponent({
+    name: "InlineCellEditor",
+    props: {
+      value: { default: void 0 },
+      item: { type: Object, required: true },
+      column: { type: Object, required: true },
+      rowIndex: { type: Number, required: true },
+      editorType: { type: String, required: true },
+      onCommit: { type: Function, required: true },
+      onCancel: { type: Function, required: true }
+    },
+    setup(props) {
+      const inputRef = ref(null);
+      const selectWrapperRef = ref(null);
+      const selectDropdownRef = ref(null);
+      const localValue = ref(props.value);
+      const highlightedIndex = ref(0);
+      const positionDropdown = () => {
+        const wrapper = selectWrapperRef.value;
+        const dropdown = selectDropdownRef.value;
+        if (!wrapper || !dropdown) return;
+        const rect = wrapper.getBoundingClientRect();
+        const maxH = 200;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const flipUp = spaceBelow < maxH && rect.top > spaceBelow;
+        dropdown.style.position = "fixed";
+        dropdown.style.left = `${rect.left}px`;
+        dropdown.style.width = `${rect.width}px`;
+        dropdown.style.maxHeight = `${maxH}px`;
+        dropdown.style.zIndex = "9999";
+        dropdown.style.right = "auto";
+        if (flipUp) {
+          dropdown.style.top = "auto";
+          dropdown.style.bottom = `${window.innerHeight - rect.top}px`;
+        } else {
+          dropdown.style.top = `${rect.bottom}px`;
+        }
+      };
+      onMounted(() => {
+        nextTick(() => {
+          if (selectWrapperRef.value) {
+            selectWrapperRef.value.focus();
+            positionDropdown();
+            return;
+          }
+          inputRef.value?.focus();
+          inputRef.value?.select();
+        });
+      });
+      watch(() => props.value, (v) => {
+        localValue.value = v;
+      });
+      const initHighlightedIndex = () => {
+        const values = props.column.cellEditorParams?.values ?? [];
+        const idx = values.findIndex((v) => String(v) === String(props.value));
+        highlightedIndex.value = Math.max(idx, 0);
+      };
+      initHighlightedIndex();
+      const scrollHighlightedIntoView = () => {
+        nextTick(() => {
+          const dropdown = selectDropdownRef.value;
+          if (!dropdown) return;
+          const highlighted = dropdown.children[highlightedIndex.value];
+          highlighted?.scrollIntoView({ block: "nearest" });
+        });
+      };
+      const getDisplayText = (value) => {
+        const formatValue = props.column.cellEditorParams?.formatValue;
+        if (formatValue) return formatValue(value);
+        return value != null ? String(value) : "";
+      };
+      const handleSelectKeyDown = (e) => {
+        const values = props.column.cellEditorParams?.values ?? [];
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault();
+            highlightedIndex.value = Math.min(highlightedIndex.value + 1, values.length - 1);
+            scrollHighlightedIntoView();
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0);
+            scrollHighlightedIntoView();
+            break;
+          case "Enter":
+            e.preventDefault();
+            e.stopPropagation();
+            if (values.length > 0 && highlightedIndex.value < values.length) {
+              props.onCommit(values[highlightedIndex.value]);
+            }
+            break;
+          case "Tab":
+            e.preventDefault();
+            if (values.length > 0 && highlightedIndex.value < values.length) {
+              props.onCommit(values[highlightedIndex.value]);
+            }
+            break;
+          case "Escape":
+            e.preventDefault();
+            e.stopPropagation();
+            props.onCancel();
+            break;
+        }
+      };
+      return () => {
+        if (props.editorType === "checkbox") {
+          const checked = !!props.value;
+          return h(
+            "div",
+            { style: { ...editorWrapperStyle, justifyContent: "center" } },
+            renderCheckbox({
+              checked,
+              onChange: (c) => props.onCommit(c),
+              onCancel: props.onCancel
+            })
+          );
+        }
+        if (props.editorType === "select") {
+          const values = props.column.cellEditorParams?.values ?? [];
+          return h("div", {
+            ref: (el) => {
+              selectWrapperRef.value = el;
+            },
+            tabindex: 0,
+            style: { ...editorWrapperStyle, position: "relative" },
+            onKeydown: handleSelectKeyDown
+          }, [
+            h("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", cursor: "pointer", fontSize: "13px", color: "inherit" } }, [
+              h("span", getDisplayText(props.value)),
+              h("span", { style: { marginLeft: "4px", fontSize: "10px", opacity: "0.5" } }, "\u25BE")
+            ]),
+            h("div", {
+              ref: (el) => {
+                selectDropdownRef.value = el;
+              },
+              role: "listbox",
+              style: { position: "absolute", top: "100%", left: "0", right: "0", maxHeight: "200px", overflowY: "auto", background: "var(--ogrid-bg, #fff)", border: "1px solid var(--ogrid-border, rgba(0,0,0,0.12))", zIndex: "10", boxShadow: "0 4px 16px rgba(0,0,0,0.2)" }
+            }, values.map(
+              (v, i) => h("div", {
+                key: String(v),
+                role: "option",
+                "aria-selected": i === highlightedIndex.value,
+                onClick: () => props.onCommit(v),
+                style: { padding: "6px 8px", cursor: "pointer", color: "var(--ogrid-fg, #242424)", ...i === highlightedIndex.value ? { background: "var(--ogrid-bg-hover, #e8f0fe)" } : {} }
+              }, getDisplayText(v))
+            ))
+          ]);
+        }
+        if (props.editorType === "date") {
+          let dateStr = "";
+          if (localValue.value) {
+            const d = new Date(String(localValue.value));
+            if (!Number.isNaN(d.getTime())) {
+              dateStr = d.toISOString().slice(0, 10);
+            }
+          }
+          return h(
+            "div",
+            { style: editorWrapperStyle },
+            renderDatePicker({
+              value: dateStr,
+              onChange: (val) => props.onCommit(val),
+              onCancel: props.onCancel
+            })
+          );
+        }
+        return h(
+          "div",
+          { style: editorWrapperStyle },
+          h("input", {
+            ref: (el) => {
+              inputRef.value = el;
+            },
+            type: "text",
+            value: localValue.value != null ? String(localValue.value) : "",
+            style: { width: "100%", height: "100%", border: "none", outline: "none", padding: "0 4px", fontSize: "inherit", boxSizing: "border-box" },
+            onInput: (e) => {
+              localValue.value = e.target.value;
+            },
+            onKeydown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                props.onCommit(localValue.value);
+              }
+              if (e.key === "Escape") {
+                e.preventDefault();
+                props.onCancel();
+              }
+              if (e.key === "Tab") {
+                e.preventDefault();
+                props.onCommit(localValue.value);
+              }
+            },
+            onBlur: () => props.onCommit(localValue.value)
+          })
+        );
+      };
+    }
+  });
+}
+var PANEL_WIDTH = 240;
+var TAB_WIDTH = 36;
+var PANEL_LABELS = {
+  columns: "Columns",
+  filters: "Filters"
+};
+var PANEL_ICONS = {
+  columns: "\u2261",
+  // hamburger icon
+  filters: "\u2A65"
+  // filter icon
+};
+function renderSideBar(sb) {
+  const isOpen = sb.activePanel !== null;
+  const position = sb.position ?? "right";
+  const tabStripStyle = {
+    display: "flex",
+    flexDirection: "column",
+    width: `${TAB_WIDTH}px`,
+    background: "var(--ogrid-header-bg, #f5f5f5)",
+    ...position === "right" ? { borderLeft: "1px solid var(--ogrid-border, #e0e0e0)" } : { borderRight: "1px solid var(--ogrid-border, #e0e0e0)" }
+  };
+  const tabStrip = h(
+    "div",
+    { style: tabStripStyle, role: "tablist", "aria-label": "Side bar tabs" },
+    sb.panels.map(
+      (panel) => h("button", {
+        key: panel,
+        role: "tab",
+        "aria-selected": sb.activePanel === panel,
+        "aria-label": PANEL_LABELS[panel],
+        title: PANEL_LABELS[panel],
+        onClick: () => sb.onPanelChange(sb.activePanel === panel ? null : panel),
+        style: {
+          width: `${TAB_WIDTH}px`,
+          height: `${TAB_WIDTH}px`,
+          border: "none",
+          cursor: "pointer",
+          color: "var(--ogrid-fg, #242424)",
+          fontSize: "14px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: sb.activePanel === panel ? "var(--ogrid-bg, #fff)" : "transparent",
+          fontWeight: sb.activePanel === panel ? "bold" : "normal"
+        }
+      }, PANEL_ICONS[panel])
+    )
+  );
+  let panelContent = null;
+  if (isOpen && sb.activePanel) {
+    const panelContainerStyle = {
+      width: `${PANEL_WIDTH}px`,
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      background: "var(--ogrid-bg, #fff)",
+      color: "var(--ogrid-fg, #242424)",
+      ...position === "right" ? { borderLeft: "1px solid var(--ogrid-border, #e0e0e0)" } : { borderRight: "1px solid var(--ogrid-border, #e0e0e0)" }
+    };
+    const panelBodyChildren = [];
+    if (sb.activePanel === "columns") {
+      const allVisible = sb.columns.every((c) => sb.visibleColumns.has(c.columnId));
+      panelBodyChildren.push(
+        h("div", { style: { display: "flex", gap: "8px", marginBottom: "8px" } }, [
+          h("button", {
+            disabled: allVisible,
+            onClick: () => {
+              const next = new Set(sb.visibleColumns);
+              sb.columns.forEach((c) => next.add(c.columnId));
+              sb.onSetVisibleColumns(next);
+            },
+            style: { flex: "1", cursor: "pointer", background: "var(--ogrid-bg-subtle, #f3f2f1)", color: "var(--ogrid-fg, #242424)", border: "1px solid var(--ogrid-border, #e0e0e0)", borderRadius: "4px", padding: "4px 8px" }
+          }, "Select All"),
+          h("button", {
+            onClick: () => {
+              const next = /* @__PURE__ */ new Set();
+              sb.columns.forEach((c) => {
+                if (c.required && sb.visibleColumns.has(c.columnId)) next.add(c.columnId);
+              });
+              sb.onSetVisibleColumns(next);
+            },
+            style: { flex: "1", cursor: "pointer", background: "var(--ogrid-bg-subtle, #f3f2f1)", color: "var(--ogrid-fg, #242424)", border: "1px solid var(--ogrid-border, #e0e0e0)", borderRadius: "4px", padding: "4px 8px" }
+          }, "Clear All")
+        ])
+      );
+      sb.columns.forEach((col) => {
+        panelBodyChildren.push(
+          h("label", { key: col.columnId, style: { display: "flex", alignItems: "center", gap: "6px", padding: "2px 0", cursor: "pointer" } }, [
+            h("input", {
+              type: "checkbox",
+              checked: sb.visibleColumns.has(col.columnId),
+              disabled: col.required,
+              onChange: (e) => sb.onVisibilityChange(col.columnId, e.target.checked)
+            }),
+            h("span", null, col.name)
+          ])
+        );
+      });
+    }
+    if (sb.activePanel === "filters") {
+      if (sb.filterableColumns.length === 0) {
+        panelBodyChildren.push(
+          h("div", { style: { color: "var(--ogrid-muted, #999)", fontStyle: "italic" } }, "No filterable columns")
+        );
+      } else {
+        sb.filterableColumns.forEach((col) => {
+          const filterKey = col.filterField;
+          const groupChildren = [
+            h("div", { style: { fontWeight: "500", marginBottom: "4px", fontSize: "13px" } }, col.name)
+          ];
+          if (col.filterType === "text") {
+            const filterEntry = sb.filters[filterKey];
+            const currentVal = filterEntry?.type === "text" ? filterEntry.value : "";
+            groupChildren.push(
+              h("input", {
+                type: "text",
+                value: currentVal,
+                onInput: (e) => {
+                  const val = e.target.value;
+                  sb.onFilterChange(filterKey, val ? { type: "text", value: val } : void 0);
+                },
+                placeholder: `Filter ${col.name}...`,
+                "aria-label": `Filter ${col.name}`,
+                style: { width: "100%", boxSizing: "border-box", padding: "4px 6px", background: "var(--ogrid-bg, #fff)", color: "var(--ogrid-fg, #242424)", border: "1px solid var(--ogrid-border, #e0e0e0)", borderRadius: "4px" }
+              })
+            );
+          }
+          if (col.filterType === "multiSelect") {
+            const options = sb.filterOptions[filterKey] ?? [];
+            const msChildren = options.map((opt) => {
+              const msFilter = sb.filters[filterKey];
+              const selected = msFilter?.type === "multiSelect" ? msFilter.value.includes(opt) : false;
+              return h("label", { key: opt, style: { display: "flex", alignItems: "center", gap: "4px", padding: "1px 0", cursor: "pointer", fontSize: "13px" } }, [
+                h("input", {
+                  type: "checkbox",
+                  checked: selected,
+                  onChange: (e) => {
+                    const curFilter = sb.filters[filterKey];
+                    const current = curFilter?.type === "multiSelect" ? curFilter.value : [];
+                    const next = e.target.checked ? [...current, opt] : current.filter((v) => v !== opt);
+                    sb.onFilterChange(filterKey, next.length > 0 ? { type: "multiSelect", value: next } : void 0);
+                  }
+                }),
+                h("span", null, opt)
+              ]);
+            });
+            groupChildren.push(
+              h("div", { style: { maxHeight: "120px", overflowY: "auto" }, role: "group", "aria-label": `${col.name} options` }, msChildren)
+            );
+          }
+          if (col.filterType === "date") {
+            const dateFilter = sb.filters[filterKey];
+            const existingValue = dateFilter?.type === "date" ? dateFilter.value : { from: void 0, to: void 0 };
+            groupChildren.push(
+              h("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, [
+                h("label", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "12px" } }, [
+                  "From:",
+                  h("input", {
+                    type: "date",
+                    value: existingValue.from ?? "",
+                    onInput: (e) => {
+                      const from = e.target.value || void 0;
+                      const to = existingValue.to;
+                      sb.onFilterChange(filterKey, from || to ? { type: "date", value: { from, to } } : void 0);
+                    },
+                    "aria-label": `${col.name} from date`,
+                    style: { flex: "1", padding: "2px 4px", background: "var(--ogrid-bg, #fff)", color: "var(--ogrid-fg, #242424)", border: "1px solid var(--ogrid-border, #e0e0e0)", borderRadius: "4px" }
+                  })
+                ]),
+                h("label", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "12px" } }, [
+                  "To:",
+                  h("input", {
+                    type: "date",
+                    value: existingValue.to ?? "",
+                    onInput: (e) => {
+                      const to = e.target.value || void 0;
+                      const from = existingValue.from;
+                      sb.onFilterChange(filterKey, from || to ? { type: "date", value: { from, to } } : void 0);
+                    },
+                    "aria-label": `${col.name} to date`,
+                    style: { flex: "1", padding: "2px 4px", background: "var(--ogrid-bg, #fff)", color: "var(--ogrid-fg, #242424)", border: "1px solid var(--ogrid-border, #e0e0e0)", borderRadius: "4px" }
+                  })
+                ])
+              ])
+            );
+          }
+          panelBodyChildren.push(
+            h("div", { key: col.columnId, style: { marginBottom: "12px" } }, groupChildren)
+          );
+        });
+      }
+    }
+    panelContent = h("div", { role: "tabpanel", "aria-label": PANEL_LABELS[sb.activePanel], style: panelContainerStyle }, [
+      // Panel header
+      h("div", {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          padding: "8px 12px",
+          borderBottom: "1px solid var(--ogrid-border, #e0e0e0)",
+          fontWeight: "600"
+        }
+      }, [
+        h("span", null, PANEL_LABELS[sb.activePanel]),
+        h("button", {
+          onClick: () => sb.onPanelChange(null),
+          style: { border: "none", background: "transparent", cursor: "pointer", fontSize: "16px", color: "var(--ogrid-fg, #242424)" },
+          "aria-label": "Close panel"
+        }, "\xD7")
+      ]),
+      // Panel body
+      h("div", { style: { flex: "1", overflowY: "auto", padding: "8px 12px" } }, panelBodyChildren)
+    ]);
+  }
+  const children = [];
+  if (position === "left") {
+    children.push(tabStrip);
+    if (panelContent) children.push(panelContent);
+  } else {
+    if (panelContent) children.push(panelContent);
+    children.push(tabStrip);
+  }
+  return h("div", {
+    style: { display: "flex", flexDirection: "row", flexShrink: "0" },
+    role: "complementary",
+    "aria-label": "Side bar"
+  }, children);
+}
+function createOGrid(ui) {
+  return defineComponent({
+    name: "OGrid",
+    props: {
+      gridProps: { type: Object, required: true }
+    },
+    setup(props, { expose }) {
+      const propsRef = computed(() => props.gridProps);
+      const { dataGridProps, pagination, columnChooser, layout, api } = useOGrid(propsRef);
+      expose({ api });
+      const isFullScreen = ref(false);
+      const toggleFullScreen = () => {
+        isFullScreen.value = !isFullScreen.value;
+      };
+      const handleEscKey = (e) => {
+        if (e.key === "Escape" && isFullScreen.value) isFullScreen.value = false;
+      };
+      onMounted(() => {
+        document.addEventListener("keydown", handleEscKey);
+      });
+      onUnmounted(() => {
+        document.removeEventListener("keydown", handleEscKey);
+      });
+      return () => {
+        const sideBar = layout.value.sideBarProps;
+        const hasSideBar = sideBar != null;
+        const sideBarPosition = sideBar?.position ?? "right";
+        const toolbarChildren = [];
+        if (layout.value.toolbar) {
+          toolbarChildren.push(layout.value.toolbar);
+        }
+        const showFullScreen = layout.value.fullScreen === true;
+        const fullscreenButton = showFullScreen ? h("button", {
+          type: "button",
+          title: isFullScreen.value ? "Exit fullscreen" : "Fullscreen",
+          "aria-label": isFullScreen.value ? "Exit fullscreen" : "Fullscreen",
+          onClick: toggleFullScreen,
+          style: {
+            background: "none",
+            border: "1px solid var(--ogrid-border, rgba(0,0,0,0.12))",
+            borderRadius: "4px",
+            padding: "4px 6px",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "var(--ogrid-fg, rgba(0,0,0,0.87))"
+          }
+        }, [
+          isFullScreen.value ? h("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", innerHTML: '<polyline points="4 10 0 10 0 14"/><polyline points="12 6 16 6 16 2"/><line x1="0" y1="10" x2="4" y2="6"/><line x1="16" y1="6" x2="12" y2="10"/>' }) : h("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", innerHTML: '<polyline points="10 2 14 2 14 6"/><polyline points="6 14 2 14 2 10"/><line x1="14" y1="2" x2="10" y2="6"/><line x1="2" y1="14" x2="6" y2="10"/>' })
+        ]) : null;
+        const toolbarEnd = columnChooser.value.placement === "toolbar" ? h(ui.ColumnChooser, {
+          columns: columnChooser.value.columns,
+          visibleColumns: columnChooser.value.visibleColumns,
+          onVisibilityChange: columnChooser.value.onVisibilityChange
+        }) : null;
+        const paginationNode = h(ui.PaginationControls, {
+          currentPage: pagination.value.page,
+          pageSize: pagination.value.pageSize,
+          totalCount: pagination.value.displayTotalCount,
+          onPageChange: pagination.value.setPage,
+          onPageSizeChange: (size) => {
+            pagination.value.setPageSize(size);
+          },
+          pageSizeOptions: pagination.value.pageSizeOptions,
+          entityLabelPlural: pagination.value.entityLabelPlural
+        });
+        const gridChild = h("div", {
+          style: { flex: "1", minWidth: "0", minHeight: "0", display: "flex", flexDirection: "column" }
+        }, [
+          h(ui.DataGridTable, {
+            gridProps: dataGridProps.value
+          })
+        ]);
+        const mainAreaChildren = [];
+        if (hasSideBar && sideBarPosition === "left") {
+          mainAreaChildren.push(renderSideBar(sideBar));
+        }
+        mainAreaChildren.push(gridChild);
+        if (hasSideBar && sideBarPosition !== "left") {
+          mainAreaChildren.push(renderSideBar(sideBar));
+        }
+        const hasToolbar = toolbarChildren.length > 0 || toolbarEnd != null || fullscreenButton != null;
+        const rootStyle = isFullScreen.value ? { position: "fixed", inset: "0", zIndex: 9999, display: "flex", flexDirection: "column", background: "var(--ogrid-bg, #fff)" } : { display: "flex", flexDirection: "column", border: "1px solid var(--ogrid-border, rgba(0,0,0,0.12))", borderRadius: "4px", overflow: "hidden" };
+        const containerStyle = isFullScreen.value ? { display: "flex", flexDirection: "column", flex: "1", minHeight: "0", overflow: "hidden", background: "var(--ogrid-bg, #fff)" } : void 0;
+        return h("div", {
+          class: layout.value.className,
+          style: rootStyle
+        }, [
+          // Inner container (for fullscreen: no border/radius)
+          h("div", { style: containerStyle ?? {} }, [
+            // Toolbar strip
+            ...hasToolbar ? [
+              h("div", {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "8px 12px",
+                  borderBottom: "1px solid var(--ogrid-border, rgba(0,0,0,0.12))",
+                  gap: "8px"
+                }
+              }, [
+                h("div", { style: { display: "flex", alignItems: "center", gap: "8px", flex: "1" } }, toolbarChildren),
+                h("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, [
+                  ...toolbarEnd ? [toolbarEnd] : [],
+                  ...fullscreenButton ? [fullscreenButton] : []
+                ])
+              ])
+            ] : [],
+            // Below toolbar strip
+            ...layout.value.toolbarBelow ? [
+              h("div", {
+                style: { padding: "8px 12px", borderBottom: "1px solid var(--ogrid-border, rgba(0,0,0,0.12))" }
+              }, [layout.value.toolbarBelow])
+            ] : [],
+            // Main content area (sidebar + grid)
+            h("div", { style: { display: "flex", flex: "1", minHeight: "0" } }, mainAreaChildren),
+            // Footer strip (pagination)
+            h("div", {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                padding: "8px 0",
+                borderTop: "1px solid var(--ogrid-border, rgba(0,0,0,0.12))"
+              }
+            }, [paginationNode])
+          ])
+        ]);
+      };
+    }
+  });
+}
+
+export { MarchingAntsOverlay, StatusBar, createDataGridTable, createInlineCellEditor, createOGrid, getCellInteractionProps, useActiveCell, useCellEditing, useCellSelection, useClipboard, useColumnChooserState, useColumnHeaderFilterState, useColumnHeaderMenuState, useColumnPinning, useColumnReorder, useColumnResize, useContextMenu, useDataGridState, useDataGridTableSetup, useDateFilterState, useDebounce, useDebouncedCallback, useFillHandle, useFilterOptions, useInlineCellEditorState, useKeyboardNavigation, useMultiSelectFilterState, useOGrid, usePeopleFilterState, useRichSelectState, useRowSelection, useSideBarState, useTableLayout, useTextFilterState, useUndoRedo, useVirtualScroll };