@ankhorage/zora 3.2.0 → 3.3.2

package/src/expo57Migration.test.ts

@@ -87,19 +87,34 @@ describe('portable ZORA package boundary', () => {
 
 describe('Expo 57 example boundary', () => {
   test('uses Renovate-safe dependency range styles across every Expo example', () => {
+    const expoVersions = new Set<string>();
+
     for (const directory of EXPO_EXAMPLE_DIRS) {
       const packageJson = readExamplePackage(directory);
       const dependencies = readRecord(packageJson, 'dependencies');
       const development = readRecord(packageJson, 'devDependencies');
+      const expoVersion = readValue(dependencies, 'expo');
 
       expect(readValue(dependencies, '@ankhorage/zora')).toMatch(CARET_SEMVER_RANGE);
-      expect(dependencies.expo).toMatch(EXACT_SEMVER_VERSION);
+      expect(expoVersion).toMatch(EXACT_SEMVER_VERSION);
       expect(dependencies.react).toMatch(EXACT_SEMVER_VERSION);
       expect(readValue(dependencies, 'react-native')).toMatch(EXACT_SEMVER_VERSION);
       expect(readValue(dependencies, 'react-native-web')).toMatch(TILDE_SEMVER_RANGE);
       expect(development.typescript).toMatch(TILDE_SEMVER_RANGE);
       expect(readValue(dependencies, '@expo/vector-icons')).toBeUndefined();
+
+      if (typeof expoVersion === 'string') {
+        expoVersions.add(expoVersion);
+      }
     }
+
+    expect(expoVersions.size).toBe(1);
+    const [expoVersion] = expoVersions;
+    const scaffoldSource = readFileSync(
+      join(ROOT, 'scripts', 'scaffold-zora-example-app.ts'),
+      'utf8',
+    );
+    expect(scaffoldSource).toContain(`expo: '${expoVersion}',`);
   });
 
   test('registers all scoped RNVI packages in each Expo app config', () => {

package/src/index.ts

@@ -214,6 +214,7 @@ export type {
   ZoraComponentEventPayloadFieldType,
   ZoraComponentEventPayloadKind,
   ZoraComponentI18nMeta,
+  ZoraComponentManifestPolicy,
   ZoraComponentMeta,
   ZoraComponentMetaRegistry,
   ZoraComponentPropArrayItemSchema,
@@ -275,6 +276,16 @@ export type {
 export { CollectionEditor } from './patterns/collection-editor';
 export type { ConfirmDialogProps } from './patterns/confirm-dialog';
 export { ConfirmDialog } from './patterns/confirm-dialog';
+export type {
+  ContentRailControlPressEvent,
+  ContentRailDirection,
+  ContentRailItemSize,
+  ContentRailMotion,
+  ContentRailProps,
+  ContentRailSpacing,
+  ContentRailVisibleRangeChangeEvent,
+} from './patterns/content-rail';
+export { ContentRail } from './patterns/content-rail';
 export type { DisclosureSectionProps } from './patterns/disclosure-section';
 export { DisclosureSection } from './patterns/disclosure-section';
 export type { EmptyStateAction, EmptyStateProps } from './patterns/empty-state';
@@ -313,6 +324,8 @@ export type {
   MessageBubbleStatus,
 } from './patterns/message-bubble';
 export { MessageBubble } from './patterns/message-bubble';
+export type { MissingElementProps } from './patterns/missing-element';
+export { MissingElement } from './patterns/missing-element';
 export type { NoticeProps } from './patterns/notice';
 export { Notice } from './patterns/notice';
 export type { PanelProps } from './patterns/panel';

package/src/interactionPolicy.test.ts

@@ -186,6 +186,28 @@ describe('ReaderSurface', () => {
   });
 });
 
+describe('ContentRail', () => {
+  test('types extend ZoraBaseProps instead of duplicating InteractionPolicy', () => {
+    const source = readPattern('content-rail', 'types.ts');
+
+    expect(source).toMatch(/export interface ContentRailProps extends ZoraBaseProps/);
+    expect(source).not.toMatch(/interactionPolicy\?: InteractionPolicy;/);
+  });
+
+  test('suppresses scrolling and forwards interactionPolicy to owned controls', () => {
+    const source = readPattern('content-rail', 'ContentRail.tsx');
+
+    expect(source).not.toMatch(/interactionPolicy:\s*_interactionPolicy/);
+    expect(source).toContain('scrollEnabled={!passive}');
+    expect(source).toMatch(
+      /<IconButton[\s\S]*?interactionPolicy=\{interactionPolicy\}[\s\S]*?label=\{previousLabel\}/,
+    );
+    expect(source).toMatch(
+      /<IconButton[\s\S]*?interactionPolicy=\{interactionPolicy\}[\s\S]*?label=\{nextLabel\}/,
+    );
+  });
+});
+
 describe('CameraPermissionView', () => {
   test('forwards interactionPolicy to internal Buttons after prop spreads', () => {
     const source = readPattern('scanner', 'CameraPermissionView.tsx');

package/src/metadata/allowedChildren.ts

@@ -23,6 +23,21 @@ export const CONTAINER_ALLOWED_CHILDREN = [
   'MessageBubble',
   'ProgressRing',
   'ReaderSurface',
+  'ContentRail',
+  'MissingElement',
+] as const;
+
+export const CONTENT_RAIL_ALLOWED_CHILDREN = [
+  'Box',
+  'Stack',
+  'Card',
+  'Panel',
+  'Image',
+  'ProductCard',
+  'PostCard',
+  'ChatListItem',
+  'MessageBubble',
+  'MissingElement',
 ] as const;
 
 export const SCREEN_SECTION_ALLOWED_CHILDREN = [...CONTAINER_ALLOWED_CHILDREN] as const;

package/src/metadata/componentMeta.test.ts

@@ -140,6 +140,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Progress',
       'ProgressRing',
       'ReaderSurface',
+      'MissingElement',
     ]);
 
     const expectedContainerNodes = new Set([
@@ -158,6 +159,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Grid',
       'Container',
       'BarcodeScannerView',
+      'ContentRail',
     ]);
 
     for (const [key, meta] of Object.entries(ZORA_COMPONENT_META)) {
@@ -257,6 +259,54 @@ describe('ZORA_COMPONENT_META invariants', () => {
     expect(reader.events?.readerError?.eventType).toBe('reader.error');
   });
 
+  test('ContentRail exposes manifest children, serializable controls, and normalized events', () => {
+    const rail = ZORA_COMPONENT_META.ContentRail;
+
+    expect(rail.directManifestNode).toBe(true);
+    expect(rail.allowedChildren).toEqual([
+      'Box',
+      'Stack',
+      'Card',
+      'Panel',
+      'Image',
+      'ProductCard',
+      'PostCard',
+      'ChatListItem',
+      'MessageBubble',
+      'MissingElement',
+    ]);
+    expect(rail.slots?.children?.allowedChildren).toEqual(rail.allowedChildren);
+    expect(rail.blueprint?.defaultProps).toEqual({
+      itemSize: 'responsive',
+      gap: 'm',
+      padding: 'm',
+      peek: 32,
+      showControls: true,
+      direction: 'auto',
+      motion: 'system',
+      accessibilityLabel: 'Content rail',
+      previousLabel: 'Previous items',
+      nextLabel: 'Next items',
+    });
+    expect(rail.events?.controlPress?.eventType).toBe('contentRail.controlPress');
+    expect(rail.events?.visibleRangeChange?.eventType).toBe('contentRail.visibleRangeChange');
+    expect(rail.requirements).toBeUndefined();
+  });
+
+  test('MissingElement exposes a release-blocking unresolved manifest policy', () => {
+    const missingElement = ZORA_COMPONENT_META.MissingElement;
+
+    expect(missingElement.directManifestNode).toBe(true);
+    expect(missingElement.allowedChildren).toEqual([]);
+    expect(missingElement.manifestPolicy).toEqual({
+      kind: 'unresolved-element',
+      availability: 'draft-only',
+      releaseGate: 'blocked',
+    });
+    expect(missingElement.events).toBeUndefined();
+    expect(missingElement.requirements).toBeUndefined();
+  });
+
   test('non-direct manifest nodes include an explicit note', () => {
     for (const [key, meta] of Object.entries(ZORA_COMPONENT_META)) {
       if (meta.directManifestNode) continue;

package/src/metadata/componentMeta.ts

@@ -63,6 +63,7 @@ import {
 import { chatListItemMeta } from '../patterns/chat-list-item/meta';
 import { collectionEditorMeta } from '../patterns/collection-editor/meta';
 import { confirmDialogMeta } from '../patterns/confirm-dialog/meta';
+import { contentRailMeta } from '../patterns/content-rail/meta';
 import { disclosureSectionMeta } from '../patterns/disclosure-section/meta';
 import { emptyStateMeta } from '../patterns/empty-state/meta';
 import { filterBarMeta } from '../patterns/filter-bar/meta';
@@ -72,6 +73,7 @@ import { imageUploadFieldMeta } from '../patterns/image-upload-field/meta';
 import { inspectorFieldMeta } from '../patterns/inspector-field/meta';
 import { listMeta, listRowMeta, listSectionMeta } from '../patterns/list/meta';
 import { messageBubbleMeta } from '../patterns/message-bubble/meta';
+import { missingElementMeta } from '../patterns/missing-element/meta';
 import { noticeMeta } from '../patterns/notice/meta';
 import { panelMeta } from '../patterns/panel/meta';
 import { postCardMeta } from '../patterns/post-card/meta';
@@ -169,6 +171,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   ChatListItem: chatListItemMeta,
   CollectionEditor: collectionEditorMeta,
   ConfirmDialog: confirmDialogMeta,
+  ContentRail: contentRailMeta,
   DisclosureSection: disclosureSectionMeta,
   EmptyState: emptyStateMeta,
   FilterBar: filterBarMeta,
@@ -180,6 +183,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   ListRow: listRowMeta,
   ListSection: listSectionMeta,
   MessageBubble: messageBubbleMeta,
+  MissingElement: missingElementMeta,
   Notice: noticeMeta,
   Panel: panelMeta,
   PostCard: postCardMeta,

package/src/metadata/index.ts

@@ -21,6 +21,7 @@ export type {
   ZoraComponentEventPayloadFieldType,
   ZoraComponentEventPayloadKind,
   ZoraComponentI18nMeta,
+  ZoraComponentManifestPolicy,
   ZoraComponentMeta,
   ZoraComponentMetaRegistry,
   ZoraComponentPropArrayItemSchema,

package/src/metadata/types.ts

@@ -74,12 +74,19 @@ export interface ZoraComponentSlotMeta {
   allowedChildren?: readonly string[];
 }
 
+export interface ZoraComponentManifestPolicy {
+  kind: 'unresolved-element';
+  availability: 'draft-only';
+  releaseGate: 'blocked';
+}
+
 export interface ZoraComponentMeta {
   name: string;
   category: ZoraComponentCategory;
   description?: string;
   directManifestNode: boolean;
   allowedChildren: readonly string[];
+  manifestPolicy?: ZoraComponentManifestPolicy;
   requirements?: ComponentRequirements;
   blueprint?: ZoraComponentBlueprint;
   events?: Readonly<Record<string, ZoraComponentEventMeta>>;

package/src/patterns/content-rail/ContentRail.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, test } from 'bun:test';
+
+import type {
+  ContentRailControlPressEvent,
+  ContentRailProps,
+  ContentRailVisibleRangeChangeEvent,
+} from '../../index';
+
+describe('ContentRail public contract', () => {
+  test('exports serializable manifest and event inputs from the package root', () => {
+    const props: ContentRailProps = {
+      direction: 'rtl',
+      gap: 'm',
+      itemSize: 'responsive',
+      motion: 'reduced',
+      padding: 'm',
+      peek: 32,
+      showControls: true,
+    };
+    const control: ContentRailControlPressEvent = { direction: 'next', targetIndex: 2 };
+    const range: ContentRailVisibleRangeChangeEvent = {
+      firstVisibleIndex: 1,
+      lastVisibleIndex: 3,
+      itemCount: 6,
+    };
+
+    expect(() => JSON.stringify(props)).not.toThrow();
+    expect(() => JSON.stringify(control)).not.toThrow();
+    expect(() => JSON.stringify(range)).not.toThrow();
+  });
+
+  test('keeps product data, navigation, and platform coupling outside the pattern', async () => {
+    const source = await Bun.file('src/patterns/content-rail/ContentRail.tsx').text();
+
+    expect(source).toContain('ScrollView');
+    expect(source).toContain('I18nManager.isRTL');
+    expect(source).toContain('accessibilityRole="list"');
+    expect(source).toContain('reducedMotion');
+    expect(source).toContain('accessibilityLiveRegion="polite"');
+    expect(source).not.toContain('expo-');
+    expect(source).not.toContain('fetch(');
+    expect(source).not.toContain('router');
+  });
+});

package/src/patterns/content-rail/ContentRail.tsx

@@ -0,0 +1,245 @@
+import React from 'react';
+import {
+  I18nManager,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  ScrollView,
+  type ViewStyle,
+} from 'react-native';
+
+import { IconButton } from '../../components/icon-button';
+import { Text } from '../../components/text';
+import { Box, Inline, Stack } from '../../foundation';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { resolveContentRailItemWidth } from './resolveContentRailItemWidth';
+import { resolveContentRailPhysicalOffset } from './resolveContentRailPhysicalOffset';
+import { resolveContentRailState } from './resolveContentRailState';
+import type { ContentRailProps, ContentRailVisibleRangeChangeEvent } from './types';
+import { useContentRailReducedMotion } from './useContentRailReducedMotion';
+
+function ContentRailInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy,
+  children,
+  itemSize = 'responsive',
+  gap = 'm',
+  padding = 'm',
+  peek = 32,
+  showControls = true,
+  direction = 'auto',
+  motion = 'system',
+  accessibilityLabel = 'Content rail',
+  previousLabel = 'Previous items',
+  nextLabel = 'Next items',
+  onControlPress,
+  onVisibleRangeChange,
+  testID,
+}: ContentRailProps) {
+  const { theme } = useZoraTheme();
+  const items = React.Children.toArray(children);
+  const scrollViewRef = React.useRef<ScrollView>(null);
+  const lastRangeRef = React.useRef<ContentRailVisibleRangeChangeEvent | null>(null);
+  const logicalOffsetRef = React.useRef(0);
+  const rtlInitializedRef = React.useRef(false);
+  const [viewportWidth, setViewportWidth] = React.useState(0);
+  const [contentWidth, setContentWidth] = React.useState(0);
+  const [logicalOffset, setLogicalOffset] = React.useState(0);
+  const reducedMotion = useContentRailReducedMotion(motion);
+  const isRtl = direction === 'rtl' || (direction === 'auto' && I18nManager.isRTL);
+  const gapValue = resolveSpacingValue(theme.spacing, gap);
+  const paddingValue = resolveSpacingValue(theme.spacing, padding);
+  const itemWidth = resolveContentRailItemWidth({
+    gap: gapValue,
+    itemCount: items.length,
+    itemSize,
+    padding: paddingValue,
+    peek,
+    viewportWidth,
+  });
+  const railState = resolveContentRailState({
+    contentWidth,
+    gap: gapValue,
+    itemCount: items.length,
+    itemWidth,
+    logicalOffset,
+    viewportWidth,
+  });
+  const passive = interactionPolicy === 'passive';
+  const hasOverflow = railState.maxOffset > 1;
+
+  const emitVisibleRange = React.useCallback(
+    (nextOffset: number) => {
+      const next = resolveContentRailState({
+        contentWidth,
+        gap: gapValue,
+        itemCount: items.length,
+        itemWidth,
+        logicalOffset: nextOffset,
+        viewportWidth,
+      });
+      const event = {
+        firstVisibleIndex: next.firstVisibleIndex,
+        lastVisibleIndex: next.lastVisibleIndex,
+        itemCount: items.length,
+      };
+      const previous = lastRangeRef.current;
+      if (
+        previous?.firstVisibleIndex === event.firstVisibleIndex &&
+        previous.lastVisibleIndex === event.lastVisibleIndex &&
+        previous.itemCount === event.itemCount
+      ) {
+        return;
+      }
+      lastRangeRef.current = event;
+      void onVisibleRangeChange?.(event);
+    },
+    [contentWidth, gapValue, itemWidth, items.length, onVisibleRangeChange, viewportWidth],
+  );
+
+  React.useEffect(() => {
+    emitVisibleRange(railState.offset);
+  }, [emitVisibleRange, railState.offset]);
+
+  React.useEffect(() => {
+    rtlInitializedRef.current = !isRtl;
+  }, [isRtl]);
+
+  React.useEffect(() => {
+    if (viewportWidth === 0 || contentWidth === 0) return;
+    const nextOffset = Math.min(logicalOffsetRef.current, railState.maxOffset);
+    scrollViewRef.current?.scrollTo({
+      animated: false,
+      x: resolveContentRailPhysicalOffset({
+        isRtl,
+        logicalOffset: nextOffset,
+        maxOffset: railState.maxOffset,
+      }),
+      y: 0,
+    });
+    rtlInitializedRef.current = true;
+  }, [contentWidth, isRtl, itemWidth, railState.maxOffset, viewportWidth]);
+
+  const scrollToIndex = (targetIndex: number, controlDirection: 'previous' | 'next') => {
+    if (passive || !hasOverflow) return;
+    const clampedIndex = Math.min(Math.max(0, targetIndex), Math.max(0, items.length - 1));
+    const targetOffset = Math.min(clampedIndex * railState.stride, railState.maxOffset);
+    logicalOffsetRef.current = targetOffset;
+    setLogicalOffset(targetOffset);
+    scrollViewRef.current?.scrollTo({
+      animated: !reducedMotion,
+      x: resolveContentRailPhysicalOffset({
+        isRtl,
+        logicalOffset: targetOffset,
+        maxOffset: railState.maxOffset,
+      }),
+      y: 0,
+    });
+    emitVisibleRange(targetOffset);
+    void onControlPress?.({ direction: controlDirection, targetIndex: clampedIndex });
+  };
+
+  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (isRtl && !rtlInitializedRef.current) return;
+    const physicalOffset = event.nativeEvent.contentOffset.x;
+    const nextOffset = resolveContentRailPhysicalOffset({
+      isRtl,
+      logicalOffset: physicalOffset,
+      maxOffset: railState.maxOffset,
+    });
+    const clampedOffset = Math.min(Math.max(0, nextOffset), railState.maxOffset);
+    logicalOffsetRef.current = clampedOffset;
+    setLogicalOffset(clampedOffset);
+    emitVisibleRange(clampedOffset);
+  };
+
+  const rangeLabel =
+    items.length === 0
+      ? 'No items'
+      : `Items ${railState.firstVisibleIndex + 1}–${railState.lastVisibleIndex + 1} of ${items.length}`;
+  const contentStyle: ViewStyle = {
+    direction: isRtl ? 'rtl' : 'ltr',
+    flexDirection: 'row',
+    gap: gapValue,
+    paddingHorizontal: paddingValue,
+  };
+
+  return (
+    <Stack gap="s" testID={testID}>
+      {showControls && hasOverflow ? (
+        <Inline justify="space-between" wrap="nowrap">
+          <Text accessibilityLiveRegion="polite" emphasis="muted" variant="caption">
+            {rangeLabel}
+          </Text>
+          <Inline gap="xs" wrap="nowrap">
+            <IconButton
+              disabled={passive || !railState.canGoPrevious}
+              icon={{ name: isRtl ? 'chevron-forward' : 'chevron-back' }}
+              interactionPolicy={interactionPolicy}
+              label={previousLabel}
+              onPress={() => scrollToIndex(railState.anchorIndex - 1, 'previous')}
+              size="l"
+            />
+            <IconButton
+              disabled={passive || !railState.canGoNext}
+              icon={{ name: isRtl ? 'chevron-back' : 'chevron-forward' }}
+              interactionPolicy={interactionPolicy}
+              label={nextLabel}
+              onPress={() => scrollToIndex(railState.anchorIndex + 1, 'next')}
+              size="l"
+            />
+          </Inline>
+        </Inline>
+      ) : null}
+      <ScrollView
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="list"
+        contentContainerStyle={contentStyle}
+        decelerationRate="fast"
+        disableIntervalMomentum
+        horizontal
+        onContentSizeChange={(width) => {
+          if (isRtl) rtlInitializedRef.current = false;
+          setContentWidth(width);
+        }}
+        onLayout={(event) => {
+          if (isRtl) rtlInitializedRef.current = false;
+          setViewportWidth(event.nativeEvent.layout.width);
+        }}
+        onScroll={handleScroll}
+        ref={scrollViewRef}
+        scrollEnabled={!passive}
+        scrollEventThrottle={16}
+        showsHorizontalScrollIndicator={false}
+        snapToInterval={itemWidth > 0 ? itemWidth + gapValue : undefined}
+      >
+        {items.map((item, index) => (
+          <Box key={index} style={{ flexShrink: 0, width: itemWidth || undefined }}>
+            {item}
+          </Box>
+        ))}
+      </ScrollView>
+    </Stack>
+  );
+}
+
+/**
+ * Horizontally browsable, manifest-authorable content with responsive item sizing.
+ *
+ * ContentRail owns only presentation and scrolling. Apps retain ownership of item data,
+ * navigation, recommendations, and route behavior.
+ */
+export const ContentRail = withZoraThemeScope(ContentRailInner);
+
+function resolveSpacingValue(
+  spacing: { none: number; xs: number; s: number; m: number; l: number; xl: number },
+  token: NonNullable<ContentRailProps['gap']>,
+): number {
+  if (token === 'none') return spacing.none;
+  if (token === 'xs') return spacing.xs;
+  if (token === 's') return spacing.s;
+  if (token === 'l') return spacing.l;
+  if (token === 'xl') return spacing.xl;
+  return spacing.m;
+}

package/src/patterns/content-rail/index.ts

@@ -0,0 +1,10 @@
+export { ContentRail } from './ContentRail';
+export type {
+  ContentRailControlPressEvent,
+  ContentRailDirection,
+  ContentRailItemSize,
+  ContentRailMotion,
+  ContentRailProps,
+  ContentRailSpacing,
+  ContentRailVisibleRangeChangeEvent,
+} from './types';

package/src/patterns/content-rail/meta.ts

@@ -0,0 +1,133 @@
+import type { ZoraComponentMeta } from '../../metadata';
+import { CONTENT_RAIL_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+
+const spacingValues = ['none', 'xs', 's', 'm', 'l', 'xl'] as const;
+
+export const contentRailMeta = {
+  name: 'ContentRail',
+  category: 'pattern',
+  description:
+    'Horizontally browsable child content with responsive sizing, partial-next affordance, and accessible controls.',
+  directManifestNode: true,
+  allowedChildren: [...CONTENT_RAIL_ALLOWED_CHILDREN],
+  blueprint: {
+    label: 'Content rail',
+    icon: { name: 'albums-outline' },
+    defaultProps: {
+      itemSize: 'responsive',
+      gap: 'm',
+      padding: 'm',
+      peek: 32,
+      showControls: true,
+      direction: 'auto',
+      motion: 'system',
+      accessibilityLabel: 'Content rail',
+      previousLabel: 'Previous items',
+      nextLabel: 'Next items',
+    },
+  },
+  events: {
+    controlPress: {
+      label: 'Control press',
+      eventType: 'contentRail.controlPress',
+      description: 'Emitted after a previous or next control requests a target item.',
+      payloadFields: [
+        { path: 'direction', type: 'string', label: 'Direction' },
+        { path: 'targetIndex', type: 'number', label: 'Target index' },
+      ],
+    },
+    visibleRangeChange: {
+      label: 'Visible range change',
+      eventType: 'contentRail.visibleRangeChange',
+      description: 'Emitted when the zero-based visible item range changes.',
+      payloadFields: [
+        { path: 'firstVisibleIndex', type: 'number', label: 'First visible index' },
+        { path: 'lastVisibleIndex', type: 'number', label: 'Last visible index' },
+        { path: 'itemCount', type: 'number', label: 'Item count' },
+      ],
+    },
+  },
+  slots: {
+    children: {
+      label: 'Rail items',
+      allowedChildren: [...CONTENT_RAIL_ALLOWED_CHILDREN],
+    },
+  },
+  props: {
+    itemSize: {
+      type: 'enum',
+      category: 'Layout',
+      label: 'Item size',
+      enum: ['compact', 'regular', 'wide', 'responsive'],
+      default: 'responsive',
+    },
+    gap: {
+      type: 'enum',
+      category: 'Layout',
+      label: 'Gap',
+      enum: spacingValues,
+      default: 'm',
+    },
+    padding: {
+      type: 'enum',
+      category: 'Layout',
+      label: 'Horizontal padding',
+      enum: spacingValues,
+      default: 'm',
+    },
+    peek: {
+      type: 'number',
+      category: 'Layout',
+      label: 'Partial next item',
+      default: 32,
+    },
+    showControls: {
+      type: 'boolean',
+      category: 'Controls',
+      label: 'Show controls',
+      default: true,
+    },
+    direction: {
+      type: 'enum',
+      category: 'Layout',
+      label: 'Reading direction',
+      enum: ['auto', 'ltr', 'rtl'],
+      default: 'auto',
+    },
+    motion: {
+      type: 'enum',
+      category: 'Accessibility',
+      label: 'Motion',
+      enum: ['system', 'animated', 'reduced'],
+      default: 'system',
+    },
+    accessibilityLabel: {
+      type: 'string',
+      category: 'Accessibility',
+      label: 'Rail label',
+      default: 'Content rail',
+    },
+    previousLabel: {
+      type: 'string',
+      category: 'Accessibility',
+      label: 'Previous control label',
+      default: 'Previous items',
+    },
+    nextLabel: {
+      type: 'string',
+      category: 'Accessibility',
+      label: 'Next control label',
+      default: 'Next items',
+    },
+    onControlPress: {
+      type: 'action',
+      category: 'Events',
+      label: 'Control press action',
+    },
+    onVisibleRangeChange: {
+      type: 'action',
+      category: 'Events',
+      label: 'Visible range change action',
+    },
+  },
+} as const satisfies ZoraComponentMeta;