@ankhorage/zora 25.2.1 → 25.4.0

package/src/features/grid-rulers/adapters/inbound/GridLineOverlay.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import type { GridLineOverlayProps } from '../../../../types/grid-rulers';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
+import { projectGridRulerPosition } from '../../application/projectGridRulerPosition';
+import { resolveGridRulerMarks } from '../../application/resolveGridRulerMarks';
+
+/*** Renders visible world-grid lines and explicit guides without owning viewport interaction. */
+function GridLineOverlayInner({
+  accessibilityLabel = 'Grid guides',
+  direction = 'ltr',
+  guides = [],
+  testID,
+  viewport,
+  xTickSource,
+  yTickSource,
+}: GridLineOverlayProps) {
+  const { theme } = useZoraTheme();
+  const xMarks = xTickSource
+    ? resolveGridRulerMarks(viewport, 'x', xTickSource, undefined, direction)
+    : [];
+  const yMarks = yTickSource ? resolveGridRulerMarks(viewport, 'y', yTickSource) : [];
+  const visibleGuides = resolveVisibleGridGuides(guides, viewport, direction);
+
+  return (
+    <View
+      accessible={false}
+      importantForAccessibility="no"
+      pointerEvents="none"
+      style={[styles.overlay, { height: viewport.height, width: viewport.width }]}
+      testID={testID}
+    >
+      {xMarks.map((mark, index) => (
+        <View
+          key={`x-${mark.position}-${index}`}
+          importantForAccessibility="no-hide-descendants"
+          style={[
+            styles.vertical,
+            {
+              backgroundColor: theme.semantics.neutral.divider,
+              left: mark.position,
+              opacity: mark.level === 'major' ? 0.5 : 0.25,
+            },
+          ]}
+          testID={testID === undefined ? undefined : `${testID}-x-line-${index}`}
+        />
+      ))}
+      {yMarks.map((mark, index) => (
+        <View
+          key={`y-${mark.position}-${index}`}
+          importantForAccessibility="no-hide-descendants"
+          style={[
+            styles.horizontal,
+            {
+              backgroundColor: theme.semantics.neutral.divider,
+              opacity: mark.level === 'major' ? 0.5 : 0.25,
+              top: mark.position,
+            },
+          ]}
+          testID={testID === undefined ? undefined : `${testID}-y-line-${index}`}
+        />
+      ))}
+      {visibleGuides.map(({ guide, position }) => (
+        <View
+          key={guide.id}
+          accessibilityLabel={createGuideAccessibilityLabel(accessibilityLabel, guide)}
+          accessibilityRole="text"
+          accessible
+          style={[
+            guide.axis === 'x' ? styles.vertical : styles.horizontal,
+            guide.axis === 'x'
+              ? {
+                  backgroundColor: theme.colors.primary,
+                  left: position,
+                }
+              : {
+                  backgroundColor: theme.colors.primary,
+                  top: position,
+                },
+          ]}
+          testID={testID === undefined ? undefined : `${testID}-guide-${guide.id}`}
+        />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  horizontal: { height: 1, left: 0, position: 'absolute', right: 0 },
+  overlay: { overflow: 'hidden', position: 'absolute' },
+  vertical: { bottom: 0, position: 'absolute', top: 0, width: 1 },
+});
+
+/*** Selects finite guides whose shared world-to-visual projection falls inside the viewport. */
+function resolveVisibleGridGuides(
+  guides: NonNullable<GridLineOverlayProps['guides']>,
+  viewport: GridLineOverlayProps['viewport'],
+  direction: NonNullable<GridLineOverlayProps['direction']>,
+) {
+  return guides.flatMap((guide) => {
+    if (!Number.isFinite(guide.position)) return [];
+
+    const position = projectGridRulerPosition(viewport, guide.axis, guide.position, direction);
+    const size = guide.axis === 'x' ? viewport.width : viewport.height;
+
+    return Number.isFinite(position) && position >= 0 && position <= size
+      ? [{ guide, position }]
+      : [];
+  });
+}
+
+/*** Gives each visible guide an independent screen-reader identity with its stable world position. */
+function createGuideAccessibilityLabel(
+  overlayLabel: string,
+  guide: NonNullable<GridLineOverlayProps['guides']>[number],
+): string {
+  return `${overlayLabel}: ${guide.label ?? `Guide ${guide.id}`} at ${guide.position}`;
+}
+
+/*** A reusable passive world-space grid and guide overlay. */
+export const GridLineOverlay = withZoraThemeScope(GridLineOverlayInner);

package/src/features/grid-rulers/adapters/inbound/GridRuler.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import type { GridRulerProps } from '../../../../types/grid-rulers';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
+import { resolveGridRulerMarks } from '../../application/resolveGridRulerMarks';
+
+/*** Renders a passive axis ruler from published grid-view tick geometry. */
+function GridRulerInner({
+  accessibilityLabel,
+  axis,
+  direction = 'ltr',
+  formatLabel,
+  offset = 0,
+  position = 'start',
+  testID,
+  thickness = 24,
+  tickSource,
+  viewport,
+}: GridRulerProps) {
+  const { theme } = useZoraTheme();
+  const marks = resolveGridRulerMarks(viewport, axis, tickSource, formatLabel, direction);
+  const horizontal = axis === 'x';
+  const size = horizontal ? viewport.width : viewport.height;
+  const label = accessibilityLabel ?? `${horizontal ? 'Horizontal' : 'Vertical'} ruler`;
+
+  return (
+    <View
+      accessibilityLabel={label}
+      accessible
+      pointerEvents="none"
+      style={[
+        styles.ruler,
+        horizontal ? { height: thickness, width: size } : { height: size, width: thickness },
+        position === 'start'
+          ? horizontal
+            ? { top: offset }
+            : { left: offset }
+          : horizontal
+            ? { bottom: offset }
+            : { right: offset },
+      ]}
+      testID={testID}
+    >
+      {marks.map((mark, index) => {
+        const coordinate = mark.position;
+        const tickStyle = horizontal
+          ? {
+              height: mark.level === 'major' ? thickness : thickness / 2,
+              left: coordinate,
+              top: 0,
+              width: 1,
+            }
+          : {
+              height: 1,
+              left: 0,
+              top: coordinate,
+              width: mark.level === 'major' ? thickness : thickness / 2,
+            };
+        return (
+          <React.Fragment key={`${mark.position}-${index}`}>
+            <View
+              importantForAccessibility="no-hide-descendants"
+              style={[styles.tick, { backgroundColor: theme.semantics.neutral.divider }, tickStyle]}
+              testID={testID === undefined ? undefined : `${testID}-tick-${index}`}
+            />
+            {mark.label !== undefined ? (
+              <Text
+                importantForAccessibility="no-hide-descendants"
+                numberOfLines={1}
+                style={[
+                  styles.label,
+                  { color: theme.semantics.neutral.textMuted },
+                  horizontal ? { left: coordinate + 3, top: 2 } : { left: 3, top: coordinate + 2 },
+                ]}
+                testID={testID === undefined ? undefined : `${testID}-label-${index}`}
+              >
+                {mark.label}
+              </Text>
+            ) : null}
+          </React.Fragment>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  label: { fontSize: 10, position: 'absolute' },
+  ruler: { overflow: 'hidden', position: 'absolute' },
+  tick: { position: 'absolute' },
+});
+
+/*** A reusable passive horizontal or vertical world-space ruler. */
+export const GridRuler = withZoraThemeScope(GridRulerInner);

package/src/features/grid-rulers/adapters/inbound/GridRulers.test.tsx

@@ -0,0 +1,162 @@
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+import type { GridViewport } from '@ankhorage/grid-view';
+import { expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import type { GridLineOverlayProps, GridRulerProps } from '../../../../types/grid-rulers';
+import type { ZoraProviderProps } from '../../../theme/adapters/inbound/ZoraProvider';
+
+const webDistRoot = join(import.meta.dir, '../../../../../web-dist');
+
+/*** Loads the independently bundled React Native Web implementation under test. */
+function load(path: string) {
+  return import(pathToFileURL(join(webDistRoot, path)).href);
+}
+
+const viewport: GridViewport = {
+  height: 100,
+  offsetX: 40,
+  offsetY: 20,
+  pixelsPerUnitX: 2,
+  pixelsPerUnitY: 2,
+  width: 300,
+};
+
+const xTickSource = { kind: 'ticks' as const, specification: { mode: 'fixed' as const, step: 20 } };
+
+/*** Renders the public native components through React Native Web for behavioral DOM assertions. */
+function renderGridRulers(
+  ZoraProvider: React.ComponentType<ZoraProviderProps>,
+  GridRuler: React.ComponentType<GridRulerProps>,
+  GridLineOverlay: React.ComponentType<GridLineOverlayProps>,
+  direction: 'ltr' | 'rtl',
+  guides = [{ axis: 'x' as const, id: 'playhead', label: 'Playhead', position: 60 }],
+) {
+  return renderToStaticMarkup(
+    <ZoraProvider mode="light">
+      <GridRuler
+        axis="x"
+        direction={direction}
+        testID="ruler"
+        tickSource={xTickSource}
+        viewport={viewport}
+      />
+      <GridLineOverlay
+        direction={direction}
+        guides={guides}
+        testID="overlay"
+        viewport={viewport}
+        xTickSource={xTickSource}
+      />
+    </ZoraProvider>,
+  );
+}
+
+/*** Reads React Native Web output without relying on implementation-only geometry helpers. */
+function inspectMarkup(markup: string): Window {
+  const browserWindow = new Window();
+  browserWindow.document.body.innerHTML = markup;
+  return browserWindow;
+}
+
+test('renders ruler ticks, grid lines, and guides at the same non-zero-offset world projection in LTR and RTL', async () => {
+  const { ZoraProvider } = (await load('runtime/ZoraProvider.js')) as {
+    ZoraProvider: React.ComponentType<ZoraProviderProps>;
+  };
+  const { GridRuler } = (await load('components/grid-ruler/GridRuler.js')) as {
+    GridRuler: React.ComponentType<GridRulerProps>;
+  };
+  const { GridLineOverlay } = (await load('components/grid-line-overlay/GridLineOverlay.js')) as {
+    GridLineOverlay: React.ComponentType<GridLineOverlayProps>;
+  };
+  const ltr = inspectMarkup(renderGridRulers(ZoraProvider, GridRuler, GridLineOverlay, 'ltr'));
+  const rtl = inspectMarkup(renderGridRulers(ZoraProvider, GridRuler, GridLineOverlay, 'rtl'));
+
+  try {
+    for (const [browserWindow, expectedPosition] of [
+      [ltr, '40px'],
+      [rtl, '260px'],
+    ] as const) {
+      expect(
+        browserWindow.document.querySelector('[data-testid="ruler-tick-1"]')?.getAttribute('style'),
+      ).toContain(`left:${expectedPosition}`);
+      expect(
+        browserWindow.document
+          .querySelector('[data-testid="overlay-x-line-1"]')
+          ?.getAttribute('style'),
+      ).toContain(`left:${expectedPosition}`);
+      expect(
+        browserWindow.document
+          .querySelector('[data-testid="overlay-guide-playhead"]')
+          ?.getAttribute('style'),
+      ).toContain(`left:${expectedPosition}`);
+    }
+  } finally {
+    ltr.close();
+    rtl.close();
+  }
+});
+
+test('renders only finite visible guides and exposes each guide without making grid decoration navigable', async () => {
+  const { ZoraProvider } = (await load('runtime/ZoraProvider.js')) as {
+    ZoraProvider: React.ComponentType<ZoraProviderProps>;
+  };
+  const { GridRuler } = (await load('components/grid-ruler/GridRuler.js')) as {
+    GridRuler: React.ComponentType<GridRulerProps>;
+  };
+  const { GridLineOverlay } = (await load('components/grid-line-overlay/GridLineOverlay.js')) as {
+    GridLineOverlay: React.ComponentType<GridLineOverlayProps>;
+  };
+  const browserWindow = inspectMarkup(
+    renderGridRulers(ZoraProvider, GridRuler, GridLineOverlay, 'ltr', [
+      { axis: 'x', id: 'before', position: 39 },
+      { axis: 'x', id: 'start', label: 'Start', position: 40 },
+      { axis: 'x', id: 'end', label: 'End', position: 190 },
+      { axis: 'x', id: 'after', position: 191 },
+      { axis: 'y', id: 'invalid', position: Number.POSITIVE_INFINITY },
+    ]),
+  );
+
+  try {
+    expect(browserWindow.document.querySelectorAll('[data-testid^="overlay-guide-"]')).toHaveLength(
+      2,
+    );
+    expect(
+      browserWindow.document.querySelector('[data-testid="overlay-guide-start"]'),
+    ).not.toBeNull();
+    expect(
+      browserWindow.document.querySelector('[data-testid="overlay-guide-end"]'),
+    ).not.toBeNull();
+    expect(browserWindow.document.querySelector('[data-testid="overlay-guide-before"]')).toBeNull();
+    expect(browserWindow.document.querySelector('[data-testid="overlay-guide-after"]')).toBeNull();
+    expect(
+      browserWindow.document.querySelector('[data-testid="overlay"]')?.getAttribute('aria-label'),
+    ).toBeNull();
+    expect(
+      browserWindow.document
+        .querySelector('[data-testid="overlay-guide-start"]')
+        ?.getAttribute('aria-label'),
+    ).toBe('Grid guides: Start at 40');
+    expect(
+      browserWindow.document
+        .querySelector('[data-testid="overlay-guide-end"]')
+        ?.getAttribute('aria-label'),
+    ).toBe('Grid guides: End at 190');
+    expect(
+      browserWindow.document
+        .querySelector('[data-testid="overlay-x-line-1"]')
+        ?.getAttribute('aria-label'),
+    ).toBeNull();
+    expect(
+      browserWindow.document
+        .querySelector('[data-testid="overlay-x-line-1"]')
+        ?.getAttribute('role'),
+    ).toBeNull();
+  } finally {
+    browserWindow.close();
+  }
+});

package/src/features/grid-rulers/application/projectGridRulerPosition.ts

@@ -0,0 +1,19 @@
+import { type GridAxisName, type GridViewport, worldToViewport } from '@ankhorage/grid-view';
+
+/*** Projects a stable world-axis coordinate into the matching visual ruler or overlay position. */
+export function projectGridRulerPosition(
+  viewport: GridViewport,
+  axis: GridAxisName,
+  position: number,
+  direction: 'ltr' | 'rtl' = 'ltr',
+): number {
+  const point = worldToViewport(
+    axis === 'x' ? { x: position, y: viewport.offsetY } : { x: viewport.offsetX, y: position },
+    viewport,
+  );
+  const projectedPosition = axis === 'x' ? point.x : point.y;
+
+  return axis === 'x' && direction === 'rtl'
+    ? viewport.width - projectedPosition
+    : projectedPosition;
+}

package/src/features/grid-rulers/application/resolveGridRulerMarks.test.ts

@@ -0,0 +1,90 @@
+import { type GridViewport, snapWorldCoordinate } from '@ankhorage/grid-view';
+import { describe, expect, test } from 'bun:test';
+
+import { resolveGridRulerMarks } from './resolveGridRulerMarks';
+
+const viewport: GridViewport = {
+  width: 300,
+  height: 160,
+  offsetX: 40,
+  offsetY: 20,
+  pixelsPerUnitX: 2,
+  pixelsPerUnitY: 4,
+};
+
+describe('resolveGridRulerMarks', () => {
+  test('aligns independent axis scales and scroll offsets through the published viewport transform', () => {
+    expect(
+      resolveGridRulerMarks(viewport, 'x', {
+        kind: 'ticks',
+        specification: { mode: 'fixed', step: 20 },
+      }).map((mark) => mark.position),
+    ).toEqual([0, 40, 80, 120, 160, 200, 240, 280]);
+    expect(
+      resolveGridRulerMarks(viewport, 'y', {
+        kind: 'ticks',
+        specification: { mode: 'fixed', step: 10 },
+      }).map((mark) => mark.position),
+    ).toEqual([0, 40, 80, 120, 160]);
+  });
+
+  test('projects only visible variable-width category starts', () => {
+    expect(
+      resolveGridRulerMarks(viewport, 'x', {
+        kind: 'categories',
+        categories: [
+          { id: 'before', size: 10, start: 20 },
+          { id: 'visible-a', size: 37, start: 40 },
+          { id: 'visible-b', size: 91, start: 77 },
+        ],
+      }),
+    ).toEqual([
+      { categoryId: 'visible-a', level: 'major', position: 0 },
+      { categoryId: 'visible-b', level: 'major', position: 74 },
+    ]);
+  });
+
+  test('keeps a fixed interaction snap unchanged when display density changes', () => {
+    const snap = { mode: 'fixed' as const, step: 25 };
+    const sparse = resolveGridRulerMarks(viewport, 'x', {
+      kind: 'ticks',
+      specification: { mode: 'fixed', step: 50 },
+    });
+    const dense = resolveGridRulerMarks(viewport, 'x', {
+      kind: 'ticks',
+      specification: { mode: 'fixed', step: 5 },
+    });
+
+    expect(dense.length).toBeGreaterThan(sparse.length);
+    expect(snapWorldCoordinate(62, snap)).toBe(50);
+  });
+
+  test('accepts externally supplied labels without introducing domain adapters', () => {
+    expect(
+      resolveGridRulerMarks(
+        viewport,
+        'x',
+        { kind: 'ticks', specification: { mode: 'fixed', step: 20 } },
+        (tick) => `bar ${tick.position}`,
+      )[0],
+    ).toEqual({ label: 'bar 40', level: 'major', position: 0 });
+  });
+
+  test('projects horizontal marks consistently in RTL and evaluates each formatter once', () => {
+    let formatterCalls = 0;
+
+    const marks = resolveGridRulerMarks(
+      viewport,
+      'x',
+      { kind: 'ticks', specification: { mode: 'fixed', step: 20 } },
+      (tick) => {
+        formatterCalls += 1;
+        return `tick ${tick.position}`;
+      },
+      'rtl',
+    );
+
+    expect(marks.map((mark) => mark.position)).toEqual([300, 260, 220, 180, 140, 100, 60, 20]);
+    expect(formatterCalls).toBe(marks.length);
+  });
+});

package/src/features/grid-rulers/application/resolveGridRulerMarks.ts

@@ -0,0 +1,39 @@
+import {
+  getAxisCategoryTicks,
+  getAxisTicks,
+  type GridAxisName,
+  type GridAxisTick,
+  type GridViewport,
+} from '@ankhorage/grid-view';
+
+import type { GridRulerMark, GridRulerTickSource } from '../../../types/grid-rulers';
+import { projectGridRulerPosition } from './projectGridRulerPosition';
+
+/*** Resolves bounded engine ticks into viewport-pixel ruler marks without changing interaction state. */
+export function resolveGridRulerMarks(
+  viewport: GridViewport,
+  axis: GridAxisName,
+  tickSource: GridRulerTickSource,
+  formatLabel?: (tick: GridAxisTick) => string | undefined,
+  direction: 'ltr' | 'rtl' = 'ltr',
+): readonly GridRulerMark[] {
+  const ticks =
+    tickSource.kind === 'categories'
+      ? getAxisCategoryTicks(viewport, axis, tickSource.categories)
+      : getAxisTicks(viewport, axis, tickSource.specification, tickSource.provider);
+
+  return ticks.map((tick) => {
+    const formattedLabel = formatLabel?.(tick);
+
+    return {
+      position: projectGridRulerPosition(viewport, axis, tick.position, direction),
+      level: tick.level,
+      ...(tick.label !== undefined || formattedLabel !== undefined
+        ? { label: formattedLabel ?? tick.label }
+        : {}),
+      ...('categoryId' in tick && typeof tick.categoryId === 'string'
+        ? { categoryId: tick.categoryId }
+        : {}),
+    };
+  });
+}

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

@@ -0,0 +1,26 @@
+import type { ZoraComponentMeta } from '../../types/authoring';
+
+const GRID_RULERS_NOTE =
+  'Requires a live viewport and optional executable tick/label providers; available through code APIs, not a serializable manifest node.';
+
+/** Passive viewport decorations intentionally remain outside direct manifest authoring. */
+export const gridLineOverlayMeta = {
+  name: 'GridLineOverlay',
+  category: 'foundation',
+  description: 'Projects bounded world-grid lines and explicit guides from a supplied viewport.',
+  directManifestNode: false,
+  note: GRID_RULERS_NOTE,
+  allowedChildren: [],
+  props: {},
+} as const satisfies ZoraComponentMeta;
+
+/** Rulers accept code-dependent tick and label providers and therefore remain code-only. */
+export const gridRulerMeta = {
+  name: 'GridRuler',
+  category: 'foundation',
+  description: 'Projects visible world-axis ticks into a passive horizontal or vertical ruler.',
+  directManifestNode: false,
+  note: GRID_RULERS_NOTE,
+  allowedChildren: [],
+  props: {},
+} as const satisfies ZoraComponentMeta;

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

@@ -0,0 +1,10 @@
+export type {
+  GridGuide,
+  GridLineOverlayProps,
+  GridRulerMark,
+  GridRulerProps,
+  GridRulerTickSource,
+} from '../../types/grid-rulers';
+export { GridLineOverlay } from './adapters/inbound/GridLineOverlay';
+export { GridRuler } from './adapters/inbound/GridRuler';
+export { resolveGridRulerMarks } from './application/resolveGridRulerMarks';

package/src/features/registry/ZORA_COMPONENT_REGISTRY.ts

@@ -47,6 +47,7 @@ import {
   GameOverlay,
 } from '../game/public';
 import { Gradient } from '../gradient/public';
+import { GridLineOverlay, GridRuler } from '../grid-rulers/public';
 import { GridView, TileGrid } from '../grid-view/public';
 import { Hero } from '../hero/public';
 import { Icon } from '../icon/public';
@@ -65,6 +66,7 @@ import { BarcodeScannerView, CameraPermissionView, ScanOverlay } from '../scanne
 import { ScreenSection, SectionHeader } from '../section/public';
 import { SelectableItem } from '../selection/public';
 import { Skeleton, SkeletonCard, SkeletonList, SkeletonText } from '../skeleton/public';
+import { SpatialGrid } from '../spatial-grid/public';
 import { Surface } from '../surface/public';
 import {
   CardBack,
@@ -194,6 +196,8 @@ const _ZORA_COMPONENT_REGISTRY = {
   EmptyState,
   Explorer,
   FileExplorer,
+  GridLineOverlay,
+  GridRuler,
   GridView,
   TileGrid,
   MediaExplorer,
@@ -212,6 +216,7 @@ const _ZORA_COMPONENT_REGISTRY = {
   ScanOverlay,
   SectionHeader,
   SelectableItem,
+  SpatialGrid,
   PaletteItem,
   CardBack,
   CardHand,

package/src/features/registry/componentMeta.ts

@@ -53,6 +53,7 @@ import { gameMeasurementProbeMeta } from '../game/meta/gameMeasurementProbeMeta'
 import { gameMeta } from '../game/meta/gameMeta';
 import { gameOverlayMeta } from '../game/meta/gameOverlayMeta';
 import { gradientMeta } from '../gradient/gradientMeta';
+import { gridLineOverlayMeta, gridRulerMeta } from '../grid-rulers/meta';
 import { gridViewMeta, tileGridMeta } from '../grid-view/meta';
 import { heroMeta } from '../hero/heroMeta';
 import { iconMeta } from '../icon/iconMeta';
@@ -84,6 +85,7 @@ import {
   skeletonMeta,
   skeletonTextMeta,
 } from '../skeleton/skeletonMeta';
+import { spatialGridMeta } from '../spatial-grid/meta';
 import { surfaceMeta } from '../surface/surfaceMeta';
 import {
   cardBackMeta,
@@ -198,6 +200,8 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMet
   Explorer: explorerMeta,
   FileExplorer: fileExplorerMeta,
   MediaExplorer: mediaExplorerMeta,
+  GridLineOverlay: gridLineOverlayMeta,
+  GridRuler: gridRulerMeta,
   GridView: gridViewMeta,
   TileGrid: tileGridMeta,
   Hero: heroMeta,
@@ -215,6 +219,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMet
   ScanOverlay: scanOverlayMeta,
   SectionHeader: sectionHeaderMeta,
   SelectableItem: selectableItemMeta,
+  SpatialGrid: spatialGridMeta,
   SelectionProvider: selectionProviderMeta,
   PaletteItem: paletteItemMeta,
   Timeline: timelineMeta,