@ankhorage/zora 25.6.0 → 25.6.2

package/src/features/matrix-grid/application/resolveMatrixGridVisibleCells.test.ts

@@ -0,0 +1,35 @@
+import { getMatrixCellPlacement, getVisibleMatrixCells } from '@ankhorage/grid-view';
+import { describe, expect, test } from 'bun:test';
+
+describe('MatrixGrid sparse geometry', () => {
+  test('culls a 10k sparse cell catalogue in a million-cell logical matrix', () => {
+    const layout = {
+      columns: Array.from({ length: 1000 }, (_, index) => ({ id: `column-${index}`, size: 20 })),
+      rows: Array.from({ length: 1000 }, (_, index) => ({
+        id: `row-${index}`,
+        size: index % 2 === 0 ? 16 : 24,
+      })),
+    };
+    const cells = Array.from({ length: 10001 }, (_, index) => ({
+      columnId: `column-${(index * 37) % 1000}`,
+      id: `cell-${index}`,
+      rowId: `row-${(index * 91) % 1000}`,
+    }));
+
+    const firstCell = cells.at(0);
+    if (!firstCell) throw new Error('The sparse test catalogue must contain a first cell.');
+    const first = getMatrixCellPlacement(layout, firstCell);
+    const visible = getVisibleMatrixCells(layout, cells, {
+      height: 120,
+      offsetX: first.x,
+      offsetY: first.y,
+      pixelsPerUnitX: 1,
+      pixelsPerUnitY: 1,
+      width: 120,
+    });
+
+    expect(first).toMatchObject({ id: 'cell-0', width: 20 });
+    expect(visible.length).toBeLessThan(cells.length);
+    expect(visible.every((cell) => cell.width === 20 && cell.height > 0)).toBe(true);
+  });
+});

package/src/features/matrix-grid/meta.ts

@@ -0,0 +1,12 @@
+import type { ZoraComponentMeta } from '../../types/authoring';
+
+/** Code-only rendering and non-serializable cell callbacks stay outside manifest authoring. */
+export const matrixGridMeta = {
+  name: 'MatrixGrid',
+  category: 'foundation',
+  description: 'Virtualized sparse matrix renderer for executable code APIs.',
+  directManifestNode: false,
+  note: 'Requires a renderCell callback and is intentionally code-only.',
+  allowedChildren: [],
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/features/matrix-grid/public.ts

@@ -0,0 +1,3 @@
+export type { MatrixGridProps } from '../../types/matrix-grid';
+export { MatrixGrid } from './adapters/inbound/MatrixGrid';
+export { resolveMatrixGridContentSize } from './application/resolveMatrixGridContentSize';

package/src/features/registry/ZORA_COMPONENT_REGISTRY.ts

@@ -55,6 +55,7 @@ import { Image } from '../image/public';
 import { KeyboardAvoidingView } from '../keyboard-avoiding-view/public';
 import { AppShell, Divider, Grid, Screen, ScrollView, View } from '../layout/public';
 import { FlatList, List, ListItem, ListSection, SectionList } from '../list/public';
+import { MatrixGrid } from '../matrix-grid/public';
 import { MissingElement } from '../missing-element/public';
 import { Pagination } from '../pagination/public';
 import { PaletteItem } from '../palette-item/public';
@@ -202,6 +203,7 @@ const _ZORA_COMPONENT_REGISTRY = {
   GridView,
   TileGrid,
   TimeGrid,
+  MatrixGrid,
   MediaExplorer,
   Hero,
   List,

package/src/features/registry/componentMeta.ts

@@ -68,6 +68,7 @@ import { viewMeta } from '../layout/viewMeta';
 import { flatListMeta } from '../list/flatListMeta';
 import { listItemMeta, listMeta, listSectionMeta } from '../list/meta';
 import { sectionListMeta } from '../list/sectionListMeta';
+import { matrixGridMeta } from '../matrix-grid/meta';
 import { missingElementMeta } from '../missing-element/missingElementMeta';
 import { paginationMeta } from '../pagination/paginationMeta';
 import { paletteItemMeta } from '../palette-item/paletteItemMeta';
@@ -206,6 +207,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMet
   GridView: gridViewMeta,
   TileGrid: tileGridMeta,
   TimeGrid: timeGridMeta,
+  MatrixGrid: matrixGridMeta,
   Hero: heroMeta,
   List: listMeta,
   ListItem: listItemMeta,

package/src/features/registry/createEventCapabilities.ts

@@ -0,0 +1,108 @@
+import { areCapabilitiesEqual, isCapabilityId } from '@ankhorage/capability';
+import type { Capability } from '@ankhorage/contracts/capability';
+import type { DataSchema } from '@ankhorage/contracts/data';
+
+import type {
+  ZoraComponentEventMeta,
+  ZoraComponentEventPayloadFieldMeta,
+} from '../../types/authoring';
+import { ZORA_COMPONENT_META } from './componentMeta';
+
+/*** Projects direct-manifest ZORA event metadata into unique portable event capabilities. */
+export function createEventCapabilities(): readonly Capability[] {
+  const capabilitiesById = Object.values(ZORA_COMPONENT_META)
+    .filter((component) => component.directManifestNode)
+    .flatMap((component) => Object.values(component.events ?? {}))
+    .reduce<ReadonlyMap<Capability['id'], Capability>>(
+      (capabilities, event) => addEventCapability(capabilities, event),
+      new Map(),
+    );
+
+  return [...capabilitiesById.values()].sort((left, right) => left.id.localeCompare(right.id));
+}
+
+/*** Adds one namespaced metadata event while rejecting conflicting duplicate identities. */
+function addEventCapability(
+  capabilities: ReadonlyMap<Capability['id'], Capability>,
+  event: ZoraComponentEventMeta,
+): ReadonlyMap<Capability['id'], Capability> {
+  if (!isCapabilityId(event.eventType)) return capabilities;
+
+  const capability = createEventCapability(event);
+  const existing = capabilities.get(capability.id);
+  if (existing !== undefined && !areCapabilitiesEqual(existing, capability)) {
+    throw new Error(`ZORA event metadata defines conflicting capability "${capability.id}".`);
+  }
+
+  return new Map([...capabilities, [capability.id, capability]]);
+}
+
+/*** Converts one emitted component event into its serializable canonical descriptor. */
+function createEventCapability(event: ZoraComponentEventMeta): Capability {
+  if (!isCapabilityId(event.eventType)) {
+    throw new Error(
+      `ZORA event metadata must use a namespaced capability id: "${event.eventType}".`,
+    );
+  }
+
+  return {
+    id: event.eventType,
+    owner: '@ankhorage/zora',
+    access: ['emit'],
+    binding: { kind: 'event', bindableAs: ['source'] },
+    label: event.label,
+    ...(event.description === undefined ? {} : { description: event.description }),
+    output: { schema: createEventPayloadSchema(event.payloadFields ?? []) },
+  };
+}
+
+/*** Projects the documented event payload fields into an open object schema. */
+function createEventPayloadSchema(
+  fields: readonly ZoraComponentEventPayloadFieldMeta[],
+): DataSchema {
+  return {
+    type: 'object',
+    properties: fields.reduce<Readonly<Record<string, DataSchema>>>(addPayloadField, {}),
+  };
+}
+
+/*** Adds one dotted metadata path to an immutable object-schema property map. */
+function addPayloadField(
+  properties: Readonly<Record<string, DataSchema>>,
+  field: ZoraComponentEventPayloadFieldMeta,
+): Readonly<Record<string, DataSchema>> {
+  return addPayloadFieldAtPath(properties, field.path.split('.'), createPayloadFieldSchema(field));
+}
+
+/*** Recursively embeds a leaf schema below its documented object-property path. */
+function addPayloadFieldAtPath(
+  properties: Readonly<Record<string, DataSchema>>,
+  path: readonly string[],
+  schema: DataSchema,
+): Readonly<Record<string, DataSchema>> {
+  const [key, ...remainingPath] = path;
+  if (key === undefined || key === '') return properties;
+  if (remainingPath.length === 0) return { ...properties, [key]: schema };
+
+  const current = Object.entries(properties).find(([propertyKey]) => propertyKey === key)?.[1];
+  const nestedProperties = addPayloadFieldAtPath(current?.properties ?? {}, remainingPath, schema);
+  return {
+    ...properties,
+    [key]: { ...current, type: 'object', properties: nestedProperties },
+  };
+}
+
+/*** Maps one authoring payload-field type and annotations to its portable data schema. */
+function createPayloadFieldSchema(field: ZoraComponentEventPayloadFieldMeta): DataSchema {
+  return {
+    ...(field.type === 'object'
+      ? { type: 'object' as const }
+      : field.type === 'record'
+        ? { type: 'object' as const, additionalProperties: true }
+        : field.type === 'unknown'
+          ? {}
+          : { type: field.type }),
+    ...(field.label === undefined ? {} : { title: field.label }),
+    ...(field.description === undefined ? {} : { description: field.description }),
+  };
+}

package/src/index.ts

@@ -314,6 +314,8 @@ export type {
 } from './features/list/public';
 export { FlatList, SectionList } from './features/list/public';
 export { List, ListItem, ListSection } from './features/list/public';
+export type { MatrixGridProps } from './features/matrix-grid/public';
+export { MatrixGrid } from './features/matrix-grid/public';
 export { MissingElement, type MissingElementProps } from './features/missing-element/public';
 export { Pagination, type PaginationProps } from './features/pagination/public';
 export type { PaletteItemProps } from './features/palette-item/public';

package/src/structureOwnership.test.ts

@@ -63,4 +63,9 @@ describe('src ownership', () => {
       expect(existsSync(path), path).toBe(false);
     }
   });
+
+  test('keeps event capability projection with the registry metadata owner', () => {
+    expect(existsSync('src/features/registry/createEventCapabilities.ts')).toBe(true);
+    expect(existsSync('src/capabilities/createEventCapabilities.ts')).toBe(false);
+  });
 });

package/src/types/matrix-grid.ts

@@ -0,0 +1,29 @@
+import type {
+  GridMatrixCell,
+  GridMatrixCellPlacement,
+  GridMatrixLayout,
+  GridViewport,
+} from '@ankhorage/grid-view';
+import type React from 'react';
+
+import type { ZoraBaseProps } from './base';
+import type { SelectionMode } from './selection';
+
+/** Code-first virtualized sparse-matrix presentation over the published grid-view geometry API. */
+export interface MatrixGridProps extends ZoraBaseProps {
+  readonly layout: GridMatrixLayout;
+  readonly cells: readonly GridMatrixCell[];
+  readonly width: number;
+  readonly height: number;
+  /** A supplied viewport is controlled by the caller, including independent axis zoom. */
+  readonly viewport?: GridViewport;
+  readonly zoomX?: number;
+  readonly zoomY?: number;
+  readonly overscanPixels?: number;
+  readonly selectedCellIds?: readonly string[];
+  readonly selectionMode?: SelectionMode;
+  readonly onSelectionChange?: (ids: readonly string[]) => void;
+  readonly onViewportChange?: (viewport: GridViewport) => void;
+  readonly renderCell: (cell: GridMatrixCellPlacement) => React.ReactNode;
+  readonly accessibilityLabel?: string;
+}

package/web-dist/chunks/{Accordion-f43jba23.js → Accordion-2r0gqk3x.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   TileGrid2
-} from "./Accordion-q8exgc3h.js";
+} from "./Accordion-a6551mh4.js";
 import {
   withZoraThemeScope
 } from "./Accordion-42jfy1a1.js";

package/web-dist/chunks/{Accordion-q8exgc3h.js → Accordion-a6551mh4.js}

@@ -6,7 +6,7 @@ import {
   revealWorldRect,
   worldToViewport,
   zoomViewportAt
-} from "./Accordion-ebghcyzj.js";
+} from "./Accordion-bz04casa.js";
 import {
   require_cjs
 } from "./Accordion-xgpzh4wq.js";

package/web-dist/chunks/{Accordion-ebghcyzj.js → Accordion-bz04casa.js}

@@ -109,6 +109,89 @@ function getLaneIntervalPlacement(lanes, interval) {
   return resolveLaneIntervalPlacement(interval, laneMetrics);
 }
 
+// node_modules/@ankhorage/grid-view/dist/features/layout/utils/resolveMatrixCellPlacement.js
+function resolveMatrixCellPlacement(cell, rows, columns) {
+  if (!cell.id) {
+    throw new RangeError("Matrix cells require a nonempty ID.");
+  }
+  const rowIndex = rows.indexes.get(cell.rowId);
+  const columnIndex = columns.indexes.get(cell.columnId);
+  if (rowIndex === undefined || columnIndex === undefined) {
+    throw new RangeError("Matrix cells must reference an existing row and column.");
+  }
+  return {
+    ...cell,
+    rowIndex,
+    columnIndex,
+    x: readGridAxisMetric(columns.offsets, columnIndex),
+    y: readGridAxisMetric(rows.offsets, rowIndex),
+    width: readGridAxisMetric(columns.sizes, columnIndex),
+    height: readGridAxisMetric(rows.sizes, rowIndex)
+  };
+}
+
+// node_modules/@ankhorage/grid-view/dist/features/layout/getVisibleMatrixCells.js
+function getVisibleMatrixCells(layout, cells, viewport, overscanPixels = 0) {
+  const rows = createGridAxisMetrics(layout.rows);
+  const columns = createGridAxisMetrics(layout.columns);
+  validateUniqueIds(cells, "Matrix cells");
+  const bounds = getVisibleWorldBounds(viewport, overscanPixels);
+  const rowRange = getIntersectingRange(rows.offsets, rows.sizes, bounds.y, bounds.height);
+  const columnRange = getIntersectingRange(columns.offsets, columns.sizes, bounds.x, bounds.width);
+  if (rowRange === undefined || columnRange === undefined) {
+    return [];
+  }
+  return cells.flatMap((cell) => {
+    const placement = resolveMatrixCellPlacement(cell, rows, columns);
+    return placement.rowIndex >= rowRange.start && placement.rowIndex <= rowRange.end && placement.columnIndex >= columnRange.start && placement.columnIndex <= columnRange.end ? [placement] : [];
+  });
+}
+function validateUniqueIds(cells, label) {
+  const ids = new Set;
+  cells.forEach(({ id }) => {
+    if (ids.has(id)) {
+      throw new RangeError(`${label} require unique IDs.`);
+    }
+    ids.add(id);
+  });
+}
+function getIntersectingRange(offsets, sizes, start, extent) {
+  const end = start + extent;
+  const first = findFirstEndingAtOrAfter(offsets, sizes, start);
+  const last = findLastStartingAtOrBefore(offsets, end);
+  return first === undefined || last === undefined || first > last ? undefined : { start: first, end: last };
+}
+function findFirstEndingAtOrAfter(offsets, sizes, coordinate) {
+  let low = 0;
+  let high = offsets.length - 1;
+  let result;
+  while (low <= high) {
+    const middle = Math.floor((low + high) / 2);
+    if (readGridAxisMetric(offsets, middle) + readGridAxisMetric(sizes, middle) >= coordinate) {
+      result = middle;
+      high = middle - 1;
+    } else {
+      low = middle + 1;
+    }
+  }
+  return result;
+}
+function findLastStartingAtOrBefore(offsets, coordinate) {
+  let low = 0;
+  let high = offsets.length - 1;
+  let result;
+  while (low <= high) {
+    const middle = Math.floor((low + high) / 2);
+    if (readGridAxisMetric(offsets, middle) <= coordinate) {
+      result = middle;
+      low = middle + 1;
+    } else {
+      high = middle - 1;
+    }
+  }
+  return result;
+}
+
 // node_modules/@ankhorage/grid-view/dist/features/viewport/constrainViewport.js
 function constrainViewport(viewport, constraints) {
   assertValidViewport(viewport);
@@ -308,17 +391,23 @@ function adaptiveStep(minimum) {
   const multiplier = [1, 2, 5, 10].find((candidate) => candidate * magnitude >= minimum) ?? 10;
   return multiplier * magnitude;
 }
+// node_modules/@ankhorage/grid-view/dist/features/layout/getMatrixCellPlacement.js
+function getMatrixCellPlacement(layout, cell) {
+  const rows = createGridAxisMetrics(layout.rows);
+  const columns = createGridAxisMetrics(layout.columns);
+  return resolveMatrixCellPlacement(cell, rows, columns);
+}
 // node_modules/@ankhorage/grid-view/dist/features/layout/getVisibleLaneIntervals.js
 function getVisibleLaneIntervals(lanes, intervals, viewport, overscanPixels = 0) {
   const laneMetrics = createGridAxisMetrics(lanes.map(({ id, height }) => ({ id, size: height })));
   const bounds = getVisibleWorldBounds(viewport, overscanPixels);
-  validateUniqueIds(intervals);
+  validateUniqueIds2(intervals);
   return intervals.flatMap((interval) => {
     const placement = resolveLaneIntervalPlacement(interval, laneMetrics);
     return intersects(placement.x, placement.width, bounds.x, bounds.width) && intersects(placement.y, placement.height, bounds.y, bounds.height) ? [placement] : [];
   });
 }
-function validateUniqueIds(intervals) {
+function validateUniqueIds2(intervals) {
   const ids = new Set;
   intervals.forEach(({ id }) => {
     if (ids.has(id)) {
@@ -330,4 +419,4 @@ function validateUniqueIds(intervals) {
 function intersects(firstStart, firstExtent, secondStart, secondExtent) {
   return firstStart <= secondStart + secondExtent && firstStart + firstExtent >= secondStart;
 }
-export { getAxisCategoryTicks, getAxisTicks, getVisibleGridItems, getLaneIntervalPlacement, getVisibleLaneIntervals, constrainViewport, panViewport, revealWorldRect, worldToViewport, zoomViewportAt };
+export { getAxisCategoryTicks, getAxisTicks, getVisibleGridItems, getLaneIntervalPlacement, getMatrixCellPlacement, getVisibleLaneIntervals, getVisibleMatrixCells, constrainViewport, panViewport, revealWorldRect, worldToViewport, zoomViewportAt };

package/web-dist/chunks/{Accordion-szar8dt5.js → Accordion-jh72azm2.js}

@@ -6,7 +6,7 @@ import {
   getAxisCategoryTicks,
   getAxisTicks,
   worldToViewport
-} from "./Accordion-ebghcyzj.js";
+} from "./Accordion-bz04casa.js";
 import {
   useZoraTheme2
 } from "./Accordion-srjya6dz.js";

package/web-dist/components/explorer/Explorer.js

@@ -1,5 +1,5 @@
 'use client';
-import"../../chunks/Accordion-q8exgc3h.js";
+import"../../chunks/Accordion-a6551mh4.js";
 import"../../chunks/Accordion-bfzeab9x.js";
 import"../../chunks/Accordion-6wrr910w.js";
 import"../../chunks/Accordion-8f0nekwe.js";
@@ -14,7 +14,7 @@ import {
   Explorer2,
   FileExplorer2,
   MediaExplorer2
-} from "../../chunks/Accordion-f43jba23.js";
+} from "../../chunks/Accordion-2r0gqk3x.js";
 import"../../chunks/Accordion-bff0p3x4.js";
 import"../../chunks/Accordion-srjya6dz.js";
 import"../../chunks/Accordion-184r2r82.js";

package/web-dist/components/file-explorer/FileExplorer.js

@@ -1,5 +1,5 @@
 'use client';
-import"../../chunks/Accordion-q8exgc3h.js";
+import"../../chunks/Accordion-a6551mh4.js";
 import"../../chunks/Accordion-bfzeab9x.js";
 import"../../chunks/Accordion-6wrr910w.js";
 import"../../chunks/Accordion-8f0nekwe.js";
@@ -14,7 +14,7 @@ import {
   Explorer2,
   FileExplorer2,
   MediaExplorer2
-} from "../../chunks/Accordion-f43jba23.js";
+} from "../../chunks/Accordion-2r0gqk3x.js";
 import"../../chunks/Accordion-bff0p3x4.js";
 import"../../chunks/Accordion-srjya6dz.js";
 import"../../chunks/Accordion-184r2r82.js";

package/web-dist/components/grid-line-overlay/GridLineOverlay.js

@@ -4,7 +4,7 @@ import"../../chunks/Accordion-42jfy1a1.js";
 import {
   GridLineOverlay2,
   GridRuler2
-} from "../../chunks/Accordion-szar8dt5.js";
+} from "../../chunks/Accordion-jh72azm2.js";
 import"../../chunks/Accordion-srjya6dz.js";
 import"../../chunks/Accordion-xgpzh4wq.js";
 export {

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

@@ -4,7 +4,7 @@ import"../../chunks/Accordion-42jfy1a1.js";
 import {
   GridLineOverlay2,
   GridRuler2
-} from "../../chunks/Accordion-szar8dt5.js";
+} from "../../chunks/Accordion-jh72azm2.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-q8exgc3h.js";
+} from "../../chunks/Accordion-a6551mh4.js";
 import"../../chunks/Accordion-xgpzh4wq.js";
 export {
   GridView2 as GridView,

package/web-dist/components/matrix-grid/MatrixGrid.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+
+export declare const MatrixGrid: React.ComponentType<Record<string, unknown>>;

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

@@ -0,0 +1,153 @@
+'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";
+import {
+  withZoraThemeScope
+} from "../../chunks/Accordion-42jfy1a1.js";
+import"../../chunks/Accordion-sw7ep29d.js";
+import {
+  resolveSelectionEventIntent
+} from "../../chunks/Accordion-5df6cgyf.js";
+import {
+  applySelectionIntent
+} from "../../chunks/Accordion-n4et7etk.js";
+import {
+  getMatrixCellPlacement,
+  getVisibleMatrixCells
+} from "../../chunks/Accordion-bz04casa.js";
+import {
+  useZoraTheme2
+} from "../../chunks/Accordion-srjya6dz.js";
+import"../../chunks/Accordion-184r2r82.js";
+import"../../chunks/Accordion-fre84yaq.js";
+import {
+  require_cjs
+} from "../../chunks/Accordion-xgpzh4wq.js";
+import {
+  __toESM
+} from "../../chunks/Accordion-nh0cs9hq.js";
+
+// src/features/matrix-grid/adapters/inbound/MatrixGrid.tsx
+var import_react_native = __toESM(require_cjs(), 1);
+import React from "react";
+
+// src/features/matrix-grid/application/resolveMatrixGridContentSize.ts
+function resolveMatrixGridContentSize(layout) {
+  const finalRow = layout.rows.at(-1);
+  const finalColumn = layout.columns.at(-1);
+  if (!finalRow || !finalColumn) {
+    getVisibleMatrixCells(layout, [], {
+      height: 1,
+      offsetX: 0,
+      offsetY: 0,
+      pixelsPerUnitX: 1,
+      pixelsPerUnitY: 1,
+      width: 1
+    });
+    return { height: 0, width: 0 };
+  }
+  const finalCell = getMatrixCellPlacement(layout, {
+    id: "matrix-grid-content-boundary",
+    rowId: finalRow.id,
+    columnId: finalColumn.id
+  });
+  return { height: finalCell.y + finalCell.height, width: finalCell.x + finalCell.width };
+}
+
+// src/features/matrix-grid/application/resolveMatrixGridSelection.ts
+function resolveMatrixGridSelection(selectedIds, cellId, intent, mode) {
+  return mode === "single" ? applySelectionIntent(selectedIds, cellId, "replace") : applySelectionIntent(selectedIds, cellId, intent);
+}
+
+// src/features/matrix-grid/adapters/inbound/MatrixGrid.tsx
+import { jsx } from "react/jsx-runtime";
+function MatrixGridInner({
+  accessibilityLabel = "Matrix grid",
+  cells,
+  height,
+  interactionPolicy,
+  layout,
+  onSelectionChange,
+  onViewportChange,
+  overscanPixels = 160,
+  renderCell,
+  selectedCellIds = [],
+  selectionMode = "single",
+  testID,
+  viewport: controlledViewport,
+  width,
+  zoomX = 1,
+  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 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) => {
+    if (controlledViewport === undefined)
+      setUncontrolledViewport(proposal);
+    onViewportChange?.(proposal);
+  }, [controlledViewport, onViewportChange]);
+  const activateCell = React.useCallback((cell, event) => {
+    if (interactionPolicy === "passive")
+      return;
+    const intent = resolveSelectionEventIntent(event, "pointer");
+    onSelectionChange?.(resolveMatrixGridSelection(selectedCellIds, cell.id, intent, selectionMode));
+  }, [interactionPolicy, onSelectionChange, selectedCellIds, selectionMode]);
+  return /* @__PURE__ */ jsx(import_react_native.View, {
+    accessibilityLabel,
+    children: /* @__PURE__ */ jsx(GridView2, {
+      contentHeight: contentSize.height,
+      contentWidth: contentSize.width,
+      height,
+      interactionPolicy,
+      items: visibleCells,
+      overscanPixels: 0,
+      renderItem: (item) => {
+        const cell = visibleCellById.get(item.id);
+        if (!cell)
+          return null;
+        return renderMatrixCell(cell, selectedCellIds, theme.semantics.neutral.divider, theme.colors.primary, renderCell, activateCell, testID);
+      },
+      testID,
+      viewport,
+      width,
+      onViewportChange: handleViewportChange
+    })
+  });
+}
+function renderMatrixCell(cell, selectedCellIds, dividerColor, selectedColor, renderCell, activateCell, 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);
+}
+var styles = import_react_native.StyleSheet.create({
+  cell: { borderWidth: 1, height: "100%", overflow: "hidden", width: "100%" }
+});
+var MatrixGrid = withZoraThemeScope(MatrixGridInner);
+export {
+  MatrixGrid
+};

package/web-dist/components/matrix-grid/index.d.ts

@@ -0,0 +1 @@
+export * from './MatrixGrid';

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

@@ -0,0 +1,2 @@
+'use client';
+export * from './MatrixGrid.js';

package/web-dist/components/media-explorer/MediaExplorer.js

@@ -1,5 +1,5 @@
 'use client';
-import"../../chunks/Accordion-q8exgc3h.js";
+import"../../chunks/Accordion-a6551mh4.js";
 import"../../chunks/Accordion-bfzeab9x.js";
 import"../../chunks/Accordion-6wrr910w.js";
 import"../../chunks/Accordion-8f0nekwe.js";
@@ -14,7 +14,7 @@ import {
   Explorer2,
   FileExplorer2,
   MediaExplorer2
-} from "../../chunks/Accordion-f43jba23.js";
+} from "../../chunks/Accordion-2r0gqk3x.js";
 import"../../chunks/Accordion-bff0p3x4.js";
 import"../../chunks/Accordion-srjya6dz.js";
 import"../../chunks/Accordion-184r2r82.js";