@ankhorage/zora 3.1.1 → 3.3.1

package/dist/patterns/content-rail/ContentRail.js.map

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

package/dist/patterns/content-rail/index.d.ts

@@ -0,0 +1,3 @@
+export { ContentRail } from './ContentRail';
+export type { ContentRailControlPressEvent, ContentRailDirection, ContentRailItemSize, ContentRailMotion, ContentRailProps, ContentRailSpacing, ContentRailVisibleRangeChangeEvent, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/content-rail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/content-rail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,4BAA4B,EAC5B,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,kCAAkC,GACnC,MAAM,SAAS,CAAC"}

package/dist/patterns/content-rail/index.js

@@ -0,0 +1,2 @@
+export { ContentRail } from './ContentRail';
+//# sourceMappingURL=index.js.map

package/dist/patterns/content-rail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/patterns/content-rail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { ContentRail } from './ContentRail';\nexport type {\n  ContentRailControlPressEvent,\n  ContentRailDirection,\n  ContentRailItemSize,\n  ContentRailMotion,\n  ContentRailProps,\n  ContentRailSpacing,\n  ContentRailVisibleRangeChangeEvent,\n} from './types';\n"]}

package/dist/patterns/content-rail/meta.d.ts

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

package/dist/patterns/content-rail/meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/patterns/content-rail/meta.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HU,CAAC"}

package/dist/patterns/content-rail/meta.js

@@ -0,0 +1,130 @@
+import { CONTENT_RAIL_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+const spacingValues = ['none', 'xs', 's', 'm', 'l', 'xl'];
+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',
+        },
+    },
+};
+//# sourceMappingURL=meta.js.map

package/dist/patterns/content-rail/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/patterns/content-rail/meta.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAE/E,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAU,CAAC;AAEnE,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,SAAS;IACnB,WAAW,EACT,gHAAgH;IAClH,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,CAAC,GAAG,6BAA6B,CAAC;IACnD,SAAS,EAAE;QACT,KAAK,EAAE,cAAc;QACrB,IAAI,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE;QAChC,YAAY,EAAE;YACZ,QAAQ,EAAE,YAAY;YACtB,GAAG,EAAE,GAAG;YACR,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,EAAE;YACR,YAAY,EAAE,IAAI;YAClB,SAAS,EAAE,MAAM;YACjB,MAAM,EAAE,QAAQ;YAChB,kBAAkB,EAAE,cAAc;YAClC,aAAa,EAAE,gBAAgB;YAC/B,SAAS,EAAE,YAAY;SACxB;KACF;IACD,MAAM,EAAE;QACN,YAAY,EAAE;YACZ,KAAK,EAAE,eAAe;YACtB,SAAS,EAAE,0BAA0B;YACrC,WAAW,EAAE,kEAAkE;YAC/E,aAAa,EAAE;gBACb,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE;gBACzD,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE;aAC/D;SACF;QACD,kBAAkB,EAAE;YAClB,KAAK,EAAE,sBAAsB;YAC7B,SAAS,EAAE,gCAAgC;YAC3C,WAAW,EAAE,yDAAyD;YACtE,aAAa,EAAE;gBACb,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,qBAAqB,EAAE;gBAC3E,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,oBAAoB,EAAE;gBACzE,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE;aAC3D;SACF;KACF;IACD,KAAK,EAAE;QACL,QAAQ,EAAE;YACR,KAAK,EAAE,YAAY;YACnB,eAAe,EAAE,CAAC,GAAG,6BAA6B,CAAC;SACpD;KACF;IACD,KAAK,EAAE;QACL,QAAQ,EAAE;YACR,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,WAAW;YAClB,IAAI,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,CAAC;YAClD,OAAO,EAAE,YAAY;SACtB;QACD,GAAG,EAAE;YACH,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,GAAG;SACb;QACD,OAAO,EAAE;YACP,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,oBAAoB;YAC3B,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,GAAG;SACb;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,mBAAmB;YAC1B,OAAO,EAAE,EAAE;SACZ;QACD,YAAY,EAAE;YACZ,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,eAAe;YACtB,OAAO,EAAE,IAAI;SACd;QACD,SAAS,EAAE;YACT,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,mBAAmB;YAC1B,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC;YAC5B,OAAO,EAAE,MAAM;SAChB;QACD,MAAM,EAAE;YACN,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,eAAe;YACzB,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,SAAS,CAAC;YACvC,OAAO,EAAE,QAAQ;SAClB;QACD,kBAAkB,EAAE;YAClB,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,eAAe;YACzB,KAAK,EAAE,YAAY;YACnB,OAAO,EAAE,cAAc;SACxB;QACD,aAAa,EAAE;YACb,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,eAAe;YACzB,KAAK,EAAE,wBAAwB;YAC/B,OAAO,EAAE,gBAAgB;SAC1B;QACD,SAAS,EAAE;YACT,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,eAAe;YACzB,KAAK,EAAE,oBAAoB;YAC3B,OAAO,EAAE,YAAY;SACtB;QACD,cAAc,EAAE;YACd,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,sBAAsB;SAC9B;QACD,oBAAoB,EAAE;YACpB,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,6BAA6B;SACrC;KACF;CACmC,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\nimport { CONTENT_RAIL_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';\n\nconst spacingValues = ['none', 'xs', 's', 'm', 'l', 'xl'] as const;\n\nexport const contentRailMeta = {\n  name: 'ContentRail',\n  category: 'pattern',\n  description:\n    'Horizontally browsable child content with responsive sizing, partial-next affordance, and accessible controls.',\n  directManifestNode: true,\n  allowedChildren: [...CONTENT_RAIL_ALLOWED_CHILDREN],\n  blueprint: {\n    label: 'Content rail',\n    icon: { name: 'albums-outline' },\n    defaultProps: {\n      itemSize: 'responsive',\n      gap: 'm',\n      padding: 'm',\n      peek: 32,\n      showControls: true,\n      direction: 'auto',\n      motion: 'system',\n      accessibilityLabel: 'Content rail',\n      previousLabel: 'Previous items',\n      nextLabel: 'Next items',\n    },\n  },\n  events: {\n    controlPress: {\n      label: 'Control press',\n      eventType: 'contentRail.controlPress',\n      description: 'Emitted after a previous or next control requests a target item.',\n      payloadFields: [\n        { path: 'direction', type: 'string', label: 'Direction' },\n        { path: 'targetIndex', type: 'number', label: 'Target index' },\n      ],\n    },\n    visibleRangeChange: {\n      label: 'Visible range change',\n      eventType: 'contentRail.visibleRangeChange',\n      description: 'Emitted when the zero-based visible item range changes.',\n      payloadFields: [\n        { path: 'firstVisibleIndex', type: 'number', label: 'First visible index' },\n        { path: 'lastVisibleIndex', type: 'number', label: 'Last visible index' },\n        { path: 'itemCount', type: 'number', label: 'Item count' },\n      ],\n    },\n  },\n  slots: {\n    children: {\n      label: 'Rail items',\n      allowedChildren: [...CONTENT_RAIL_ALLOWED_CHILDREN],\n    },\n  },\n  props: {\n    itemSize: {\n      type: 'enum',\n      category: 'Layout',\n      label: 'Item size',\n      enum: ['compact', 'regular', 'wide', 'responsive'],\n      default: 'responsive',\n    },\n    gap: {\n      type: 'enum',\n      category: 'Layout',\n      label: 'Gap',\n      enum: spacingValues,\n      default: 'm',\n    },\n    padding: {\n      type: 'enum',\n      category: 'Layout',\n      label: 'Horizontal padding',\n      enum: spacingValues,\n      default: 'm',\n    },\n    peek: {\n      type: 'number',\n      category: 'Layout',\n      label: 'Partial next item',\n      default: 32,\n    },\n    showControls: {\n      type: 'boolean',\n      category: 'Controls',\n      label: 'Show controls',\n      default: true,\n    },\n    direction: {\n      type: 'enum',\n      category: 'Layout',\n      label: 'Reading direction',\n      enum: ['auto', 'ltr', 'rtl'],\n      default: 'auto',\n    },\n    motion: {\n      type: 'enum',\n      category: 'Accessibility',\n      label: 'Motion',\n      enum: ['system', 'animated', 'reduced'],\n      default: 'system',\n    },\n    accessibilityLabel: {\n      type: 'string',\n      category: 'Accessibility',\n      label: 'Rail label',\n      default: 'Content rail',\n    },\n    previousLabel: {\n      type: 'string',\n      category: 'Accessibility',\n      label: 'Previous control label',\n      default: 'Previous items',\n    },\n    nextLabel: {\n      type: 'string',\n      category: 'Accessibility',\n      label: 'Next control label',\n      default: 'Next items',\n    },\n    onControlPress: {\n      type: 'action',\n      category: 'Events',\n      label: 'Control press action',\n    },\n    onVisibleRangeChange: {\n      type: 'action',\n      category: 'Events',\n      label: 'Visible range change action',\n    },\n  },\n} as const satisfies ZoraComponentMeta;\n"]}

package/dist/patterns/content-rail/resolveContentRailItemWidth.d.ts

@@ -0,0 +1,10 @@
+import type { ContentRailItemSize } from './types';
+export declare function resolveContentRailItemWidth({ gap, itemCount, itemSize, padding, peek, viewportWidth, }: {
+    gap: number;
+    itemCount: number;
+    itemSize: ContentRailItemSize;
+    padding: number;
+    peek: number;
+    viewportWidth: number;
+}): number;
+//# sourceMappingURL=resolveContentRailItemWidth.d.ts.map

package/dist/patterns/content-rail/resolveContentRailItemWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveContentRailItemWidth.d.ts","sourceRoot":"","sources":["../../../src/patterns/content-rail/resolveContentRailItemWidth.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,wBAAgB,2BAA2B,CAAC,EAC1C,GAAG,EACH,SAAS,EACT,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,aAAa,GACd,EAAE;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;CACvB,GAAG,MAAM,CAeT"}

package/dist/patterns/content-rail/resolveContentRailItemWidth.js

@@ -0,0 +1,25 @@
+export function resolveContentRailItemWidth({ gap, itemCount, itemSize, padding, peek, viewportWidth, }) {
+    const availableWidth = Math.max(0, viewportWidth - padding * 2);
+    if (availableWidth === 0 || itemCount === 0)
+        return 0;
+    const fixedWidth = resolveFixedItemWidth(itemSize);
+    if (fixedWidth !== undefined)
+        return Math.min(fixedWidth, availableWidth);
+    const slots = viewportWidth >= 1024 ? 4 : viewportWidth >= 768 ? 3 : viewportWidth >= 480 ? 2 : 1;
+    const fullItems = Math.min(slots, itemCount);
+    const overflows = itemCount > fullItems;
+    const resolvedPeek = overflows ? Math.min(Math.max(0, peek), availableWidth / 2) : 0;
+    const gaps = overflows ? fullItems : Math.max(0, fullItems - 1);
+    const resolved = (availableWidth - resolvedPeek - gap * gaps) / fullItems;
+    return Math.min(280, Math.max(Math.min(96, availableWidth), Math.floor(resolved)));
+}
+function resolveFixedItemWidth(itemSize) {
+    if (itemSize === 'compact')
+        return 144;
+    if (itemSize === 'regular')
+        return 200;
+    if (itemSize === 'wide')
+        return 280;
+    return undefined;
+}
+//# sourceMappingURL=resolveContentRailItemWidth.js.map

package/dist/patterns/content-rail/resolveContentRailItemWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveContentRailItemWidth.js","sourceRoot":"","sources":["../../../src/patterns/content-rail/resolveContentRailItemWidth.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,2BAA2B,CAAC,EAC1C,GAAG,EACH,SAAS,EACT,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,aAAa,GAQd;IACC,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC;IAChE,IAAI,cAAc,KAAK,CAAC,IAAI,SAAS,KAAK,CAAC;QAAE,OAAO,CAAC,CAAC;IAEtD,MAAM,UAAU,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IACnD,IAAI,UAAU,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;IAE1E,MAAM,KAAK,GAAG,aAAa,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAClG,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IACxC,MAAM,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrF,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,CAAC;IAChE,MAAM,QAAQ,GAAG,CAAC,cAAc,GAAG,YAAY,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAE1E,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,cAAc,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AACrF,CAAC;AAED,SAAS,qBAAqB,CAAC,QAA6B;IAC1D,IAAI,QAAQ,KAAK,SAAS;QAAE,OAAO,GAAG,CAAC;IACvC,IAAI,QAAQ,KAAK,SAAS;QAAE,OAAO,GAAG,CAAC;IACvC,IAAI,QAAQ,KAAK,MAAM;QAAE,OAAO,GAAG,CAAC;IACpC,OAAO,SAAS,CAAC;AACnB,CAAC","sourcesContent":["import type { ContentRailItemSize } from './types';\n\nexport function resolveContentRailItemWidth({\n  gap,\n  itemCount,\n  itemSize,\n  padding,\n  peek,\n  viewportWidth,\n}: {\n  gap: number;\n  itemCount: number;\n  itemSize: ContentRailItemSize;\n  padding: number;\n  peek: number;\n  viewportWidth: number;\n}): number {\n  const availableWidth = Math.max(0, viewportWidth - padding * 2);\n  if (availableWidth === 0 || itemCount === 0) return 0;\n\n  const fixedWidth = resolveFixedItemWidth(itemSize);\n  if (fixedWidth !== undefined) return Math.min(fixedWidth, availableWidth);\n\n  const slots = viewportWidth >= 1024 ? 4 : viewportWidth >= 768 ? 3 : viewportWidth >= 480 ? 2 : 1;\n  const fullItems = Math.min(slots, itemCount);\n  const overflows = itemCount > fullItems;\n  const resolvedPeek = overflows ? Math.min(Math.max(0, peek), availableWidth / 2) : 0;\n  const gaps = overflows ? fullItems : Math.max(0, fullItems - 1);\n  const resolved = (availableWidth - resolvedPeek - gap * gaps) / fullItems;\n\n  return Math.min(280, Math.max(Math.min(96, availableWidth), Math.floor(resolved)));\n}\n\nfunction resolveFixedItemWidth(itemSize: ContentRailItemSize): number | undefined {\n  if (itemSize === 'compact') return 144;\n  if (itemSize === 'regular') return 200;\n  if (itemSize === 'wide') return 280;\n  return undefined;\n}\n"]}

package/dist/patterns/content-rail/resolveContentRailPhysicalOffset.d.ts

@@ -0,0 +1,6 @@
+export declare function resolveContentRailPhysicalOffset({ isRtl, logicalOffset, maxOffset, }: {
+    isRtl: boolean;
+    logicalOffset: number;
+    maxOffset: number;
+}): number;
+//# sourceMappingURL=resolveContentRailPhysicalOffset.d.ts.map

package/dist/patterns/content-rail/resolveContentRailPhysicalOffset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveContentRailPhysicalOffset.d.ts","sourceRoot":"","sources":["../../../src/patterns/content-rail/resolveContentRailPhysicalOffset.ts"],"names":[],"mappings":"AAAA,wBAAgB,gCAAgC,CAAC,EAC/C,KAAK,EACL,aAAa,EACb,SAAS,GACV,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,MAAM,CAGT"}

package/dist/patterns/content-rail/resolveContentRailPhysicalOffset.js

@@ -0,0 +1,5 @@
+export function resolveContentRailPhysicalOffset({ isRtl, logicalOffset, maxOffset, }) {
+    const clampedOffset = Math.min(Math.max(0, logicalOffset), Math.max(0, maxOffset));
+    return isRtl ? Math.max(0, maxOffset) - clampedOffset : clampedOffset;
+}
+//# sourceMappingURL=resolveContentRailPhysicalOffset.js.map

package/dist/patterns/content-rail/resolveContentRailPhysicalOffset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveContentRailPhysicalOffset.js","sourceRoot":"","sources":["../../../src/patterns/content-rail/resolveContentRailPhysicalOffset.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,gCAAgC,CAAC,EAC/C,KAAK,EACL,aAAa,EACb,SAAS,GAKV;IACC,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;IACnF,OAAO,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC;AACxE,CAAC","sourcesContent":["export function resolveContentRailPhysicalOffset({\n  isRtl,\n  logicalOffset,\n  maxOffset,\n}: {\n  isRtl: boolean;\n  logicalOffset: number;\n  maxOffset: number;\n}): number {\n  const clampedOffset = Math.min(Math.max(0, logicalOffset), Math.max(0, maxOffset));\n  return isRtl ? Math.max(0, maxOffset) - clampedOffset : clampedOffset;\n}\n"]}

package/dist/patterns/content-rail/resolveContentRailState.d.ts

@@ -0,0 +1,18 @@
+export declare function resolveContentRailState({ contentWidth, gap, itemCount, itemWidth, logicalOffset, viewportWidth, }: {
+    contentWidth: number;
+    gap: number;
+    itemCount: number;
+    itemWidth: number;
+    logicalOffset: number;
+    viewportWidth: number;
+}): {
+    anchorIndex: number;
+    canGoNext: boolean;
+    canGoPrevious: boolean;
+    firstVisibleIndex: number;
+    lastVisibleIndex: number;
+    maxOffset: number;
+    offset: number;
+    stride: number;
+};
+//# sourceMappingURL=resolveContentRailState.d.ts.map

package/dist/patterns/content-rail/resolveContentRailState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveContentRailState.d.ts","sourceRoot":"","sources":["../../../src/patterns/content-rail/resolveContentRailState.ts"],"names":[],"mappings":"AAAA,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,EACZ,GAAG,EACH,SAAS,EACT,SAAS,EACT,aAAa,EACb,aAAa,GACd,EAAE;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB;;;;;;;;;EAqBA"}

package/dist/patterns/content-rail/resolveContentRailState.js

@@ -0,0 +1,21 @@
+export function resolveContentRailState({ contentWidth, gap, itemCount, itemWidth, logicalOffset, viewportWidth, }) {
+    const maxOffset = Math.max(0, contentWidth - viewportWidth);
+    const offset = Math.min(Math.max(0, logicalOffset), maxOffset);
+    const stride = itemWidth + gap;
+    const firstVisibleIndex = stride > 0 ? Math.min(itemCount - 1, Math.floor(offset / stride)) : 0;
+    const lastVisibleIndex = stride > 0
+        ? Math.min(itemCount - 1, Math.max(0, Math.ceil((offset + viewportWidth) / stride) - 1))
+        : 0;
+    const anchorIndex = stride > 0 ? Math.round(offset / stride) : 0;
+    return {
+        anchorIndex: Math.min(Math.max(0, anchorIndex), Math.max(0, itemCount - 1)),
+        canGoNext: itemCount > 0 && offset < maxOffset - 1,
+        canGoPrevious: itemCount > 0 && offset > 1,
+        firstVisibleIndex: itemCount === 0 ? -1 : firstVisibleIndex,
+        lastVisibleIndex: itemCount === 0 ? -1 : lastVisibleIndex,
+        maxOffset,
+        offset,
+        stride,
+    };
+}
+//# sourceMappingURL=resolveContentRailState.js.map

package/dist/patterns/content-rail/resolveContentRailState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveContentRailState.js","sourceRoot":"","sources":["../../../src/patterns/content-rail/resolveContentRailState.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,uBAAuB,CAAC,EACtC,YAAY,EACZ,GAAG,EACH,SAAS,EACT,SAAS,EACT,aAAa,EACb,aAAa,GAQd;IACC,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC,CAAC;IAC5D,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,CAAC,EAAE,SAAS,CAAC,CAAC;IAC/D,MAAM,MAAM,GAAG,SAAS,GAAG,GAAG,CAAC;IAC/B,MAAM,iBAAiB,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChG,MAAM,gBAAgB,GACpB,MAAM,GAAG,CAAC;QACR,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;QACxF,CAAC,CAAC,CAAC,CAAC;IACR,MAAM,WAAW,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEjE,OAAO;QACL,WAAW,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,CAAC;QAC3E,SAAS,EAAE,SAAS,GAAG,CAAC,IAAI,MAAM,GAAG,SAAS,GAAG,CAAC;QAClD,aAAa,EAAE,SAAS,GAAG,CAAC,IAAI,MAAM,GAAG,CAAC;QAC1C,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB;QAC3D,gBAAgB,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB;QACzD,SAAS;QACT,MAAM;QACN,MAAM;KACP,CAAC;AACJ,CAAC","sourcesContent":["export function resolveContentRailState({\n  contentWidth,\n  gap,\n  itemCount,\n  itemWidth,\n  logicalOffset,\n  viewportWidth,\n}: {\n  contentWidth: number;\n  gap: number;\n  itemCount: number;\n  itemWidth: number;\n  logicalOffset: number;\n  viewportWidth: number;\n}) {\n  const maxOffset = Math.max(0, contentWidth - viewportWidth);\n  const offset = Math.min(Math.max(0, logicalOffset), maxOffset);\n  const stride = itemWidth + gap;\n  const firstVisibleIndex = stride > 0 ? Math.min(itemCount - 1, Math.floor(offset / stride)) : 0;\n  const lastVisibleIndex =\n    stride > 0\n      ? Math.min(itemCount - 1, Math.max(0, Math.ceil((offset + viewportWidth) / stride) - 1))\n      : 0;\n  const anchorIndex = stride > 0 ? Math.round(offset / stride) : 0;\n\n  return {\n    anchorIndex: Math.min(Math.max(0, anchorIndex), Math.max(0, itemCount - 1)),\n    canGoNext: itemCount > 0 && offset < maxOffset - 1,\n    canGoPrevious: itemCount > 0 && offset > 1,\n    firstVisibleIndex: itemCount === 0 ? -1 : firstVisibleIndex,\n    lastVisibleIndex: itemCount === 0 ? -1 : lastVisibleIndex,\n    maxOffset,\n    offset,\n    stride,\n  };\n}\n"]}

package/dist/patterns/content-rail/types.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+export type ContentRailDirection = 'auto' | 'ltr' | 'rtl';
+export type ContentRailItemSize = 'compact' | 'regular' | 'wide' | 'responsive';
+export type ContentRailMotion = 'system' | 'animated' | 'reduced';
+export type ContentRailSpacing = 'none' | 'xs' | 's' | 'm' | 'l' | 'xl';
+export interface ContentRailControlPressEvent {
+    direction: 'previous' | 'next';
+    targetIndex: number;
+}
+export interface ContentRailVisibleRangeChangeEvent {
+    firstVisibleIndex: number;
+    lastVisibleIndex: number;
+    itemCount: number;
+}
+export interface ContentRailProps extends ZoraBaseProps {
+    children?: ReactNode;
+    itemSize?: ContentRailItemSize;
+    gap?: ContentRailSpacing;
+    padding?: ContentRailSpacing;
+    peek?: number;
+    showControls?: boolean;
+    direction?: ContentRailDirection;
+    motion?: ContentRailMotion;
+    accessibilityLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    onControlPress?: (event: ContentRailControlPressEvent) => void | Promise<void>;
+    onVisibleRangeChange?: (event: ContentRailVisibleRangeChangeEvent) => void | Promise<void>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/patterns/content-rail/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/content-rail/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;AAC1D,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,CAAC;AAChF,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AAClE,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAExE,MAAM,WAAW,4BAA4B;IAC3C,SAAS,EAAE,UAAU,GAAG,MAAM,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kCAAkC;IACjD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,GAAG,CAAC,EAAE,kBAAkB,CAAC;IACzB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,4BAA4B,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/E,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,kCAAkC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5F"}

package/dist/patterns/content-rail/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/patterns/content-rail/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/content-rail/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type ContentRailDirection = 'auto' | 'ltr' | 'rtl';\nexport type ContentRailItemSize = 'compact' | 'regular' | 'wide' | 'responsive';\nexport type ContentRailMotion = 'system' | 'animated' | 'reduced';\nexport type ContentRailSpacing = 'none' | 'xs' | 's' | 'm' | 'l' | 'xl';\n\nexport interface ContentRailControlPressEvent {\n  direction: 'previous' | 'next';\n  targetIndex: number;\n}\n\nexport interface ContentRailVisibleRangeChangeEvent {\n  firstVisibleIndex: number;\n  lastVisibleIndex: number;\n  itemCount: number;\n}\n\nexport interface ContentRailProps extends ZoraBaseProps {\n  children?: ReactNode;\n  itemSize?: ContentRailItemSize;\n  gap?: ContentRailSpacing;\n  padding?: ContentRailSpacing;\n  peek?: number;\n  showControls?: boolean;\n  direction?: ContentRailDirection;\n  motion?: ContentRailMotion;\n  accessibilityLabel?: string;\n  previousLabel?: string;\n  nextLabel?: string;\n  onControlPress?: (event: ContentRailControlPressEvent) => void | Promise<void>;\n  onVisibleRangeChange?: (event: ContentRailVisibleRangeChangeEvent) => void | Promise<void>;\n}\n"]}

package/dist/patterns/content-rail/useContentRailReducedMotion.d.ts

@@ -0,0 +1,3 @@
+import type { ContentRailMotion } from './types';
+export declare function useContentRailReducedMotion(motion: ContentRailMotion): boolean;
+//# sourceMappingURL=useContentRailReducedMotion.d.ts.map

package/dist/patterns/content-rail/useContentRailReducedMotion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContentRailReducedMotion.d.ts","sourceRoot":"","sources":["../../../src/patterns/content-rail/useContentRailReducedMotion.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,wBAAgB,2BAA2B,CAAC,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAsB9E"}

package/dist/patterns/content-rail/useContentRailReducedMotion.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { AccessibilityInfo } from 'react-native';
+export function useContentRailReducedMotion(motion) {
+    const [systemReducedMotion, setSystemReducedMotion] = React.useState(false);
+    React.useEffect(() => {
+        if (motion !== 'system')
+            return;
+        let active = true;
+        void AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
+            if (active)
+                setSystemReducedMotion(enabled);
+        });
+        const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setSystemReducedMotion);
+        return () => {
+            active = false;
+            subscription.remove();
+        };
+    }, [motion]);
+    return motion === 'reduced' || (motion === 'system' && systemReducedMotion);
+}
+//# sourceMappingURL=useContentRailReducedMotion.js.map

package/dist/patterns/content-rail/useContentRailReducedMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContentRailReducedMotion.js","sourceRoot":"","sources":["../../../src/patterns/content-rail/useContentRailReducedMotion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAIjD,MAAM,UAAU,2BAA2B,CAAC,MAAyB;IACnE,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5E,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,MAAM,KAAK,QAAQ;YAAE,OAAO;QAEhC,IAAI,MAAM,GAAG,IAAI,CAAC;QAClB,KAAK,iBAAiB,CAAC,qBAAqB,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE;YAC9D,IAAI,MAAM;gBAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC;QACH,MAAM,YAAY,GAAG,iBAAiB,CAAC,gBAAgB,CACrD,qBAAqB,EACrB,sBAAsB,CACvB,CAAC;QAEF,OAAO,GAAG,EAAE;YACV,MAAM,GAAG,KAAK,CAAC;YACf,YAAY,CAAC,MAAM,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,MAAM,KAAK,SAAS,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI,mBAAmB,CAAC,CAAC;AAC9E,CAAC","sourcesContent":["import React from 'react';\nimport { AccessibilityInfo } from 'react-native';\n\nimport type { ContentRailMotion } from './types';\n\nexport function useContentRailReducedMotion(motion: ContentRailMotion): boolean {\n  const [systemReducedMotion, setSystemReducedMotion] = React.useState(false);\n\n  React.useEffect(() => {\n    if (motion !== 'system') return;\n\n    let active = true;\n    void AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {\n      if (active) setSystemReducedMotion(enabled);\n    });\n    const subscription = AccessibilityInfo.addEventListener(\n      'reduceMotionChanged',\n      setSystemReducedMotion,\n    );\n\n    return () => {\n      active = false;\n      subscription.remove();\n    };\n  }, [motion]);\n\n  return motion === 'reduced' || (motion === 'system' && systemReducedMotion);\n}\n"]}

package/dist/patterns/message-bubble/meta.d.ts

@@ -3,7 +3,7 @@ export declare const messageBubbleMeta: {
     readonly category: "pattern";
     readonly description: "Chat/message bubble with direction, author, text, meta, and delivery status presentation.";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ReaderSurface"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail"];
     readonly blueprint: {
         readonly label: "Message bubble";
         readonly icon: {

package/dist/patterns/notice/meta.d.ts

@@ -2,7 +2,7 @@ export declare const noticeMeta: {
     readonly name: "Notice";
     readonly category: "pattern";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ReaderSurface"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail"];
     readonly blueprint: {
         readonly label: "Notice";
         readonly defaultProps: {

package/dist/patterns/panel/meta.d.ts

@@ -2,7 +2,7 @@ export declare const panelMeta: {
     readonly name: "Panel";
     readonly category: "pattern";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ReaderSurface"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail"];
     readonly blueprint: {
         readonly label: "Panel";
         readonly defaultProps: {

package/dist/patterns/post-card/meta.d.ts

@@ -3,7 +3,7 @@ export declare const postCardMeta: {
     readonly category: "pattern";
     readonly description: "Social/content post card with author identity, body, media, actions, and comment previews.";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ReaderSurface"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "ButtonGroup", "ThemeModeToggle", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail"];
     readonly blueprint: {
         readonly label: "Post card";
         readonly icon: {