@freighttech/ui 0.13.18

package/dist/backend/dynamic-table/DynamicTable.js

@@ -0,0 +1,2607 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useMemo,
+  useCallback
+} from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { createCellStore } from "./store/index.js";
+import {
+  CellStoreContext,
+  useStickyOffsets,
+  ROW_HEADER_WIDTH,
+  useKeyboardNavigation,
+  useCopyHandler,
+  useRowActionShortcuts,
+  columnMountsEditor
+} from "./hooks/index.js";
+import {
+  createCellHandlers,
+  createRowHandlers,
+  createDragHandlers,
+  createMouseHandlers,
+  createColumnHeaderHandlers,
+  createRowHeaderHandlers,
+  createContextMenuHandlers,
+  createResizeHandlers
+} from "./handlers/index.js";
+import { createPerspectiveHandlers, resolvePerspectiveState } from "./handlers/perspectiveHandlers.js";
+import { TableDateFormatContext } from "./hooks/useTableDateFormat.js";
+import { useColumnWidthPersistence } from "./hooks/useColumnWidthPersistence.js";
+import { useColumnVirtualizer } from "./hooks/useColumnVirtualizer.js";
+import { getPinnedColumnIndices } from "./utils/columnWindow.js";
+import { computeColumnFill } from "./utils/columnFill.js";
+import { useDensityPreference } from "./hooks/useDensityPreference.js";
+import { DENSITY_ATTRIBUTE, resolveDensityRowHeight } from "./types/density.js";
+import { DensityControl } from "./components/DensityControl.js";
+import { ToolbarOverflow } from "./components/ToolbarOverflow.js";
+import { dispatch, useEventHandlers } from "./events/events.js";
+import {
+  TableEvents
+} from "./types/index.js";
+import { ViewModeSwitch } from "./components/ViewModeSwitch.js";
+import { buildLookupColumnDefs } from "./utils/lookupColumns.js";
+import { buildRollupColumnDefs } from "./utils/rollupColumns.js";
+import { applyCellWrites } from "./handlers/cellWrites.js";
+import { coerceCellValue } from "./utils/coerceCellValue.js";
+import { parseClipboardGrid, selectionToTsv } from "./utils/clipboard.js";
+import { detectFillPattern, generateFill, invertFillMode } from "./utils/fillPatterns.js";
+import { buildFillLines, cellsInRect, computeFillPreview } from "./utils/fillGeometry.js";
+import { compileConditionalFormats } from "./utils/conditionalFormat.js";
+import { buildFormulaColumnDefs, isFormulaColumnKey } from "./utils/formulaColumns.js";
+import { fieldMetaFromColumns } from "./formula/check.js";
+import { badgeFitWidth, recordBadgeFit, planBadgeWidths } from "./utils/badgeAutoFit.js";
+import { useGrouping, computeAggregates } from "./hooks/useGrouping.js";
+import PerspectiveTabs from "./components/PerspectiveTabs.js";
+import ConfigureViewPanel from "./components/ConfigureViewPanel.js";
+import SearchBar from "./components/SearchBar.js";
+import ActiveFilterChips from "./components/ActiveFilterChips.js";
+import EmptyState from "./components/EmptyState.js";
+import LoadErrorState from "./components/LoadErrorState.js";
+import StaleDataBar from "./components/StaleDataBar.js";
+import ContextMenu from "./components/ContextMenu.js";
+import VirtualRow from "./components/VirtualRow.js";
+import GroupHeaderRow from "./components/GroupHeaderRow.js";
+import GroupSummaryRow from "./components/GroupSummaryRow.js";
+import FooterTotalsRow from "./components/FooterTotalsRow.js";
+import ColumnHeaders from "./components/ColumnHeaders.js";
+import BulkActionsBar from "./components/BulkActionsBar.js";
+import ExportMenu from "./components/ExportMenu.js";
+import {
+  extractExportRows,
+  extractExportRowsFromData,
+  toCsv,
+  toXlsxBlob,
+  slugifyFileName,
+  downloadBlob
+} from "./utils/exportTable.js";
+import Debugger from "./components/Debugger.js";
+import FullscreenOverlay from "./components/FullscreenOverlay.js";
+import { Maximize2, FunnelX } from "lucide-react";
+import { generateSortRuleId, generatePerspectiveId, BASE_VIEW_PERSPECTIVE_NAME } from "./types/perspective.js";
+import { useAnnotations, annotationKey } from "./hooks/useAnnotations.js";
+import CellCommentDialog from "./components/CellCommentDialog.js";
+import CellCommentHoverPopup from "./components/CellCommentHoverPopup.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../../primitives/dialog.js";
+import { Button } from "../../primitives/button.js";
+import { useT, useLocale } from "@open-mercato/shared/lib/i18n/context";
+import { flash } from "../FlashMessages.js";
+import TablePagination from "./components/TablePagination.js";
+const EMPTY_GROUP_RULES = [];
+const SELECTION_COPY_ID = "__cellsel_copy";
+const SELECTION_ANNOTATE_ID = "__cellsel_annotate";
+const NON_TEXT_INPUT_TYPES = ["checkbox", "radio", "button", "submit", "range", "color", "file"];
+function isTextEntryTarget(el) {
+  if (!el) return false;
+  const tag = el.tagName;
+  if (tag === "TEXTAREA" || el.isContentEditable) return true;
+  return tag === "INPUT" && !NON_TEXT_INPUT_TYPES.includes(el.type);
+}
+if (typeof window !== "undefined") {
+  import("./styles/DynamicTable.css.js");
+  import("./styles/DynamicTable.v2.css.js");
+}
+const DynamicTable = ({
+  data = [],
+  columns = [],
+  colHeaders = true,
+  rowHeaders = false,
+  height = "auto",
+  width = "auto",
+  idColumnName = "id",
+  rowKeyColumn,
+  tableName = "Table Name",
+  loadError,
+  onRetryLoad,
+  tableId,
+  density,
+  striped = false,
+  onSelectionChange,
+  onBulkDelete,
+  onExportAll,
+  tableRef,
+  emptyMessage,
+  columnActions,
+  rowActions,
+  cellActions,
+  actionsRenderer,
+  pagination,
+  searchQuery,
+  // New perspective props
+  savedPerspectives: propSavedPerspectives,
+  activePerspectiveId: controlledActivePerspectiveId,
+  defaultPerspectiveId,
+  sharedTemplates,
+  canPublishTemplates = false,
+  publishableRoles,
+  defaultHiddenColumns = [],
+  defaultGrouping = EMPTY_GROUP_RULES,
+  // Deprecated props (backward compatibility)
+  savedFilters: deprecatedSavedFilters,
+  activeFilterId: deprecatedActiveFilterId,
+  hiddenColumns: deprecatedHiddenColumns = [],
+  debug = false,
+  uiConfig = {},
+  autoSelectOnFocus = false,
+  autoEditOnTab = true,
+  loadFilterSuggestions,
+  loadLookupSources,
+  loadRollupSources,
+  dateFormatOptions,
+  keyboardShortcuts,
+  onRowAction,
+  siblingTableRefs,
+  onRowClick,
+  highlightedRowId,
+  actionsColumnWidth: actionsColumnWidthProp = 80,
+  enableComments = false,
+  commentsEntityType,
+  commentsCellTarget,
+  commentsViewContext,
+  onAnnotationChange,
+  aggregateResult = null,
+  aggregateLoading = false,
+  aggregateError = false,
+  renderBody
+}) => {
+  const savedPerspectives = useMemo(() => {
+    if (propSavedPerspectives) {
+      return propSavedPerspectives;
+    }
+    if (deprecatedSavedFilters && deprecatedSavedFilters.length > 0) {
+      return deprecatedSavedFilters.map((filter) => ({
+        id: filter.id,
+        name: filter.name,
+        color: filter.color,
+        columns: {
+          visible: columns.map((c) => c.data),
+          hidden: []
+        },
+        filters: filter.rows,
+        sorting: [],
+        grouping: [],
+        aggregations: [],
+        lookupColumns: []
+      }));
+    }
+    return [];
+  }, [propSavedPerspectives, deprecatedSavedFilters, columns]);
+  const controlledActiveId = controlledActivePerspectiveId !== void 0 ? controlledActivePerspectiveId : deprecatedActiveFilterId;
+  const initialHiddenColumns = useMemo(() => {
+    return [.../* @__PURE__ */ new Set([...defaultHiddenColumns, ...deprecatedHiddenColumns])];
+  }, [defaultHiddenColumns, deprecatedHiddenColumns]);
+  const {
+    hideToolbar = false,
+    hideTitle = false,
+    searchSuggestions,
+    searchDebounceMs,
+    searchPlaceholder,
+    formatGroupValue,
+    hideSearch = false,
+    hideAddRowButton = false,
+    hidePerspectiveTabs: hidePerspectiveTabsExplicit,
+    hidePagination = false,
+    hideActionsColumn = false,
+    topBarStart,
+    topBarEnd,
+    searchBarEnd,
+    searchBarStart,
+    beforeBody,
+    enableFullscreen = false,
+    onFullscreenChange,
+    enableFillHandle = false,
+    fillConfirmThreshold = 100,
+    readOnlyStyle = "muted",
+    rowHoverStyle = "default",
+    disableBuiltinColumnMenu = false,
+    borderless = false,
+    bulkActions,
+    hideExportButton = false,
+    exportFileName,
+    enableColumnVirtualization = false,
+    columnOverscan,
+    hideDensityControl = false,
+    expandToolbarActions = false,
+    toolbarOverflowExtras,
+    densityLevel: densityLevelOverride,
+    viewModes,
+    onViewModeChange
+  } = uiConfig;
+  const { density: densityLevel } = useDensityPreference(densityLevelOverride, tableId);
+  const densityAttribute = useMemo(
+    () => ({ [DENSITY_ATTRIBUTE]: densityLevel }),
+    [densityLevel]
+  );
+  const hasPerspectives = !!(propSavedPerspectives || deprecatedSavedFilters);
+  const hidePerspectiveTabs = hidePerspectiveTabsExplicit ?? !hasPerspectives;
+  const t = useT();
+  const locale = useLocale();
+  const storeRef = useRef(null);
+  const dragStateRef = useRef({
+    isDragging: false,
+    type: null,
+    start: null
+  });
+  const actionsColumnWidth = actionsColumnWidthProp;
+  const [lookupColumns, setLookupColumns] = useState(() => {
+    const activePerspective = controlledActiveId ? savedPerspectives.find((p) => p.id === controlledActiveId) : null;
+    return activePerspective?.lookupColumns ?? [];
+  });
+  const lookupColumnDefs = useMemo(() => buildLookupColumnDefs(lookupColumns), [lookupColumns]);
+  const [rollupColumns, setRollupColumns] = useState(() => {
+    const activePerspective = controlledActiveId ? savedPerspectives.find((p) => p.id === controlledActiveId) : null;
+    return activePerspective?.rollupColumns ?? [];
+  });
+  const rollupColumnDefs = useMemo(
+    () => buildRollupColumnDefs(rollupColumns, { locale }),
+    [rollupColumns, locale]
+  );
+  const [formulas, setFormulas] = useState(() => {
+    const activePerspective = controlledActiveId ? savedPerspectives.find((p) => p.id === controlledActiveId) : null;
+    return activePerspective?.formulas ?? [];
+  });
+  const nativeColumns = useMemo(() => {
+    let raw;
+    if (columns.length > 0) {
+      raw = columns;
+    } else if (data.length > 0 && typeof data[0] === "object" && !Array.isArray(data[0])) {
+      raw = Object.keys(data[0]).filter((k) => k !== "_isNew").map((k) => ({ data: k }));
+    } else {
+      raw = [];
+    }
+    if (lookupColumnDefs.length === 0 && rollupColumnDefs.length === 0) return raw;
+    return [...raw, ...lookupColumnDefs, ...rollupColumnDefs];
+  }, [columns, data, lookupColumnDefs, rollupColumnDefs]);
+  const formulaColumnDefs = useMemo(
+    () => buildFormulaColumnDefs(formulas, { fields: fieldMetaFromColumns(nativeColumns), translate: t }),
+    [formulas, nativeColumns, t]
+  );
+  const baseColumns = useMemo(
+    () => formulaColumnDefs.length > 0 ? [...nativeColumns, ...formulaColumnDefs] : nativeColumns,
+    [nativeColumns, formulaColumnDefs]
+  );
+  const initialState = useMemo(() => {
+    const activePerspective = controlledActiveId ? savedPerspectives.find((p) => p.id === controlledActiveId) : null;
+    return resolvePerspectiveState({
+      baseColumns,
+      perspective: activePerspective,
+      defaultHiddenColumns: initialHiddenColumns,
+      defaultGrouping
+    });
+  }, []);
+  const [visibleColumns, setVisibleColumns] = useState(initialState.visibleColumns);
+  const [hiddenColumns, setHiddenColumns] = useState(initialState.hiddenColumns);
+  const [filters, setFilters] = useState(initialState.filters);
+  const [sortRules, setSortRules] = useState(initialState.sortRules);
+  const [groupRules, setGroupRules] = useState(initialState.groupRules);
+  const [viewMode, setViewMode] = useState(initialState.viewMode ?? "table");
+  const [aggregations, setAggregations] = useState(initialState.aggregations);
+  const [conditionalFormats, setConditionalFormats] = useState(
+    initialState.conditionalFormats
+  );
+  const [dateFormat, setDateFormat] = useState(initialState.dateFormat);
+  const [frozenColumns, setFrozenColumns] = useState(
+    () => new Set(initialState.frozenColumns)
+  );
+  const [internalActivePerspectiveId, setInternalActivePerspectiveId] = useState(
+    controlledActiveId ?? null
+  );
+  const activePerspectiveId = controlledActiveId !== void 0 ? controlledActiveId : internalActivePerspectiveId;
+  const appliedPerspectiveRef = useRef(void 0);
+  useEffect(() => {
+    if (appliedPerspectiveRef.current === activePerspectiveId) return;
+    const perspective = activePerspectiveId ? savedPerspectives.find((p) => p.id === activePerspectiveId) : null;
+    if (activePerspectiveId && !perspective) return;
+    appliedPerspectiveRef.current = activePerspectiveId;
+    const next = resolvePerspectiveState({
+      baseColumns,
+      perspective,
+      defaultHiddenColumns: initialHiddenColumns,
+      defaultGrouping
+    });
+    setVisibleColumns(next.visibleColumns);
+    setHiddenColumns(next.hiddenColumns);
+    setFilters(next.filters);
+    setSortRules(next.sortRules);
+    setGroupRules(next.groupRules);
+    setViewMode(next.viewMode ?? "table");
+    setAggregations(next.aggregations);
+    setLookupColumns(next.lookupColumns);
+    setRollupColumns(next.rollupColumns);
+    setFormulas(next.formulas);
+    setConditionalFormats(next.conditionalFormats);
+    setFrozenColumns(new Set(next.frozenColumns));
+    setDateFormat(next.dateFormat);
+    if (controlledActiveId !== void 0) {
+      setInternalActivePerspectiveId(activePerspectiveId ?? null);
+    }
+  }, [activePerspectiveId, controlledActiveId, savedPerspectives, baseColumns, initialHiddenColumns, defaultGrouping]);
+  const displayTableName = useMemo(() => {
+    if (activePerspectiveId && !activePerspectiveId.startsWith("_")) {
+      const activePerspective = savedPerspectives.find((p) => p.id === activePerspectiveId);
+      if (activePerspective && !activePerspective.isBaseView) {
+        return activePerspective.name;
+      }
+    }
+    return tableName;
+  }, [activePerspectiveId, savedPerspectives, tableName]);
+  const [configPanelOpen, setConfigPanelOpen] = useState(false);
+  const [configPanelInitialSection, setConfigPanelInitialSection] = useState(null);
+  const [editingPerspectiveId, setEditingPerspectiveId] = useState(null);
+  const [configureBaseView, setConfigureBaseView] = useState(false);
+  const baseViewPerspective = useMemo(
+    () => savedPerspectives.find((p) => p.isBaseView) ?? null,
+    [savedPerspectives]
+  );
+  const [commentDialog, setCommentDialog] = useState(null);
+  const [commentHover, setCommentHover] = useState(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const cols = useMemo(() => {
+    const orderedCols = [];
+    for (const key of visibleColumns) {
+      const col = baseColumns.find((c) => c.data === key);
+      if (col) {
+        orderedCols.push(col);
+      }
+    }
+    return orderedCols;
+  }, [baseColumns, visibleColumns]);
+  const resolveCommentTarget = useCallback(
+    (rowData, col) => {
+      if (!rowData) return { entityType: "", rowId: "" };
+      if (commentsCellTarget) return commentsCellTarget(rowData, col);
+      const entityType = typeof commentsEntityType === "function" ? commentsEntityType(rowData) : commentsEntityType || "";
+      return { entityType, rowId: String(rowData[idColumnName] ?? "") };
+    },
+    [commentsCellTarget, commentsEntityType, idColumnName]
+  );
+  const annotationTargets = useMemo(() => {
+    if (!enableComments) return [];
+    const seen = /* @__PURE__ */ new Set();
+    const out = [];
+    for (const row of data) {
+      for (const col of cols) {
+        const target = resolveCommentTarget(row, col);
+        if (!target.entityType || !target.rowId) continue;
+        const key = `${target.entityType}:${target.rowId}`;
+        if (seen.has(key)) continue;
+        seen.add(key);
+        out.push(target);
+      }
+    }
+    return out;
+  }, [enableComments, data, cols, resolveCommentTarget]);
+  const { annotations, refresh: refreshAnnotations } = useAnnotations({
+    enabled: enableComments && annotationTargets.length > 0,
+    targets: annotationTargets
+  });
+  const cellAnnotationKeyAt = useCallback(
+    (rowData, column) => {
+      const target = resolveCommentTarget(rowData, column);
+      if (!target.entityType || !target.rowId) return null;
+      return annotationKey(target, column.data);
+    },
+    [resolveCommentTarget]
+  );
+  const compiledFormats = useMemo(
+    () => compileConditionalFormats(conditionalFormats),
+    [conditionalFormats]
+  );
+  if (!storeRef.current) {
+    storeRef.current = createCellStore(data, cols);
+  }
+  const store = storeRef.current;
+  const groupingResult = useGrouping(data, groupRules, cols, aggregations, {
+    totalRows: pagination?.total
+  });
+  const isGrouped = groupingResult.visualRows !== null;
+  const reportedViewMode = useRef(null);
+  useEffect(() => {
+    if (reportedViewMode.current === viewMode) return;
+    reportedViewMode.current = viewMode;
+    onViewModeChange?.(viewMode);
+  }, [viewMode, onViewModeChange]);
+  const usingCustomBody = viewMode !== "table" && !!renderBody;
+  const [rowCount, setRowCount] = useState(store.getRowCount());
+  const [storeRevision, setStoreRevision] = useState(0);
+  const sortState = useMemo(() => {
+    const primary = sortRules[0];
+    if (!primary) return { columnIndex: null, direction: null };
+    const columnIndex = cols.findIndex((c) => c.data === primary.field);
+    if (columnIndex < 0) return { columnIndex: null, direction: null };
+    return { columnIndex, direction: primary.direction };
+  }, [sortRules, cols]);
+  const [contextMenu, setContextMenu] = useState(null);
+  const { leftOffsets, rightOffsets } = useStickyOffsets(cols, store, rowHeaders);
+  const showActionsColumn = !hideActionsColumn && (!!rowActions || !!actionsRenderer || store.hasNewRows());
+  const [actionsScrollShadow, setActionsScrollShadow] = useState(false);
+  const [firstColScrollShadow, setFirstColScrollShadow] = useState(false);
+  const [frozenColShadow, setFrozenColShadow] = useState(false);
+  useEffect(() => {
+    const el = tableRef.current;
+    if (!el) return;
+    let frozenEdge = null;
+    let frozenTarget = 0;
+    const measureFrozenEdge = () => {
+      frozenEdge = el.querySelector('.hot-headers-sticky [data-frozen-edge="true"]');
+      frozenTarget = frozenEdge ? parseFloat(getComputedStyle(frozenEdge).left) || 0 : 0;
+    };
+    const update = () => {
+      const maxScroll = el.scrollWidth - el.clientWidth;
+      setActionsScrollShadow(maxScroll > 1 && Math.ceil(el.scrollLeft) < maxScroll - 1);
+      setFirstColScrollShadow(el.scrollLeft > 1);
+      if (frozenEdge && el.scrollLeft > 1) {
+        const rel = frozenEdge.getBoundingClientRect().left - el.getBoundingClientRect().left;
+        setFrozenColShadow(rel <= frozenTarget + 1);
+      } else {
+        setFrozenColShadow(false);
+      }
+    };
+    let frame = null;
+    const onScroll = () => {
+      if (frame !== null) return;
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        update();
+      });
+    };
+    measureFrozenEdge();
+    update();
+    el.addEventListener("scroll", onScroll, { passive: true });
+    const ro = new ResizeObserver(() => {
+      measureFrozenEdge();
+      onScroll();
+    });
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+      if (frame !== null) cancelAnimationFrame(frame);
+      ro.disconnect();
+    };
+  }, [tableRef, cols.length, showActionsColumn, isFullscreen, frozenColumns]);
+  const totalWidth = useMemo(() => {
+    return cols.reduce((sum, _, idx) => sum + store.getColumnWidth(idx), 0) + (rowHeaders ? 50 : 0) + (showActionsColumn ? actionsColumnWidth : 0);
+  }, [cols, store, rowHeaders, actionsColumnWidth, showActionsColumn, storeRevision]);
+  const furnitureWidth = (rowHeaders ? 50 : 0) + (showActionsColumn ? actionsColumnWidth : 0);
+  const getColumnWidth = useCallback(
+    (colIndex) => store.getColumnWidth(colIndex),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store, storeRevision]
+  );
+  const pageAggregates = useMemo(() => {
+    if (aggregations.length === 0) return void 0;
+    const columnsByField = new Map(cols.map((c) => [c.data, c]));
+    const indices = data.map((_, i) => i);
+    return computeAggregates(data, indices, aggregations, columnsByField);
+  }, [data, aggregations, cols]);
+  const pageAggregateValues = pageAggregates?.values;
+  const pageAggregateBreakdowns = pageAggregates?.breakdowns;
+  const virtualizerCount = isGrouped ? groupingResult.visualRows.length : rowCount;
+  const dataRowHeight = densityLevel !== "comfortable" ? resolveDensityRowHeight(densityLevel) : density === "md" ? 44 : density === "sm" ? 36 : 32;
+  const selectionColumnName = rowKeyColumn ?? idColumnName;
+  const selectable = rowHeaders;
+  const [selectedRowIds, setSelectedRowIds] = useState(/* @__PURE__ */ new Set());
+  const showRowActionsMenu = !!rowActions && !actionsRenderer;
+  const pageRowIds = useMemo(
+    () => data.map((r) => r == null ? void 0 : r[selectionColumnName]).filter((id) => id != null).map((id) => String(id)),
+    [data, selectionColumnName]
+  );
+  const allSelected = pageRowIds.length > 0 && pageRowIds.every((id) => selectedRowIds.has(id));
+  const someSelected = !allSelected && pageRowIds.some((id) => selectedRowIds.has(id));
+  const handleToggleRowSelect = useCallback((rowId) => {
+    setSelectedRowIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowId)) next.delete(rowId);
+      else next.add(rowId);
+      onSelectionChange?.(Array.from(next));
+      return next;
+    });
+  }, [onSelectionChange]);
+  const handleToggleSelectAll = useCallback(() => {
+    setSelectedRowIds((prev) => {
+      const next = new Set(prev);
+      const everySelected = pageRowIds.length > 0 && pageRowIds.every((id) => next.has(id));
+      if (everySelected) pageRowIds.forEach((id) => next.delete(id));
+      else pageRowIds.forEach((id) => next.add(id));
+      onSelectionChange?.(Array.from(next));
+      return next;
+    });
+  }, [pageRowIds, onSelectionChange]);
+  const handleToggleGroupSelect = useCallback((groupRowIds) => {
+    setSelectedRowIds((prev) => {
+      const next = new Set(prev);
+      const everySelected = groupRowIds.length > 0 && groupRowIds.every((id) => next.has(id));
+      if (everySelected) groupRowIds.forEach((id) => next.delete(id));
+      else groupRowIds.forEach((id) => next.add(id));
+      onSelectionChange?.(Array.from(next));
+      return next;
+    });
+  }, [onSelectionChange]);
+  const [isBulkDeleting, setIsBulkDeleting] = useState(false);
+  const bulkBarCountRef = useRef(0);
+  const clearSelection = useCallback(() => {
+    setSelectedRowIds(/* @__PURE__ */ new Set());
+    onSelectionChange?.([]);
+  }, [onSelectionChange]);
+  const handleBulkDelete = useCallback(async () => {
+    if (!onBulkDelete) return;
+    const ids = Array.from(selectedRowIds);
+    if (ids.length === 0) return;
+    setIsBulkDeleting(true);
+    try {
+      await onBulkDelete(ids);
+      clearSelection();
+    } catch {
+    } finally {
+      setIsBulkDeleting(false);
+    }
+  }, [onBulkDelete, selectedRowIds, clearSelection]);
+  const rowVirtualizer = useVirtualizer({
+    count: virtualizerCount,
+    getScrollElement: () => tableRef?.current,
+    // Group headers share the data-row height so the grouped band lines up
+    // with the rest of the rows (same pill height + inter-row gap).
+    estimateSize: () => dataRowHeight,
+    overscan: 10
+  });
+  useLayoutEffect(() => {
+    rowVirtualizer.measure();
+  }, [dataRowHeight]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      rowVirtualizer.measure();
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [isFullscreen, dataRowHeight, rowVirtualizer]);
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const { handleCellSave: handleCellSaveBase } = useMemo(
+    () => createCellHandlers(store, cols, tableRef, idColumnName),
+    [store, cols, tableRef, idColumnName]
+  );
+  const hasFormulaColumns = useMemo(() => cols.some((c) => isFormulaColumnKey(c.data)), [cols]);
+  const handleCellSave = useCallback(
+    (row, col, newValue, clearEditing = true) => {
+      handleCellSaveBase(row, col, newValue, clearEditing);
+      if (hasFormulaColumns) store.bumpRowRevisions(row, cols.length);
+    },
+    [handleCellSaveBase, hasFormulaColumns, store, cols.length]
+  );
+  const { handleAddRow, handleSaveNewRow, handleCancelNewRow } = useMemo(
+    () => createRowHandlers(store, cols, tableRef),
+    [store, cols, tableRef]
+  );
+  const dragHandlers = useMemo(
+    () => createDragHandlers(store, cols, dragStateRef),
+    [store, cols]
+  );
+  const { handleMouseDown, handleMouseMove, handleMouseUp, handleDoubleClick } = useMemo(
+    () => createMouseHandlers(store, cols, dragStateRef, dragHandlers),
+    [store, cols, dragHandlers]
+  );
+  const {
+    handleColumnVisibilityChange,
+    handleColumnOrderChange,
+    handleFiltersChange,
+    handleSortRulesChange,
+    handleGroupRulesChange,
+    handleAggregationsChange,
+    handleLookupColumnsChange,
+    handleRollupColumnsChange,
+    handleFormulasChange,
+    handleConditionalFormatsChange,
+    handleDateFormatChange,
+    handleSavePerspective,
+    handlePerspectiveSelect,
+    handlePerspectiveRename,
+    handlePerspectiveDelete,
+    handlePerspectiveDuplicate,
+    handlePerspectiveSetDefault,
+    handlePerspectivePublish,
+    handlePerspectiveTemplateCopy
+  } = useMemo(
+    () => createPerspectiveHandlers({
+      tableRef,
+      columns: baseColumns,
+      savedPerspectives,
+      activePerspectiveId,
+      setVisibleColumns,
+      setHiddenColumns,
+      setFilters,
+      setSortRules,
+      setGroupRules,
+      setAggregations,
+      setLookupColumns,
+      setRollupColumns,
+      setFormulas,
+      setConditionalFormats,
+      setFrozenColumns,
+      setDateFormat,
+      setInternalActivePerspectiveId,
+      defaultHiddenColumns: initialHiddenColumns,
+      defaultGrouping
+    }),
+    // The `set*` functions are React state setters (stable by contract) plus
+    // `setInternalActivePerspectiveId`; only the three data inputs can change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [tableRef, baseColumns, savedPerspectives, activePerspectiveId, initialHiddenColumns, defaultGrouping]
+  );
+  const handleBaseViewReset = useCallback(() => {
+    if (!baseViewPerspective) return;
+    handleSavePerspective({
+      id: baseViewPerspective.id,
+      name: BASE_VIEW_PERSPECTIVE_NAME,
+      isBaseView: true,
+      columns: { visible: [], hidden: [] },
+      filters: [],
+      sorting: [],
+      grouping: [],
+      aggregations: [],
+      lookupColumns: [],
+      rollupColumns: [],
+      formulas: [],
+      conditionalFormats: [],
+      dateFormat: void 0
+    });
+    const next = resolvePerspectiveState({
+      baseColumns,
+      perspective: null,
+      defaultHiddenColumns: initialHiddenColumns,
+      defaultGrouping
+    });
+    setVisibleColumns(next.visibleColumns);
+    setHiddenColumns(next.hiddenColumns);
+    setFilters(next.filters);
+    setSortRules(next.sortRules);
+    setGroupRules(next.groupRules);
+    setAggregations(next.aggregations);
+    setLookupColumns(next.lookupColumns);
+    setRollupColumns(next.rollupColumns);
+    setFormulas(next.formulas);
+    setConditionalFormats(next.conditionalFormats);
+    setFrozenColumns(new Set(next.frozenColumns));
+    setDateFormat(next.dateFormat);
+  }, [baseViewPerspective, handleSavePerspective, baseColumns, initialHiddenColumns, defaultGrouping]);
+  const handleSortDirectionChange = useCallback(
+    (colIndex, direction) => {
+      const col = cols[colIndex];
+      if (!col) return;
+      handleSortRulesChange(
+        direction === null ? [] : [{ id: generateSortRuleId(), field: col.data, direction }]
+      );
+    },
+    [cols, handleSortRulesChange]
+  );
+  const { handleColumnSort, handleColumnHeaderDoubleClick, handleColumnHeaderMouseDown } = useMemo(
+    () => createColumnHeaderHandlers(
+      store,
+      cols,
+      tableRef,
+      sortState,
+      handleSortDirectionChange,
+      setContextMenu,
+      columnActions
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store, cols, tableRef, sortState, handleSortDirectionChange, columnActions]
+  );
+  const { handleRowHeaderDoubleClick } = useMemo(
+    () => createRowHeaderHandlers(store, tableRef, setContextMenu, rowActions),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store, tableRef, rowActions]
+  );
+  const { handleContextMenuAction, handleContextMenuClose } = useMemo(
+    () => createContextMenuHandlers(store, cols, tableRef, contextMenu, setContextMenu, onRowAction),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store, cols, tableRef, contextMenu, onRowAction]
+  );
+  const handleRowActionsMenu = useCallback((e, rowIndex) => {
+    if (!rowActions) return;
+    const rowData = store.getRowData(rowIndex);
+    const actions = rowActions(rowData, rowIndex);
+    if (!actions.length) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const rect = e.currentTarget.getBoundingClientRect();
+    setContextMenu({ isOpen: true, position: { x: rect.right, y: rect.bottom + 4 }, actions, type: "row", index: rowIndex });
+  }, [rowActions, store]);
+  const persistColumnWidthRef = useRef(() => {
+  });
+  const { handleResizeStart } = useMemo(
+    () => createResizeHandlers(store, (colIndex) => persistColumnWidthRef.current(colIndex)),
+    [store]
+  );
+  const userResizedColsRef = useRef(/* @__PURE__ */ new Set());
+  const badgeFitRef = useRef(/* @__PURE__ */ new Map());
+  const declaredTotalWidth = useMemo(
+    () => cols.reduce((sum, _, idx) => sum + store.getBaseColumnWidth(idx), 0) + furnitureWidth,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cols, store, furnitureWidth, storeRevision]
+  );
+  const applyColumnFill = useCallback(() => {
+    const el = tableRef.current;
+    if (!el) return;
+    const rigid = /* @__PURE__ */ new Set();
+    cols.forEach((col, idx) => {
+      if (col.sticky || frozenColumns.has(col.data) || userResizedColsRef.current.has(idx)) {
+        rigid.add(idx);
+      }
+    });
+    store.setColumnStretch(
+      computeColumnFill({
+        widths: cols.map((_, idx) => store.getBaseColumnWidth(idx)),
+        rigid,
+        furnitureWidth,
+        containerWidth: el.clientWidth
+      })
+    );
+  }, [cols, store, frozenColumns, furnitureWidth, tableRef]);
+  useLayoutEffect(() => {
+    applyColumnFill();
+    const el = tableRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => applyColumnFill());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [applyColumnFill, declaredTotalWidth, isFullscreen, tableRef]);
+  const handleModernSortAsc = useCallback(
+    (colIndex) => handleSortDirectionChange(colIndex, "asc"),
+    [handleSortDirectionChange]
+  );
+  const handleModernSortDesc = useCallback(
+    (colIndex) => handleSortDirectionChange(colIndex, "desc"),
+    [handleSortDirectionChange]
+  );
+  const handleModernFilterByField = useCallback((colIndex) => {
+    const col = cols[colIndex];
+    if (!col) return;
+    const newFilter = {
+      id: `filter-${Date.now()}`,
+      field: col.data,
+      operator: "contains",
+      values: []
+    };
+    handleFiltersChange([...filters, newFilter]);
+    setEditingPerspectiveId(null);
+    setConfigureBaseView(!activePerspectiveId || activePerspectiveId === baseViewPerspective?.id);
+    setConfigPanelInitialSection("filters");
+    setConfigPanelOpen(true);
+  }, [cols, filters, handleFiltersChange, activePerspectiveId, baseViewPerspective]);
+  const persistColumnLayout = useCallback((visible, hidden) => {
+    if (controlledActiveId === void 0) return;
+    const target = activePerspectiveId ? savedPerspectives.find((p) => p.id === activePerspectiveId) ?? null : baseViewPerspective;
+    if (target) {
+      handleSavePerspective({ ...target, columns: { visible, hidden } }, true);
+      return;
+    }
+    if (activePerspectiveId) return;
+    handleSavePerspective(
+      {
+        id: generatePerspectiveId(),
+        name: BASE_VIEW_PERSPECTIVE_NAME,
+        isBaseView: true,
+        columns: { visible, hidden },
+        // FROM THE LIVE STATE — same rule as the view-mode switch below. A
+        // column drag records a column order and a "Hide field" records a
+        // column set; neither is a statement that the user wanted their
+        // filters, sorting and grouping thrown away, and writing empty literals
+        // here made it exactly that.
+        filters,
+        sorting: sortRules,
+        grouping: groupRules,
+        aggregations,
+        lookupColumns,
+        rollupColumns,
+        formulas,
+        conditionalFormats,
+        dateFormat,
+        viewMode
+      },
+      true
+    );
+  }, [
+    activePerspectiveId,
+    controlledActiveId,
+    savedPerspectives,
+    baseViewPerspective,
+    handleSavePerspective,
+    filters,
+    sortRules,
+    groupRules,
+    aggregations,
+    lookupColumns,
+    rollupColumns,
+    formulas,
+    conditionalFormats,
+    dateFormat,
+    viewMode
+  ]);
+  const persistFrozenColumns = useCallback((next) => {
+    if (controlledActiveId === void 0) return;
+    const frozen = [...next];
+    const target = activePerspectiveId ? savedPerspectives.find((p) => p.id === activePerspectiveId) ?? null : baseViewPerspective;
+    if (target) {
+      handleSavePerspective({ ...target, frozenColumns: frozen }, true);
+      return;
+    }
+    if (activePerspectiveId) return;
+    handleSavePerspective(
+      {
+        id: generatePerspectiveId(),
+        name: BASE_VIEW_PERSPECTIVE_NAME,
+        isBaseView: true,
+        columns: { visible: visibleColumns, hidden: hiddenColumns },
+        frozenColumns: frozen,
+        // Same rule as the column-layout mint: pinning a column is not a
+        // statement that the user wanted their filters and sorting discarded.
+        filters,
+        sorting: sortRules,
+        grouping: groupRules,
+        aggregations,
+        lookupColumns,
+        rollupColumns,
+        formulas,
+        conditionalFormats,
+        dateFormat,
+        viewMode
+      },
+      true
+    );
+  }, [
+    activePerspectiveId,
+    controlledActiveId,
+    savedPerspectives,
+    baseViewPerspective,
+    handleSavePerspective,
+    visibleColumns,
+    hiddenColumns,
+    filters,
+    sortRules,
+    groupRules,
+    aggregations,
+    lookupColumns,
+    rollupColumns,
+    formulas,
+    conditionalFormats,
+    dateFormat,
+    viewMode
+  ]);
+  const handleModernFreezeToggle = useCallback((colIndex) => {
+    const col = cols[colIndex];
+    if (!col) return;
+    const next = new Set(frozenColumns);
+    if (next.has(col.data)) {
+      next.delete(col.data);
+    } else {
+      next.add(col.data);
+    }
+    setFrozenColumns(next);
+    persistFrozenColumns(next);
+  }, [cols, frozenColumns, persistFrozenColumns]);
+  const handleColumnReorder = useCallback((fromIndex, toIndex) => {
+    const fromCol = cols[fromIndex];
+    const toCol = cols[toIndex];
+    if (!fromCol || !toCol || fromIndex === toIndex) return;
+    const fromKey = fromCol.data;
+    const toKey = toCol.data;
+    const fi = visibleColumns.indexOf(fromKey);
+    const ti = visibleColumns.indexOf(toKey);
+    if (fi < 0 || ti < 0 || fi === ti) return;
+    const next = visibleColumns.slice();
+    next.splice(fi, 1);
+    next.splice(ti, 0, fromKey);
+    handleColumnVisibilityChange(next, hiddenColumns);
+    persistColumnLayout(next, hiddenColumns);
+  }, [cols, visibleColumns, hiddenColumns, handleColumnVisibilityChange, persistColumnLayout]);
+  const handleModernHideField = useCallback((colIndex) => {
+    const col = cols[colIndex];
+    if (!col) return;
+    if (!visibleColumns.includes(col.data)) return;
+    const newVisible = visibleColumns.filter((k) => k !== col.data);
+    const newHidden = hiddenColumns.includes(col.data) ? hiddenColumns : [...hiddenColumns, col.data];
+    handleColumnVisibilityChange(newVisible, newHidden);
+    persistColumnLayout(newVisible, newHidden);
+  }, [cols, visibleColumns, hiddenColumns, handleColumnVisibilityChange, persistColumnLayout]);
+  const handleViewModeChange = useCallback((mode) => {
+    setViewMode(mode);
+    onViewModeChange?.(mode);
+    if (controlledActiveId === void 0) return;
+    const target = activePerspectiveId ? savedPerspectives.find((p) => p.id === activePerspectiveId) ?? null : baseViewPerspective;
+    if (target) {
+      handleSavePerspective({ ...target, viewMode: mode }, true);
+      return;
+    }
+    if (activePerspectiveId) return;
+    handleSavePerspective(
+      {
+        id: generatePerspectiveId(),
+        name: BASE_VIEW_PERSPECTIVE_NAME,
+        isBaseView: true,
+        columns: { visible: visibleColumns, hidden: hiddenColumns },
+        filters,
+        sorting: sortRules,
+        grouping: groupRules,
+        aggregations,
+        lookupColumns,
+        rollupColumns,
+        formulas,
+        conditionalFormats,
+        dateFormat,
+        viewMode: mode
+      },
+      true
+    );
+  }, [
+    controlledActiveId,
+    activePerspectiveId,
+    savedPerspectives,
+    baseViewPerspective,
+    handleSavePerspective,
+    visibleColumns,
+    hiddenColumns,
+    filters,
+    sortRules,
+    groupRules,
+    aggregations,
+    lookupColumns,
+    rollupColumns,
+    formulas,
+    conditionalFormats,
+    dateFormat
+  ]);
+  const handleColumnMove = useCallback((colIndex, direction) => {
+    const target = colIndex + direction;
+    if (target < 0 || target >= cols.length) return;
+    handleColumnReorder(colIndex, target);
+  }, [cols.length, handleColumnReorder]);
+  const handleModernColumnAction = useCallback((actionId, colIndex) => {
+    if (!tableRef?.current) return;
+    dispatch(tableRef.current, TableEvents.COLUMN_CONTEXT_MENU_ACTION, {
+      columnIndex: colIndex,
+      columnName: cols[colIndex]?.data,
+      actionId
+    });
+  }, [cols, tableRef]);
+  const effectiveLeftOffsets = useMemo(() => {
+    if (frozenColumns.size === 0) return leftOffsets;
+    const offsets = [...leftOffsets];
+    let cumulativeOffset = rowHeaders ? ROW_HEADER_WIDTH : 0;
+    for (let i = 0; i < cols.length; i++) {
+      if (cols[i].sticky === "left") {
+        cumulativeOffset = (offsets[i] ?? 0) + store.getColumnWidth(i);
+      }
+    }
+    for (let i = 0; i < cols.length; i++) {
+      if (frozenColumns.has(cols[i].data) && cols[i].sticky !== "left") {
+        offsets[i] = cumulativeOffset;
+        cumulativeOffset += store.getColumnWidth(i);
+      }
+    }
+    return offsets;
+  }, [frozenColumns, leftOffsets, cols, store, rowHeaders, storeRevision]);
+  const lastFrozenColumnKey = useMemo(() => {
+    let key = null;
+    for (let i = 0; i < cols.length; i++) {
+      if (effectiveLeftOffsets[i] !== void 0) key = cols[i].data;
+    }
+    return key;
+  }, [effectiveLeftOffsets, cols]);
+  const pinnedColumnIndices = useMemo(
+    () => getPinnedColumnIndices(cols, frozenColumns),
+    [cols, frozenColumns]
+  );
+  const [forcedColumnIndices, setForcedColumnIndices] = useState([]);
+  const getColumnKeyByIndex = useCallback(
+    (colIndex) => cols[colIndex]?.data ?? colIndex,
+    [cols]
+  );
+  const columnVirtualizer = useColumnVirtualizer({
+    enabled: enableColumnVirtualization,
+    columnCount: cols.length,
+    getColumnWidth,
+    getScrollElement: () => tableRef.current,
+    pinnedLeftIndices: pinnedColumnIndices.left,
+    pinnedRightIndices: pinnedColumnIndices.right,
+    forcedIndices: forcedColumnIndices,
+    overscan: columnOverscan,
+    // ROW_HEADER_WIDTH (32), NOT the 50 that `totalWidth` uses for the same
+    // gutter — the two disagree today (a pre-existing bug). The 18px difference
+    // moves only the scroll-range arithmetic, well inside one overscan column,
+    // and never touches a spacer width. Do NOT "fix" it by swapping `totalWidth`
+    // for the virtualizer's: that visibly narrows every table by 18px.
+    leadingWidth: rowHeaders ? ROW_HEADER_WIDTH : 0,
+    trailingWidth: showActionsColumn ? actionsColumnWidth : 0,
+    widthRevision: storeRevision,
+    getColumnKey: getColumnKeyByIndex,
+    hasRowHeader: rowHeaders,
+    hasActionsColumn: showActionsColumn
+  });
+  const columnVirtualizerRef = useRef(columnVirtualizer);
+  columnVirtualizerRef.current = columnVirtualizer;
+  useEffect(() => {
+    if (!enableColumnVirtualization) return;
+    let lastKey = "";
+    const sync = () => {
+      const sel = store.getSelection();
+      const editing = store.getEditingCell();
+      const next = [];
+      if (sel.anchor) next.push(sel.anchor.col);
+      if (sel.focus) next.push(sel.focus.col);
+      if (editing) next.push(editing.col);
+      const unique = Array.from(new Set(next)).sort((a, b) => a - b);
+      const key = unique.join(",");
+      if (key !== lastKey) {
+        lastKey = key;
+        setForcedColumnIndices(unique);
+      }
+      const target = editing?.col ?? sel.focus?.col ?? sel.anchor?.col;
+      if (target != null) columnVirtualizerRef.current.scrollToColumn(target);
+    };
+    sync();
+    const offSelection = store.subscribeToSelection(sync);
+    const offEditing = store.subscribeToEditing(sync);
+    return () => {
+      offSelection();
+      offEditing();
+    };
+  }, [store, enableColumnVirtualization]);
+  useEffect(() => {
+    let lastRow = -1;
+    const sync = () => {
+      const editing = store.getEditingCell();
+      const sel = store.getSelection();
+      const target = editing?.row ?? sel.focus?.row ?? sel.anchor?.row;
+      if (target == null || target < 0 || target >= store.getRowCount()) return;
+      if (target === lastRow) return;
+      lastRow = target;
+      const mounted = rowVirtualizer.getVirtualItems();
+      if (mounted.length === 0) return;
+      if (target >= mounted[0].index && target <= mounted[mounted.length - 1].index) return;
+      rowVirtualizer.scrollToIndex(target, { align: "auto" });
+    };
+    const offSelection = store.subscribeToSelection(sync);
+    const offEditing = store.subscribeToEditing(sync);
+    return () => {
+      offSelection();
+      offEditing();
+    };
+  }, [store, rowVirtualizer]);
+  const keyboardHandler = useKeyboardNavigation(store, cols.length, cols, autoEditOnTab, handleCellSave, siblingTableRefs);
+  const shortcutHandler = useRowActionShortcuts(store, keyboardShortcuts, onRowAction);
+  const handleTableClick = useCallback((e) => {
+    if (!onRowClick) return;
+    const target = e.target;
+    if (target.closest("tr[data-group-header]")) return;
+    if (target.closest("button, input, select, textarea, a, [data-no-row-click]")) return;
+    const row = target.closest("tr[data-row]");
+    if (!row) return;
+    const rowIndex = parseInt(row.getAttribute("data-row") || "", 10);
+    if (isNaN(rowIndex)) return;
+    const rowData = store.getRowData(rowIndex);
+    if (rowData) {
+      onRowClick(rowIndex, rowData, e);
+    }
+  }, [store, onRowClick]);
+  const collectBulkCells = useCallback(
+    (bounds) => {
+      const cells = [];
+      const seen = /* @__PURE__ */ new Set();
+      for (let r = bounds.startRow; r <= bounds.endRow; r++) {
+        const rData = store.getRowData(r);
+        if (!rData) continue;
+        for (let c = bounds.startCol; c <= bounds.endCol; c++) {
+          const cConfig = cols[c];
+          if (!cConfig) continue;
+          const target = resolveCommentTarget(rData, cConfig);
+          if (!target.entityType || !target.rowId) continue;
+          const key = annotationKey(target, cConfig.data);
+          if (seen.has(key)) continue;
+          seen.add(key);
+          cells.push({ entityType: target.entityType, rowId: target.rowId, columnKey: cConfig.data });
+        }
+      }
+      return cells;
+    },
+    [store, cols, resolveCommentTarget]
+  );
+  const resolveCommentCell = useCallback((el) => {
+    const cell = el.closest("td[data-row][data-col]");
+    if (!cell) return null;
+    const rowIndex = parseInt(cell.getAttribute("data-row") || "", 10);
+    const colIndex = parseInt(cell.getAttribute("data-col") || "", 10);
+    if (Number.isNaN(rowIndex) || Number.isNaN(colIndex)) return null;
+    const rowData = store.getRowData(rowIndex);
+    const col = cols[colIndex];
+    if (!rowData || !col) return null;
+    const target = resolveCommentTarget(rowData, col);
+    if (!target.rowId || !target.entityType) return null;
+    return {
+      rowIndex,
+      colIndex,
+      rowData,
+      col,
+      entityType: target.entityType,
+      rowId: target.rowId,
+      annotation: annotations.get(annotationKey(target, col.data)),
+      cell
+    };
+  }, [store, cols, resolveCommentTarget, annotations]);
+  const handleCellHoverOver = useCallback((e) => {
+    if (!enableComments || !commentsEntityType) return;
+    const td = e.target.closest?.("td.hot-cell[data-row][data-col]");
+    if (!td || td.hasAttribute("data-actions-cell")) {
+      store.setHoveredCell(null);
+      return;
+    }
+    const row = Number(td.getAttribute("data-row"));
+    const col = Number(td.getAttribute("data-col"));
+    if (Number.isNaN(row) || Number.isNaN(col)) {
+      store.setHoveredCell(null);
+      return;
+    }
+    store.setHoveredCell({ row, col });
+  }, [enableComments, commentsEntityType, store]);
+  const handleCommentHoverOver = useCallback((e) => {
+    if (!enableComments || !commentsEntityType) return;
+    const indicator = e.target.closest?.(".cell-comment-indicator");
+    if (!indicator) return;
+    const info = resolveCommentCell(indicator);
+    if (!info?.annotation || info.annotation.comments.length === 0) return;
+    setCommentHover({
+      comments: info.annotation.comments,
+      columnTitle: info.col.title || info.col.data,
+      anchorRect: indicator.getBoundingClientRect()
+    });
+  }, [enableComments, commentsEntityType, resolveCommentCell]);
+  const handleCommentHoverOut = useCallback((e) => {
+    const indicator = e.target.closest?.(".cell-comment-indicator");
+    if (!indicator) return;
+    const related = e.relatedTarget;
+    if (related && indicator.contains(related)) return;
+    setCommentHover(null);
+  }, []);
+  const handleCommentMouseDown = useCallback((e) => {
+    if (!enableComments || !commentsEntityType) return false;
+    const indicator = e.target.closest?.(".cell-comment-indicator");
+    if (indicator) {
+      const info = resolveCommentCell(indicator);
+      if (info) {
+        e.preventDefault();
+        e.stopPropagation();
+        setCommentHover(null);
+        setCommentDialog({
+          entityType: info.entityType,
+          rowId: info.rowId,
+          columnKey: info.col.data,
+          columnTitle: info.col.title || info.col.data,
+          rowLabel: info.rowData.name || info.rowData.title || void 0,
+          annotationId: info.annotation?.id || null,
+          currentColor: info.annotation?.color || null,
+          anchorRect: info.cell.getBoundingClientRect()
+        });
+        return true;
+      }
+    }
+    if (!e.shiftKey) return false;
+    const target = e.target;
+    const cell = target.closest("td[data-row][data-col]");
+    if (!cell) return false;
+    const rowIndex = parseInt(cell.getAttribute("data-row") || "", 10);
+    const colIndex = parseInt(cell.getAttribute("data-col") || "", 10);
+    if (isNaN(rowIndex) || isNaN(colIndex)) return false;
+    const rowData = store.getRowData(rowIndex);
+    const colConfig = cols[colIndex];
+    if (!rowData || !colConfig) return false;
+    const cellTarget = resolveCommentTarget(rowData, colConfig);
+    if (!cellTarget.entityType || !cellTarget.rowId) return false;
+    const bounds = store.getSelectionBounds();
+    const isMultiCell = bounds && (bounds.startRow !== bounds.endRow || bounds.startCol !== bounds.endCol);
+    if (isMultiCell && bounds) {
+      const bulkCells = collectBulkCells(bounds);
+      if (bulkCells.length > 1) {
+        e.preventDefault();
+        e.stopPropagation();
+        setCommentDialog({
+          entityType: cellTarget.entityType,
+          rowId: cellTarget.rowId,
+          columnKey: colConfig.data,
+          columnTitle: colConfig.title || colConfig.data,
+          anchorRect: cell.getBoundingClientRect(),
+          bulkCells
+        });
+        return true;
+      }
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    const annotation = annotations.get(annotationKey(cellTarget, colConfig.data));
+    setCommentDialog({
+      entityType: cellTarget.entityType,
+      rowId: cellTarget.rowId,
+      columnKey: colConfig.data,
+      columnTitle: colConfig.title || colConfig.data,
+      rowLabel: rowData.name || rowData.title || void 0,
+      annotationId: annotation?.id || null,
+      currentColor: annotation?.color || null,
+      anchorRect: cell.getBoundingClientRect()
+    });
+    return true;
+  }, [enableComments, commentsEntityType, store, cols, resolveCommentTarget, collectBulkCells, annotations]);
+  const [rangePhase, setRangePhase] = useState("idle");
+  const rangePhaseRef = useRef("idle");
+  const rangeExitTimerRef = useRef(null);
+  const applyRangePhase = useCallback((p) => {
+    rangePhaseRef.current = p;
+    setRangePhase(p);
+  }, []);
+  const clearSelectionAnimated = useCallback(() => {
+    if (rangePhaseRef.current === "committed") {
+      applyRangePhase("exiting");
+      if (rangeExitTimerRef.current) window.clearTimeout(rangeExitTimerRef.current);
+      rangeExitTimerRef.current = window.setTimeout(() => {
+        store.setSelection({ type: null, anchor: null, focus: null });
+        applyRangePhase("idle");
+        rangeExitTimerRef.current = null;
+      }, 170);
+    } else {
+      store.setSelection({ type: null, anchor: null, focus: null });
+      applyRangePhase("idle");
+    }
+  }, [store, applyRangePhase]);
+  const copySelectionToClipboard = useCallback(() => {
+    const cells = store.getCellsInSelection();
+    const bounds = store.getSelectionBounds();
+    if (!cells.length || !bounds) return;
+    const text = selectionToTsv(cells, bounds);
+    store.setClipboardMarker({ mode: "copy", bounds });
+    void navigator.clipboard?.writeText(text).then(() => flash(t("dynamicTable.cellMenu.copied", "Copied to clipboard"), "success")).catch(() => {
+      store.setClipboardMarker(null);
+      flash(t("dynamicTable.cellMenu.copyFailed", "Could not copy to clipboard"), "error");
+    });
+  }, [store, t]);
+  const copyRowSelectionText = useCallback(() => {
+    if (selectedRowIds.size === 0) return null;
+    const rowCount2 = store.getRowCount();
+    const lines = [];
+    for (let r = 0; r < rowCount2; r++) {
+      const rowData = store.getRowData(r);
+      if (!rowData) continue;
+      const id = String(rowData[selectionColumnName] ?? "");
+      if (!id || !selectedRowIds.has(id)) continue;
+      lines.push(cols.map((_, c) => String(store.getCellValue(r, c) ?? "")).join("	"));
+    }
+    return lines.length ? lines.join("\n") : null;
+  }, [store, selectedRowIds, selectionColumnName, cols]);
+  const handleCopied = useCallback((bounds) => {
+    if (bounds) store.setClipboardMarker({ mode: "copy", bounds });
+    flash(t("dynamicTable.cellMenu.copied", "Copied to clipboard"), "success");
+  }, [store, t]);
+  const handleCopy = useCopyHandler(store, tableRef, {
+    getFallbackText: copyRowSelectionText,
+    onCopy: handleCopied
+  });
+  const handleBulkCopy = useCallback(() => {
+    const text = copyRowSelectionText();
+    if (!text) return;
+    void navigator.clipboard?.writeText(text).then(() => flash(t("dynamicTable.cellMenu.copied", "Copied to clipboard"), "success")).catch(() => flash(t("dynamicTable.cellMenu.copyFailed", "Could not copy to clipboard"), "error"));
+  }, [copyRowSelectionText, t]);
+  const serializeAndDownload = useCallback(async (table, format) => {
+    if (table.rows.length === 0) {
+      flash(t("dynamicTable.export.empty", "No rows to export"), "info");
+      return;
+    }
+    const stem = exportFileName?.trim() || slugifyFileName(displayTableName);
+    try {
+      if (format === "csv") {
+        const blob = new Blob([toCsv(table)], { type: "text/csv;charset=utf-8" });
+        downloadBlob(blob, `${stem}.csv`);
+      } else {
+        const XLSX = await import("xlsx");
+        downloadBlob(toXlsxBlob(table, XLSX), `${stem}.xlsx`);
+      }
+      flash(t("dynamicTable.export.success", "Export ready"), "success");
+    } catch {
+      flash(t("dynamicTable.export.failed", "Could not export"), "error");
+    }
+  }, [exportFileName, displayTableName, t]);
+  const handleExportSelection = useCallback((format) => {
+    void serializeAndDownload(
+      extractExportRows(store, cols, selectedRowIds, selectionColumnName),
+      format
+    );
+  }, [serializeAndDownload, store, cols, selectedRowIds, selectionColumnName]);
+  const [isExportingAll, setIsExportingAll] = useState(false);
+  const handleExportAll = useCallback(async (format) => {
+    if (isExportingAll) return;
+    setIsExportingAll(true);
+    try {
+      const outcome = onExportAll ? await onExportAll() : data;
+      const counted = outcome != null && !Array.isArray(outcome) ? outcome : null;
+      const rows = counted ? counted.rows : outcome;
+      if (counted && !counted.complete) {
+        flash(
+          t(
+            "dynamicTable.export.incomplete",
+            "Export stopped early and was NOT saved \u2014 {reason}. Try again.",
+            { reason: counted.reason ?? "the full table could not be read" }
+          ),
+          "error"
+        );
+        return;
+      }
+      await serializeAndDownload(extractExportRowsFromData(rows ?? [], baseColumns), format);
+    } catch (err) {
+      const detail = err instanceof Error && err.message ? err.message : null;
+      flash(
+        detail ? t("dynamicTable.export.failedDetail", "Could not export \u2014 {detail}", { detail }) : t("dynamicTable.export.failed", "Could not export"),
+        "error"
+      );
+    } finally {
+      setIsExportingAll(false);
+    }
+  }, [isExportingAll, onExportAll, data, serializeAndDownload, baseColumns, t]);
+  const openAnnotateForSelection = useCallback(() => {
+    if (!enableComments || !commentsEntityType) return;
+    const bounds = store.getSelectionBounds();
+    if (!bounds) return;
+    const anchorCell = tableRef.current?.querySelector(
+      `td[data-row="${bounds.endRow}"][data-col="${bounds.endCol}"]`
+    );
+    const anchorRect = anchorCell?.getBoundingClientRect() ?? (() => {
+      const el = tableRef.current;
+      if (!el) return void 0;
+      const box = el.getBoundingClientRect();
+      const geo = columnVirtualizer.geometry;
+      const x = box.left + (geo.starts[bounds.endCol] ?? 0) - el.scrollLeft;
+      const y = box.top + bounds.endRow * dataRowHeight - el.scrollTop;
+      const width2 = store.getColumnWidth(bounds.endCol);
+      return new DOMRect(x, y, width2, dataRowHeight);
+    })();
+    const firstRowData = store.getRowData(bounds.startRow);
+    const firstCol = cols[bounds.startCol];
+    if (!firstRowData || !firstCol) return;
+    const firstTarget = resolveCommentTarget(firstRowData, firstCol);
+    if (!firstTarget.entityType || !firstTarget.rowId) return;
+    const isMultiCell = bounds.startRow !== bounds.endRow || bounds.startCol !== bounds.endCol;
+    if (isMultiCell) {
+      const bulkCells = collectBulkCells(bounds);
+      if (bulkCells.length > 1) {
+        setCommentDialog({
+          entityType: firstTarget.entityType,
+          rowId: firstTarget.rowId,
+          columnKey: firstCol.data,
+          columnTitle: firstCol.title || firstCol.data,
+          anchorRect,
+          bulkCells
+        });
+        return;
+      }
+    }
+    const annotation = annotations.get(annotationKey(firstTarget, firstCol.data));
+    setCommentDialog({
+      entityType: firstTarget.entityType,
+      rowId: firstTarget.rowId,
+      columnKey: firstCol.data,
+      columnTitle: firstCol.title || firstCol.data,
+      rowLabel: firstRowData.name || firstRowData.title || void 0,
+      annotationId: annotation?.id || null,
+      currentColor: annotation?.color || null,
+      anchorRect
+    });
+  }, [enableComments, commentsEntityType, store, cols, resolveCommentTarget, collectBulkCells, annotations, columnVirtualizer, dataRowHeight]);
+  const handleMouseUpWithMenu = useCallback(() => {
+    handleMouseUp();
+    const bounds = store.getSelectionBounds();
+    const isRange = !!bounds && (bounds.startRow !== bounds.endRow || bounds.startCol !== bounds.endCol);
+    if (isRange) applyRangePhase("committed");
+  }, [handleMouseUp, store, applyRangePhase]);
+  const fillStateRef = useRef(null);
+  const [pendingWrite, setPendingWrite] = useState(null);
+  const readFillSeed = useCallback(
+    (cells, seedColIndex) => {
+      const column = cols[seedColIndex];
+      const values = cells.map(({ row, col }) => {
+        const raw = store.getCellValue(row, col);
+        return cols[col]?.type === "boolean" ? Boolean(raw) : raw;
+      });
+      return { values, column };
+    },
+    [cols, store]
+  );
+  const paintFillPreview = useCallback(() => {
+    const fs = fillStateRef.current;
+    if (!fs) return;
+    const geometry = computeFillPreview(fs.source, fs.pointer, {
+      modifier: false,
+      defaultMode: "series"
+    });
+    const [firstLine] = buildFillLines(geometry);
+    let defaultMode = "copy";
+    if (firstLine && firstLine.seedCells.length > 0) {
+      defaultMode = detectFillPattern(readFillSeed(firstLine.seedCells, firstLine.seedCol)).defaultMode;
+    }
+    const mode = fs.modifier ? invertFillMode(defaultMode) : defaultMode;
+    store.setFillPreview({ ...geometry, mode });
+  }, [store, readFillSeed]);
+  const handleFillMouseDown = useCallback((e) => {
+    if (!enableFillHandle) return false;
+    if (!e.target.closest("[data-fill-handle]")) return false;
+    const bounds = store.getSelectionBounds();
+    if (!bounds) return false;
+    const anyFillable = (() => {
+      for (let c = bounds.startCol; c <= bounds.endCol; c++) {
+        const col = cols[c];
+        if (col && !col.readOnly && !col.disableFill) return true;
+      }
+      return false;
+    })();
+    if (!anyFillable) return false;
+    fillStateRef.current = {
+      source: bounds,
+      pointer: { row: bounds.endRow, col: bounds.endCol },
+      modifier: e.altKey || e.ctrlKey
+    };
+    paintFillPreview();
+    e.preventDefault();
+    return true;
+  }, [enableFillHandle, store, cols, paintFillPreview]);
+  const handleFillMouseMove = useCallback((e) => {
+    const fs = fillStateRef.current;
+    if (!fs) return;
+    const cell = document.elementFromPoint(e.clientX, e.clientY)?.closest("td");
+    if (!cell) return;
+    if (cell.hasAttribute("data-row-header") || cell.hasAttribute("data-actions-cell")) return;
+    const row = parseInt(cell.getAttribute("data-row") || "", 10);
+    const col = parseInt(cell.getAttribute("data-col") || "", 10);
+    if (Number.isNaN(row) || Number.isNaN(col)) return;
+    if (col < 0 || col >= cols.length) return;
+    fs.pointer = { row, col };
+    fs.modifier = e.altKey || e.ctrlKey;
+    paintFillPreview();
+  }, [cols, paintFillPreview]);
+  const [writeRevision, setWriteRevision] = useState(0);
+  const writeCells = useCallback(
+    (writes, origin, respectDisableFill) => {
+      const report = applyCellWrites(
+        {
+          store,
+          columns: cols,
+          handleCellSave,
+          coerce: coerceCellValue,
+          element: tableRef.current,
+          idColumnName
+        },
+        writes,
+        { origin, respectDisableFill }
+      );
+      if (report.written > 0) setWriteRevision((n) => n + 1);
+      return report;
+    },
+    [store, cols, handleCellSave, idColumnName, tableRef]
+  );
+  const reportWrite = useCallback((report) => {
+    if (report.rejected.length === 0) {
+      if (report.written > 0) {
+        const applied = report.origin === "cut" ? t("dynamicTable.cut.done", "Cut {count} cells", { count: report.written }) : report.origin === "clear" ? t("dynamicTable.clear.done", "Cleared {count} cells", { count: report.written }) : t("dynamicTable.write.applied", "Updated {count} cells", { count: report.written });
+        flash(applied, "success");
+      }
+      return;
+    }
+    const parts = [];
+    const r = report.rejectedByReason;
+    if (r.readOnly) parts.push(t("dynamicTable.write.rejectedReadOnly", "{count} read-only", { count: r.readOnly }));
+    if (r.notCoercible) parts.push(t("dynamicTable.write.rejectedNotCoercible", "{count} wrong type", { count: r.notCoercible }));
+    if (r.notInSource) parts.push(t("dynamicTable.write.rejectedNotInSource", "{count} not an allowed value", { count: r.notInSource }));
+    if (r.required) parts.push(t("dynamicTable.write.rejectedRequired", "{count} required", { count: r.required }));
+    if (r.outOfRange) parts.push(t("dynamicTable.write.rejectedOutOfRange", "{count} outside the table", { count: r.outOfRange }));
+    flash(
+      t("dynamicTable.write.partial", "Updated {written} cells; skipped {skipped} ({reasons})", {
+        written: report.written,
+        skipped: report.rejected.length,
+        reasons: parts.join(", ")
+      }),
+      report.written > 0 ? "info" : "error"
+    );
+  }, [t]);
+  const submitWrites = useCallback((writes, origin) => {
+    if (writes.length === 0) return;
+    if (writes.length > fillConfirmThreshold) {
+      setPendingWrite({ writes, origin });
+      return;
+    }
+    reportWrite(writeCells(writes, origin));
+  }, [fillConfirmThreshold, reportWrite, writeCells]);
+  const commitFill = useCallback(() => {
+    const fs = fillStateRef.current;
+    if (!fs) return;
+    fillStateRef.current = null;
+    const preview = store.getFillPreview();
+    if (!preview) {
+      store.setFillPreview(null);
+      return;
+    }
+    if (preview.clearing && preview.cleared) {
+      const writes2 = cellsInRect(preview.cleared).map(({ row, col }) => ({
+        row,
+        col,
+        value: null
+      }));
+      if (writes2.length === 0) {
+        store.setFillPreview(null);
+        return;
+      }
+      if (writes2.length > fillConfirmThreshold) {
+        setPendingWrite({ writes: writes2, origin: "clear", respectDisableFill: true });
+        return;
+      }
+      reportWrite(writeCells(writes2, "clear", true));
+      store.setFillPreview(null);
+      return;
+    }
+    const writes = [];
+    for (const line of buildFillLines(preview)) {
+      if (line.targets.length === 0) continue;
+      const seed = readFillSeed(line.seedCells, line.seedCol);
+      const pattern = detectFillPattern(seed);
+      const mode = fs.modifier ? invertFillMode(pattern.defaultMode) : pattern.defaultMode;
+      const values = generateFill(seed, line.targets.length, preview.backwards ? -1 : 1, mode);
+      line.targets.forEach((cell, i) => {
+        writes.push({ row: cell.row, col: cell.col, value: values[i] });
+      });
+    }
+    if (writes.length === 0) {
+      store.setFillPreview(null);
+      return;
+    }
+    if (writes.length > fillConfirmThreshold) {
+      setPendingWrite({ writes, origin: "fill" });
+      return;
+    }
+    reportWrite(writeCells(writes, "fill"));
+    store.setFillPreview(null);
+  }, [store, fillConfirmThreshold, writeCells, reportWrite, readFillSeed]);
+  const confirmPendingWrite = useCallback(() => {
+    if (pendingWrite) {
+      reportWrite(
+        writeCells(pendingWrite.writes, pendingWrite.origin, pendingWrite.respectDisableFill)
+      );
+    }
+    setPendingWrite(null);
+    store.setFillPreview(null);
+  }, [pendingWrite, writeCells, reportWrite, store]);
+  const cancelPendingWrite = useCallback(() => {
+    setPendingWrite(null);
+    store.setFillPreview(null);
+  }, [store]);
+  const scrollToCell = useCallback((row, col) => {
+    const groupKey = groupingResult.groupKeyOfDataIndex(row);
+    if (groupKey && groupingResult.collapsedGroups.has(groupKey)) {
+      groupingResult.toggleGroup(groupKey);
+    }
+    const visualIndex = groupingResult.visualRows ? groupingResult.dataIndexToVisualIndex(row) : row;
+    rowVirtualizer.scrollToIndex(visualIndex, { align: "center" });
+    columnVirtualizerRef.current.scrollToColumn(col, { align: "auto" });
+  }, [groupingResult, rowVirtualizer]);
+  const handleSearchWholeDataset = useCallback((query) => {
+    if (!tableRef.current) return;
+    dispatch(tableRef.current, TableEvents.SEARCH, { query, timestamp: Date.now() });
+  }, [tableRef]);
+  const handleClearSearch = useCallback(() => {
+    handleSearchWholeDataset("");
+  }, [handleSearchWholeDataset]);
+  const handlePaste = useCallback((e) => {
+    const container = tableRef.current;
+    if (!container || !(e.target instanceof Node) || !container.contains(e.target)) return;
+    if (store.getEditingCell()) return;
+    const bounds = store.getSelectionBounds();
+    if (!bounds) return;
+    const grid = parseClipboardGrid({
+      html: e.clipboardData?.getData("text/html"),
+      text: e.clipboardData?.getData("text/plain")
+    });
+    if (grid.source === "empty") {
+      flash(t("dynamicTable.paste.empty", "The clipboard has nothing to paste"), "info");
+      return;
+    }
+    e.preventDefault();
+    const selRows = bounds.endRow - bounds.startRow + 1;
+    const selCols = bounds.endCol - bounds.startCol + 1;
+    const tile = selRows >= grid.rowCount && selCols >= grid.colCount && selRows % grid.rowCount === 0 && selCols % grid.colCount === 0;
+    const spanRows = tile ? selRows : grid.rowCount;
+    const spanCols = tile ? selCols : grid.colCount;
+    const writes = [];
+    for (let dr = 0; dr < spanRows; dr++) {
+      for (let dc = 0; dc < spanCols; dc++) {
+        writes.push({
+          row: bounds.startRow + dr,
+          col: bounds.startCol + dc,
+          value: grid.rows[dr % grid.rowCount]?.[dc % grid.colCount] ?? ""
+        });
+      }
+    }
+    submitWrites(writes, "paste");
+    store.setClipboardMarker(null);
+  }, [store, tableRef, submitWrites, t]);
+  const rectWrites = useCallback((bounds, value) => {
+    const writes = [];
+    for (let r = bounds.startRow; r <= bounds.endRow; r++) {
+      for (let c = bounds.startCol; c <= bounds.endCol; c++) {
+        writes.push({ row: r, col: c, value });
+      }
+    }
+    return writes;
+  }, []);
+  const clearSelectionContents = useCallback(() => {
+    const bounds = store.getSelectionBounds();
+    if (!bounds) return false;
+    submitWrites(rectWrites(bounds, null), "clear");
+    return true;
+  }, [store, rectWrites, submitWrites]);
+  const handleCut = useCallback((e) => {
+    const container = tableRef.current;
+    if (!container || !(e.target instanceof Node) || !container.contains(e.target)) return;
+    if (store.getEditingCell()) return;
+    const bounds = store.getSelectionBounds();
+    const cells = store.getCellsInSelection();
+    if (!bounds || cells.length === 0 || !e.clipboardData) return;
+    e.clipboardData.setData("text/plain", selectionToTsv(cells, bounds));
+    e.preventDefault();
+    submitWrites(rectWrites(bounds, null), "cut");
+    store.setClipboardMarker({ mode: "cut", bounds });
+  }, [store, tableRef, rectWrites, submitWrites]);
+  const applyUndoEntry = useCallback((entry, useOldValue) => {
+    store.setUndoSuppressed(true);
+    try {
+      for (const ch of entry.changes) {
+        const rowIdx = store.findRowIndexById(idColumnName, ch.rowId);
+        const colIdx = cols.findIndex((c) => c.data === ch.colKey);
+        if (rowIdx >= 0 && colIdx >= 0) {
+          handleCellSave(rowIdx, colIdx, useOldValue ? ch.oldValue : ch.newValue, false);
+        }
+      }
+    } finally {
+      store.setUndoSuppressed(false);
+    }
+  }, [store, cols, idColumnName, handleCellSave]);
+  const undo = useCallback(() => {
+    const entry = store.popUndo();
+    if (!entry) return;
+    applyUndoEntry(entry, true);
+    store.pushRedo(entry);
+    flash(t("dynamicTable.undo.undone", "Undone"), "info");
+  }, [store, applyUndoEntry, t]);
+  const redo = useCallback(() => {
+    const entry = store.popRedo();
+    if (!entry) return;
+    applyUndoEntry(entry, false);
+    store.pushUndo(entry);
+    flash(t("dynamicTable.undo.redone", "Redone"), "info");
+  }, [store, applyUndoEntry, t]);
+  const handleMenuActionClick = useCallback((actionId) => {
+    if (actionId === SELECTION_COPY_ID) {
+      copySelectionToClipboard();
+      setContextMenu(null);
+      clearSelectionAnimated();
+      return;
+    }
+    if (actionId === SELECTION_ANNOTATE_ID) {
+      openAnnotateForSelection();
+      setContextMenu(null);
+      return;
+    }
+    handleContextMenuAction(actionId);
+  }, [copySelectionToClipboard, openAnnotateForSelection, handleContextMenuAction, clearSelectionAnimated]);
+  const handleCellContextMenu = useCallback((e, rowIndex, colIndex) => {
+    const rowData = store.getRowData(rowIndex);
+    const col = cols[colIndex];
+    if (!col) return;
+    const bounds = store.getSelectionBounds();
+    const insideSelection = !!bounds && rowIndex >= bounds.startRow && rowIndex <= bounds.endRow && colIndex >= bounds.startCol && colIndex <= bounds.endCol;
+    if (!insideSelection) {
+      store.setSelection({ type: "range", anchor: { row: rowIndex, col: colIndex }, focus: { row: rowIndex, col: colIndex } });
+    }
+    const actions = [
+      { id: SELECTION_COPY_ID, label: t("dynamicTable.cellMenu.copy", "Copy") }
+    ];
+    if (enableComments && commentsEntityType) {
+      actions.push({ id: SELECTION_ANNOTATE_ID, label: t("dynamicTable.cellMenu.annotate", "Comment / colour") });
+    }
+    if (cellActions) actions.push(...cellActions(rowData, col, rowIndex, colIndex));
+    e.preventDefault();
+    setContextMenu({ isOpen: true, position: { x: e.clientX, y: e.clientY }, actions, type: "cell", index: rowIndex, colIndex });
+  }, [cellActions, store, cols, enableComments, commentsEntityType, t]);
+  const handleCommentDialogClose = useCallback(() => {
+    setCommentDialog(null);
+    clearSelectionAnimated();
+  }, [clearSelectionAnimated]);
+  const handleKeyDown = useCallback((e) => {
+    const key = e.key.toLowerCase();
+    const metaOrCtrl = e.ctrlKey || e.metaKey;
+    if (e.key === "F2" && e.shiftKey && enableComments && commentsEntityType) {
+      if (!isTextEntryTarget(e.target) && !store.getEditingCell()) {
+        e.preventDefault();
+        openAnnotateForSelection();
+        return;
+      }
+    }
+    if (metaOrCtrl && (key === "z" || key === "y")) {
+      const isTextEntry = isTextEntryTarget(e.target);
+      if (!isTextEntry && !store.getEditingCell()) {
+        e.preventDefault();
+        if (key === "y" || key === "z" && e.shiftKey) redo();
+        else undo();
+        return;
+      }
+    }
+    const isDeleteCombo = e.key.toLowerCase() === "d" && (e.ctrlKey || e.metaKey);
+    if (isDeleteCombo && selectable && onBulkDelete && selectedRowIds.size > 0) {
+      if (!isTextEntryTarget(e.target) && !store.getEditingCell()) {
+        e.preventDefault();
+        void handleBulkDelete();
+        return;
+      }
+    }
+    if ((e.key === "Delete" || e.key === "Backspace") && !metaOrCtrl && !e.altKey) {
+      if (!isTextEntryTarget(e.target) && !store.getEditingCell()) {
+        if (clearSelectionContents()) {
+          e.preventDefault();
+          return;
+        }
+      }
+    }
+    if (e.key === "Escape" && !store.getEditingCell() && store.getClipboardMarker()) {
+      e.preventDefault();
+      store.setClipboardMarker(null);
+      return;
+    }
+    if (e.key === "Enter" && !e.shiftKey && !metaOrCtrl && !store.getEditingCell()) {
+      const b = store.getSelectionBounds();
+      if (b && b.startRow === b.endRow && b.startCol === b.endCol && !columnMountsEditor(cols[b.startCol])) {
+        e.preventDefault();
+        flash(
+          t("dynamicTable.cell.readOnlyColumn", '"{column}" is read-only', {
+            column: String(cols[b.startCol]?.title ?? cols[b.startCol]?.data ?? "")
+          }),
+          "info"
+        );
+        return;
+      }
+    }
+    if (shortcutHandler(e.nativeEvent)) return;
+    keyboardHandler(e.nativeEvent);
+  }, [keyboardHandler, shortcutHandler, selectable, onBulkDelete, selectedRowIds, store, handleBulkDelete, undo, redo, clearSelectionContents, enableComments, commentsEntityType, openAnnotateForSelection, cols, t]);
+  const handleFocus = useCallback(() => {
+    const direction = tableRef.current?.getAttribute("data-focus-direction");
+    const trigger = tableRef.current?.getAttribute("data-focus-trigger");
+    if (direction) tableRef.current?.removeAttribute("data-focus-direction");
+    if (trigger) tableRef.current?.removeAttribute("data-focus-trigger");
+    if (store.getRowCount() === 0) {
+      if (trigger === "tab") {
+        const nextSibling = direction === "up" ? siblingTableRefs?.prev?.current : siblingTableRefs?.next?.current;
+        if (nextSibling) {
+          nextSibling.setAttribute("data-focus-direction", direction || "down");
+          nextSibling.setAttribute("data-focus-trigger", "tab");
+          nextSibling.focus();
+        }
+      }
+      return;
+    }
+    if (!autoSelectOnFocus || store.getSelection().anchor) return;
+    const rowCount2 = store.getRowCount();
+    const targetRow = direction === "up" ? rowCount2 - 1 : 0;
+    store.setSelection({
+      type: "range",
+      anchor: { row: targetRow, col: 0 },
+      focus: { row: targetRow, col: 0 }
+    });
+  }, [autoSelectOnFocus, store, tableRef, siblingTableRefs]);
+  const isInsideExternalDialog = useCallback((el) => {
+    const dialog = el.closest('[role="dialog"]');
+    if (!dialog) return false;
+    return !dialog.contains(tableRef?.current);
+  }, [tableRef]);
+  const handleBlur = useCallback((e) => {
+    const relatedTarget = e.relatedTarget;
+    if (!relatedTarget) return;
+    if (tableRef?.current?.contains(relatedTarget)) return;
+    if (relatedTarget.closest("[data-radix-popper-content-wrapper]") || relatedTarget.closest(".hot-editor-popup") || relatedTarget.closest(".hot-context-menu") || relatedTarget.closest(".context-menu") || // The find-and-replace bar renders OUTSIDE the grid container (it has
+    // grid. Without this exemption, clicking into it would clear the very
+    // selection the active match just established.
+    relatedTarget.closest(".hot-comment-popover")) return;
+    if (isInsideExternalDialog(relatedTarget)) return;
+    store.clearEditing();
+    clearSelectionAnimated();
+  }, [store, tableRef, isInsideExternalDialog, clearSelectionAnimated]);
+  const handleEnterFullscreen = () => {
+    setIsFullscreen(true);
+    onFullscreenChange?.(true);
+  };
+  const handleExitFullscreen = () => {
+    setIsFullscreen(false);
+    onFullscreenChange?.(false);
+  };
+  useEffect(() => {
+    store.setTableRef(tableRef);
+  }, [store, tableRef]);
+  useEffect(() => {
+    if (store.hasNewRows()) return;
+    store.setData(data);
+  }, [data, store]);
+  useEffect(() => {
+    store.setColumns(cols);
+  }, [cols, store]);
+  const { persistResize } = useColumnWidthPersistence({ tableId, store, cols, userResizedColsRef });
+  persistColumnWidthRef.current = persistResize;
+  useEffect(() => {
+    return store.subscribeToStore(() => {
+      setRowCount(store.getRowCount());
+      setStoreRevision((prev) => prev + 1);
+    });
+  }, [store]);
+  useEffect(() => {
+    const root = tableRef.current;
+    if (!root) return;
+    const raf = requestAnimationFrame(() => {
+      const cache = badgeFitRef.current;
+      root.querySelectorAll("td.hot-cell .cell-badge").forEach((badge) => {
+        const td = badge.closest("td[data-col]");
+        if (!td) return;
+        const colIndex = parseInt(td.getAttribute("data-col") || "", 10);
+        const key = cols[colIndex]?.data;
+        if (!key) return;
+        const hasComment = td.getAttribute("data-has-comment") === "true";
+        recordBadgeFit(cache, key, badgeFitWidth(badge.scrollWidth, hasComment));
+      });
+      planBadgeWidths(
+        cache,
+        cols,
+        // The DECLARED width, never the painted one: the fill surplus is not
+        // the column's own width, and comparing against it would let a badge
+        // stay clipped the moment the container narrows and the surplus goes.
+        (col) => store.getBaseColumnWidth(col),
+        (col) => userResizedColsRef.current.has(col)
+      ).forEach(({ col, width: width2 }) => store.setColumnWidth(col, width2));
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [data, cols, store, tableRef, annotations]);
+  useEffect(() => {
+    if (!highlightedRowId || !tableRef?.current) return;
+    const rowIndex = data.findIndex((row) => row[idColumnName] === highlightedRowId);
+    if (rowIndex === -1) return;
+    rowVirtualizer.scrollToIndex(rowIndex, { align: "center", behavior: "smooth" });
+  }, [highlightedRowId, data, idColumnName, rowVirtualizer]);
+  useEffect(() => {
+    document.addEventListener("copy", handleCopy);
+    return () => document.removeEventListener("copy", handleCopy);
+  }, [handleCopy]);
+  useEffect(() => {
+    document.addEventListener("cut", handleCut);
+    return () => document.removeEventListener("cut", handleCut);
+  }, [handleCut]);
+  useEffect(() => {
+    document.addEventListener("paste", handlePaste);
+    return () => document.removeEventListener("paste", handlePaste);
+  }, [handlePaste]);
+  useEffect(() => {
+    const handleGlobalMouseUp = () => {
+      if (fillStateRef.current) {
+        commitFill();
+      }
+      if (dragStateRef.current.isDragging) {
+        dragHandlers.handleDragEnd();
+      }
+    };
+    document.addEventListener("mouseup", handleGlobalMouseUp);
+    return () => document.removeEventListener("mouseup", handleGlobalMouseUp);
+  }, [dragHandlers, commitFill]);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      if (tableRef?.current?.contains(target)) {
+        return;
+      }
+      if (target.closest("[data-radix-popper-content-wrapper]") || target.closest(".hot-context-menu") || target.closest(".context-menu") || target.closest(".hot-comment-popover") || document.querySelector(".hot-editor-popup")) {
+        return;
+      }
+      if (isInsideExternalDialog(target)) {
+        return;
+      }
+      const editingCell = store.getEditingCell();
+      if (editingCell) {
+        setTimeout(() => {
+          store.clearEditing();
+          clearSelectionAnimated();
+        }, 0);
+      } else {
+        store.clearEditing();
+        clearSelectionAnimated();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [store, tableRef, isInsideExternalDialog, clearSelectionAnimated]);
+  useEffect(() => {
+    if (!tableRef?.current) return;
+    dispatch(
+      tableRef.current,
+      TableEvents.FILTER_CHANGE,
+      { filters, savedFilterId: activePerspectiveId }
+    );
+  }, [filters, activePerspectiveId, tableRef]);
+  useEffect(() => {
+    if (!tableRef?.current) return;
+    dispatch(
+      tableRef.current,
+      TableEvents.PERSPECTIVE_CHANGE,
+      {
+        config: {
+          columns: { visible: visibleColumns, hidden: hiddenColumns },
+          filters,
+          sorting: sortRules,
+          grouping: groupRules,
+          aggregations,
+          lookupColumns,
+          rollupColumns,
+          formulas,
+          conditionalFormats,
+          dateFormat,
+          viewMode
+        }
+      }
+    );
+  }, [visibleColumns, hiddenColumns, filters, sortRules, groupRules, aggregations, lookupColumns, rollupColumns, formulas, conditionalFormats, dateFormat, viewMode, tableRef]);
+  useEventHandlers({
+    [TableEvents.CELL_SAVE_START]: (payload) => {
+      store.setSaveState(payload.rowIndex, payload.colIndex, "saving");
+    },
+    [TableEvents.CELL_SAVE_SUCCESS]: (payload) => {
+      store.setSaveState(payload.rowIndex, payload.colIndex, "success");
+      setTimeout(() => store.setSaveState(payload.rowIndex, payload.colIndex, null), 2e3);
+    },
+    [TableEvents.CELL_SAVE_ERROR]: (payload) => {
+      store.setSaveState(payload.rowIndex, payload.colIndex, "error");
+      setTimeout(() => store.setSaveState(payload.rowIndex, payload.colIndex, null), 3e3);
+    },
+    [TableEvents.NEW_ROW_SAVE_SUCCESS]: (payload) => {
+      store.markRowAsSaved(payload.rowIndex, payload.savedRowData);
+    },
+    [TableEvents.NEW_ROW_SAVE_ERROR]: (payload) => {
+      console.error("Failed to save new row:", payload.error);
+      if (store.isNewRow(payload.rowIndex)) {
+        store.setSaveState(payload.rowIndex, 0, "error");
+        setTimeout(() => store.setSaveState(payload.rowIndex, 0, null), 3e3);
+        store.setEditingCell(payload.rowIndex, 0);
+      }
+    }
+  }, tableRef);
+  const shouldFillHeight = height === "100%" || height === "fill";
+  const isViewportFill = height === "fill";
+  const outerContainerRef = useRef(null);
+  const [fillHeight, setFillHeight] = useState(null);
+  useLayoutEffect(() => {
+    if (!isViewportFill || isFullscreen) return;
+    const el = outerContainerRef.current;
+    if (!el) return;
+    let scrollPane = el.parentElement;
+    while (scrollPane && scrollPane !== document.body) {
+      const oy = getComputedStyle(scrollPane).overflowY;
+      if (oy === "auto" || oy === "scroll") break;
+      scrollPane = scrollPane.parentElement;
+    }
+    const measure = () => {
+      const rect = el.getBoundingClientRect();
+      const paneBottom = scrollPane && scrollPane !== document.body ? Math.min(window.innerHeight, Math.round(scrollPane.getBoundingClientRect().top) + scrollPane.clientHeight) : window.innerHeight;
+      setFillHeight(Math.max(Math.floor(paneBottom - rect.top), 200));
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    const ro = new ResizeObserver(measure);
+    if (scrollPane && scrollPane !== document.body) ro.observe(scrollPane);
+    return () => {
+      window.removeEventListener("resize", measure);
+      ro.disconnect();
+    };
+  }, [isViewportFill, isFullscreen]);
+  const tableContent = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: outerContainerRef,
+      className: `hot-container ${shouldFillHeight ? "flex flex-col flex-1" : ""}${borderless ? " hot-borderless" : ""} hot-appearance-v2`,
+      "data-range-phase": rangePhase === "idle" ? void 0 : rangePhase,
+      "data-readonly-style": readOnlyStyle,
+      "data-density": density || void 0,
+      ...densityAttribute,
+      "data-striped": striped ? "true" : void 0,
+      "data-actions-scroll-shadow": actionsScrollShadow ? "true" : void 0,
+      "data-firstcol-scroll-shadow": firstColScrollShadow ? "true" : void 0,
+      "data-frozen-shadow": frozenColShadow ? "true" : void 0,
+      "data-clickable-rows": onRowClick ? "true" : void 0,
+      "data-row-hover-style": onRowClick ? rowHoverStyle : void 0,
+      style: {
+        height: isFullscreen ? "100%" : isViewportFill && fillHeight ? fillHeight : shouldFillHeight ? "100%" : height,
+        width: isFullscreen ? "100%" : width,
+        position: "relative",
+        ...shouldFillHeight && { minHeight: 0 }
+      },
+      children: [
+        !hideToolbar && topBarStart && !hidePerspectiveTabs && /* @__PURE__ */ jsx("div", { className: "hot-toolbar-lead-row", children: topBarStart }),
+        /* @__PURE__ */ jsxs("div", { className: hidePerspectiveTabs ? "contents" : `hot-card${shouldFillHeight ? " flex flex-col flex-1 min-h-0" : ""}`, children: [
+          !hideToolbar && /* @__PURE__ */ jsxs("div", { className: "hot-toolbar", children: [
+            hidePerspectiveTabs && topBarStart,
+            !hideTitle && /* @__PURE__ */ jsx("h3", { className: "hot-toolbar-title", children: displayTableName }),
+            !hideSearch && /* @__PURE__ */ jsx(
+              SearchBar,
+              {
+                tableRef,
+                placeholder: searchPlaceholder ?? "Search...",
+                debounceMs: searchDebounceMs,
+                renderSuggestions: searchSuggestions
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "hot-toolbar-spacer" }),
+            /* @__PURE__ */ jsxs("div", { className: "hot-toolbar-actions", children: [
+              /* @__PURE__ */ jsx(
+                ActiveFilterChips,
+                {
+                  filters,
+                  columns: baseColumns,
+                  onRemove: (filterId) => handleFiltersChange(filters.filter((f) => f.id !== filterId))
+                }
+              ),
+              filters.length > 0 && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "hot-clear-filters-btn",
+                  onClick: () => handleFiltersChange([]),
+                  title: t(
+                    "dynamicTable.quickFilter.clearAllHint",
+                    "These filters are temporary and are not saved with the view"
+                  ),
+                  "data-clear-all-filters": "",
+                  children: [
+                    /* @__PURE__ */ jsx(FunnelX, { className: "w-3.5 h-3.5", "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-body-regular-xs", children: t("dynamicTable.quickFilter.clearAll", "Clear all filters ({count})", {
+                      count: filters.length
+                    }) })
+                  ]
+                }
+              ),
+              typeof searchBarStart === "function" ? searchBarStart({ data, filters, setFilters: handleFiltersChange }) : searchBarStart,
+              !hideAddRowButton && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleAddRow,
+                  className: "hot-add-row-btn",
+                  title: "Add new row",
+                  children: "+"
+                }
+              ),
+              searchBarEnd,
+              viewModes && viewModes.length > 1 && /* @__PURE__ */ jsx(
+                ViewModeSwitch,
+                {
+                  options: viewModes,
+                  value: viewMode,
+                  onChange: handleViewModeChange
+                }
+              ),
+              expandToolbarActions ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                !hideExportButton && /* @__PURE__ */ jsx(ExportMenu, { variant: "toolbar", onExport: handleExportAll, disabled: isExportingAll }),
+                !hideDensityControl && /* @__PURE__ */ jsx(DensityControl, { variant: "toolbar", tableKey: tableId }),
+                enableFullscreen && !isFullscreen && /* @__PURE__ */ jsx("button", { onClick: handleEnterFullscreen, className: "fullscreen-toggle-btn", title: "Enter fullscreen", children: /* @__PURE__ */ jsx(Maximize2, { className: "w-4 h-4" }) })
+              ] }) : /* @__PURE__ */ jsx(
+                ToolbarOverflow,
+                {
+                  onExport: hideExportButton ? void 0 : handleExportAll,
+                  exportDisabled: isExportingAll,
+                  showDensity: !hideDensityControl,
+                  densityTableKey: tableId,
+                  onFullscreen: enableFullscreen && !isFullscreen ? handleEnterFullscreen : void 0,
+                  extras: toolbarOverflowExtras
+                }
+              )
+            ] }),
+            topBarEnd
+          ] }),
+          (!hidePerspectiveTabs || pagination && !hidePagination) && /* @__PURE__ */ jsxs("div", { className: "hot-tabs-row", children: [
+            !hidePerspectiveTabs && /* @__PURE__ */ jsx(
+              PerspectiveTabs,
+              {
+                savedPerspectives,
+                activePerspectiveId,
+                onPerspectiveSelect: handlePerspectiveSelect,
+                onPerspectiveRename: handlePerspectiveRename,
+                onPerspectiveDelete: handlePerspectiveDelete,
+                onPerspectiveDuplicate: handlePerspectiveDuplicate,
+                onPerspectiveSetDefault: handlePerspectiveSetDefault,
+                defaultPerspectiveId,
+                sharedTemplates,
+                publishableRoles: canPublishTemplates ? publishableRoles : void 0,
+                onPerspectivePublish: canPublishTemplates ? handlePerspectivePublish : void 0,
+                onPerspectiveTemplateCopy: handlePerspectiveTemplateCopy,
+                onPerspectiveEdit: (id) => {
+                  handlePerspectiveSelect(id);
+                  setEditingPerspectiveId(id);
+                  setConfigureBaseView(false);
+                  setConfigPanelInitialSection(null);
+                  setConfigPanelOpen(true);
+                },
+                onConfigureBaseView: () => {
+                  setEditingPerspectiveId(null);
+                  setConfigureBaseView(true);
+                  setConfigPanelInitialSection(null);
+                  setConfigPanelOpen(true);
+                },
+                onBaseViewReset: handleBaseViewReset,
+                onAddPerspective: () => {
+                  setEditingPerspectiveId(null);
+                  setConfigureBaseView(false);
+                  setConfigPanelInitialSection(null);
+                  setConfigPanelOpen(true);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "hot-tabs-row-spacer" }),
+            pagination && !hidePagination && /* @__PURE__ */ jsx(TablePagination, { pagination })
+          ] }),
+          loadError && rowCount > 0 && /* @__PURE__ */ jsx(StaleDataBar, { tableName, onRetry: onRetryLoad }),
+          selectable && (() => {
+            const bulkBarOpen = selectedRowIds.size >= 1;
+            if (bulkBarOpen) bulkBarCountRef.current = selectedRowIds.size;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `hot-bulk-bar-wrap${bulkBarOpen ? " is-open" : ""}`,
+                "aria-hidden": !bulkBarOpen,
+                children: /* @__PURE__ */ jsx("div", { className: "hot-bulk-bar-inner", children: /* @__PURE__ */ jsx(
+                  BulkActionsBar,
+                  {
+                    count: bulkBarOpen ? selectedRowIds.size : bulkBarCountRef.current,
+                    busy: isBulkDeleting,
+                    onCopy: handleBulkCopy,
+                    onDelete: onBulkDelete ? handleBulkDelete : void 0,
+                    onExport: hideExportButton ? void 0 : handleExportSelection,
+                    onClear: clearSelection,
+                    actions: bulkActions,
+                    selectedIds: Array.from(selectedRowIds)
+                  }
+                ) })
+              }
+            );
+          })(),
+          beforeBody ? /* @__PURE__ */ jsx("div", { className: "hot-before-body", children: typeof beforeBody === "function" ? beforeBody({ data, filters, setFilters: handleFiltersChange }) : beforeBody }) : null,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: tableRef,
+              tabIndex: usingCustomBody ? void 0 : 0,
+              "data-fill-enabled": !usingCustomBody && enableFillHandle ? "true" : void 0,
+              "data-dt-columns": cols.length,
+              "data-dt-rows": data.length,
+              "data-column-window": `${columnVirtualizer.startIndex}:${columnVirtualizer.endIndex}`,
+              "data-column-virtualized": columnVirtualizer.virtualized ? "true" : void 0,
+              role: usingCustomBody ? "presentation" : "grid",
+              "aria-colcount": usingCustomBody ? void 0 : columnVirtualizer.ariaColCount,
+              "aria-rowcount": usingCustomBody ? void 0 : virtualizerCount,
+              className: `hot-virtual-container ${shouldFillHeight ? "flex-1" : ""}${usingCustomBody ? " hot-custom-body" : ""}`,
+              onFocus: usingCustomBody ? void 0 : handleFocus,
+              onBlur: usingCustomBody ? void 0 : handleBlur,
+              onClick: usingCustomBody ? void 0 : (e) => {
+                handleTableClick(e);
+              },
+              onMouseDown: usingCustomBody ? void 0 : (e) => {
+                if (e.target.closest("tr[data-group-header]")) return;
+                if (handleCommentMouseDown(e)) return;
+                if (handleFillMouseDown(e)) return;
+                if (rangePhaseRef.current !== "idle") applyRangePhase("idle");
+                setContextMenu(null);
+                handleMouseDown(e);
+                const editingCell = store.getEditingCell();
+                if (editingCell) {
+                  const cell = e.target.closest("td");
+                  const clickRow = parseInt(cell?.getAttribute("data-row") || "", 10);
+                  const clickCol = parseInt(cell?.getAttribute("data-col") || "", 10);
+                  if (clickRow === editingCell.row && clickCol === editingCell.col) {
+                    return;
+                  }
+                }
+                tableRef.current?.focus({ preventScroll: true });
+              },
+              onMouseMove: usingCustomBody ? void 0 : (e) => {
+                if (fillStateRef.current) {
+                  handleFillMouseMove(e);
+                  return;
+                }
+                handleMouseMove(e);
+              },
+              onMouseUp: usingCustomBody ? void 0 : () => {
+                if (fillStateRef.current) {
+                  commitFill();
+                  return;
+                }
+                handleMouseUpWithMenu();
+              },
+              onMouseOver: usingCustomBody ? void 0 : (e) => {
+                handleCellHoverOver(e);
+                handleCommentHoverOver(e);
+              },
+              onMouseOut: usingCustomBody ? void 0 : handleCommentHoverOut,
+              onMouseLeave: usingCustomBody ? void 0 : () => store.setHoveredCell(null),
+              onDoubleClick: usingCustomBody ? void 0 : handleDoubleClick,
+              onKeyDown: usingCustomBody ? void 0 : handleKeyDown,
+              style: {
+                height: isFullscreen ? "calc(100% - 90px)" : shouldFillHeight ? void 0 : typeof height === "string" && height !== "auto" ? height : "600px",
+                overflow: "auto",
+                position: "relative",
+                outline: "none",
+                ...shouldFillHeight && { minHeight: 0 }
+              },
+              children: usingCustomBody ? renderBody({
+                data,
+                columns: cols,
+                visualRows: groupingResult.visualRows,
+                groupRules,
+                collapsedGroups: groupingResult.collapsedGroups,
+                toggleGroup: groupingResult.toggleGroup,
+                selectedRowIds,
+                rowKeyColumn: selectionColumnName,
+                selectable,
+                toggleRowSelect: handleToggleRowSelect,
+                toggleGroupSelect: handleToggleGroupSelect,
+                clearSelection,
+                searchQuery,
+                filters,
+                setFilters: handleFiltersChange,
+                filterCount: filters.length,
+                clearSearch: handleClearSearch,
+                clearFilters: handleFiltersChange ? () => handleFiltersChange([]) : void 0
+              }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                colHeaders && /* @__PURE__ */ jsx(
+                  ColumnHeaders,
+                  {
+                    columns: cols,
+                    rowHeaders,
+                    leftOffsets: effectiveLeftOffsets,
+                    rightOffsets,
+                    totalWidth,
+                    sortState,
+                    actionsColumnWidth,
+                    showActionsColumn,
+                    onSort: handleColumnSort,
+                    onResizeStart: (e, colIndex) => {
+                      userResizedColsRef.current.add(colIndex);
+                      handleResizeStart(e, colIndex);
+                    },
+                    onDoubleClick: handleColumnHeaderDoubleClick,
+                    onMouseDown: (e) => handleColumnHeaderMouseDown(e, dragHandlers.handleDragStart),
+                    onMouseMove: handleMouseMove,
+                    modernLayout: !disableBuiltinColumnMenu,
+                    onSortAsc: handleModernSortAsc,
+                    onSortDesc: handleModernSortDesc,
+                    onFilterByField: handleModernFilterByField,
+                    filters,
+                    onFiltersChange: handleFiltersChange,
+                    loadFilterSuggestions,
+                    onFreezeToggle: handleModernFreezeToggle,
+                    onHideField: handleModernHideField,
+                    onColumnReorder: handleColumnReorder,
+                    onColumnMove: handleColumnMove,
+                    frozenColumns,
+                    lastFrozenColumnKey,
+                    columnActions,
+                    onColumnAction: handleModernColumnAction,
+                    selectable,
+                    allSelected,
+                    someSelected,
+                    onToggleSelectAll: handleToggleSelectAll,
+                    columnWindow: columnVirtualizer
+                  }
+                ),
+                /* @__PURE__ */ jsx("table", { className: "hot-table", style: { width: `${totalWidth}px` }, children: /* @__PURE__ */ jsx(
+                  "tbody",
+                  {
+                    style: {
+                      display: "block",
+                      height: `${rowVirtualizer.getTotalSize()}px`,
+                      position: "relative"
+                    },
+                    children: virtualRows.map((virtualItem) => {
+                      if (isGrouped) {
+                        const vr = groupingResult.visualRows[virtualItem.index];
+                        if (vr.type === "groupHeader") {
+                          const groupRowIds = vr.memberDataIndices.map((idx) => {
+                            const r = data[idx];
+                            return r == null ? void 0 : r[selectionColumnName];
+                          }).filter((id) => id != null).map((id) => String(id));
+                          const groupSelected = groupRowIds.length > 0 && groupRowIds.every((id) => selectedRowIds.has(id));
+                          const groupSomeSelected = !groupSelected && groupRowIds.some((id) => selectedRowIds.has(id));
+                          return /* @__PURE__ */ jsx(
+                            GroupHeaderRow,
+                            {
+                              visualRow: vr,
+                              virtualItem,
+                              totalWidth,
+                              columns: cols,
+                              onToggle: groupingResult.toggleGroup,
+                              selectable,
+                              selected: groupSelected,
+                              someSelected: groupSomeSelected,
+                              onToggleSelect: () => handleToggleGroupSelect(groupRowIds),
+                              formatGroupValue
+                            },
+                            `gh-${vr.groupKey}`
+                          );
+                        }
+                        if (vr.type === "groupSummary") {
+                          return /* @__PURE__ */ jsx(
+                            GroupSummaryRow,
+                            {
+                              visualRow: vr,
+                              virtualItem,
+                              columns: cols,
+                              rowHeaders,
+                              leftOffsets: effectiveLeftOffsets,
+                              rightOffsets,
+                              actionsColumnWidth,
+                              showActionsColumn,
+                              totalWidth,
+                              aggregations,
+                              label: t("dynamicTable.aggregation.summaryRowLabel", "Sum"),
+                              locale,
+                              storeRevision,
+                              columnWindow: columnVirtualizer
+                            },
+                            `gs-${vr.groupKey}`
+                          );
+                        }
+                        return /* @__PURE__ */ jsx(
+                          VirtualRow,
+                          {
+                            rowIndex: vr.dataIndex,
+                            columns: cols,
+                            virtualRow: virtualItem,
+                            rowHeaders,
+                            leftOffsets: effectiveLeftOffsets,
+                            lastFrozenColumnKey,
+                            rightOffsets,
+                            actionsColumnWidth,
+                            showActionsColumn,
+                            totalWidth,
+                            storeRevision,
+                            onSaveNewRow: handleSaveNewRow,
+                            onCancelNewRow: handleCancelNewRow,
+                            onRowHeaderDoubleClick: handleRowHeaderDoubleClick,
+                            onCellSave: handleCellSave,
+                            onCellContextMenu: handleCellContextMenu,
+                            actionsRenderer,
+                            showRowActionsMenu,
+                            rowActions,
+                            onRowActionsMenu: handleRowActionsMenu,
+                            highlightedRowId,
+                            idColumnName,
+                            rowKeyColumn: selectionColumnName,
+                            annotations: enableComments ? annotations : void 0,
+                            commentsEnabled: enableComments && !!commentsEntityType,
+                            annotationKeyAt: enableComments ? cellAnnotationKeyAt : void 0,
+                            selectable,
+                            selectedRowIds,
+                            onToggleRowSelect: handleToggleRowSelect,
+                            compiledFormats,
+                            columnWindow: columnVirtualizer
+                          },
+                          `dr-${vr.dataIndex}`
+                        );
+                      }
+                      return /* @__PURE__ */ jsx(
+                        VirtualRow,
+                        {
+                          rowIndex: virtualItem.index,
+                          columns: cols,
+                          virtualRow: virtualItem,
+                          rowHeaders,
+                          leftOffsets: effectiveLeftOffsets,
+                          lastFrozenColumnKey,
+                          rightOffsets,
+                          actionsColumnWidth,
+                          showActionsColumn,
+                          totalWidth,
+                          storeRevision,
+                          onSaveNewRow: handleSaveNewRow,
+                          onCancelNewRow: handleCancelNewRow,
+                          onRowHeaderDoubleClick: handleRowHeaderDoubleClick,
+                          onCellSave: handleCellSave,
+                          onCellContextMenu: handleCellContextMenu,
+                          actionsRenderer,
+                          showRowActionsMenu,
+                          rowActions,
+                          onRowActionsMenu: handleRowActionsMenu,
+                          highlightedRowId,
+                          idColumnName,
+                          rowKeyColumn: selectionColumnName,
+                          annotations: enableComments ? annotations : void 0,
+                          commentsEnabled: enableComments && !!commentsEntityType,
+                          annotationKeyAt: enableComments ? cellAnnotationKeyAt : void 0,
+                          selectable,
+                          selectedRowIds,
+                          onToggleRowSelect: handleToggleRowSelect,
+                          compiledFormats,
+                          columnWindow: columnVirtualizer
+                        },
+                        virtualItem.index
+                      );
+                    })
+                  }
+                ) }),
+                rowCount === 0 && (loadError ? /* @__PURE__ */ jsx(LoadErrorState, { tableName, onRetry: onRetryLoad }) : /* @__PURE__ */ jsx(
+                  EmptyState,
+                  {
+                    emptyMessage,
+                    searchQuery,
+                    filterCount: filters.length,
+                    onClearSearch: handleClearSearch,
+                    onClearFilters: handleFiltersChange ? () => handleFiltersChange([]) : void 0
+                  }
+                )),
+                aggregations.length > 0 && /* @__PURE__ */ jsx(
+                  FooterTotalsRow,
+                  {
+                    columns: cols,
+                    aggregations,
+                    result: aggregateResult,
+                    pageValues: pageAggregateValues,
+                    pageBreakdowns: pageAggregateBreakdowns,
+                    pageRowCount: data.length,
+                    loading: aggregateLoading,
+                    error: aggregateError,
+                    getColumnWidth,
+                    rowHeaders,
+                    leftOffsets: effectiveLeftOffsets,
+                    rightOffsets,
+                    actionsColumnWidth,
+                    showActionsColumn,
+                    totalWidth,
+                    locale,
+                    columnWindow: columnVirtualizer
+                  }
+                )
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          ConfigureViewPanel,
+          {
+            isOpen: configPanelOpen,
+            onOpenChange: setConfigPanelOpen,
+            columns: baseColumns,
+            visibleColumns,
+            hiddenColumns,
+            filters,
+            sortRules,
+            groupRules,
+            aggregations,
+            lookupColumns,
+            rollupColumns,
+            formulas,
+            conditionalFormats,
+            sampleRow: data[0],
+            dateFormat,
+            viewMode,
+            dateFormatOptions,
+            onColumnVisibilityChange: handleColumnVisibilityChange,
+            onFiltersChange: handleFiltersChange,
+            onSortRulesChange: handleSortRulesChange,
+            onGroupRulesChange: handleGroupRulesChange,
+            onAggregationsChange: handleAggregationsChange,
+            onLookupColumnsChange: handleLookupColumnsChange,
+            onRollupColumnsChange: handleRollupColumnsChange,
+            onFormulasChange: handleFormulasChange,
+            onConditionalFormatsChange: handleConditionalFormatsChange,
+            onDateFormatChange: handleDateFormatChange,
+            onSavePerspective: handleSavePerspective,
+            activePerspectiveId,
+            editingPerspective: savedPerspectives.find((p) => p.id === editingPerspectiveId) ?? null,
+            baseViewPerspective,
+            isBaseViewMode: configureBaseView,
+            loadFilterSuggestions,
+            loadLookupSources,
+            loadRollupSources,
+            initialExpandedSection: configPanelInitialSection
+          }
+        ),
+        /* @__PURE__ */ jsx(Dialog, { open: !!pendingWrite, onOpenChange: (open) => {
+          if (!open) cancelPendingWrite();
+        }, children: /* @__PURE__ */ jsxs(DialogContent, { className: "hot-dialog", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: pendingWrite?.origin === "paste" ? t("dynamicTable.paste.confirmTitle", "Paste into these cells?") : pendingWrite?.origin === "cut" ? t("dynamicTable.cut.confirmTitle", "Cut these cells?") : pendingWrite?.origin === "clear" ? t("dynamicTable.clear.confirmTitle", "Clear these cells?") : t("dynamicTable.fill.confirmTitle", "Fill cells?") }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: t("dynamicTable.write.confirmBody", "This will overwrite {count} cells.", {
+              count: pendingWrite?.writes.length ?? 0
+            }) })
+          ] }),
+          /* @__PURE__ */ jsxs(DialogFooter, { children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: cancelPendingWrite, children: t("dynamicTable.fill.cancel", "Cancel") }),
+            /* @__PURE__ */ jsx(Button, { onClick: confirmPendingWrite, children: pendingWrite?.origin === "paste" ? t("dynamicTable.paste.confirm", "Paste") : pendingWrite?.origin === "cut" ? t("dynamicTable.cut.confirm", "Cut") : pendingWrite?.origin === "clear" ? t("dynamicTable.clear.confirm", "Clear") : t("dynamicTable.fill.confirm", "Fill") })
+          ] })
+        ] }) }),
+        enableComments && commentsEntityType && commentDialog && /* @__PURE__ */ jsx(
+          CellCommentDialog,
+          {
+            isOpen: true,
+            onClose: handleCommentDialogClose,
+            entityType: commentDialog.entityType,
+            viewContext: commentsViewContext,
+            rowId: commentDialog.rowId,
+            columnKey: commentDialog.columnKey,
+            columnTitle: commentDialog.columnTitle,
+            rowLabel: commentDialog.rowLabel,
+            annotationId: commentDialog.annotationId,
+            currentColor: commentDialog.currentColor,
+            onAnnotationChange: () => {
+              refreshAnnotations();
+              onAnnotationChange?.();
+            },
+            anchorRect: commentDialog.anchorRect,
+            bulkCells: commentDialog.bulkCells
+          }
+        ),
+        enableComments && commentsEntityType && commentHover && !commentDialog && /* @__PURE__ */ jsx(
+          CellCommentHoverPopup,
+          {
+            comments: commentHover.comments,
+            columnTitle: commentHover.columnTitle,
+            anchorRect: commentHover.anchorRect
+          }
+        ),
+        contextMenu && /* @__PURE__ */ jsx(
+          ContextMenu,
+          {
+            isOpen: contextMenu.isOpen,
+            position: contextMenu.position,
+            actions: contextMenu.actions,
+            onClose: handleContextMenuClose,
+            onActionClick: handleMenuActionClick
+          }
+        ),
+        debug && /* @__PURE__ */ jsx(Debugger, { tableRef })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(TableDateFormatContext.Provider, { value: dateFormat, children: /* @__PURE__ */ jsx(CellStoreContext.Provider, { value: store, children: isFullscreen ? /* @__PURE__ */ jsx(
+    FullscreenOverlay,
+    {
+      isOpen: isFullscreen,
+      onClose: handleExitFullscreen,
+      tableName: displayTableName,
+      children: tableContent
+    }
+  ) : tableContent }) });
+};
+var DynamicTable_default = DynamicTable;
+export {
+  DynamicTable_default as default
+};
+//# sourceMappingURL=DynamicTable.js.map