@ankhorage/zora 25.6.2 → 25.8.0

package/web-dist/components/grid-ruler/GridRuler.js

@@ -1,10 +1,10 @@
 'use client';
 import"../../chunks/Accordion-6wrr910w.js";
-import"../../chunks/Accordion-42jfy1a1.js";
+import"../../chunks/Accordion-vj1m2wck.js";
 import {
   GridLineOverlay2,
   GridRuler2
-} from "../../chunks/Accordion-jh72azm2.js";
+} from "../../chunks/Accordion-vg337250.js";
 import"../../chunks/Accordion-srjya6dz.js";
 import"../../chunks/Accordion-xgpzh4wq.js";
 export {

package/web-dist/components/grid-view/GridView.js

@@ -2,7 +2,7 @@
 import {
   GridView2,
   TileGrid2
-} from "../../chunks/Accordion-a6551mh4.js";
+} from "../../chunks/Accordion-hn43wt45.js";
 import"../../chunks/Accordion-xgpzh4wq.js";
 export {
   GridView2 as GridView,

package/web-dist/components/heading/Heading.js

@@ -1,12 +1,12 @@
 'use client';
 import"../../chunks/Accordion-09qs8gt1.js";
 import"../../chunks/Accordion-6wrr910w.js";
-import"../../chunks/Accordion-42jfy1a1.js";
+import"../../chunks/Accordion-vj1m2wck.js";
 import"../../chunks/Accordion-bfzeab9x.js";
 import {
   Heading2,
   Text3
-} from "../../chunks/Accordion-9w8wg9mf.js";
+} from "../../chunks/Accordion-9rnsg9pk.js";
 import"../../chunks/Accordion-bff0p3x4.js";
 import"../../chunks/Accordion-srjya6dz.js";
 import"../../chunks/Accordion-xgpzh4wq.js";

package/web-dist/components/hero/Hero.js

@@ -8,26 +8,26 @@ import"../../chunks/Accordion-nnv76yff.js";
 import"../../chunks/Accordion-wyxmd0n0.js";
 import {
   Button2
-} from "../../chunks/Accordion-6rrqpb2h.js";
+} from "../../chunks/Accordion-h4ekm5cp.js";
 import {
   withZoraThemeScope
-} from "../../chunks/Accordion-42jfy1a1.js";
+} from "../../chunks/Accordion-vj1m2wck.js";
 import {
   View2,
   Grid2
-} from "../../chunks/Accordion-7tjz25jh.js";
+} from "../../chunks/Accordion-vbzjq3z8.js";
 import"../../chunks/Accordion-2nesr9cv.js";
 import {
   Card2
-} from "../../chunks/Accordion-fjxcn6g9.js";
+} from "../../chunks/Accordion-wcmrasqx.js";
 import {
   Heading2,
   Text3
-} from "../../chunks/Accordion-9w8wg9mf.js";
-import"../../chunks/Accordion-7kq500r1.js";
-import"../../chunks/Accordion-b96evb46.js";
-import"../../chunks/Accordion-61ntvh14.js";
-import"../../chunks/Accordion-a4cma5b6.js";
+} from "../../chunks/Accordion-9rnsg9pk.js";
+import"../../chunks/Accordion-xgxxg1hz.js";
+import"../../chunks/Accordion-1fsrnq73.js";
+import"../../chunks/Accordion-w59y0jdf.js";
+import"../../chunks/Accordion-y3083394.js";
 import"../../chunks/Accordion-eqvdv7tt.js";
 import"../../chunks/Accordion-61e19g3e.js";
 import"../../chunks/Accordion-ys214jt5.js";

package/web-dist/components/icon/Icon.js

@@ -2,10 +2,10 @@
 import"../../chunks/Accordion-bfzeab9x.js";
 import"../../chunks/Accordion-6wrr910w.js";
 import"../../chunks/Accordion-8f0nekwe.js";
-import"../../chunks/Accordion-42jfy1a1.js";
+import"../../chunks/Accordion-vj1m2wck.js";
 import {
   Icon2
-} from "../../chunks/Accordion-b96evb46.js";
+} from "../../chunks/Accordion-1fsrnq73.js";
 import"../../chunks/Accordion-fre84yaq.js";
 import"../../chunks/Accordion-xgpzh4wq.js";
 export {

package/web-dist/components/icon-button/IconButton.js

@@ -10,9 +10,9 @@ import {
   Button2,
   ButtonGroup2,
   IconButton2
-} from "../../chunks/Accordion-6rrqpb2h.js";
-import"../../chunks/Accordion-42jfy1a1.js";
-import"../../chunks/Accordion-7tjz25jh.js";
+} from "../../chunks/Accordion-h4ekm5cp.js";
+import"../../chunks/Accordion-vj1m2wck.js";
+import"../../chunks/Accordion-vbzjq3z8.js";
 import"../../chunks/Accordion-61e19g3e.js";
 import"../../chunks/Accordion-ys214jt5.js";
 import"../../chunks/Accordion-bff0p3x4.js";

package/web-dist/components/image/Image.js

@@ -2,14 +2,14 @@
 import"../../chunks/Accordion-6wrr910w.js";
 import {
   Image2
-} from "../../chunks/Accordion-a4cma5b6.js";
+} from "../../chunks/Accordion-y3083394.js";
 import"../../chunks/Accordion-bfzeab9x.js";
 import"../../chunks/Accordion-8f0nekwe.js";
-import"../../chunks/Accordion-42jfy1a1.js";
-import"../../chunks/Accordion-b96evb46.js";
+import"../../chunks/Accordion-vj1m2wck.js";
+import"../../chunks/Accordion-1fsrnq73.js";
 import"../../chunks/Accordion-09qs8gt1.js";
 import"../../chunks/Accordion-z5a0tx18.js";
-import"../../chunks/Accordion-7tjz25jh.js";
+import"../../chunks/Accordion-vbzjq3z8.js";
 import"../../chunks/Accordion-srjya6dz.js";
 import"../../chunks/Accordion-184r2r82.js";
 import"../../chunks/Accordion-fre84yaq.js";

package/web-dist/components/keyboard-avoiding-view/KeyboardAvoidingView.js

@@ -1,9 +1,9 @@
 'use client';
 import {
   KeyboardAvoidingView2
-} from "../../chunks/Accordion-qn398m1x.js";
+} from "../../chunks/Accordion-r2g18vxa.js";
 import"../../chunks/Accordion-6wrr910w.js";
-import"../../chunks/Accordion-42jfy1a1.js";
+import"../../chunks/Accordion-vj1m2wck.js";
 import"../../chunks/Accordion-xgpzh4wq.js";
 export {
   KeyboardAvoidingView2 as KeyboardAvoidingView

package/web-dist/components/list/List.js

@@ -1,21 +1,21 @@
 'use client';
 import"../../chunks/Accordion-6wrr910w.js";
-import"../../chunks/Accordion-42jfy1a1.js";
+import"../../chunks/Accordion-vj1m2wck.js";
 import"../../chunks/Accordion-09qs8gt1.js";
 import"../../chunks/Accordion-bfzeab9x.js";
-import"../../chunks/Accordion-9w8wg9mf.js";
+import"../../chunks/Accordion-9rnsg9pk.js";
 import"../../chunks/Accordion-z5a0tx18.js";
-import"../../chunks/Accordion-7tjz25jh.js";
+import"../../chunks/Accordion-vbzjq3z8.js";
 import {
   FlatList2,
   ListItem2,
   List2,
   ListSection2,
   SectionList2
-} from "../../chunks/Accordion-5g05kfmx.js";
+} from "../../chunks/Accordion-0q2wzjdd.js";
 import"../../chunks/Accordion-nnv76yff.js";
 import"../../chunks/Accordion-wyxmd0n0.js";
-import"../../chunks/Accordion-sy1cc5my.js";
+import"../../chunks/Accordion-ts788t7b.js";
 import"../../chunks/Accordion-61e19g3e.js";
 import"../../chunks/Accordion-ys214jt5.js";
 import"../../chunks/Accordion-bff0p3x4.js";

package/web-dist/components/list-item/ListItem.js

@@ -1,21 +1,21 @@
 'use client';
 import"../../chunks/Accordion-6wrr910w.js";
-import"../../chunks/Accordion-42jfy1a1.js";
+import"../../chunks/Accordion-vj1m2wck.js";
 import"../../chunks/Accordion-09qs8gt1.js";
 import"../../chunks/Accordion-bfzeab9x.js";
-import"../../chunks/Accordion-9w8wg9mf.js";
+import"../../chunks/Accordion-9rnsg9pk.js";
 import"../../chunks/Accordion-z5a0tx18.js";
-import"../../chunks/Accordion-7tjz25jh.js";
+import"../../chunks/Accordion-vbzjq3z8.js";
 import {
   FlatList2,
   ListItem2,
   List2,
   ListSection2,
   SectionList2
-} from "../../chunks/Accordion-5g05kfmx.js";
+} from "../../chunks/Accordion-0q2wzjdd.js";
 import"../../chunks/Accordion-nnv76yff.js";
 import"../../chunks/Accordion-wyxmd0n0.js";
-import"../../chunks/Accordion-sy1cc5my.js";
+import"../../chunks/Accordion-ts788t7b.js";
 import"../../chunks/Accordion-61e19g3e.js";
 import"../../chunks/Accordion-ys214jt5.js";
 import"../../chunks/Accordion-bff0p3x4.js";

package/web-dist/components/list-section/ListSection.js

@@ -1,21 +1,21 @@
 'use client';
 import"../../chunks/Accordion-6wrr910w.js";
-import"../../chunks/Accordion-42jfy1a1.js";
+import"../../chunks/Accordion-vj1m2wck.js";
 import"../../chunks/Accordion-09qs8gt1.js";
 import"../../chunks/Accordion-bfzeab9x.js";
-import"../../chunks/Accordion-9w8wg9mf.js";
+import"../../chunks/Accordion-9rnsg9pk.js";
 import"../../chunks/Accordion-z5a0tx18.js";
-import"../../chunks/Accordion-7tjz25jh.js";
+import"../../chunks/Accordion-vbzjq3z8.js";
 import {
   FlatList2,
   ListItem2,
   List2,
   ListSection2,
   SectionList2
-} from "../../chunks/Accordion-5g05kfmx.js";
+} from "../../chunks/Accordion-0q2wzjdd.js";
 import"../../chunks/Accordion-nnv76yff.js";
 import"../../chunks/Accordion-wyxmd0n0.js";
-import"../../chunks/Accordion-sy1cc5my.js";
+import"../../chunks/Accordion-ts788t7b.js";
 import"../../chunks/Accordion-61e19g3e.js";
 import"../../chunks/Accordion-ys214jt5.js";
 import"../../chunks/Accordion-bff0p3x4.js";

package/web-dist/components/matrix-grid/MatrixGrid.js

@@ -1,31 +1,32 @@
 'use client';
-import"../../chunks/Accordion-09qs8gt1.js";
-import"../../chunks/Accordion-6wrr910w.js";
-import {
-  Pressable
-} from "../../chunks/Accordion-nnv76yff.js";
 import {
   GridView2
-} from "../../chunks/Accordion-a6551mh4.js";
+} from "../../chunks/Accordion-hn43wt45.js";
+import"../../chunks/Accordion-09qs8gt1.js";
+import"../../chunks/Accordion-6wrr910w.js";
+import"../../chunks/Accordion-nnv76yff.js";
 import {
   withZoraThemeScope
-} from "../../chunks/Accordion-42jfy1a1.js";
-import"../../chunks/Accordion-sw7ep29d.js";
+} from "../../chunks/Accordion-vj1m2wck.js";
+import"../../chunks/Accordion-hnx7hx55.js";
 import {
   resolveSelectionEventIntent
-} from "../../chunks/Accordion-5df6cgyf.js";
+} from "../../chunks/Accordion-md1g54wg.js";
 import {
   applySelectionIntent
 } from "../../chunks/Accordion-n4et7etk.js";
 import {
   getMatrixCellPlacement,
   getVisibleMatrixCells
-} from "../../chunks/Accordion-bz04casa.js";
+} from "../../chunks/Accordion-zypyr9xw.js";
 import {
   useZoraTheme2
 } from "../../chunks/Accordion-srjya6dz.js";
 import"../../chunks/Accordion-184r2r82.js";
 import"../../chunks/Accordion-fre84yaq.js";
+import {
+  isRecord
+} from "../../chunks/Accordion-fcczvwgg.js";
 import {
   require_cjs
 } from "../../chunks/Accordion-xgpzh4wq.js";
@@ -35,7 +36,55 @@ import {
 
 // src/features/matrix-grid/adapters/inbound/MatrixGrid.tsx
 var import_react_native = __toESM(require_cjs(), 1);
-import React from "react";
+import React2 from "react";
+
+// src/features/matrix-grid/application/createMatrixGridSparseIndex.ts
+function createMatrixGridSparseIndex(layout, cells) {
+  const rowIndexes = new Map(layout.rows.map((row, index) => [row.id, index]));
+  const columnIndexes = new Map(layout.columns.map((column, index) => [column.id, index]));
+  const entries = cells.map((cell) => createSparseEntry(cell, rowIndexes, columnIndexes));
+  const entriesByRow = groupEntries(entries, "columnIndex");
+  const entriesByColumn = groupEntries(entries, "rowIndex");
+  const orderedEntries = [...entries].sort(compareRowThenColumn);
+  return {
+    cellById: new Map(entries.map((entry) => [entry.id, entry.cell])),
+    entries,
+    entriesByColumn,
+    entriesByRow,
+    firstId: orderedEntries.at(0)?.id ?? null,
+    positionById: new Map(entries.map((entry) => [entry.id, entry]))
+  };
+}
+function createSparseEntry(cell, rowIndexes, columnIndexes) {
+  const rowIndex = rowIndexes.get(cell.rowId);
+  const columnIndex = columnIndexes.get(cell.columnId);
+  if (rowIndex === undefined || columnIndex === undefined) {
+    throw new Error(`Matrix cell ${cell.id} references an unknown row or column.`);
+  }
+  return { cell, columnIndex, id: cell.id, rowIndex };
+}
+function groupEntries(entries, axis) {
+  const groups = new Map;
+  for (const entry of entries) {
+    const groupKey = axis === "columnIndex" ? entry.rowIndex : entry.columnIndex;
+    const group = groups.get(groupKey) ?? [];
+    group.push(entry);
+    groups.set(groupKey, group);
+  }
+  return new Map([...groups].map(([key, group]) => [
+    key,
+    group.sort((left, right) => compareAxisThenId(left, right, axis))
+  ]));
+}
+function compareRowThenColumn(left, right) {
+  return left.rowIndex - right.rowIndex || left.columnIndex - right.columnIndex || left.id.localeCompare(right.id);
+}
+function compareAxisThenId(left, right, axis) {
+  return getAxisCoordinate(left, axis) - getAxisCoordinate(right, axis) || left.id.localeCompare(right.id);
+}
+function getAxisCoordinate(entry, axis) {
+  return axis === "columnIndex" ? entry.columnIndex : entry.rowIndex;
+}
 
 // src/features/matrix-grid/application/resolveMatrixGridContentSize.ts
 function resolveMatrixGridContentSize(layout) {
@@ -61,12 +110,157 @@ function resolveMatrixGridContentSize(layout) {
 }
 
 // src/features/matrix-grid/application/resolveMatrixGridSelection.ts
-function resolveMatrixGridSelection(selectedIds, cellId, intent, mode) {
-  return mode === "single" ? applySelectionIntent(selectedIds, cellId, "replace") : applySelectionIntent(selectedIds, cellId, intent);
+function resolveMatrixGridSelection(cells, selectedIds, cellId, anchorId, intent, mode) {
+  if (mode === "single")
+    return applySelectionIntent(selectedIds, cellId, "replace");
+  if (intent !== "range")
+    return applySelectionIntent(selectedIds, cellId, intent);
+  const anchor = cells.find((cell) => cell.id === anchorId);
+  const target = cells.find((cell) => cell.id === cellId);
+  if (!anchor || !target)
+    return applySelectionIntent(selectedIds, cellId, "replace");
+  return cells.filter((cell) => cell.rowIndex >= Math.min(anchor.rowIndex, target.rowIndex) && cell.rowIndex <= Math.max(anchor.rowIndex, target.rowIndex) && cell.columnIndex >= Math.min(anchor.columnIndex, target.columnIndex) && cell.columnIndex <= Math.max(anchor.columnIndex, target.columnIndex)).map((cell) => cell.id);
 }
 
-// src/features/matrix-grid/adapters/inbound/MatrixGrid.tsx
+// src/features/matrix-grid/adapters/inbound/MatrixGridKeyboardProxy.web.tsx
 import { jsx } from "react/jsx-runtime";
+function MatrixGridKeyboardProxy({ children, onKeyDown }) {
+  return /* @__PURE__ */ jsx("div", {
+    onKeyDownCapture: (event) => {
+      if (isNestedInteractiveElement(event.target, event.currentTarget))
+        return;
+      if (onKeyDown(event))
+        event.preventDefault();
+    },
+    style: { display: "flex", flex: 1 },
+    children
+  });
+}
+function isNestedInteractiveElement(target, boundary) {
+  if (target === boundary || !hasClosest(target))
+    return false;
+  const interactiveElement = target.closest(interactiveSelector);
+  return interactiveElement !== null && interactiveElement !== getFirstElementChild(boundary);
+}
+function hasClosest(target) {
+  return "closest" in target && typeof target.closest === "function";
+}
+function getFirstElementChild(boundary) {
+  return "firstElementChild" in boundary ? boundary.firstElementChild : undefined;
+}
+var interactiveSelector = 'a, button, input, select, textarea, [contenteditable="true"], [role="button"], [role="checkbox"], [role="combobox"], [role="link"], [role="menuitem"], [role="option"], [role="slider"], [role="spinbutton"], [role="switch"], [role="tab"]';
+
+// src/features/matrix-grid/adapters/inbound/useMatrixGridKeyboardFocus.ts
+import React from "react";
+
+// src/features/matrix-grid/application/getMatrixGridNextFocusId.ts
+function getMatrixGridNextFocusId(index, currentId, key) {
+  const current = currentId === null ? undefined : index.positionById.get(currentId);
+  if (!current)
+    return index.firstId;
+  return resolveDirectionalCandidate(index, current, key)?.id ?? current.id;
+}
+function resolveDirectionalCandidate(index, current, key) {
+  switch (key) {
+    case "ArrowLeft":
+      return findDirectionalNeighbour(index.entriesByRow.get(current.rowIndex), current, "columnIndex", -1);
+    case "ArrowRight":
+      return findDirectionalNeighbour(index.entriesByRow.get(current.rowIndex), current, "columnIndex", 1);
+    case "ArrowUp":
+      return findDirectionalNeighbour(index.entriesByColumn.get(current.columnIndex), current, "rowIndex", -1);
+    case "ArrowDown":
+      return findDirectionalNeighbour(index.entriesByColumn.get(current.columnIndex), current, "rowIndex", 1);
+    default:
+      return;
+  }
+}
+function findDirectionalNeighbour(entries, current, axis, direction) {
+  if (!entries)
+    return;
+  const coordinate = getAxisCoordinate2(current, axis);
+  const insertionIndex = findFirstGreaterOrEqual(entries, coordinate, axis);
+  if (direction === -1)
+    return insertionIndex === 0 ? undefined : entries[insertionIndex - 1];
+  return entries[findFirstGreater(entries, coordinate, axis)];
+}
+function findFirstGreater(entries, coordinate, axis) {
+  let lower = 0;
+  let upper = entries.length;
+  while (lower < upper) {
+    const middle = Math.floor((lower + upper) / 2);
+    const entry = entries.at(middle);
+    if (entry && getAxisCoordinate2(entry, axis) <= coordinate)
+      lower = middle + 1;
+    else
+      upper = middle;
+  }
+  return lower;
+}
+function findFirstGreaterOrEqual(entries, coordinate, axis) {
+  let lower = 0;
+  let upper = entries.length;
+  while (lower < upper) {
+    const middle = Math.floor((lower + upper) / 2);
+    const entry = entries.at(middle);
+    if (entry && getAxisCoordinate2(entry, axis) < coordinate)
+      lower = middle + 1;
+    else
+      upper = middle;
+  }
+  return lower;
+}
+function getAxisCoordinate2(entry, axis) {
+  return axis === "columnIndex" ? entry.columnIndex : entry.rowIndex;
+}
+
+// src/features/matrix-grid/adapters/inbound/useMatrixGridKeyboardFocus.ts
+function useMatrixGridKeyboardFocus(index, disabled, visibleIds, onNavigate) {
+  const [focusedId, setFocusedId] = React.useState(null);
+  const focusedRef = React.useRef(null);
+  const pendingFocusRef = React.useRef(null);
+  const cellRefs = React.useRef(new Map);
+  const visibleIdSet = React.useMemo(() => new Set(visibleIds), [visibleIds]);
+  const tabStopId = focusedId !== null && visibleIdSet.has(focusedId) ? focusedId : visibleIds.find((id) => index.positionById.has(id));
+  const onFocus = React.useCallback((id) => {
+    pendingFocusRef.current = null;
+    focusedRef.current = id;
+    setFocusedId(id);
+  }, []);
+  const registerCell = React.useCallback((id, node) => {
+    if (node === null) {
+      cellRefs.current.delete(id);
+      return;
+    }
+    cellRefs.current.set(id, node);
+    if (pendingFocusRef.current === id) {
+      pendingFocusRef.current = null;
+      node.focus();
+    }
+  }, []);
+  const onKeyDown = React.useCallback((id, key, shiftKey) => {
+    if (disabled || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(key)) {
+      return false;
+    }
+    const originId = focusedRef.current ?? id;
+    const nextId = getMatrixGridNextFocusId(index, originId, key);
+    if (nextId === null || nextId === originId)
+      return true;
+    focusedRef.current = nextId;
+    pendingFocusRef.current = nextId;
+    setFocusedId(nextId);
+    onNavigate(nextId, originId, shiftKey);
+    const mounted = cellRefs.current.get(nextId);
+    if (mounted) {
+      pendingFocusRef.current = null;
+      mounted.focus();
+    }
+    return true;
+  }, [disabled, index, onNavigate]);
+  return { focusedId, onFocus, onKeyDown, registerCell, tabStopId };
+}
+
+// src/features/matrix-grid/adapters/inbound/MatrixGrid.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 function MatrixGridInner({
   accessibilityLabel = "Matrix grid",
   cells,
@@ -76,6 +270,7 @@ function MatrixGridInner({
   onSelectionChange,
   onViewportChange,
   overscanPixels = 160,
+  readOnly = false,
   renderCell,
   selectedCellIds = [],
   selectionMode = "single",
@@ -86,37 +281,65 @@ function MatrixGridInner({
   zoomY = 1
 }) {
   const { theme } = useZoraTheme2();
-  const contentSize = React.useMemo(() => resolveMatrixGridContentSize(layout), [layout]);
-  const initialViewport = React.useMemo(() => ({ height, offsetX: 0, offsetY: 0, pixelsPerUnitX: zoomX, pixelsPerUnitY: zoomY, width }), [height, width, zoomX, zoomY]);
-  const [uncontrolledViewport, setUncontrolledViewport] = React.useState(initialViewport);
+  const contentSize = React2.useMemo(() => resolveMatrixGridContentSize(layout), [layout]);
+  const initialViewport = React2.useMemo(() => ({ height, offsetX: 0, offsetY: 0, pixelsPerUnitX: zoomX, pixelsPerUnitY: zoomY, width }), [height, width, zoomX, zoomY]);
+  const [uncontrolledViewport, setUncontrolledViewport] = React2.useState(initialViewport);
   const viewport = controlledViewport ?? uncontrolledViewport;
-  const visibleCells = React.useMemo(() => getVisibleMatrixCells(layout, cells, viewport, overscanPixels), [cells, layout, overscanPixels, viewport]);
-  const visibleCellById = React.useMemo(() => new Map(visibleCells.map((cell) => [cell.id, cell])), [visibleCells]);
-  const handleViewportChange = React.useCallback((proposal) => {
+  const sparseIndex = React2.useMemo(() => createMatrixGridSparseIndex(layout, cells), [cells, layout]);
+  const cellPlacements = React2.useMemo(() => getVisibleMatrixCells(layout, cells, viewport, overscanPixels), [cells, layout, overscanPixels, viewport]);
+  const [visibleIds, setVisibleIds] = React2.useState([]);
+  const anchorId = React2.useRef(null);
+  const handleViewportChange = React2.useCallback((proposal) => {
     if (controlledViewport === undefined)
       setUncontrolledViewport(proposal);
     onViewportChange?.(proposal);
   }, [controlledViewport, onViewportChange]);
-  const activateCell = React.useCallback((cell, event) => {
-    if (interactionPolicy === "passive")
+  const activateCell = React2.useCallback((cell, event) => {
+    if (interactionPolicy === "passive" || readOnly)
+      return;
+    const intent = isRangeSelectionEvent(event) ? "range" : resolveSelectionEventIntent(event, "pointer");
+    onSelectionChange?.(resolveMatrixGridSelection(sparseIndex.entries, selectedCellIds, cell.id, anchorId.current, intent, selectionMode));
+    if (intent !== "range")
+      anchorId.current = cell.id;
+  }, [
+    interactionPolicy,
+    onSelectionChange,
+    readOnly,
+    selectedCellIds,
+    selectionMode,
+    sparseIndex.entries
+  ]);
+  const handleKeyboardNavigation = React2.useCallback((targetId, originId, shiftKey) => {
+    anchorId.current ??= originId;
+    if (!shiftKey)
       return;
-    const intent = resolveSelectionEventIntent(event, "pointer");
-    onSelectionChange?.(resolveMatrixGridSelection(selectedCellIds, cell.id, intent, selectionMode));
-  }, [interactionPolicy, onSelectionChange, selectedCellIds, selectionMode]);
-  return /* @__PURE__ */ jsx(import_react_native.View, {
+    const cell = sparseIndex.cellById.get(targetId);
+    if (cell)
+      activateCell(getMatrixCellPlacement(layout, cell), { shiftKey: true });
+  }, [activateCell, layout, sparseIndex]);
+  const keyboard = useMatrixGridKeyboardFocus(sparseIndex, interactionPolicy === "passive", visibleIds, handleKeyboardNavigation);
+  const focusedPlacement = React2.useMemo(() => {
+    const focusedCell = keyboard.focusedId === null ? undefined : sparseIndex.cellById.get(keyboard.focusedId);
+    return focusedCell ? getMatrixCellPlacement(layout, focusedCell) : undefined;
+  }, [keyboard.focusedId, layout, sparseIndex.cellById]);
+  const gridItems = React2.useMemo(() => focusedPlacement && !cellPlacements.some((cell) => cell.id === focusedPlacement.id) ? [...cellPlacements, focusedPlacement] : cellPlacements, [cellPlacements, focusedPlacement]);
+  const cellById = React2.useMemo(() => new Map(gridItems.map((cell) => [cell.id, cell])), [gridItems]);
+  return /* @__PURE__ */ jsx2(import_react_native.View, {
     accessibilityLabel,
-    children: /* @__PURE__ */ jsx(GridView2, {
+    children: /* @__PURE__ */ jsx2(GridView2, {
       contentHeight: contentSize.height,
       contentWidth: contentSize.width,
       height,
       interactionPolicy,
-      items: visibleCells,
+      items: gridItems,
+      focusedItemId: keyboard.focusedId ?? undefined,
       overscanPixels: 0,
+      onVisibleItemIdsChange: setVisibleIds,
       renderItem: (item) => {
-        const cell = visibleCellById.get(item.id);
+        const cell = cellById.get(item.id);
         if (!cell)
           return null;
-        return renderMatrixCell(cell, selectedCellIds, theme.semantics.neutral.divider, theme.colors.primary, renderCell, activateCell, testID);
+        return renderMatrixCell(cell, selectedCellIds, theme.semantics.neutral.divider, theme.colors.primary, renderCell, activateCell, keyboard, interactionPolicy === "passive", readOnly, testID);
       },
       testID,
       viewport,
@@ -125,24 +348,50 @@ function MatrixGridInner({
     })
   });
 }
-function renderMatrixCell(cell, selectedCellIds, dividerColor, selectedColor, renderCell, activateCell, testID) {
+function renderMatrixCell(cell, selectedCellIds, dividerColor, selectedColor, renderCell, activateCell, keyboard, passive, readOnly, testID) {
   const selected = selectedCellIds.includes(cell.id);
-  return /* @__PURE__ */ jsx(Pressable, {
-    accessibilityLabel: `Cell ${cell.id}`,
-    accessibilityRole: "button",
-    accessibilityState: { selected },
-    style: [
-      styles.cell,
-      {
-        borderColor: selected ? selectedColor : dividerColor,
-        height: "100%",
-        width: "100%"
-      }
-    ],
-    testID: testID === undefined ? undefined : `${testID}-cell-${cell.id}`,
-    onPress: (event) => activateCell(cell, event),
-    children: renderCell(cell)
-  }, cell.id);
+  const canInteract = keyboard.tabStopId === cell.id;
+  return /* @__PURE__ */ jsx2(MatrixGridKeyboardProxy, {
+    onKeyDown: (event) => {
+      if (keyboard.onKeyDown(cell.id, event.key, event.shiftKey))
+        return true;
+      if (!["Enter", " "].includes(event.key))
+        return false;
+      if (passive || readOnly)
+        return false;
+      activateCell(cell, event);
+      return true;
+    },
+    children: /* @__PURE__ */ jsx2(import_react_native.Pressable, {
+      accessibilityActions: [{ name: "activate" }],
+      accessibilityLabel: `Cell ${cell.id}`,
+      accessibilityRole: "button",
+      accessibilityState: { disabled: passive, selected },
+      disabled: passive,
+      focusable: import_react_native.Platform.OS !== "web" || canInteract,
+      style: [
+        styles.cell,
+        {
+          borderColor: selected || keyboard.focusedId === cell.id ? selectedColor : dividerColor,
+          height: "100%",
+          width: "100%"
+        }
+      ],
+      testID: testID === undefined ? undefined : `${testID}-cell-${cell.id}`,
+      onAccessibilityAction: () => activateCell(cell, {}),
+      onFocus: () => keyboard.onFocus(cell.id),
+      onPress: (event) => activateCell(cell, event),
+      ref: (node) => keyboard.registerCell(cell.id, node),
+      children: renderCell(cell)
+    }, cell.id)
+  });
+}
+function isRangeSelectionEvent(event) {
+  if (!isRecord(event))
+    return false;
+  if (event.shiftKey === true)
+    return true;
+  return isRecord(event.nativeEvent) && event.nativeEvent.shiftKey === true || isRecord(event.originalEvent) && event.originalEvent.shiftKey === true;
 }
 var styles = import_react_native.StyleSheet.create({
   cell: { borderWidth: 1, height: "100%", overflow: "hidden", width: "100%" }