@nu-grid/nuxt 0.1.1

package/dist/runtime/composables/_internal/useNuGridFocus.js

@@ -0,0 +1,1378 @@
+import { useElementSize } from "@vueuse/core";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { usePropWithDefault } from "../../config/_internal/index.js";
+import { useNuGridKeyboardNavigation } from "./useNuGridKeyboardNavigation.js";
+import { useNuGridScroll } from "./useNuGridScroll.js";
+export function useNuGridFocus(props, tableApi, rows, navigableRows, tableRef, rootRef, virtualizedStickyHeight, virtualizer, editingCell, interactionRouter, eventEmitter, focusedRowIdModel) {
+  const focusMode = usePropWithDefault(props, "focus", "mode");
+  const retainFocus = usePropWithDefault(props, "focus", "retain");
+  const cmdArrows = usePropWithDefault(props, "focus", "cmdArrows");
+  const alignOnModel = usePropWithDefault(props, "focus", "alignOnModel");
+  const enableEditing = usePropWithDefault(props, "editing", "enabled");
+  const rowSelectionMode = computed(() => props.selection ?? false);
+  const focusedCell = ref(null);
+  const gridHasFocus = ref(false);
+  let pointerDownInsideGrid = false;
+  let isUpdatingFromModel = false;
+  let isUpdatingToModel = false;
+  const resolvedRows = computed(() => navigableRows?.value ?? rows.value);
+  function setFocusedCell(newValue, options) {
+    const oldValue = focusedCell.value;
+    focusedCell.value = newValue;
+    if (focusedRowIdModel && !isUpdatingFromModel) {
+      const currentRows = resolvedRows.value;
+      const newRowIndex2 = newValue?.rowIndex ?? null;
+      const row = newRowIndex2 !== null && newRowIndex2 >= 0 ? currentRows[newRowIndex2] ?? null : null;
+      const newRowId = row?.id ?? null;
+      if (focusedRowIdModel.value !== newRowId) {
+        isUpdatingToModel = true;
+        focusedRowIdModel.value = newRowId;
+        nextTick(() => {
+          isUpdatingToModel = false;
+        });
+      }
+    }
+    if (options?.suppressEvents) return;
+    const oldRowIndex = oldValue?.rowIndex ?? null;
+    const newRowIndex = newValue?.rowIndex ?? null;
+    const oldColumnIndex = oldValue?.columnIndex ?? null;
+    const newColumnIndex = newValue?.columnIndex ?? null;
+    if (eventEmitter?.focusedCellChanged && (oldRowIndex !== newRowIndex || oldColumnIndex !== newColumnIndex)) {
+      const currentRows = resolvedRows.value;
+      const columns = tableApi.getAllLeafColumns();
+      const row = newRowIndex !== null && newRowIndex >= 0 ? currentRows[newRowIndex] ?? null : null;
+      const column = newColumnIndex !== null && newColumnIndex >= 0 ? columns[newColumnIndex] ?? null : null;
+      eventEmitter.focusedCellChanged({
+        rowId: row?.id ?? null,
+        columnId: column?.id ?? null,
+        rowIndex: newRowIndex ?? -1,
+        columnIndex: newColumnIndex ?? -1,
+        row,
+        column,
+        previousRowIndex: oldRowIndex,
+        previousColumnIndex: oldColumnIndex
+      });
+    }
+    if (eventEmitter?.focusedRowChanged && oldRowIndex !== newRowIndex) {
+      const currentRows = resolvedRows.value;
+      const row = newRowIndex !== null && newRowIndex >= 0 ? currentRows[newRowIndex] ?? null : null;
+      const previousRow = oldRowIndex !== null && oldRowIndex >= 0 ? currentRows[oldRowIndex] ?? null : null;
+      eventEmitter.focusedRowChanged({
+        rowId: row?.id ?? null,
+        rowIndex: newRowIndex ?? -1,
+        row,
+        previousRowIndex: oldRowIndex,
+        previousRow
+      });
+    }
+  }
+  const cellSelector = '[data-row-id="$ID"] [data-cell-index="$COL"]';
+  const rowSelector = '[data-row-id="$ID"]';
+  const rowHeightEstimate = ref(80);
+  const containerHeight = ref(0);
+  let unregisterInteraction = null;
+  let unregisterRetainFocus = null;
+  const rowElementCache = /* @__PURE__ */ new Map();
+  const cellElementCache = /* @__PURE__ */ new Map();
+  let processingTimer = null;
+  function clearElementCaches() {
+    rowElementCache.clear();
+    cellElementCache.clear();
+  }
+  const rootElement = computed(() => {
+    if (!rootRef?.value) {
+      return null;
+    }
+    return rootRef.value.$el ?? null;
+  });
+  const {
+    scrollManager,
+    visibleColumns,
+    verticalScrollContainer,
+    horizontalScrollContainer,
+    updateScrollContainerCache
+  } = useNuGridScroll(tableApi, rootRef);
+  const { height: observedHeight } = useElementSize(rootElement, void 0, { box: "border-box" });
+  watch(observedHeight, (height) => {
+    if (typeof height === "number" && !Number.isNaN(height)) {
+      containerHeight.value = height;
+      updateScrollContainerCache();
+    }
+  });
+  const resolveStickyHeight = (tableElement) => {
+    const virtualHeight = virtualizedStickyHeight?.value;
+    if (typeof virtualHeight === "number" && virtualHeight > 0) {
+      return virtualHeight;
+    }
+    const targetTable = tableElement ?? tableRef.value;
+    if (!targetTable) {
+      return 0;
+    }
+    return scrollManager.getStickyHeaderHeight(targetTable);
+  };
+  const viewportRowsPerPage = computed(() => {
+    const estimatedHeight = Math.max(rowHeightEstimate.value, 1);
+    const stickyHeight = resolveStickyHeight();
+    const vScrollContainer = verticalScrollContainer.value;
+    const effectiveHeight = vScrollContainer?.clientHeight ?? containerHeight.value;
+    if (effectiveHeight > 0) {
+      const visibleHeight = Math.max(0, effectiveHeight - stickyHeight);
+      return Math.max(1, Math.round(visibleHeight / estimatedHeight));
+    }
+    return Math.max(1, Math.round(600 / estimatedHeight));
+  });
+  if (virtualizer) {
+    watch(
+      () => virtualizer.value?.props.value.estimateSize,
+      (estimate) => {
+        if (typeof estimate === "number" && estimate > 0) {
+          rowHeightEstimate.value = estimate;
+        }
+      },
+      { immediate: true }
+    );
+  }
+  const allRows = computed(() => rows.value);
+  function startProcessingLock(duration = 200) {
+    scrollManager.setProcessing(true);
+    if (processingTimer) clearTimeout(processingTimer);
+    processingTimer = setTimeout(() => {
+      scrollManager.setProcessing(false);
+      processingTimer = null;
+    }, duration);
+  }
+  function stopProcessingLock() {
+    if (processingTimer) {
+      clearTimeout(processingTimer);
+      processingTimer = null;
+    }
+    scrollManager.setProcessing(false);
+  }
+  const keyboardNav = useNuGridKeyboardNavigation(props, tableApi);
+  const {
+    multiRowEnabled,
+    multiRowCount,
+    getVisualRowForColumn,
+    getColumnsInVisualRow,
+    findColumnInVisualRow
+  } = keyboardNav;
+  function isWithinAriaHidden(element) {
+    return Boolean(element.closest('[aria-hidden="true"]'));
+  }
+  let ariaHiddenObserver = null;
+  onMounted(() => {
+    const nuxtEl = document.getElementById("__nuxt");
+    if (nuxtEl && typeof MutationObserver !== "undefined") {
+      ariaHiddenObserver = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          if (mutation.type === "attributes" && mutation.attributeName === "aria-hidden") {
+            const isHidden = nuxtEl.getAttribute("aria-hidden") === "true";
+            if (isHidden && document.activeElement) {
+              const activeEl = document.activeElement;
+              if (activeEl && typeof activeEl.blur === "function") {
+                activeEl.blur();
+              }
+            }
+          }
+        }
+      });
+      ariaHiddenObserver.observe(nuxtEl, {
+        attributes: true,
+        attributeFilter: ["aria-hidden"]
+      });
+    }
+  });
+  onUnmounted(() => {
+    if (ariaHiddenObserver) {
+      ariaHiddenObserver.disconnect();
+      ariaHiddenObserver = null;
+    }
+    if (unregisterRetainFocus) {
+      unregisterRetainFocus();
+      unregisterRetainFocus = null;
+    }
+    if (unregisterInteraction) {
+      unregisterInteraction();
+      unregisterInteraction = null;
+    }
+    gridHasFocus.value = false;
+    clearElementCaches();
+  });
+  watch(
+    () => tableRef.value,
+    () => {
+      clearElementCaches();
+    }
+  );
+  function getRootElement() {
+    return rootElement.value;
+  }
+  function handleRootFocusIn(event) {
+    if (pointerDownInsideGrid) {
+      return;
+    }
+    const target = event.target;
+    if (isGridCellOrRow(target)) {
+      gridHasFocus.value = true;
+    }
+  }
+  function isGridCellOrRow(element) {
+    if (!element) return false;
+    if (element.closest("[data-cell-index]") !== null) {
+      return true;
+    }
+    if (element.closest("[data-row-id]") !== null) {
+      return true;
+    }
+    return false;
+  }
+  function handleRootFocusOut(event) {
+    if (retainFocus.value) {
+      return;
+    }
+    if (pointerDownInsideGrid) {
+      return;
+    }
+    const rootEl = getRootElement();
+    if (!rootEl) {
+      gridHasFocus.value = false;
+      return;
+    }
+    const nextTarget = event.relatedTarget;
+    if (!nextTarget || !rootEl.contains(nextTarget)) {
+      requestAnimationFrame(() => {
+        if (!pointerDownInsideGrid && !rootEl.contains(document.activeElement)) {
+          gridHasFocus.value = false;
+        }
+      });
+      return;
+    }
+    if (!isGridCellOrRow(nextTarget)) {
+      gridHasFocus.value = false;
+    }
+  }
+  function handlePointerDownInside() {
+    pointerDownInsideGrid = true;
+  }
+  function handlePointerUpOutside() {
+    pointerDownInsideGrid = false;
+  }
+  function handleClickOutside(event) {
+    if (!retainFocus.value || focusMode.value === "none") {
+      return;
+    }
+    const rootEl = getRootElement();
+    if (!rootEl) {
+      return;
+    }
+    const target = event.target;
+    if (target && !rootEl.contains(target)) {
+      const isInteractive = target instanceof HTMLElement && (target.closest("input") || target.closest("textarea") || target.closest("select") || target.closest("button") || target.closest("a") || target.isContentEditable);
+      if (isInteractive) {
+        return;
+      }
+      const rowsList = resolvedRows.value;
+      if (rowsList.length === 0) {
+        return;
+      }
+      if (focusedCell.value) {
+        const row = rowsList[focusedCell.value.rowIndex];
+        if (row) {
+          nextTick(() => {
+            focusCell(row, focusedCell.value.rowIndex, focusedCell.value.columnIndex);
+          });
+        }
+      } else {
+        const firstRow = rowsList[0];
+        if (firstRow) {
+          const firstFocusableColumn = findFirstFocusableColumn(firstRow);
+          nextTick(() => {
+            setFocusedCell({ rowIndex: 0, columnIndex: firstFocusableColumn });
+            focusCell(firstRow, 0, firstFocusableColumn);
+          });
+        }
+      }
+    }
+  }
+  watch(
+    () => rootRef?.value,
+    (primitive, _, onCleanup) => {
+      const rootEl = primitive?.$el;
+      if (!rootEl) {
+        gridHasFocus.value = false;
+        return;
+      }
+      rootEl.addEventListener("focusin", handleRootFocusIn);
+      rootEl.addEventListener("focusout", handleRootFocusOut);
+      rootEl.addEventListener("pointerdown", handlePointerDownInside, true);
+      if (typeof window !== "undefined") {
+        window.addEventListener("pointerup", handlePointerUpOutside);
+        window.addEventListener("pointercancel", handlePointerUpOutside);
+      }
+      onCleanup(() => {
+        rootEl.removeEventListener("focusin", handleRootFocusIn);
+        rootEl.removeEventListener("focusout", handleRootFocusOut);
+        rootEl.removeEventListener("pointerdown", handlePointerDownInside, true);
+        if (typeof window !== "undefined") {
+          window.removeEventListener("pointerup", handlePointerUpOutside);
+          window.removeEventListener("pointercancel", handlePointerUpOutside);
+        }
+      });
+    },
+    { immediate: true }
+  );
+  watch(
+    () => retainFocus.value,
+    (enabled) => {
+      if (unregisterRetainFocus) {
+        unregisterRetainFocus();
+        unregisterRetainFocus = null;
+      }
+      if (enabled && interactionRouter) {
+        unregisterRetainFocus = interactionRouter.registerGlobalPointerHandler({
+          id: "focus-retain",
+          priority: 5,
+          handle: ({ event }) => {
+            handleClickOutside(event);
+            return { handled: false };
+          }
+        });
+      }
+      if (enabled && !interactionRouter && typeof document !== "undefined") {
+        document.addEventListener("click", handleClickOutside, true);
+        unregisterRetainFocus = () => {
+          document.removeEventListener("click", handleClickOutside, true);
+        };
+      }
+    },
+    { immediate: true }
+  );
+  const rowIdToIndexMap = ref(/* @__PURE__ */ new Map());
+  watch(
+    [resolvedRows, allRows],
+    ([currentRows, fullRows]) => {
+      const map = rowIdToIndexMap.value;
+      map.clear();
+      const isGroupedGrid = currentRows !== fullRows;
+      const sourceRows = isGroupedGrid ? currentRows : fullRows?.length ? fullRows : currentRows;
+      sourceRows?.forEach((row, arrayIndex) => {
+        if (row.getIsGrouped?.()) {
+          return;
+        }
+        map.set(row.id, arrayIndex);
+      });
+      for (const rowId of [...rowElementCache.keys()]) {
+        if (!map.has(rowId)) {
+          rowElementCache.delete(rowId);
+        }
+      }
+      for (const rowId of [...cellElementCache.keys()]) {
+        if (!map.has(rowId)) {
+          cellElementCache.delete(rowId);
+        }
+      }
+    },
+    { immediate: true }
+  );
+  function getRowIndex(row) {
+    const index = rowIdToIndexMap.value.get(row.id);
+    return index !== void 0 ? index : -1;
+  }
+  function getRowIndexById(rowId) {
+    if (!rowId) return -1;
+    const index = rowIdToIndexMap.value.get(rowId);
+    return index !== void 0 ? index : -1;
+  }
+  function cacheRowElement(rowId, element) {
+    if (!element || !element.isConnected) {
+      rowElementCache.delete(rowId);
+      return;
+    }
+    rowElementCache.set(rowId, element);
+  }
+  function cacheCellElement(rowId, columnIndex, element) {
+    if (!element || !element.isConnected) {
+      const rowMap2 = cellElementCache.get(rowId);
+      if (rowMap2) {
+        rowMap2.delete(columnIndex);
+        if (rowMap2.size === 0) {
+          cellElementCache.delete(rowId);
+        }
+      }
+      return;
+    }
+    let rowMap = cellElementCache.get(rowId);
+    if (!rowMap) {
+      rowMap = /* @__PURE__ */ new Map();
+      cellElementCache.set(rowId, rowMap);
+    }
+    rowMap.set(columnIndex, element);
+  }
+  function resolveCellSelector(rowId, columnIndex) {
+    return cellSelector.replace("$COL", String(columnIndex)).replace("$ID", rowId);
+  }
+  function resolveRowSelector(rowId) {
+    return rowSelector.replace("$ID", rowId);
+  }
+  function getRowElement(rowId) {
+    const cached = rowElementCache.get(rowId);
+    if (cached?.isConnected) {
+      return cached;
+    }
+    const element = tableRef.value?.querySelector(resolveRowSelector(rowId));
+    cacheRowElement(rowId, element);
+    return element;
+  }
+  function getCellElement(rowId, columnIndex) {
+    const rowMap = cellElementCache.get(rowId);
+    const cached = rowMap?.get(columnIndex);
+    if (cached?.isConnected) {
+      return cached;
+    }
+    const rowElement = getRowElement(rowId);
+    if (rowElement) {
+      const cellElement = rowElement.querySelector(
+        `[data-cell-index="${columnIndex}"]`
+      );
+      cacheCellElement(rowId, columnIndex, cellElement);
+      return cellElement;
+    }
+    const element = tableRef.value?.querySelector(
+      resolveCellSelector(rowId, columnIndex)
+    );
+    cacheCellElement(rowId, columnIndex, element);
+    return element;
+  }
+  function ensureFootersVisible(scrollContainer, useDoubleRAF = false) {
+    const footerGroups = tableApi.getFooterGroups();
+    const tableElement = tableRef.value;
+    if (footerGroups.length === 0 || !tableElement) return;
+    const checkFooters = () => {
+      const footerElements = tableElement.querySelectorAll('[class*="tfoot"]');
+      if (footerElements.length === 0) {
+        const absoluteMaxScroll = scrollContainer.scrollHeight - scrollContainer.clientHeight;
+        if (scrollContainer.scrollTop < absoluteMaxScroll - 1) {
+          scrollContainer.scrollTop = absoluteMaxScroll;
+        }
+        return;
+      }
+      const lastFooter = Array.from(footerElements).reduce(
+        (latest, footer) => {
+          const latestRect = latest?.getBoundingClientRect();
+          const footerRect = footer.getBoundingClientRect();
+          return !latestRect || footerRect.bottom > latestRect.bottom ? footer : latest;
+        },
+        null
+      );
+      if (lastFooter) {
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const footerRect = lastFooter.getBoundingClientRect();
+        const containerBottom = containerRect.bottom;
+        const footerBottom = footerRect.bottom;
+        const padding = 15;
+        if (footerBottom > containerBottom - padding) {
+          const adjustment = footerBottom - containerBottom + padding;
+          scrollContainer.scrollTop += adjustment;
+        }
+      }
+    };
+    if (useDoubleRAF) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(checkFooters);
+      });
+    } else {
+      requestAnimationFrame(checkFooters);
+    }
+  }
+  function scrollToCellAndFocus(options) {
+    const {
+      cellElement,
+      rowId,
+      rowIndex,
+      columnIndex,
+      behavior = "instant",
+      skipHorizontalScroll = false,
+      verticalOnly = false,
+      isFirstFocusableColumn = false,
+      isLastFocusableColumn = false,
+      onComplete
+    } = options;
+    const effectiveScrollContainer = verticalScrollContainer.value;
+    const effectiveHScrollContainer = horizontalScrollContainer.value;
+    const tableElement = tableRef.value;
+    if (!effectiveScrollContainer || !tableElement) {
+      onComplete?.();
+      return;
+    }
+    const resolvedRows2 = navigableRows?.value ?? rows.value;
+    const isLastRow = resolvedRows2.length > 0 && rowId === resolvedRows2[resolvedRows2.length - 1]?.id;
+    cellElement.focus({ preventScroll: true });
+    scrollManager.scrollToCell({
+      cellElement,
+      scrollContainer: effectiveScrollContainer,
+      horizontalScrollContainer: effectiveHScrollContainer ?? void 0,
+      tableElement,
+      rowIndex,
+      columnIndex,
+      virtualizedStickyHeight: resolveStickyHeight(tableElement),
+      behavior,
+      verticalPadding: 15,
+      includeHeadersAbove: false,
+      skipHorizontalScroll,
+      verticalOnly
+    }).then(() => {
+      if (isLastRow) {
+        ensureFootersVisible(effectiveScrollContainer);
+      }
+      if (isFirstFocusableColumn && effectiveHScrollContainer) {
+        scrollManager.scrollToHorizontalEdge(effectiveHScrollContainer, "start");
+      }
+      if (isLastFocusableColumn && effectiveHScrollContainer) {
+        scrollManager.scrollToHorizontalEdge(effectiveHScrollContainer, "end");
+      }
+    }).finally(() => {
+      onComplete?.();
+    });
+  }
+  function isColumnFocusable(columnIndex, row) {
+    const cols = visibleColumns.value;
+    if (columnIndex < 0 || columnIndex >= cols.length) return false;
+    const column = cols[columnIndex];
+    if (!column) return false;
+    const columnDef = column.columnDef;
+    if (columnDef.enableFocusing === void 0) return true;
+    if (typeof columnDef.enableFocusing === "function") {
+      return columnDef.enableFocusing(row);
+    }
+    return columnDef.enableFocusing;
+  }
+  function findNextFocusableColumn(startIndex, row) {
+    const cols = visibleColumns.value;
+    for (let i = startIndex + 1; i < cols.length; i++) {
+      if (isColumnFocusable(i, row)) return i;
+    }
+    return startIndex;
+  }
+  function findPreviousFocusableColumn(startIndex, row) {
+    for (let i = startIndex - 1; i >= 0; i--) {
+      if (isColumnFocusable(i, row)) return i;
+    }
+    return startIndex;
+  }
+  function findFirstFocusableColumn(row) {
+    const cols = visibleColumns.value;
+    for (let i = 0; i < cols.length; i++) {
+      if (isColumnFocusable(i, row)) return i;
+    }
+    return 0;
+  }
+  function findLastFocusableColumn(row) {
+    const cols = visibleColumns.value;
+    for (let i = cols.length - 1; i >= 0; i--) {
+      if (isColumnFocusable(i, row)) return i;
+    }
+    return cols.length - 1;
+  }
+  function findFirstFocusableColumnInVisualRow(visualRow, row) {
+    return keyboardNav.findFirstInVisualRow(visualRow, row, isColumnFocusable) ?? getColumnsInVisualRow(visualRow)[0] ?? 0;
+  }
+  function findLastFocusableColumnInVisualRow(visualRow, row) {
+    const cols = getColumnsInVisualRow(visualRow);
+    return keyboardNav.findLastInVisualRow(visualRow, row, isColumnFocusable) ?? cols[cols.length - 1] ?? 0;
+  }
+  function findNextFocusableColumnInVisualRow(startIndex, visualRow, row) {
+    return keyboardNav.findNextInVisualRow(startIndex, visualRow, row, isColumnFocusable);
+  }
+  function findPreviousFocusableColumnInVisualRow(startIndex, visualRow, row) {
+    return keyboardNav.findPreviousInVisualRow(startIndex, visualRow, row, isColumnFocusable);
+  }
+  function onCellClick(e, row, columnIndex) {
+    const target = e.target;
+    if (isWithinAriaHidden(target)) {
+      return;
+    }
+    const isInteractive = target.closest("button") || target.closest("a") || target.closest("input") || target.closest("select");
+    if (isInteractive) {
+      return;
+    }
+    if (!isColumnFocusable(columnIndex, row)) {
+      return;
+    }
+    const rowIndex = getRowIndex(row);
+    if (rowIndex === -1) {
+      return;
+    }
+    gridHasFocus.value = true;
+    pointerDownInsideGrid = false;
+    const currentSuppressOutline = focusedCell.value?.suppressOutline;
+    focusCell(row, rowIndex, columnIndex);
+    if (focusMode.value === "cell") {
+      setFocusedCell({
+        rowIndex,
+        columnIndex,
+        ...currentSuppressOutline && { suppressOutline: true }
+      });
+    } else if (focusMode.value === "row") {
+      setFocusedCell({
+        rowIndex,
+        columnIndex: 0,
+        ...currentSuppressOutline && { suppressOutline: true }
+      });
+    }
+  }
+  if (interactionRouter) {
+    unregisterInteraction = interactionRouter.registerCellClickHandler({
+      id: "focus",
+      priority: 10,
+      handle: ({ event, row, cellIndex }) => {
+        if (typeof cellIndex !== "number") return;
+        if (event.__addRowFinalizing) {
+          return { handled: true, stop: true };
+        }
+        if (event.__addRowUneditableClick) {
+          return { handled: true, stop: true };
+        }
+        onCellClick(event, row, cellIndex);
+        return { handled: event.defaultPrevented || event.cancelBubble };
+      }
+    });
+  }
+  function onCellKeyDown(e) {
+    if (focusMode.value === "none") {
+      if ([
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "Home",
+        "End",
+        "PageUp",
+        "PageDown"
+      ].includes(e.key)) {
+        e.preventDefault();
+      }
+      return;
+    }
+    if (!focusedCell.value) return;
+    if (scrollManager.isProcessingScroll && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown"].includes(e.key)) {
+      e.preventDefault();
+      return;
+    }
+    const { rowIndex, columnIndex } = focusedCell.value;
+    const visibleRows = resolvedRows.value;
+    const pageJump = viewportRowsPerPage.value;
+    let newRowIndex = rowIndex;
+    let newColumnIndex = columnIndex;
+    let isPageScroll = false;
+    let skipFinalFocus = false;
+    let isVerticalOnly = false;
+    switch (e.key) {
+      case "ArrowUp":
+        e.preventDefault();
+        if (e.metaKey || e.ctrlKey) {
+          if (cmdArrows.value === "paging") {
+            newRowIndex = Math.max(0, rowIndex - pageJump);
+            isPageScroll = true;
+          } else {
+            newRowIndex = 0;
+          }
+        } else if (focusMode.value === "cell" && multiRowEnabled.value && multiRowCount.value > 1) {
+          const currentVisualRow = getVisualRowForColumn(columnIndex);
+          const currentRow = visibleRows[rowIndex];
+          if (currentVisualRow > 0 && currentRow) {
+            newColumnIndex = findColumnInVisualRow(columnIndex, currentVisualRow - 1, currentRow);
+          } else {
+            newRowIndex = Math.max(0, rowIndex - 1);
+            const targetRow = visibleRows[newRowIndex];
+            if (targetRow && newRowIndex !== rowIndex) {
+              const lastVisualRow = multiRowCount.value - 1;
+              newColumnIndex = findColumnInVisualRow(columnIndex, lastVisualRow, targetRow);
+            }
+          }
+        } else {
+          newRowIndex = Math.max(0, rowIndex - 1);
+          isVerticalOnly = true;
+        }
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        if (e.metaKey || e.ctrlKey) {
+          if (cmdArrows.value === "paging") {
+            newRowIndex = Math.min(visibleRows.length - 1, rowIndex + pageJump);
+            isPageScroll = true;
+          } else {
+            newRowIndex = visibleRows.length - 1;
+          }
+        } else if (focusMode.value === "cell" && multiRowEnabled.value && multiRowCount.value > 1) {
+          const currentVisualRow = getVisualRowForColumn(columnIndex);
+          const lastVisualRow = multiRowCount.value - 1;
+          const currentRow = visibleRows[rowIndex];
+          if (currentVisualRow < lastVisualRow && currentRow) {
+            newColumnIndex = findColumnInVisualRow(columnIndex, currentVisualRow + 1, currentRow);
+          } else {
+            newRowIndex = Math.min(visibleRows.length - 1, rowIndex + 1);
+            const targetRow = visibleRows[newRowIndex];
+            if (targetRow && newRowIndex !== rowIndex) {
+              newColumnIndex = findColumnInVisualRow(columnIndex, 0, targetRow);
+            }
+          }
+        } else {
+          newRowIndex = Math.min(visibleRows.length - 1, rowIndex + 1);
+          isVerticalOnly = true;
+        }
+        break;
+      case "PageUp":
+        e.preventDefault();
+        newRowIndex = Math.max(0, rowIndex - pageJump);
+        isPageScroll = true;
+        break;
+      case "PageDown":
+        e.preventDefault();
+        newRowIndex = Math.min(visibleRows.length - 1, rowIndex + pageJump);
+        isPageScroll = true;
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        if (focusMode.value === "cell") {
+          const targetRow = visibleRows[rowIndex];
+          if (targetRow) {
+            if (e.metaKey || e.ctrlKey) {
+              newColumnIndex = findFirstFocusableColumn(targetRow);
+            } else if (multiRowEnabled.value && multiRowCount.value > 1) {
+              const currentVisualRow = getVisualRowForColumn(columnIndex);
+              const prevCol = findPreviousFocusableColumnInVisualRow(
+                columnIndex,
+                currentVisualRow,
+                targetRow
+              );
+              if (prevCol !== null) {
+                newColumnIndex = prevCol;
+              } else if (currentVisualRow > 0) {
+                newColumnIndex = findLastFocusableColumnInVisualRow(currentVisualRow - 1, targetRow);
+              } else {
+                if (rowIndex > 0) {
+                  newRowIndex = rowIndex - 1;
+                  const prevDataRow = visibleRows[newRowIndex];
+                  if (prevDataRow) {
+                    const lastVisualRow = multiRowCount.value - 1;
+                    newColumnIndex = findLastFocusableColumnInVisualRow(lastVisualRow, prevDataRow);
+                  }
+                }
+              }
+            } else {
+              newColumnIndex = findPreviousFocusableColumn(columnIndex, targetRow);
+            }
+          }
+        }
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        if (focusMode.value === "cell") {
+          const targetRow = visibleRows[rowIndex];
+          if (targetRow) {
+            if (e.metaKey || e.ctrlKey) {
+              newColumnIndex = findLastFocusableColumn(targetRow);
+            } else if (multiRowEnabled.value && multiRowCount.value > 1) {
+              const currentVisualRow = getVisualRowForColumn(columnIndex);
+              const nextCol = findNextFocusableColumnInVisualRow(
+                columnIndex,
+                currentVisualRow,
+                targetRow
+              );
+              if (nextCol !== null) {
+                newColumnIndex = nextCol;
+              } else if (currentVisualRow < multiRowCount.value - 1) {
+                newColumnIndex = findFirstFocusableColumnInVisualRow(
+                  currentVisualRow + 1,
+                  targetRow
+                );
+              } else {
+                if (rowIndex < visibleRows.length - 1) {
+                  newRowIndex = rowIndex + 1;
+                  const nextDataRow = visibleRows[newRowIndex];
+                  if (nextDataRow) {
+                    newColumnIndex = findFirstFocusableColumnInVisualRow(0, nextDataRow);
+                  }
+                }
+              }
+            } else {
+              newColumnIndex = findNextFocusableColumn(columnIndex, targetRow);
+            }
+          }
+        }
+        break;
+      case "Tab":
+        if (focusMode.value === "cell") {
+          const direction = e.shiftKey ? "previous" : "next";
+          const target = keyboardNav.navigateTab(
+            direction,
+            rowIndex,
+            columnIndex,
+            visibleRows,
+            isColumnFocusable
+          );
+          if (target) {
+            e.preventDefault();
+            newRowIndex = target.rowIndex;
+            newColumnIndex = target.columnIndex;
+          } else {
+            skipFinalFocus = true;
+          }
+        }
+        break;
+      case "Home":
+        e.preventDefault();
+        if (focusMode.value === "cell") {
+          const targetRow = visibleRows[rowIndex];
+          if (targetRow) {
+            newColumnIndex = findFirstFocusableColumn(targetRow);
+          }
+        }
+        break;
+      case "End":
+        e.preventDefault();
+        if (focusMode.value === "cell") {
+          const targetRow = visibleRows[rowIndex];
+          if (targetRow) {
+            newColumnIndex = findLastFocusableColumn(targetRow);
+          }
+        }
+        break;
+      case " ":
+        {
+          const target = e.target;
+          const isInteractive = target.closest("input") || target.closest("button") || target.closest("select") || target.closest("textarea");
+          if (isInteractive) {
+            return;
+          }
+          e.preventDefault();
+          const isRowSelectionEnabled = rowSelectionMode.value !== void 0 && rowSelectionMode.value !== false;
+          const isInEditMode = editingCell?.value !== null && editingCell?.value !== void 0;
+          const isEditingDisabled = enableEditing.value === false;
+          const row = visibleRows[rowIndex];
+          const isOnSelectionColumn = focusMode.value === "cell" && row && columnIndex >= 0 && row.getVisibleCells()[columnIndex]?.column.id === "__selection";
+          const canRowBeSelected = (() => {
+            if (!row) return false;
+            const mode = rowSelectionMode.value;
+            if (typeof mode === "object" && mode !== null) {
+              const options = mode;
+              if (options.enabled === false) {
+                return false;
+              }
+              if (options.rowSelectionEnabled) {
+                return options.rowSelectionEnabled(row);
+              }
+            }
+            return true;
+          })();
+          if (isRowSelectionEnabled && (!isInEditMode || isEditingDisabled) && !isOnSelectionColumn && row && canRowBeSelected) {
+            row.toggleSelected(!row.getIsSelected());
+            return;
+          }
+          if (props.onSelect && (focusMode.value === "cell" || focusMode.value === "row")) {
+            if (row) {
+              props.onSelect(e, row);
+            }
+          }
+        }
+        return;
+      default:
+        return;
+    }
+    const isJumpToFirstColumn = focusMode.value === "cell" && (e.key === "Home" || e.key === "ArrowLeft" && (e.metaKey || e.ctrlKey)) && newColumnIndex !== columnIndex;
+    if (isJumpToFirstColumn) {
+      const hScrollContainer = horizontalScrollContainer.value;
+      if (!hScrollContainer) return;
+      const targetRow = visibleRows[newRowIndex];
+      if (!targetRow) return;
+      setFocusedCell({ rowIndex: newRowIndex, columnIndex: newColumnIndex });
+      scrollManager.scrollToHorizontalEdge(hScrollContainer, "start").then(() => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            const targetElement = getCellElement(targetRow.id, newColumnIndex);
+            if (targetElement && !isWithinAriaHidden(targetElement)) {
+              targetElement.focus({ preventScroll: true });
+            }
+          });
+        });
+      });
+      return;
+    }
+    const isJumpToLastColumn = focusMode.value === "cell" && (e.key === "End" || e.key === "ArrowRight" && (e.metaKey || e.ctrlKey)) && newColumnIndex !== columnIndex;
+    if (isJumpToLastColumn) {
+      const hScrollContainer = horizontalScrollContainer.value;
+      if (!hScrollContainer) return;
+      const targetRow = visibleRows[newRowIndex];
+      if (!targetRow) return;
+      setFocusedCell({ rowIndex: newRowIndex, columnIndex: newColumnIndex });
+      scrollManager.scrollToHorizontalEdge(hScrollContainer, "end").then(() => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            const targetElement = getCellElement(targetRow.id, newColumnIndex);
+            if (targetElement && !isWithinAriaHidden(targetElement)) {
+              targetElement.focus({ preventScroll: true });
+            }
+          });
+        });
+      });
+      return;
+    }
+    const isJumpToFirstOrLast = (e.key === "ArrowUp" || e.key === "ArrowDown") && (e.metaKey || e.ctrlKey) && cmdArrows.value === "firstlast";
+    if (isJumpToFirstOrLast) {
+      const effectiveScrollContainer = verticalScrollContainer.value;
+      if (!effectiveScrollContainer) return;
+      const targetRowIndex = newRowIndex;
+      const targetRow = visibleRows[targetRowIndex];
+      if (!targetRow) return;
+      const edgeDirection = e.key === "ArrowUp" ? "start" : "end";
+      scrollManager.scrollToVerticalEdge(effectiveScrollContainer, edgeDirection).then(() => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(
+            () => focusTargetRowAfterEdgeScroll(targetRow, newColumnIndex, e.key)
+          );
+        });
+      });
+      setFocusedCell({ rowIndex: targetRowIndex, columnIndex: newColumnIndex });
+    } else if (isPageScroll) {
+      if (scrollManager.isProcessingScroll) {
+        e.preventDefault();
+        return;
+      }
+      startProcessingLock();
+      const effectiveScrollContainer = verticalScrollContainer.value;
+      const tableElement = tableRef.value;
+      if (!effectiveScrollContainer || !tableElement) {
+        stopProcessingLock();
+        return;
+      }
+      const lastRowIndex = visibleRows.length - 1;
+      if (newRowIndex === rowIndex) {
+        stopProcessingLock();
+        return;
+      }
+      const scrollDirection = newRowIndex > rowIndex ? 1 : -1;
+      const currentScrollTop = effectiveScrollContainer.scrollTop;
+      const maxScrollTop = effectiveScrollContainer.scrollHeight - effectiveScrollContainer.clientHeight;
+      if (scrollDirection < 0 && rowIndex === 0) {
+        if (currentScrollTop > 0) {
+          effectiveScrollContainer.scrollTop = 0;
+        }
+        stopProcessingLock();
+        return;
+      }
+      const oneRowHeight = rowHeightEstimate.value;
+      if (scrollDirection < 0 && currentScrollTop > 0 && currentScrollTop <= oneRowHeight) {
+        effectiveScrollContainer.scrollTop = 0;
+        const viewportHeightForCheck = effectiveScrollContainer.clientHeight;
+        const visibleRowCount = Math.floor(viewportHeightForCheck / oneRowHeight);
+        if (rowIndex < visibleRowCount) {
+          const firstRow = visibleRows[0];
+          if (firstRow) {
+            setFocusedCell({ rowIndex: 0, columnIndex: newColumnIndex });
+            const targetElement = focusMode.value === "cell" ? getCellElement(firstRow.id, newColumnIndex) : getRowElement(firstRow.id);
+            if (targetElement && !isWithinAriaHidden(targetElement)) {
+              targetElement.focus({ preventScroll: true });
+            }
+          }
+        }
+        stopProcessingLock();
+        return;
+      }
+      if (scrollDirection < 0 && currentScrollTop === 0 && rowIndex > 0) {
+        const firstRow = visibleRows[0];
+        if (firstRow) {
+          setFocusedCell({ rowIndex: 0, columnIndex: newColumnIndex });
+          const targetElement = focusMode.value === "cell" ? getCellElement(firstRow.id, newColumnIndex) : getRowElement(firstRow.id);
+          if (targetElement && !isWithinAriaHidden(targetElement)) {
+            targetElement.focus({ preventScroll: true });
+          }
+        }
+        stopProcessingLock();
+        return;
+      }
+      if (scrollDirection > 0 && rowIndex >= lastRowIndex) {
+        stopProcessingLock();
+        return;
+      }
+      if (scrollDirection > 0 && currentScrollTop >= maxScrollTop - 10) {
+        if (lastRowIndex >= 0 && rowIndex < lastRowIndex) {
+          const lastRow = visibleRows[lastRowIndex];
+          if (lastRow) {
+            setFocusedCell({ rowIndex: lastRowIndex, columnIndex: newColumnIndex });
+            const targetElement = focusMode.value === "cell" ? getCellElement(lastRow.id, newColumnIndex) : getRowElement(lastRow.id);
+            if (targetElement && !isWithinAriaHidden(targetElement)) {
+              targetElement.focus({ preventScroll: true });
+            }
+          }
+        }
+        stopProcessingLock();
+        return;
+      }
+      const currentRow = visibleRows[rowIndex];
+      let currentFocusedElement = null;
+      if (currentRow) {
+        if (focusMode.value === "cell") {
+          currentFocusedElement = getCellElement(currentRow.id, columnIndex);
+        } else {
+          currentFocusedElement = getRowElement(currentRow.id);
+        }
+      }
+      const stickyHeaderHeight = Math.round(resolveStickyHeight(tableElement));
+      const containerRectTop = effectiveScrollContainer.getBoundingClientRect().top;
+      const visibleTop = Math.round(containerRectTop + stickyHeaderHeight);
+      const currentFocusedTop = currentFocusedElement?.getBoundingClientRect().top ?? 0;
+      const targetVisualTop = currentFocusedElement ? Math.round(currentFocusedTop - visibleTop) : 0;
+      const viewportHeight = Math.round(effectiveScrollContainer.clientHeight - stickyHeaderHeight);
+      const overlap = Math.round(Math.max(1, rowHeightEstimate.value) * 0.3);
+      const effectiveScrollAmount = Math.max(1, viewportHeight - overlap);
+      const scrollAmount = scrollDirection * effectiveScrollAmount;
+      const newScrollTop = Math.max(0, Math.min(maxScrollTop, currentScrollTop + scrollAmount));
+      effectiveScrollContainer.scrollTop = newScrollTop;
+      const targetScreenY = Math.round(visibleTop + targetVisualTop);
+      requestAnimationFrame(() => {
+        const currentScrollAfter = effectiveScrollContainer.scrollTop;
+        const maxScrollAfter = effectiveScrollContainer.scrollHeight - effectiveScrollContainer.clientHeight;
+        if (scrollDirection > 0 && currentScrollAfter >= maxScrollAfter - 10) {
+          const lastRowIndex2 = visibleRows.length - 1;
+          if (lastRowIndex2 >= 0) {
+            const lastRow = visibleRows[lastRowIndex2];
+            if (lastRow) {
+              setFocusedCell({ rowIndex: lastRowIndex2, columnIndex: newColumnIndex });
+              const targetElement = focusMode.value === "cell" ? getCellElement(lastRow.id, newColumnIndex) : getRowElement(lastRow.id);
+              if (targetElement && !isWithinAriaHidden(targetElement)) {
+                targetElement.focus({ preventScroll: true });
+              }
+            }
+          }
+          ensureFootersVisible(effectiveScrollContainer, true);
+          stopProcessingLock();
+          return;
+        }
+        let closestRow = null;
+        let closestRowIndex = -1;
+        let closestDistance = Infinity;
+        const rowElements = tableElement.querySelectorAll("[data-row-id]");
+        for (const rowElement of rowElements) {
+          const rowId = rowElement.getAttribute("data-row-id");
+          if (rowId) {
+            cacheRowElement(rowId, rowElement);
+          }
+          const rowIdx = getRowIndexById(rowId);
+          if (rowIdx === -1) {
+            continue;
+          }
+          const row = visibleRows[rowIdx];
+          if (!row) {
+            continue;
+          }
+          const rowRect = rowElement.getBoundingClientRect();
+          const distance = Math.abs(Math.round(rowRect.top) - targetScreenY);
+          if (distance < closestDistance) {
+            closestDistance = distance;
+            closestRow = row;
+            closestRowIndex = rowIdx;
+          }
+        }
+        if (closestRow && closestRowIndex !== -1) {
+          setFocusedCell({ rowIndex: closestRowIndex, columnIndex: newColumnIndex });
+          const targetElement = focusMode.value === "cell" ? getCellElement(closestRow.id, newColumnIndex) : getRowElement(closestRow.id);
+          if (targetElement && !isWithinAriaHidden(targetElement)) {
+            targetElement.focus({ preventScroll: true });
+            const actualVisualTop = targetElement.getBoundingClientRect().top - visibleTop;
+            const adjustment = actualVisualTop - targetVisualTop;
+            if (Math.abs(adjustment) > 0.5) {
+              effectiveScrollContainer.scrollTop += adjustment;
+            }
+            if (closestRowIndex === 0 && effectiveScrollContainer.scrollTop > 0) {
+              effectiveScrollContainer.scrollTop = 0;
+            }
+          }
+        }
+        stopProcessingLock();
+      });
+    } else if (!skipFinalFocus) {
+      setFocusedCell({ rowIndex: newRowIndex, columnIndex: newColumnIndex });
+      const targetRow = visibleRows[newRowIndex];
+      if (!targetRow) return;
+      focusCell(targetRow, newRowIndex, newColumnIndex, isVerticalOnly);
+    }
+  }
+  function onCellKeyUp(e) {
+    if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown"].includes(e.key)) {
+      scrollManager.invalidateDimensionCache();
+    }
+  }
+  function focusCell(targetRow, newRowIndex, newColumnIndex, verticalOnly = false, onScrollComplete) {
+    startProcessingLock();
+    const finalize = () => {
+      stopProcessingLock();
+      onScrollComplete?.();
+    };
+    if (focusMode.value === "cell") {
+      const cellElement = getCellElement(targetRow.id, newColumnIndex);
+      if (cellElement) {
+        if (isWithinAriaHidden(cellElement)) {
+          finalize();
+          return;
+        }
+        const firstFocusableCol = findFirstFocusableColumn(targetRow);
+        const lastFocusableCol = findLastFocusableColumn(targetRow);
+        const isFirstFocusableColumn = newColumnIndex === firstFocusableCol && firstFocusableCol > 0;
+        const isLastFocusableColumn = newColumnIndex === lastFocusableCol && lastFocusableCol < visibleColumns.value.length - 1;
+        scrollToCellAndFocus({
+          cellElement,
+          rowId: targetRow.id,
+          rowIndex: newRowIndex,
+          columnIndex: newColumnIndex,
+          behavior: "instant",
+          verticalOnly,
+          isFirstFocusableColumn,
+          isLastFocusableColumn,
+          onComplete: finalize
+        });
+      } else {
+        finalize();
+      }
+    } else if (focusMode.value === "row") {
+      const rowElement = getRowElement(targetRow.id);
+      if (rowElement) {
+        if (isWithinAriaHidden(rowElement)) {
+          finalize();
+          return;
+        }
+        scrollToCellAndFocus({
+          cellElement: rowElement,
+          rowId: targetRow.id,
+          rowIndex: newRowIndex,
+          columnIndex: 0,
+          behavior: "instant",
+          skipHorizontalScroll: true,
+          verticalOnly,
+          onComplete: finalize
+        });
+      } else {
+        finalize();
+      }
+    } else {
+      finalize();
+    }
+  }
+  function focusTargetRowAfterEdgeScroll(row, columnIndex, directionKey) {
+    const effectiveScrollContainer = verticalScrollContainer.value;
+    if (!effectiveScrollContainer) return;
+    const targetElement = focusMode.value === "cell" ? getCellElement(row.id, columnIndex) : getRowElement(row.id);
+    if (targetElement && !isWithinAriaHidden(targetElement)) {
+      targetElement.focus({ preventScroll: true });
+      if (directionKey === "ArrowDown") {
+        const containerRect = effectiveScrollContainer.getBoundingClientRect();
+        const elementRect = targetElement.getBoundingClientRect();
+        const containerBottom = containerRect.bottom;
+        const elementBottom = elementRect.bottom;
+        const padding = 15;
+        if (elementBottom > containerBottom - padding) {
+          const adjustment = elementBottom - containerBottom + padding;
+          effectiveScrollContainer.scrollTop += adjustment;
+        }
+        const resolvedRows2 = navigableRows?.value ?? rows.value;
+        const isLastRow = resolvedRows2.length > 0 && row.id === resolvedRows2[resolvedRows2.length - 1]?.id;
+        if (isLastRow) {
+          ensureFootersVisible(effectiveScrollContainer);
+        }
+      }
+    }
+  }
+  function getRowTabIndex(row) {
+    if (focusMode.value === "row") {
+      const rowIndex = getRowIndex(row);
+      if (rowIndex !== -1 && focusedCell.value?.rowIndex === rowIndex) {
+        return 0;
+      }
+    }
+    if (props.onSelect && focusMode.value === "none") {
+      return 0;
+    }
+    return -1;
+  }
+  function shouldRowHandleKeydown(row) {
+    if (focusMode.value === "none" && props.onSelect) {
+      return true;
+    }
+    if (focusMode.value === "row") {
+      const rowIndex = getRowIndex(row);
+      return rowIndex !== -1 && focusedCell.value?.rowIndex === rowIndex;
+    }
+    return false;
+  }
+  function getCellTabIndex(row, cellIndex) {
+    if (focusMode.value === "cell") {
+      const rowIndex = getRowIndex(row);
+      if (rowIndex !== -1 && focusedCell.value?.rowIndex === rowIndex && focusedCell.value?.columnIndex === cellIndex) {
+        return 0;
+      }
+    }
+    return -1;
+  }
+  function shouldCellHandleKeydown(row, cellIndex) {
+    if (focusMode.value === "none" && props.onSelect) {
+      return true;
+    }
+    if (focusMode.value === "cell") {
+      const rowIndex = getRowIndex(row);
+      return rowIndex !== -1 && focusedCell.value?.rowIndex === rowIndex && focusedCell.value?.columnIndex === cellIndex;
+    }
+    return false;
+  }
+  function isActiveRow(row) {
+    if (focusMode.value === "none" || !focusedCell.value) return false;
+    const rowIndex = getRowIndex(row);
+    return rowIndex !== -1 && focusedCell.value.rowIndex === rowIndex;
+  }
+  function isFocusedRow(row) {
+    if (focusMode.value !== "row" || !focusedCell.value) return false;
+    const rowIndex = getRowIndex(row);
+    return rowIndex !== -1 && focusedCell.value.rowIndex === rowIndex;
+  }
+  function isFocusedCell(row, cellIndex) {
+    if (focusMode.value !== "cell" || !focusedCell.value) return false;
+    const rowIndex = getRowIndex(row);
+    if (rowIndex !== -1 && focusedCell.value.rowIndex === rowIndex && focusedCell.value.columnIndex === cellIndex) {
+      return !focusedCell.value.suppressOutline;
+    }
+    return false;
+  }
+  function rowFocusProps(row) {
+    return {
+      "data-active-row": isActiveRow(row),
+      "data-focused-row": isFocusedRow(row),
+      "tabindex": getRowTabIndex(row)
+    };
+  }
+  function cellFocusProps(row, cellIndex) {
+    const isFocused = isFocusedCell(row, cellIndex);
+    return {
+      "data-focused": isFocused,
+      "tabindex": getCellTabIndex(row, cellIndex),
+      "class": isFocused ? "focused-cell" : "",
+      "onClick": (e) => onCellClick(e, row, cellIndex)
+    };
+  }
+  function focusRowById(rowId, options) {
+    if (rowId === null) {
+      setFocusedCell(null);
+      return true;
+    }
+    const rowIndex = rowIdToIndexMap.value.get(rowId);
+    if (rowIndex === void 0) {
+      console.warn(`[NuGrid] focusRowById: Row ID "${rowId}" not found in grid`);
+      return false;
+    }
+    const currentRows = resolvedRows.value;
+    const targetRow = currentRows[rowIndex];
+    if (!targetRow) {
+      return false;
+    }
+    const columnIndex = options?.columnIndex ?? findFirstFocusableColumn(targetRow);
+    const align = options?.align ?? alignOnModel.value ?? "nearest";
+    isUpdatingFromModel = true;
+    setFocusedCell({ rowIndex, columnIndex });
+    isUpdatingFromModel = false;
+    focusCell(targetRow, rowIndex, columnIndex, false, () => {
+      const scrollContainer = verticalScrollContainer.value;
+      const rowElement = getRowElement(targetRow.id);
+      const tableElement = tableRef.value;
+      if (scrollContainer && rowElement) {
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const rowRect = rowElement.getBoundingClientRect();
+        const stickyHeight = resolveStickyHeight(tableElement);
+        const visibleTop = containerRect.top + stickyHeight;
+        const visibleHeight = containerRect.height - stickyHeight;
+        const visibleBottom = visibleTop + visibleHeight;
+        if (align === "top") {
+          const targetScrollTop = scrollContainer.scrollTop + (rowRect.top - visibleTop);
+          scrollContainer.scrollTop = Math.max(0, targetScrollTop);
+        } else if (align === "center") {
+          const rowCenter = rowRect.top + rowRect.height / 2;
+          const visibleCenter = visibleTop + visibleHeight / 2;
+          const offset = rowCenter - visibleCenter;
+          scrollContainer.scrollTop = Math.max(0, scrollContainer.scrollTop + offset);
+        } else if (align === "nearest") {
+          const minVisiblePadding = 10;
+          if (rowRect.top < visibleTop + minVisiblePadding) {
+            const adjustment = rowRect.top - visibleTop - minVisiblePadding;
+            scrollContainer.scrollTop = Math.max(0, scrollContainer.scrollTop + adjustment);
+          } else if (rowRect.bottom > visibleBottom - minVisiblePadding) {
+            const adjustment = rowRect.bottom - visibleBottom + minVisiblePadding;
+            const maxScroll = scrollContainer.scrollHeight - scrollContainer.clientHeight;
+            scrollContainer.scrollTop = Math.min(maxScroll, scrollContainer.scrollTop + adjustment);
+          }
+        }
+      }
+    });
+    return true;
+  }
+  if (focusedRowIdModel) {
+    watch(
+      focusedRowIdModel,
+      (newRowId, oldRowId) => {
+        if (isUpdatingToModel) return;
+        if (newRowId === oldRowId) return;
+        if (newRowId === null) {
+          isUpdatingFromModel = true;
+          setFocusedCell(null);
+          isUpdatingFromModel = false;
+          return;
+        }
+        const success = focusRowById(newRowId);
+        if (!success && oldRowId !== void 0) {
+          isUpdatingToModel = true;
+          focusedRowIdModel.value = oldRowId;
+          isUpdatingToModel = false;
+        }
+      },
+      { immediate: false }
+      // Don't run on mount - let normal focus init happen
+    );
+  }
+  return {
+    focusedCell,
+    gridHasFocus,
+    onCellClick,
+    onCellKeyDown,
+    onCellKeyUp,
+    getRowTabIndex,
+    shouldRowHandleKeydown,
+    getCellTabIndex,
+    shouldCellHandleKeydown,
+    isActiveRow,
+    isFocusedRow,
+    isFocusedCell,
+    rowFocusProps,
+    cellFocusProps,
+    focusCell,
+    findFirstFocusableColumn,
+    getCellElement,
+    ensureFootersVisible,
+    scrollToCellAndFocus,
+    setFocusedCell,
+    focusRowById
+  };
+}
+export function useNuGridFocusInit(props, focusFns, rows) {
+  const focusMode = usePropWithDefault(props, "focus", "mode");
+  watch(
+    [focusMode, rows],
+    ([mode, rowList]) => {
+      if (mode === "cell" && rowList && rowList.length > 0 && !focusFns.focusedCell.value) {
+        nextTick(() => {
+          const firstRow = rowList[0];
+          if (firstRow) {
+            const firstFocusableColumn = focusFns.findFirstFocusableColumn(firstRow);
+            focusFns.setFocusedCell({ rowIndex: 0, columnIndex: firstFocusableColumn });
+            focusFns.focusCell(firstRow, 0, firstFocusableColumn);
+          }
+        });
+      }
+    },
+    { immediate: true }
+  );
+}