@ankhorage/zora 16.0.0 → 18.0.0

package/dist/patterns/message-bubble/MessageBubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBubble.js","sourceRoot":"","sources":["../../../src/patterns/message-bubble/MessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ButtonBase } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Avatar } from '../../features/avatar/public';\nimport { Box, Stack } from '../../features/layout/public';\nimport { Text } from '../../features/typography/public';\nimport { Inline } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type {\n  MessageBubbleAvatar,\n  MessageBubbleDirection,\n  MessageBubbleProps,\n  MessageBubbleStatus,\n} from './types';\n\nfunction resolveAvatarName({\n  avatar,\n  authorName,\n}: {\n  avatar: MessageBubbleAvatar | undefined;\n  authorName: React.ReactNode | undefined;\n}): string | undefined {\n  if (avatar?.name) return avatar.name;\n  return typeof authorName === 'string' ? authorName : undefined;\n}\n\nfunction resolvePadding(compact: boolean) {\n  return compact ? { px: 'm' as const, py: 's' as const } : { px: 'm' as const, py: 'm' as const };\n}\n\nfunction resolveStatusLabel(status: MessageBubbleStatus): string {\n  switch (status) {\n    case 'sending':\n      return 'Sending';\n    case 'sent':\n      return 'Sent';\n    case 'delivered':\n      return 'Delivered';\n    case 'read':\n      return 'Read';\n    case 'failed':\n      return 'Failed';\n    default:\n      return status;\n  }\n}\n\nfunction isMessageBubbleStatus(\n  status: MessageBubbleProps['status'],\n): status is MessageBubbleStatus {\n  return (\n    status === 'sending' ||\n    status === 'sent' ||\n    status === 'delivered' ||\n    status === 'read' ||\n    status === 'failed'\n  );\n}\n\nfunction resolveStatus(status: MessageBubbleProps['status']) {\n  if (status == null) return null;\n  return isMessageBubbleStatus(status) ? resolveStatusLabel(status) : status;\n}\n\nfunction resolveBubbleStyles({\n  direction,\n  disabled,\n  hovered,\n  pressed,\n  selected,\n  theme,\n}: {\n  direction: MessageBubbleDirection;\n  disabled: boolean;\n  hovered: boolean;\n  pressed: boolean;\n  selected: boolean;\n  theme: ReturnType<typeof useZoraTheme>['theme'];\n}) {\n  const borderColor = selected ? theme.semantics.border.focus : theme.semantics.border.default;\n\n  if (direction === 'system') {\n    return {\n      bg: selected ? theme.semantics.neutral.surface : 'transparent',\n      borderColor,\n      borderWidth: selected ? 1 : 0,\n      opacity: disabled ? 0.72 : 1,\n    };\n  }\n\n  const interactiveBg = pressed\n    ? theme.semantics.neutral.surfaceActive\n    : hovered\n      ? theme.semantics.neutral.surfaceHover\n      : undefined;\n\n  return {\n    bg:\n      interactiveBg ??\n      (direction === 'outgoing' ? theme.semantics.neutral.surface : theme.semantics.surface.raised),\n    borderColor,\n    borderWidth: selected ? 1 : 0,\n    opacity: disabled ? 0.72 : 1,\n  };\n}\n\nfunction MessageAvatar({\n  avatar,\n  authorName,\n  compact,\n}: {\n  avatar: MessageBubbleAvatar;\n  authorName: React.ReactNode | undefined;\n  compact: boolean;\n}) {\n  const avatarName = resolveAvatarName({ avatar, authorName });\n\n  return (\n    <Avatar\n      initials={avatar.initials}\n      label={avatar.label ?? avatarName}\n      name={avatarName}\n      shape={avatar.shape}\n      size={avatar.size ?? (compact ? 'xs' : 's')}\n      source={avatar.source}\n      color={avatar.color}\n    />\n  );\n}\n\nfunction MessageBubbleInner({\n  themeId: _themeId,\n  mode: _mode,\n  interactionPolicy,\n  testID,\n  direction = 'incoming',\n  text,\n  children,\n  author,\n  timestamp,\n  meta,\n  status,\n  leading,\n  trailing,\n  footer,\n  selected = false,\n  disabled = false,\n  compact = false,\n  accessibilityLabel,\n  onPress,\n}: MessageBubbleProps) {\n  const { theme } = useZoraTheme();\n  const padding = resolvePadding(compact);\n  const isInteractive = Boolean(onPress);\n  const isOutgoing = direction === 'outgoing';\n  const isSystem = direction === 'system';\n  const renderedStatus = resolveStatus(status);\n  const authorName = author?.name;\n  const authorAvatar = author?.avatar;\n  const hasAuthorName = authorName != null && !isOutgoing && !isSystem;\n  const hasAvatar = authorAvatar != null && !isOutgoing && !isSystem;\n  const hasMetaRow = timestamp != null || meta != null || renderedStatus != null;\n\n  const renderBubble = ({ pressed, hovered }: { pressed: boolean; hovered: boolean }) => {\n    const styles = resolveBubbleStyles({ direction, disabled, hovered, pressed, selected, theme });\n\n    return (\n      <Box\n        bg={styles.bg}\n        borderColor={styles.borderColor}\n        borderWidth={styles.borderWidth}\n        px={padding.px}\n        py={padding.py}\n        radius={isSystem ? 'm' : 'l'}\n        style={{ maxWidth: compact ? 420 : 560, opacity: styles.opacity }}\n      >\n        <Stack align={isSystem ? 'center' : 'flex-start'} gap={compact ? 'xxs' : 'xs'}>\n          {hasAuthorName ? (\n            <Text emphasis=\"muted\" variant=\"caption\" weight=\"semiBold\">\n              {authorName}\n            </Text>\n          ) : null}\n          {text != null ? (\n            <Text align={isSystem ? 'center' : undefined} emphasis={disabled ? 'muted' : 'default'}>\n              {text}\n            </Text>\n          ) : null}\n          {children != null ? <Box width=\"100%\">{children}</Box> : null}\n          {hasMetaRow ? (\n            <Inline\n              align=\"center\"\n              gap=\"xs\"\n              justify={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}\n              wrap=\"wrap\"\n            >\n              {timestamp != null ? (\n                <Text emphasis=\"subtle\" variant=\"caption\">\n                  {timestamp}\n                </Text>\n              ) : null}\n              {meta != null ? (\n                <Text emphasis=\"subtle\" variant=\"caption\">\n                  {meta}\n                </Text>\n              ) : null}\n              {renderedStatus != null ? (\n                <Text\n                  color={status === 'failed' ? 'danger' : undefined}\n                  emphasis={status === 'failed' ? 'default' : 'subtle'}\n                  variant=\"caption\"\n                >\n                  {renderedStatus}\n                </Text>\n              ) : null}\n            </Inline>\n          ) : null}\n        </Stack>\n      </Box>\n    );\n  };\n\n  const bubbleContent = isInteractive ? (\n    <ButtonBase\n      accessibilityLabel={accessibilityLabel}\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled, selected }}\n      disabled={disabled}\n      interactionPolicy={interactionPolicy}\n      onPress={onPress}\n      radius={isSystem ? 'm' : 'l'}\n      testID={testID}\n    >\n      {(state) => renderBubble({ pressed: state.pressed, hovered: state.hovered })}\n    </ButtonBase>\n  ) : (\n    <Box testID={testID}>{renderBubble({ pressed: false, hovered: false })}</Box>\n  );\n\n  return (\n    <Stack gap=\"xs\" style={{ width: '100%' }}>\n      <Inline\n        align=\"flex-end\"\n        gap=\"s\"\n        justify={isSystem ? 'center' : isOutgoing ? 'flex-end' : 'flex-start'}\n        wrap=\"nowrap\"\n      >\n        {!isOutgoing && !isSystem ? (\n          <Box>\n            {leading ??\n              (hasAvatar ? (\n                <MessageAvatar avatar={authorAvatar} authorName={authorName} compact={compact} />\n              ) : null)}\n          </Box>\n        ) : null}\n        {isOutgoing && trailing ? <Box>{trailing}</Box> : null}\n        {bubbleContent}\n        {isOutgoing && leading ? <Box>{leading}</Box> : null}\n        {!isOutgoing && !isSystem && trailing ? <Box>{trailing}</Box> : null}\n      </Inline>\n      {footer != null ? (\n        <Box alignSelf={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}>{footer}</Box>\n      ) : null}\n    </Stack>\n  );\n}\n\n/***\n * Message bubble pattern for chat UIs with direction and status styling.\n *\n \n */\nexport const MessageBubble = withZoraThemeScope(MessageBubbleInner);\n"]}
+{"version":3,"file":"MessageBubble.js","sourceRoot":"","sources":["../../../src/patterns/message-bubble/MessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ButtonBase } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Avatar } from '../../features/avatar/public';\nimport { View } from '../../features/layout/public';\nimport { Text } from '../../features/typography/public';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type {\n  MessageBubbleAvatar,\n  MessageBubbleDirection,\n  MessageBubbleProps,\n  MessageBubbleStatus,\n} from './types';\n\nfunction resolveAvatarName({\n  avatar,\n  authorName,\n}: {\n  avatar: MessageBubbleAvatar | undefined;\n  authorName: React.ReactNode | undefined;\n}): string | undefined {\n  if (avatar?.name) return avatar.name;\n  return typeof authorName === 'string' ? authorName : undefined;\n}\n\nfunction resolvePadding(compact: boolean) {\n  return compact ? { px: 'm' as const, py: 's' as const } : { px: 'm' as const, py: 'm' as const };\n}\n\nfunction resolveStatusLabel(status: MessageBubbleStatus): string {\n  switch (status) {\n    case 'sending':\n      return 'Sending';\n    case 'sent':\n      return 'Sent';\n    case 'delivered':\n      return 'Delivered';\n    case 'read':\n      return 'Read';\n    case 'failed':\n      return 'Failed';\n    default:\n      return status;\n  }\n}\n\nfunction isMessageBubbleStatus(\n  status: MessageBubbleProps['status'],\n): status is MessageBubbleStatus {\n  return (\n    status === 'sending' ||\n    status === 'sent' ||\n    status === 'delivered' ||\n    status === 'read' ||\n    status === 'failed'\n  );\n}\n\nfunction resolveStatus(status: MessageBubbleProps['status']) {\n  if (status == null) return null;\n  return isMessageBubbleStatus(status) ? resolveStatusLabel(status) : status;\n}\n\nfunction resolveBubbleStyles({\n  direction,\n  disabled,\n  hovered,\n  pressed,\n  selected,\n  theme,\n}: {\n  direction: MessageBubbleDirection;\n  disabled: boolean;\n  hovered: boolean;\n  pressed: boolean;\n  selected: boolean;\n  theme: ReturnType<typeof useZoraTheme>['theme'];\n}) {\n  const borderColor = selected ? theme.semantics.border.focus : theme.semantics.border.default;\n\n  if (direction === 'system') {\n    return {\n      bg: selected ? theme.semantics.neutral.surface : 'transparent',\n      borderColor,\n      borderWidth: selected ? 1 : 0,\n      opacity: disabled ? 0.72 : 1,\n    };\n  }\n\n  const interactiveBg = pressed\n    ? theme.semantics.neutral.surfaceActive\n    : hovered\n      ? theme.semantics.neutral.surfaceHover\n      : undefined;\n\n  return {\n    bg:\n      interactiveBg ??\n      (direction === 'outgoing' ? theme.semantics.neutral.surface : theme.semantics.surface.raised),\n    borderColor,\n    borderWidth: selected ? 1 : 0,\n    opacity: disabled ? 0.72 : 1,\n  };\n}\n\nfunction MessageAvatar({\n  avatar,\n  authorName,\n  compact,\n}: {\n  avatar: MessageBubbleAvatar;\n  authorName: React.ReactNode | undefined;\n  compact: boolean;\n}) {\n  const avatarName = resolveAvatarName({ avatar, authorName });\n\n  return (\n    <Avatar\n      initials={avatar.initials}\n      label={avatar.label ?? avatarName}\n      name={avatarName}\n      shape={avatar.shape}\n      size={avatar.size ?? (compact ? 'xs' : 's')}\n      source={avatar.source}\n      color={avatar.color}\n    />\n  );\n}\n\nfunction MessageBubbleInner({\n  themeId: _themeId,\n  mode: _mode,\n  interactionPolicy,\n  testID,\n  direction = 'incoming',\n  text,\n  children,\n  author,\n  timestamp,\n  meta,\n  status,\n  leading,\n  trailing,\n  footer,\n  selected = false,\n  disabled = false,\n  compact = false,\n  accessibilityLabel,\n  onPress,\n}: MessageBubbleProps) {\n  const { theme } = useZoraTheme();\n  const padding = resolvePadding(compact);\n  const isInteractive = Boolean(onPress);\n  const isOutgoing = direction === 'outgoing';\n  const isSystem = direction === 'system';\n  const renderedStatus = resolveStatus(status);\n  const authorName = author?.name;\n  const authorAvatar = author?.avatar;\n  const hasAuthorName = authorName != null && !isOutgoing && !isSystem;\n  const hasAvatar = authorAvatar != null && !isOutgoing && !isSystem;\n  const hasMetaRow = timestamp != null || meta != null || renderedStatus != null;\n\n  const renderBubble = ({ pressed, hovered }: { pressed: boolean; hovered: boolean }) => {\n    const styles = resolveBubbleStyles({ direction, disabled, hovered, pressed, selected, theme });\n\n    return (\n      <View\n        bg={styles.bg}\n        borderColor={styles.borderColor}\n        borderWidth={styles.borderWidth}\n        px={padding.px}\n        py={padding.py}\n        radius={isSystem ? 'm' : 'l'}\n        style={{ maxWidth: compact ? 420 : 560, opacity: styles.opacity }}\n      >\n        <View align={isSystem ? 'center' : 'flex-start'} gap={compact ? 'xxs' : 'xs'}>\n          {hasAuthorName ? (\n            <Text emphasis=\"muted\" variant=\"caption\" weight=\"semiBold\">\n              {authorName}\n            </Text>\n          ) : null}\n          {text != null ? (\n            <Text align={isSystem ? 'center' : undefined} emphasis={disabled ? 'muted' : 'default'}>\n              {text}\n            </Text>\n          ) : null}\n          {children != null ? <View width=\"100%\">{children}</View> : null}\n          {hasMetaRow ? (\n            <View\n              direction=\"row\"\n              align=\"center\"\n              gap=\"xs\"\n              justify={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}\n              wrap=\"wrap\"\n            >\n              {timestamp != null ? (\n                <Text emphasis=\"subtle\" variant=\"caption\">\n                  {timestamp}\n                </Text>\n              ) : null}\n              {meta != null ? (\n                <Text emphasis=\"subtle\" variant=\"caption\">\n                  {meta}\n                </Text>\n              ) : null}\n              {renderedStatus != null ? (\n                <Text\n                  color={status === 'failed' ? 'danger' : undefined}\n                  emphasis={status === 'failed' ? 'default' : 'subtle'}\n                  variant=\"caption\"\n                >\n                  {renderedStatus}\n                </Text>\n              ) : null}\n            </View>\n          ) : null}\n        </View>\n      </View>\n    );\n  };\n\n  const bubbleContent = isInteractive ? (\n    <ButtonBase\n      accessibilityLabel={accessibilityLabel}\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled, selected }}\n      disabled={disabled}\n      interactionPolicy={interactionPolicy}\n      onPress={onPress}\n      radius={isSystem ? 'm' : 'l'}\n      testID={testID}\n    >\n      {(state) => renderBubble({ pressed: state.pressed, hovered: state.hovered })}\n    </ButtonBase>\n  ) : (\n    <View testID={testID}>{renderBubble({ pressed: false, hovered: false })}</View>\n  );\n\n  return (\n    <View gap=\"xs\" style={{ width: '100%' }}>\n      <View\n        direction=\"row\"\n        align=\"flex-end\"\n        gap=\"s\"\n        justify={isSystem ? 'center' : isOutgoing ? 'flex-end' : 'flex-start'}\n        wrap=\"nowrap\"\n      >\n        {!isOutgoing && !isSystem ? (\n          <View>\n            {leading ??\n              (hasAvatar ? (\n                <MessageAvatar avatar={authorAvatar} authorName={authorName} compact={compact} />\n              ) : null)}\n          </View>\n        ) : null}\n        {isOutgoing && trailing ? <View>{trailing}</View> : null}\n        {bubbleContent}\n        {isOutgoing && leading ? <View>{leading}</View> : null}\n        {!isOutgoing && !isSystem && trailing ? <View>{trailing}</View> : null}\n      </View>\n      {footer != null ? (\n        <View alignSelf={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}>\n          {footer}\n        </View>\n      ) : null}\n    </View>\n  );\n}\n\n/***\n * Message bubble pattern for chat UIs with direction and status styling.\n *\n \n */\nexport const MessageBubble = withZoraThemeScope(MessageBubbleInner);\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 ["ActivityIndicator", "ForgotPasswordForm", "OAuthProviderButton", "OAuthProviderList", "OtpForm", "SignInForm", "SignUpForm", "Accordion", "Surface", "Avatar", "AvatarGroup", "Badge", "MediaCard", "MetricCard", "Chip", "ChipGroup", "DataTable", "DatePicker", "Dialog", "Pagination", "Rating", "SearchInput", "Tabs", "Toolbar", "Skeleton", "SkeletonCard", "SkeletonList", "SkeletonText", "IconButton", "Uploader", "FlatList", "SectionList", "BottomSheet", "ProductCard", "Box", "Stack", "Grid", "Gradient", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Hero", "KeyboardAvoidingView", "Button", "ButtonGroup", "RadioGroup", "ThemeModeToggle", "TextInput", "TimePicker", "Form", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+    readonly allowedChildren: readonly ["ActivityIndicator", "ForgotPasswordForm", "OAuthProviderButton", "OAuthProviderList", "OtpForm", "SignInForm", "SignUpForm", "Accordion", "Surface", "Avatar", "AvatarGroup", "Badge", "MediaCard", "MetricCard", "Chip", "ChipGroup", "DataTable", "DatePicker", "Dialog", "Pagination", "Rating", "SearchInput", "Tabs", "Toolbar", "Skeleton", "SkeletonCard", "SkeletonList", "SkeletonText", "IconButton", "Uploader", "FlatList", "SectionList", "BottomSheet", "ProductCard", "View", "ScrollView", "Grid", "Gradient", "Divider", "Text", "Heading", "Icon", "Image", "Hero", "KeyboardAvoidingView", "Button", "ButtonGroup", "RadioGroup", "ThemeModeToggle", "TextInput", "TimePicker", "Form", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
     readonly blueprint: {
         readonly label: "Message bubble";
         readonly icon: {

package/dist/patterns/notice/Notice.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Badge } from '../../features/badge/public';
 import { Card } from '../../features/card/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 function NoticeInner({ themeId: _themeId, mode: _mode, interactionPolicy: _interactionPolicy, title, description, children, actions, color = 'primary', testID, }) {
     return (<Card description={description} eyebrow={<Badge color={color}>{String(color).toUpperCase()}</Badge>} testID={testID} title={title} tone="subtle">
-      <Stack gap="m">
-        {children ? <Box>{children}</Box> : null}
-        {actions ? <Box>{actions}</Box> : null}
-      </Stack>
+      <View gap="m">
+        {children ? <View>{children}</View> : null}
+        {actions ? <View>{actions}</View> : null}
+      </View>
     </Card>);
 }
 /***

package/dist/patterns/notice/Notice.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notice.js","sourceRoot":"","sources":["../../../src/patterns/notice/Notice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,WAAW,CAAC,EACnB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,iBAAiB,EAAE,kBAAkB,EACrC,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,KAAK,GAAG,SAAS,EACjB,MAAM,GACM;IACZ,OAAO,CACL,CAAC,IAAI,CACH,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,CACpE,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,CAAC,QAAQ,CAEb;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;QAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC;QAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Badge } from '../../features/badge/public';\nimport { Card } from '../../features/card/public';\nimport { Box, Stack } from '../../features/layout/public';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { NoticeProps } from './types';\n\nfunction NoticeInner({\n  themeId: _themeId,\n  mode: _mode,\n  interactionPolicy: _interactionPolicy,\n  title,\n  description,\n  children,\n  actions,\n  color = 'primary',\n  testID,\n}: NoticeProps) {\n  return (\n    <Card\n      description={description}\n      eyebrow={<Badge color={color}>{String(color).toUpperCase()}</Badge>}\n      testID={testID}\n      title={title}\n      tone=\"subtle\"\n    >\n      <Stack gap=\"m\">\n        {children ? <Box>{children}</Box> : null}\n        {actions ? <Box>{actions}</Box> : null}\n      </Stack>\n    </Card>\n  );\n}\n\n/***\n * Notice pattern for inline feedback with tone, title, and actions.\n *\n \n */\nexport const Notice = withZoraThemeScope(NoticeInner);\n"]}
+{"version":3,"file":"Notice.js","sourceRoot":"","sources":["../../../src/patterns/notice/Notice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,WAAW,CAAC,EACnB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,iBAAiB,EAAE,kBAAkB,EACrC,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,KAAK,GAAG,SAAS,EACjB,MAAM,GACM;IACZ,OAAO,CACL,CAAC,IAAI,CACH,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,CACpE,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,CAAC,QAAQ,CAEb;MAAA,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CACX;QAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAC1C;QAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAC1C;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Badge } from '../../features/badge/public';\nimport { Card } from '../../features/card/public';\nimport { View } from '../../features/layout/public';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { NoticeProps } from './types';\n\nfunction NoticeInner({\n  themeId: _themeId,\n  mode: _mode,\n  interactionPolicy: _interactionPolicy,\n  title,\n  description,\n  children,\n  actions,\n  color = 'primary',\n  testID,\n}: NoticeProps) {\n  return (\n    <Card\n      description={description}\n      eyebrow={<Badge color={color}>{String(color).toUpperCase()}</Badge>}\n      testID={testID}\n      title={title}\n      tone=\"subtle\"\n    >\n      <View gap=\"m\">\n        {children ? <View>{children}</View> : null}\n        {actions ? <View>{actions}</View> : null}\n      </View>\n    </Card>\n  );\n}\n\n/***\n * Notice pattern for inline feedback with tone, title, and actions.\n *\n \n */\nexport const Notice = withZoraThemeScope(NoticeInner);\n"]}

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 ["ActivityIndicator", "ForgotPasswordForm", "OAuthProviderButton", "OAuthProviderList", "OtpForm", "SignInForm", "SignUpForm", "Accordion", "Surface", "Avatar", "AvatarGroup", "Badge", "MediaCard", "MetricCard", "Chip", "ChipGroup", "DataTable", "DatePicker", "Dialog", "Pagination", "Rating", "SearchInput", "Tabs", "Toolbar", "Skeleton", "SkeletonCard", "SkeletonList", "SkeletonText", "IconButton", "Uploader", "FlatList", "SectionList", "BottomSheet", "ProductCard", "Box", "Stack", "Grid", "Gradient", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Hero", "KeyboardAvoidingView", "Button", "ButtonGroup", "RadioGroup", "ThemeModeToggle", "TextInput", "TimePicker", "Form", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+    readonly allowedChildren: readonly ["ActivityIndicator", "ForgotPasswordForm", "OAuthProviderButton", "OAuthProviderList", "OtpForm", "SignInForm", "SignUpForm", "Accordion", "Surface", "Avatar", "AvatarGroup", "Badge", "MediaCard", "MetricCard", "Chip", "ChipGroup", "DataTable", "DatePicker", "Dialog", "Pagination", "Rating", "SearchInput", "Tabs", "Toolbar", "Skeleton", "SkeletonCard", "SkeletonList", "SkeletonText", "IconButton", "Uploader", "FlatList", "SectionList", "BottomSheet", "ProductCard", "View", "ScrollView", "Grid", "Gradient", "Divider", "Text", "Heading", "Icon", "Image", "Hero", "KeyboardAvoidingView", "Button", "ButtonGroup", "RadioGroup", "ThemeModeToggle", "TextInput", "TimePicker", "Form", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
     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 ["ActivityIndicator", "ForgotPasswordForm", "OAuthProviderButton", "OAuthProviderList", "OtpForm", "SignInForm", "SignUpForm", "Accordion", "Surface", "Avatar", "AvatarGroup", "Badge", "MediaCard", "MetricCard", "Chip", "ChipGroup", "DataTable", "DatePicker", "Dialog", "Pagination", "Rating", "SearchInput", "Tabs", "Toolbar", "Skeleton", "SkeletonCard", "SkeletonList", "SkeletonText", "IconButton", "Uploader", "FlatList", "SectionList", "BottomSheet", "ProductCard", "Box", "Stack", "Grid", "Gradient", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Hero", "KeyboardAvoidingView", "Button", "ButtonGroup", "RadioGroup", "ThemeModeToggle", "TextInput", "TimePicker", "Form", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+    readonly allowedChildren: readonly ["ActivityIndicator", "ForgotPasswordForm", "OAuthProviderButton", "OAuthProviderList", "OtpForm", "SignInForm", "SignUpForm", "Accordion", "Surface", "Avatar", "AvatarGroup", "Badge", "MediaCard", "MetricCard", "Chip", "ChipGroup", "DataTable", "DatePicker", "Dialog", "Pagination", "Rating", "SearchInput", "Tabs", "Toolbar", "Skeleton", "SkeletonCard", "SkeletonList", "SkeletonText", "IconButton", "Uploader", "FlatList", "SectionList", "BottomSheet", "ProductCard", "View", "ScrollView", "Grid", "Gradient", "Divider", "Text", "Heading", "Icon", "Image", "Hero", "KeyboardAvoidingView", "Button", "ButtonGroup", "RadioGroup", "ThemeModeToggle", "TextInput", "TimePicker", "Form", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
     readonly blueprint: {
         readonly label: "Panel";
         readonly defaultProps: {

package/dist/patterns/reader/ReaderSurface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReaderSurface.d.ts","sourceRoot":"","sources":["../../../src/patterns/reader/ReaderSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAgB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA0UhE;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,0DAAyC,CAAC"}
+{"version":3,"file":"ReaderSurface.d.ts","sourceRoot":"","sources":["../../../src/patterns/reader/ReaderSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,KAAK,EAAgB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA0UhE;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,0DAAyC,CAAC"}

package/dist/patterns/reader/ReaderSurface.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { AppBar } from '../../features/app-bar/public';
 import { IconButton } from '../../features/button/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Progress } from '../../features/progress/public';
 import { Surface } from '../../features/surface/public';
 import { Text } from '../../features/typography/public';
-import { Center, Inline } from '../../foundation';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { resolveReaderProgress } from './resolveReaderProgress';
@@ -28,22 +27,22 @@ function resolveCanGoNext({ canGoNext, page, pageCount, }) {
 }
 function ReaderEmptyState({ status, loadingLabel, errorTitle, unavailableTitle, }) {
     const title = status === 'loading' ? loadingLabel : status === 'error' ? errorTitle : unavailableTitle;
-    return (<Center flex={1} minHeight={360} p="l">
+    return (<View align="center" justify="center" flex={1} minHeight={360} p="l">
       <Text align="center" emphasis="muted" variant="bodySmall">
         {title}
       </Text>
-    </Center>);
+    </View>);
 }
 function invokeReaderAction(action) {
     void action?.();
 }
 function ReaderHeader({ interactionPolicy, title, subtitle, contentsLabel, appearanceLabel, highlightLabel, highlighted, headerActions, onOpenContents, onOpenAppearance, onToggleHighlight, }) {
-    const actions = onOpenContents || onOpenAppearance || onToggleHighlight || headerActions ? (<Inline align="center" gap="xs" wrap="nowrap">
+    const actions = onOpenContents || onOpenAppearance || onToggleHighlight || headerActions ? (<View direction="row" align="center" gap="xs" wrap="nowrap">
         {onOpenContents ? (<IconButton icon={{ name: 'list-outline' }} interactionPolicy={interactionPolicy} label={contentsLabel ?? 'Table of contents'} onPress={() => invokeReaderAction(onOpenContents)} size="l"/>) : null}
         {onOpenAppearance ? (<IconButton icon={{ name: 'text-outline' }} interactionPolicy={interactionPolicy} label={appearanceLabel ?? 'Reading appearance'} onPress={() => invokeReaderAction(onOpenAppearance)} size="l"/>) : null}
         {onToggleHighlight ? (<IconButton color={highlighted ? 'primary' : 'neutral'} icon={{ name: highlighted ? 'bookmark' : 'bookmark-outline' }} interactionPolicy={interactionPolicy} label={highlightLabel ?? 'Toggle highlight'} onPress={() => invokeReaderAction(onToggleHighlight)} size="l"/>) : null}
         {headerActions}
-      </Inline>) : undefined;
+      </View>) : undefined;
     return (<AppBar actions={actions} divider interactionPolicy={interactionPolicy} safeAreaTop subtitle={subtitle} title={title}/>);
 }
 function ReaderFooter({ interactionPolicy, status, page, pageCount, progress, canGoPrevious, canGoNext, chapterLabel, pageLabel, previousPageLabel, nextPageLabel, footerActions, onPreviousPage, onNextPage, }) {
@@ -52,38 +51,38 @@ function ReaderFooter({ interactionPolicy, status, page, pageCount, progress, ca
     const resolvedPageLabel = pageLabel ?? resolvePageLabel(page, pageCount);
     const previousEnabled = status === 'ready' && Boolean(onPreviousPage) && resolveCanGoPrevious({ canGoPrevious, page });
     const nextEnabled = status === 'ready' && Boolean(onNextPage) && resolveCanGoNext({ canGoNext, page, pageCount });
-    return (<Stack bg={theme.semantics.surface.raised} borderColor={theme.semantics.neutral.divider} borderWidth={1} gap="s" p="m">
+    return (<View bg={theme.semantics.surface.raised} borderColor={theme.semantics.neutral.divider} borderWidth={1} gap="s" p="m">
       <Progress value={resolvedProgress} max={1} size="s"/>
-      <Stack align="center" direction="row" gap="m" justify="space-between" wrap="nowrap">
+      <View align="center" direction="row" gap="m" justify="space-between" wrap="nowrap">
         <IconButton disabled={!previousEnabled} icon={{ name: 'chevron-back' }} interactionPolicy={interactionPolicy} label={previousPageLabel ?? 'Previous page'} onPress={() => invokeReaderAction(onPreviousPage)} size="l"/>
-        <Box flex={1} minWidth={0}>
-          <Stack align="center" gap="xs">
+        <View flex={1} minWidth={0}>
+          <View align="center" gap="xs">
             {chapterLabel ? (<Text align="center" ellipsizeMode="tail" numberOfLines={1} variant="label" weight="semiBold">
                 {chapterLabel}
               </Text>) : null}
             {resolvedPageLabel ? (<Text accessibilityLiveRegion="polite" align="center" emphasis="muted" variant="caption">
                 {resolvedPageLabel}
               </Text>) : null}
-          </Stack>
-        </Box>
+          </View>
+        </View>
         <IconButton disabled={!nextEnabled} icon={{ name: 'chevron-forward' }} interactionPolicy={interactionPolicy} label={nextPageLabel ?? 'Next page'} onPress={() => invokeReaderAction(onNextPage)} size="l"/>
-      </Stack>
-      {footerActions ? <Box>{footerActions}</Box> : null}
-    </Stack>);
+      </View>
+      {footerActions ? <View>{footerActions}</View> : null}
+    </View>);
 }
 function ReaderSurfaceInner({ themeId: _themeId, mode: _mode, interactionPolicy, source: _source, format: _format, location: _location, status = 'idle', page, pageCount, progress, canGoPrevious, canGoNext, title, subtitle, chapterLabel, pageLabel, previousPageLabel = 'Previous page', nextPageLabel = 'Next page', contentsLabel = 'Table of contents', appearanceLabel = 'Reading appearance', highlightLabel = 'Toggle highlight', loadingLabel = 'Loading document…', errorTitle = 'Unable to open this document.', unavailableTitle = 'Reader preview unavailable.', showChrome = true, readerColorScheme: _readerColorScheme = 'system', fontScale: _fontScale = 1, lineHeight: _lineHeight = 'normal', highlighted = false, viewport, headerActions, footerActions, onPreviousPage, onNextPage, onLocationChange: _onLocationChange, onOpenContents, onOpenAppearance, onToggleHighlight, onOpenExternalLink: _onOpenExternalLink, onReaderError: _onReaderError, testID, }) {
     const { theme } = useZoraTheme();
     const viewportContent = viewport && status !== 'error' ? (viewport) : (<ReaderEmptyState errorTitle={errorTitle} loadingLabel={loadingLabel} status={status} unavailableTitle={unavailableTitle}/>);
     return (<Surface radius="l" testID={testID} variant="default" style={{ minHeight: 480, overflow: 'hidden' }}>
-      <Stack flex={1} gap={0}>
+      <View flex={1} gap={0}>
         {showChrome ? (<ReaderHeader appearanceLabel={appearanceLabel} contentsLabel={contentsLabel} headerActions={headerActions} highlightLabel={highlightLabel} highlighted={highlighted} interactionPolicy={interactionPolicy} onOpenAppearance={onOpenAppearance} onOpenContents={onOpenContents} onToggleHighlight={onToggleHighlight} subtitle={subtitle} title={title}/>) : null}
 
-        <Box bg={theme.semantics.surface.default} flex={1} minHeight={360} overflow="hidden">
+        <View bg={theme.semantics.surface.default} flex={1} minHeight={360} overflow="hidden">
           {viewportContent}
-        </Box>
+        </View>
 
         {showChrome ? (<ReaderFooter canGoNext={canGoNext} canGoPrevious={canGoPrevious} chapterLabel={chapterLabel} footerActions={footerActions} interactionPolicy={interactionPolicy} nextPageLabel={nextPageLabel} onNextPage={onNextPage} onPreviousPage={onPreviousPage} page={page} pageCount={pageCount} pageLabel={pageLabel} previousPageLabel={previousPageLabel} progress={progress} status={status}/>) : null}
-      </Stack>
+      </View>
     </Surface>);
 }
 /***

package/dist/patterns/reader/ReaderSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReaderSurface.js","sourceRoot":"","sources":["../../../src/patterns/reader/ReaderSurface.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { AppBar } from '../../features/app-bar/public';\nimport { IconButton } from '../../features/button/public';\nimport { Box, Stack } from '../../features/layout/public';\nimport { Progress } from '../../features/progress/public';\nimport { Surface } from '../../features/surface/public';\nimport { Text } from '../../features/typography/public';\nimport { Center, Inline } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { resolveReaderProgress } from './resolveReaderProgress';\nimport type { ReaderStatus, ReaderSurfaceProps } from './types';\n\nfunction resolvePageLabel(page: number | undefined, pageCount: number | undefined): string | null {\n  if (page === undefined || !Number.isFinite(page)) return null;\n  if (pageCount === undefined || !Number.isFinite(pageCount)) return `Page ${page}`;\n  return `Page ${page} of ${pageCount}`;\n}\n\nfunction resolveCanGoPrevious({\n  canGoPrevious,\n  page,\n}: Pick<ReaderSurfaceProps, 'canGoPrevious' | 'page'>): boolean {\n  if (canGoPrevious !== undefined) return canGoPrevious;\n  return page === undefined || page > 1;\n}\n\nfunction resolveCanGoNext({\n  canGoNext,\n  page,\n  pageCount,\n}: Pick<ReaderSurfaceProps, 'canGoNext' | 'page' | 'pageCount'>): boolean {\n  if (canGoNext !== undefined) return canGoNext;\n  return page === undefined || pageCount === undefined || page < pageCount;\n}\n\nfunction ReaderEmptyState({\n  status,\n  loadingLabel,\n  errorTitle,\n  unavailableTitle,\n}: {\n  status: ReaderStatus;\n  loadingLabel: string;\n  errorTitle: string;\n  unavailableTitle: string;\n}) {\n  const title =\n    status === 'loading' ? loadingLabel : status === 'error' ? errorTitle : unavailableTitle;\n\n  return (\n    <Center flex={1} minHeight={360} p=\"l\">\n      <Text align=\"center\" emphasis=\"muted\" variant=\"bodySmall\">\n        {title}\n      </Text>\n    </Center>\n  );\n}\n\nfunction invokeReaderAction(action: (() => void | Promise<void>) | undefined): void {\n  void action?.();\n}\n\nfunction ReaderHeader({\n  interactionPolicy,\n  title,\n  subtitle,\n  contentsLabel,\n  appearanceLabel,\n  highlightLabel,\n  highlighted,\n  headerActions,\n  onOpenContents,\n  onOpenAppearance,\n  onToggleHighlight,\n}: Pick<\n  ReaderSurfaceProps,\n  | 'interactionPolicy'\n  | 'title'\n  | 'subtitle'\n  | 'contentsLabel'\n  | 'appearanceLabel'\n  | 'highlightLabel'\n  | 'highlighted'\n  | 'headerActions'\n  | 'onOpenContents'\n  | 'onOpenAppearance'\n  | 'onToggleHighlight'\n>) {\n  const actions =\n    onOpenContents || onOpenAppearance || onToggleHighlight || headerActions ? (\n      <Inline align=\"center\" gap=\"xs\" wrap=\"nowrap\">\n        {onOpenContents ? (\n          <IconButton\n            icon={{ name: 'list-outline' }}\n            interactionPolicy={interactionPolicy}\n            label={contentsLabel ?? 'Table of contents'}\n            onPress={() => invokeReaderAction(onOpenContents)}\n            size=\"l\"\n          />\n        ) : null}\n        {onOpenAppearance ? (\n          <IconButton\n            icon={{ name: 'text-outline' }}\n            interactionPolicy={interactionPolicy}\n            label={appearanceLabel ?? 'Reading appearance'}\n            onPress={() => invokeReaderAction(onOpenAppearance)}\n            size=\"l\"\n          />\n        ) : null}\n        {onToggleHighlight ? (\n          <IconButton\n            color={highlighted ? 'primary' : 'neutral'}\n            icon={{ name: highlighted ? 'bookmark' : 'bookmark-outline' }}\n            interactionPolicy={interactionPolicy}\n            label={highlightLabel ?? 'Toggle highlight'}\n            onPress={() => invokeReaderAction(onToggleHighlight)}\n            size=\"l\"\n          />\n        ) : null}\n        {headerActions}\n      </Inline>\n    ) : undefined;\n\n  return (\n    <AppBar\n      actions={actions}\n      divider\n      interactionPolicy={interactionPolicy}\n      safeAreaTop\n      subtitle={subtitle}\n      title={title}\n    />\n  );\n}\n\nfunction ReaderFooter({\n  interactionPolicy,\n  status,\n  page,\n  pageCount,\n  progress,\n  canGoPrevious,\n  canGoNext,\n  chapterLabel,\n  pageLabel,\n  previousPageLabel,\n  nextPageLabel,\n  footerActions,\n  onPreviousPage,\n  onNextPage,\n}: Pick<\n  ReaderSurfaceProps,\n  | 'interactionPolicy'\n  | 'status'\n  | 'page'\n  | 'pageCount'\n  | 'progress'\n  | 'canGoPrevious'\n  | 'canGoNext'\n  | 'chapterLabel'\n  | 'pageLabel'\n  | 'previousPageLabel'\n  | 'nextPageLabel'\n  | 'footerActions'\n  | 'onPreviousPage'\n  | 'onNextPage'\n>) {\n  const { theme } = useZoraTheme();\n  const resolvedProgress = resolveReaderProgress({ progress, page, pageCount });\n  const resolvedPageLabel = pageLabel ?? resolvePageLabel(page, pageCount);\n  const previousEnabled =\n    status === 'ready' && Boolean(onPreviousPage) && resolveCanGoPrevious({ canGoPrevious, page });\n  const nextEnabled =\n    status === 'ready' && Boolean(onNextPage) && resolveCanGoNext({ canGoNext, page, pageCount });\n\n  return (\n    <Stack\n      bg={theme.semantics.surface.raised}\n      borderColor={theme.semantics.neutral.divider}\n      borderWidth={1}\n      gap=\"s\"\n      p=\"m\"\n    >\n      <Progress value={resolvedProgress} max={1} size=\"s\" />\n      <Stack align=\"center\" direction=\"row\" gap=\"m\" justify=\"space-between\" wrap=\"nowrap\">\n        <IconButton\n          disabled={!previousEnabled}\n          icon={{ name: 'chevron-back' }}\n          interactionPolicy={interactionPolicy}\n          label={previousPageLabel ?? 'Previous page'}\n          onPress={() => invokeReaderAction(onPreviousPage)}\n          size=\"l\"\n        />\n        <Box flex={1} minWidth={0}>\n          <Stack align=\"center\" gap=\"xs\">\n            {chapterLabel ? (\n              <Text\n                align=\"center\"\n                ellipsizeMode=\"tail\"\n                numberOfLines={1}\n                variant=\"label\"\n                weight=\"semiBold\"\n              >\n                {chapterLabel}\n              </Text>\n            ) : null}\n            {resolvedPageLabel ? (\n              <Text\n                accessibilityLiveRegion=\"polite\"\n                align=\"center\"\n                emphasis=\"muted\"\n                variant=\"caption\"\n              >\n                {resolvedPageLabel}\n              </Text>\n            ) : null}\n          </Stack>\n        </Box>\n        <IconButton\n          disabled={!nextEnabled}\n          icon={{ name: 'chevron-forward' }}\n          interactionPolicy={interactionPolicy}\n          label={nextPageLabel ?? 'Next page'}\n          onPress={() => invokeReaderAction(onNextPage)}\n          size=\"l\"\n        />\n      </Stack>\n      {footerActions ? <Box>{footerActions}</Box> : null}\n    </Stack>\n  );\n}\n\nfunction ReaderSurfaceInner({\n  themeId: _themeId,\n  mode: _mode,\n  interactionPolicy,\n  source: _source,\n  format: _format,\n  location: _location,\n  status = 'idle',\n  page,\n  pageCount,\n  progress,\n  canGoPrevious,\n  canGoNext,\n  title,\n  subtitle,\n  chapterLabel,\n  pageLabel,\n  previousPageLabel = 'Previous page',\n  nextPageLabel = 'Next page',\n  contentsLabel = 'Table of contents',\n  appearanceLabel = 'Reading appearance',\n  highlightLabel = 'Toggle highlight',\n  loadingLabel = 'Loading document…',\n  errorTitle = 'Unable to open this document.',\n  unavailableTitle = 'Reader preview unavailable.',\n  showChrome = true,\n  readerColorScheme: _readerColorScheme = 'system',\n  fontScale: _fontScale = 1,\n  lineHeight: _lineHeight = 'normal',\n  highlighted = false,\n  viewport,\n  headerActions,\n  footerActions,\n  onPreviousPage,\n  onNextPage,\n  onLocationChange: _onLocationChange,\n  onOpenContents,\n  onOpenAppearance,\n  onToggleHighlight,\n  onOpenExternalLink: _onOpenExternalLink,\n  onReaderError: _onReaderError,\n  testID,\n}: ReaderSurfaceProps) {\n  const { theme } = useZoraTheme();\n\n  const viewportContent =\n    viewport && status !== 'error' ? (\n      viewport\n    ) : (\n      <ReaderEmptyState\n        errorTitle={errorTitle}\n        loadingLabel={loadingLabel}\n        status={status}\n        unavailableTitle={unavailableTitle}\n      />\n    );\n\n  return (\n    <Surface\n      radius=\"l\"\n      testID={testID}\n      variant=\"default\"\n      style={{ minHeight: 480, overflow: 'hidden' }}\n    >\n      <Stack flex={1} gap={0}>\n        {showChrome ? (\n          <ReaderHeader\n            appearanceLabel={appearanceLabel}\n            contentsLabel={contentsLabel}\n            headerActions={headerActions}\n            highlightLabel={highlightLabel}\n            highlighted={highlighted}\n            interactionPolicy={interactionPolicy}\n            onOpenAppearance={onOpenAppearance}\n            onOpenContents={onOpenContents}\n            onToggleHighlight={onToggleHighlight}\n            subtitle={subtitle}\n            title={title}\n          />\n        ) : null}\n\n        <Box bg={theme.semantics.surface.default} flex={1} minHeight={360} overflow=\"hidden\">\n          {viewportContent}\n        </Box>\n\n        {showChrome ? (\n          <ReaderFooter\n            canGoNext={canGoNext}\n            canGoPrevious={canGoPrevious}\n            chapterLabel={chapterLabel}\n            footerActions={footerActions}\n            interactionPolicy={interactionPolicy}\n            nextPageLabel={nextPageLabel}\n            onNextPage={onNextPage}\n            onPreviousPage={onPreviousPage}\n            page={page}\n            pageCount={pageCount}\n            pageLabel={pageLabel}\n            previousPageLabel={previousPageLabel}\n            progress={progress}\n            status={status}\n          />\n        ) : null}\n      </Stack>\n    </Surface>\n  );\n}\n\n/***\n * Adapter-neutral reader shell for EPUB and PDF experiences.\n *\n * Supply the actual renderer through `viewport`; ZORA owns only the reader\n * chrome, controlled state, progress, accessible controls, and normalized\n * adapter callbacks.\n */\nexport const ReaderSurface = withZoraThemeScope(ReaderSurfaceInner);\n"]}
+{"version":3,"file":"ReaderSurface.js","sourceRoot":"","sources":["../../../src/patterns/reader/ReaderSurface.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { AppBar } from '../../features/app-bar/public';\nimport { IconButton } from '../../features/button/public';\nimport { View } from '../../features/layout/public';\nimport { Progress } from '../../features/progress/public';\nimport { Surface } from '../../features/surface/public';\nimport { Text } from '../../features/typography/public';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { resolveReaderProgress } from './resolveReaderProgress';\nimport type { ReaderStatus, ReaderSurfaceProps } from './types';\n\nfunction resolvePageLabel(page: number | undefined, pageCount: number | undefined): string | null {\n  if (page === undefined || !Number.isFinite(page)) return null;\n  if (pageCount === undefined || !Number.isFinite(pageCount)) return `Page ${page}`;\n  return `Page ${page} of ${pageCount}`;\n}\n\nfunction resolveCanGoPrevious({\n  canGoPrevious,\n  page,\n}: Pick<ReaderSurfaceProps, 'canGoPrevious' | 'page'>): boolean {\n  if (canGoPrevious !== undefined) return canGoPrevious;\n  return page === undefined || page > 1;\n}\n\nfunction resolveCanGoNext({\n  canGoNext,\n  page,\n  pageCount,\n}: Pick<ReaderSurfaceProps, 'canGoNext' | 'page' | 'pageCount'>): boolean {\n  if (canGoNext !== undefined) return canGoNext;\n  return page === undefined || pageCount === undefined || page < pageCount;\n}\n\nfunction ReaderEmptyState({\n  status,\n  loadingLabel,\n  errorTitle,\n  unavailableTitle,\n}: {\n  status: ReaderStatus;\n  loadingLabel: string;\n  errorTitle: string;\n  unavailableTitle: string;\n}) {\n  const title =\n    status === 'loading' ? loadingLabel : status === 'error' ? errorTitle : unavailableTitle;\n\n  return (\n    <View align=\"center\" justify=\"center\" flex={1} minHeight={360} p=\"l\">\n      <Text align=\"center\" emphasis=\"muted\" variant=\"bodySmall\">\n        {title}\n      </Text>\n    </View>\n  );\n}\n\nfunction invokeReaderAction(action: (() => void | Promise<void>) | undefined): void {\n  void action?.();\n}\n\nfunction ReaderHeader({\n  interactionPolicy,\n  title,\n  subtitle,\n  contentsLabel,\n  appearanceLabel,\n  highlightLabel,\n  highlighted,\n  headerActions,\n  onOpenContents,\n  onOpenAppearance,\n  onToggleHighlight,\n}: Pick<\n  ReaderSurfaceProps,\n  | 'interactionPolicy'\n  | 'title'\n  | 'subtitle'\n  | 'contentsLabel'\n  | 'appearanceLabel'\n  | 'highlightLabel'\n  | 'highlighted'\n  | 'headerActions'\n  | 'onOpenContents'\n  | 'onOpenAppearance'\n  | 'onToggleHighlight'\n>) {\n  const actions =\n    onOpenContents || onOpenAppearance || onToggleHighlight || headerActions ? (\n      <View direction=\"row\" align=\"center\" gap=\"xs\" wrap=\"nowrap\">\n        {onOpenContents ? (\n          <IconButton\n            icon={{ name: 'list-outline' }}\n            interactionPolicy={interactionPolicy}\n            label={contentsLabel ?? 'Table of contents'}\n            onPress={() => invokeReaderAction(onOpenContents)}\n            size=\"l\"\n          />\n        ) : null}\n        {onOpenAppearance ? (\n          <IconButton\n            icon={{ name: 'text-outline' }}\n            interactionPolicy={interactionPolicy}\n            label={appearanceLabel ?? 'Reading appearance'}\n            onPress={() => invokeReaderAction(onOpenAppearance)}\n            size=\"l\"\n          />\n        ) : null}\n        {onToggleHighlight ? (\n          <IconButton\n            color={highlighted ? 'primary' : 'neutral'}\n            icon={{ name: highlighted ? 'bookmark' : 'bookmark-outline' }}\n            interactionPolicy={interactionPolicy}\n            label={highlightLabel ?? 'Toggle highlight'}\n            onPress={() => invokeReaderAction(onToggleHighlight)}\n            size=\"l\"\n          />\n        ) : null}\n        {headerActions}\n      </View>\n    ) : undefined;\n\n  return (\n    <AppBar\n      actions={actions}\n      divider\n      interactionPolicy={interactionPolicy}\n      safeAreaTop\n      subtitle={subtitle}\n      title={title}\n    />\n  );\n}\n\nfunction ReaderFooter({\n  interactionPolicy,\n  status,\n  page,\n  pageCount,\n  progress,\n  canGoPrevious,\n  canGoNext,\n  chapterLabel,\n  pageLabel,\n  previousPageLabel,\n  nextPageLabel,\n  footerActions,\n  onPreviousPage,\n  onNextPage,\n}: Pick<\n  ReaderSurfaceProps,\n  | 'interactionPolicy'\n  | 'status'\n  | 'page'\n  | 'pageCount'\n  | 'progress'\n  | 'canGoPrevious'\n  | 'canGoNext'\n  | 'chapterLabel'\n  | 'pageLabel'\n  | 'previousPageLabel'\n  | 'nextPageLabel'\n  | 'footerActions'\n  | 'onPreviousPage'\n  | 'onNextPage'\n>) {\n  const { theme } = useZoraTheme();\n  const resolvedProgress = resolveReaderProgress({ progress, page, pageCount });\n  const resolvedPageLabel = pageLabel ?? resolvePageLabel(page, pageCount);\n  const previousEnabled =\n    status === 'ready' && Boolean(onPreviousPage) && resolveCanGoPrevious({ canGoPrevious, page });\n  const nextEnabled =\n    status === 'ready' && Boolean(onNextPage) && resolveCanGoNext({ canGoNext, page, pageCount });\n\n  return (\n    <View\n      bg={theme.semantics.surface.raised}\n      borderColor={theme.semantics.neutral.divider}\n      borderWidth={1}\n      gap=\"s\"\n      p=\"m\"\n    >\n      <Progress value={resolvedProgress} max={1} size=\"s\" />\n      <View align=\"center\" direction=\"row\" gap=\"m\" justify=\"space-between\" wrap=\"nowrap\">\n        <IconButton\n          disabled={!previousEnabled}\n          icon={{ name: 'chevron-back' }}\n          interactionPolicy={interactionPolicy}\n          label={previousPageLabel ?? 'Previous page'}\n          onPress={() => invokeReaderAction(onPreviousPage)}\n          size=\"l\"\n        />\n        <View flex={1} minWidth={0}>\n          <View align=\"center\" gap=\"xs\">\n            {chapterLabel ? (\n              <Text\n                align=\"center\"\n                ellipsizeMode=\"tail\"\n                numberOfLines={1}\n                variant=\"label\"\n                weight=\"semiBold\"\n              >\n                {chapterLabel}\n              </Text>\n            ) : null}\n            {resolvedPageLabel ? (\n              <Text\n                accessibilityLiveRegion=\"polite\"\n                align=\"center\"\n                emphasis=\"muted\"\n                variant=\"caption\"\n              >\n                {resolvedPageLabel}\n              </Text>\n            ) : null}\n          </View>\n        </View>\n        <IconButton\n          disabled={!nextEnabled}\n          icon={{ name: 'chevron-forward' }}\n          interactionPolicy={interactionPolicy}\n          label={nextPageLabel ?? 'Next page'}\n          onPress={() => invokeReaderAction(onNextPage)}\n          size=\"l\"\n        />\n      </View>\n      {footerActions ? <View>{footerActions}</View> : null}\n    </View>\n  );\n}\n\nfunction ReaderSurfaceInner({\n  themeId: _themeId,\n  mode: _mode,\n  interactionPolicy,\n  source: _source,\n  format: _format,\n  location: _location,\n  status = 'idle',\n  page,\n  pageCount,\n  progress,\n  canGoPrevious,\n  canGoNext,\n  title,\n  subtitle,\n  chapterLabel,\n  pageLabel,\n  previousPageLabel = 'Previous page',\n  nextPageLabel = 'Next page',\n  contentsLabel = 'Table of contents',\n  appearanceLabel = 'Reading appearance',\n  highlightLabel = 'Toggle highlight',\n  loadingLabel = 'Loading document…',\n  errorTitle = 'Unable to open this document.',\n  unavailableTitle = 'Reader preview unavailable.',\n  showChrome = true,\n  readerColorScheme: _readerColorScheme = 'system',\n  fontScale: _fontScale = 1,\n  lineHeight: _lineHeight = 'normal',\n  highlighted = false,\n  viewport,\n  headerActions,\n  footerActions,\n  onPreviousPage,\n  onNextPage,\n  onLocationChange: _onLocationChange,\n  onOpenContents,\n  onOpenAppearance,\n  onToggleHighlight,\n  onOpenExternalLink: _onOpenExternalLink,\n  onReaderError: _onReaderError,\n  testID,\n}: ReaderSurfaceProps) {\n  const { theme } = useZoraTheme();\n\n  const viewportContent =\n    viewport && status !== 'error' ? (\n      viewport\n    ) : (\n      <ReaderEmptyState\n        errorTitle={errorTitle}\n        loadingLabel={loadingLabel}\n        status={status}\n        unavailableTitle={unavailableTitle}\n      />\n    );\n\n  return (\n    <Surface\n      radius=\"l\"\n      testID={testID}\n      variant=\"default\"\n      style={{ minHeight: 480, overflow: 'hidden' }}\n    >\n      <View flex={1} gap={0}>\n        {showChrome ? (\n          <ReaderHeader\n            appearanceLabel={appearanceLabel}\n            contentsLabel={contentsLabel}\n            headerActions={headerActions}\n            highlightLabel={highlightLabel}\n            highlighted={highlighted}\n            interactionPolicy={interactionPolicy}\n            onOpenAppearance={onOpenAppearance}\n            onOpenContents={onOpenContents}\n            onToggleHighlight={onToggleHighlight}\n            subtitle={subtitle}\n            title={title}\n          />\n        ) : null}\n\n        <View bg={theme.semantics.surface.default} flex={1} minHeight={360} overflow=\"hidden\">\n          {viewportContent}\n        </View>\n\n        {showChrome ? (\n          <ReaderFooter\n            canGoNext={canGoNext}\n            canGoPrevious={canGoPrevious}\n            chapterLabel={chapterLabel}\n            footerActions={footerActions}\n            interactionPolicy={interactionPolicy}\n            nextPageLabel={nextPageLabel}\n            onNextPage={onNextPage}\n            onPreviousPage={onPreviousPage}\n            page={page}\n            pageCount={pageCount}\n            pageLabel={pageLabel}\n            previousPageLabel={previousPageLabel}\n            progress={progress}\n            status={status}\n          />\n        ) : null}\n      </View>\n    </Surface>\n  );\n}\n\n/***\n * Adapter-neutral reader shell for EPUB and PDF experiences.\n *\n * Supply the actual renderer through `viewport`; ZORA owns only the reader\n * chrome, controlled state, progress, accessible controls, and normalized\n * adapter callbacks.\n */\nexport const ReaderSurface = withZoraThemeScope(ReaderSurfaceInner);\n"]}

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

@@ -125,11 +125,11 @@ export declare const readerSurfaceMeta: {
         };
         readonly headerActions: {
             readonly label: "Header actions";
-            readonly allowedChildren: readonly ["ActivityIndicator", "ForgotPasswordForm", "OAuthProviderButton", "OAuthProviderList", "OtpForm", "SignInForm", "SignUpForm", "Accordion", "Surface", "Avatar", "AvatarGroup", "Badge", "MediaCard", "MetricCard", "Chip", "ChipGroup", "DataTable", "DatePicker", "Dialog", "Pagination", "Rating", "SearchInput", "Tabs", "Toolbar", "Skeleton", "SkeletonCard", "SkeletonList", "SkeletonText", "IconButton", "Uploader", "FlatList", "SectionList", "BottomSheet", "ProductCard", "Box", "Stack", "Grid", "Gradient", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Hero", "KeyboardAvoidingView", "Button", "ButtonGroup", "RadioGroup", "ThemeModeToggle", "TextInput", "TimePicker", "Form", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+            readonly allowedChildren: readonly ["ActivityIndicator", "ForgotPasswordForm", "OAuthProviderButton", "OAuthProviderList", "OtpForm", "SignInForm", "SignUpForm", "Accordion", "Surface", "Avatar", "AvatarGroup", "Badge", "MediaCard", "MetricCard", "Chip", "ChipGroup", "DataTable", "DatePicker", "Dialog", "Pagination", "Rating", "SearchInput", "Tabs", "Toolbar", "Skeleton", "SkeletonCard", "SkeletonList", "SkeletonText", "IconButton", "Uploader", "FlatList", "SectionList", "BottomSheet", "ProductCard", "View", "ScrollView", "Grid", "Gradient", "Divider", "Text", "Heading", "Icon", "Image", "Hero", "KeyboardAvoidingView", "Button", "ButtonGroup", "RadioGroup", "ThemeModeToggle", "TextInput", "TimePicker", "Form", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
         };
         readonly footerActions: {
             readonly label: "Footer actions";
-            readonly allowedChildren: readonly ["ActivityIndicator", "ForgotPasswordForm", "OAuthProviderButton", "OAuthProviderList", "OtpForm", "SignInForm", "SignUpForm", "Accordion", "Surface", "Avatar", "AvatarGroup", "Badge", "MediaCard", "MetricCard", "Chip", "ChipGroup", "DataTable", "DatePicker", "Dialog", "Pagination", "Rating", "SearchInput", "Tabs", "Toolbar", "Skeleton", "SkeletonCard", "SkeletonList", "SkeletonText", "IconButton", "Uploader", "FlatList", "SectionList", "BottomSheet", "ProductCard", "Box", "Stack", "Grid", "Gradient", "Container", "Divider", "Text", "Heading", "Icon", "Image", "Hero", "KeyboardAvoidingView", "Button", "ButtonGroup", "RadioGroup", "ThemeModeToggle", "TextInput", "TimePicker", "Form", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
+            readonly allowedChildren: readonly ["ActivityIndicator", "ForgotPasswordForm", "OAuthProviderButton", "OAuthProviderList", "OtpForm", "SignInForm", "SignUpForm", "Accordion", "Surface", "Avatar", "AvatarGroup", "Badge", "MediaCard", "MetricCard", "Chip", "ChipGroup", "DataTable", "DatePicker", "Dialog", "Pagination", "Rating", "SearchInput", "Tabs", "Toolbar", "Skeleton", "SkeletonCard", "SkeletonList", "SkeletonText", "IconButton", "Uploader", "FlatList", "SectionList", "BottomSheet", "ProductCard", "View", "ScrollView", "Grid", "Gradient", "Divider", "Text", "Heading", "Icon", "Image", "Hero", "KeyboardAvoidingView", "Button", "ButtonGroup", "RadioGroup", "ThemeModeToggle", "TextInput", "TimePicker", "Form", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "ReaderSurface", "ContentRail", "MissingElement"];
         };
     };
     readonly props: {

package/dist/patterns/scanner/BarcodeScannerView.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { Card } from '../../features/card/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Text } from '../../features/typography/public';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
@@ -19,21 +19,21 @@ function BarcodeScannerViewInner({ themeId: _themeId, interactionPolicy, mode: _
         return (<CameraPermissionView deniedLabel={deniedPermissionLabel} manualEntryLabel={manualEntryLabel} onManualEntry={onManualEntry} onRequestPermission={onRequestPermission} requestLabel={requestPermissionLabel} status={permissionStatus} testID={testID} interactionPolicy={interactionPolicy}/>);
     }
     return (<Card compact description={description} eyebrow="Scanner" interactionPolicy={interactionPolicy} testID={testID} title={title} tone="subtle">
-      <Stack gap="m">
-        <Box>
+      <View gap="m">
+        <View>
           <View style={[styles.viewport, viewportStyle]}>
             {camera ? (<View style={styles.cameraSlot}>{camera}</View>) : (<View style={[styles.placeholder, placeholderStyle]}/>)}
             <View style={[styles.overlay, { pointerEvents: 'none' }]}>
               <ScanOverlay cornerLabel={cornerLabel} description={overlayDescription} title={overlayTitle}/>
             </View>
           </View>
-        </Box>
-        {children ? <Box>{children}</Box> : null}
+        </View>
+        {children ? <View>{children}</View> : null}
         <Text emphasis="muted" variant="caption">
           Native scanning belongs to an app adapter such as expo-camera. ZORA owns this visible
           scanner surface.
         </Text>
-      </Stack>
+      </View>
     </Card>);
 }
 const styles = StyleSheet.create({

package/dist/patterns/scanner/BarcodeScannerView.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarcodeScannerView.js","sourceRoot":"","sources":["../../../src/patterns/scanner/BarcodeScannerView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nimport { Card } from '../../features/card/public';\nimport { Box, Stack } from '../../features/layout/public';\nimport { Text } from '../../features/typography/public';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { CameraPermissionView } from './CameraPermissionView';\nimport { ScanOverlay } from './ScanOverlay';\nimport type { BarcodeScannerViewProps } from './types';\n\nfunction BarcodeScannerViewInner({\n  themeId: _themeId,\n  interactionPolicy,\n  mode: _mode,\n  permissionStatus,\n  camera,\n  children,\n  title = 'Scan barcode',\n  description = 'Point the camera at a barcode to continue.',\n  overlayTitle,\n  overlayDescription,\n  cornerLabel,\n  requestPermissionLabel,\n  deniedPermissionLabel,\n  manualEntryLabel,\n  onRequestPermission,\n  onManualEntry,\n  testID,\n}: BarcodeScannerViewProps) {\n  const { theme } = useZoraTheme();\n  const viewportStyle = {\n    backgroundColor: theme.semantics.surface.default,\n  };\n  const placeholderStyle = {\n    backgroundColor: theme.semantics.surface.default,\n  };\n\n  if (permissionStatus !== 'granted') {\n    return (\n      <CameraPermissionView\n        deniedLabel={deniedPermissionLabel}\n        manualEntryLabel={manualEntryLabel}\n        onManualEntry={onManualEntry}\n        onRequestPermission={onRequestPermission}\n        requestLabel={requestPermissionLabel}\n        status={permissionStatus}\n        testID={testID}\n        interactionPolicy={interactionPolicy}\n      />\n    );\n  }\n\n  return (\n    <Card\n      compact\n      description={description}\n      eyebrow=\"Scanner\"\n      interactionPolicy={interactionPolicy}\n      testID={testID}\n      title={title}\n      tone=\"subtle\"\n    >\n      <Stack gap=\"m\">\n        <Box>\n          <View style={[styles.viewport, viewportStyle]}>\n            {camera ? (\n              <View style={styles.cameraSlot}>{camera}</View>\n            ) : (\n              <View style={[styles.placeholder, placeholderStyle]} />\n            )}\n            <View style={[styles.overlay, { pointerEvents: 'none' }]}>\n              <ScanOverlay\n                cornerLabel={cornerLabel}\n                description={overlayDescription}\n                title={overlayTitle}\n              />\n            </View>\n          </View>\n        </Box>\n        {children ? <Box>{children}</Box> : null}\n        <Text emphasis=\"muted\" variant=\"caption\">\n          Native scanning belongs to an app adapter such as expo-camera. ZORA owns this visible\n          scanner surface.\n        </Text>\n      </Stack>\n    </Card>\n  );\n}\n\nconst styles = StyleSheet.create({\n  viewport: {\n    aspectRatio: 0.72,\n    borderRadius: 28,\n    minHeight: 360,\n    overflow: 'hidden',\n    position: 'relative',\n  },\n  cameraSlot: {\n    bottom: 0,\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n  placeholder: {\n    bottom: 0,\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n  overlay: {\n    bottom: 24,\n    left: 24,\n    position: 'absolute',\n    right: 24,\n    top: 24,\n  },\n});\n\n/***\n * Composed ZORA scanner shell for barcode scanning experiences.\n *\n * `BarcodeScannerView` is camera-adapter-neutral: pass an `expo-camera`, web,\n * or test camera element through `camera`; keep permission and fallback UI here.\n *\n */\nexport const BarcodeScannerView = withZoraThemeScope(BarcodeScannerViewInner);\n"]}
+{"version":3,"file":"BarcodeScannerView.js","sourceRoot":"","sources":["../../../src/patterns/scanner/BarcodeScannerView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport { Card } from '../../features/card/public';\nimport { View } from '../../features/layout/public';\nimport { Text } from '../../features/typography/public';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { CameraPermissionView } from './CameraPermissionView';\nimport { ScanOverlay } from './ScanOverlay';\nimport type { BarcodeScannerViewProps } from './types';\n\nfunction BarcodeScannerViewInner({\n  themeId: _themeId,\n  interactionPolicy,\n  mode: _mode,\n  permissionStatus,\n  camera,\n  children,\n  title = 'Scan barcode',\n  description = 'Point the camera at a barcode to continue.',\n  overlayTitle,\n  overlayDescription,\n  cornerLabel,\n  requestPermissionLabel,\n  deniedPermissionLabel,\n  manualEntryLabel,\n  onRequestPermission,\n  onManualEntry,\n  testID,\n}: BarcodeScannerViewProps) {\n  const { theme } = useZoraTheme();\n  const viewportStyle = {\n    backgroundColor: theme.semantics.surface.default,\n  };\n  const placeholderStyle = {\n    backgroundColor: theme.semantics.surface.default,\n  };\n\n  if (permissionStatus !== 'granted') {\n    return (\n      <CameraPermissionView\n        deniedLabel={deniedPermissionLabel}\n        manualEntryLabel={manualEntryLabel}\n        onManualEntry={onManualEntry}\n        onRequestPermission={onRequestPermission}\n        requestLabel={requestPermissionLabel}\n        status={permissionStatus}\n        testID={testID}\n        interactionPolicy={interactionPolicy}\n      />\n    );\n  }\n\n  return (\n    <Card\n      compact\n      description={description}\n      eyebrow=\"Scanner\"\n      interactionPolicy={interactionPolicy}\n      testID={testID}\n      title={title}\n      tone=\"subtle\"\n    >\n      <View gap=\"m\">\n        <View>\n          <View style={[styles.viewport, viewportStyle]}>\n            {camera ? (\n              <View style={styles.cameraSlot}>{camera}</View>\n            ) : (\n              <View style={[styles.placeholder, placeholderStyle]} />\n            )}\n            <View style={[styles.overlay, { pointerEvents: 'none' }]}>\n              <ScanOverlay\n                cornerLabel={cornerLabel}\n                description={overlayDescription}\n                title={overlayTitle}\n              />\n            </View>\n          </View>\n        </View>\n        {children ? <View>{children}</View> : null}\n        <Text emphasis=\"muted\" variant=\"caption\">\n          Native scanning belongs to an app adapter such as expo-camera. ZORA owns this visible\n          scanner surface.\n        </Text>\n      </View>\n    </Card>\n  );\n}\n\nconst styles = StyleSheet.create({\n  viewport: {\n    aspectRatio: 0.72,\n    borderRadius: 28,\n    minHeight: 360,\n    overflow: 'hidden',\n    position: 'relative',\n  },\n  cameraSlot: {\n    bottom: 0,\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n  placeholder: {\n    bottom: 0,\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n  overlay: {\n    bottom: 24,\n    left: 24,\n    position: 'absolute',\n    right: 24,\n    top: 24,\n  },\n});\n\n/***\n * Composed ZORA scanner shell for barcode scanning experiences.\n *\n * `BarcodeScannerView` is camera-adapter-neutral: pass an `expo-camera`, web,\n * or test camera element through `camera`; keep permission and fallback UI here.\n *\n */\nexport const BarcodeScannerView = withZoraThemeScope(BarcodeScannerViewInner);\n"]}

package/dist/patterns/scanner/CameraPermissionView.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from '../../features/button/public';
 import { Card } from '../../features/card/public';
-import { Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Text } from '../../features/typography/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 function resolvePermissionCopy(status) {
@@ -36,19 +36,19 @@ function CameraPermissionViewInner({ themeId: _themeId, interactionPolicy, mode:
         }
         : undefined;
     return (<Card compact description={description ?? copy.description} eyebrow="Scanner permission" interactionPolicy={interactionPolicy} testID={testID} title={title ?? copy.title} tone="subtle">
-      <Stack gap="m">
+      <View gap="m">
         <Text emphasis="muted" variant="bodySmall">
           Permission state: {status}
         </Text>
-        <Stack direction={{ base: 'column', md: 'row' }} gap="s">
+        <View direction={{ base: 'column', md: 'row' }} gap="s">
           {handleRequestPermission ? (<Button color="primary" disabled={status === 'requesting'} onPress={handleRequestPermission} {...requestButtonProps} interactionPolicy={interactionPolicy}>
               {primaryLabel}
             </Button>) : null}
           {handleManualEntry ? (<Button color="neutral" onPress={handleManualEntry} variant="soft" {...manualEntryButtonProps} interactionPolicy={interactionPolicy}>
               {manualEntryLabel}
             </Button>) : null}
-        </Stack>
-      </Stack>
+        </View>
+      </View>
     </Card>);
 }
 /***

package/dist/patterns/scanner/CameraPermissionView.js.map

@@ -1 +1 @@
-{"version":3,"file":"CameraPermissionView.js","sourceRoot":"","sources":["../../../src/patterns/scanner/CameraPermissionView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../features/button/public';\nimport { Card } from '../../features/card/public';\nimport { Stack } from '../../features/layout/public';\nimport { Text } from '../../features/typography/public';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { CameraPermissionViewProps } from './types';\n\nfunction resolvePermissionCopy(status: CameraPermissionViewProps['status']) {\n  if (status === 'denied') {\n    return {\n      title: 'Camera permission needed',\n      description:\n        'Camera access is denied. Enable camera access in system settings or enter the barcode manually.',\n    };\n  }\n\n  if (status === 'requesting') {\n    return {\n      title: 'Requesting camera access',\n      description: 'Waiting for the system permission prompt.',\n    };\n  }\n\n  return {\n    title: 'Allow camera access',\n    description:\n      'Camera access is required to scan barcodes. You can also enter the barcode manually.',\n  };\n}\n\nfunction CameraPermissionViewInner({\n  themeId: _themeId,\n  interactionPolicy,\n  mode: _mode,\n  status,\n  title,\n  description,\n  requestLabel = 'Allow camera access',\n  deniedLabel = 'Open settings',\n  manualEntryLabel = 'Enter barcode manually',\n  onRequestPermission,\n  onManualEntry,\n  requestButtonProps,\n  manualEntryButtonProps,\n  testID,\n}: CameraPermissionViewProps) {\n  const copy = resolvePermissionCopy(status);\n  const primaryLabel = status === 'denied' ? deniedLabel : requestLabel;\n  const handleRequestPermission = onRequestPermission\n    ? () => {\n        void onRequestPermission();\n      }\n    : undefined;\n  const handleManualEntry = onManualEntry\n    ? () => {\n        void onManualEntry();\n      }\n    : undefined;\n\n  return (\n    <Card\n      compact\n      description={description ?? copy.description}\n      eyebrow=\"Scanner permission\"\n      interactionPolicy={interactionPolicy}\n      testID={testID}\n      title={title ?? copy.title}\n      tone=\"subtle\"\n    >\n      <Stack gap=\"m\">\n        <Text emphasis=\"muted\" variant=\"bodySmall\">\n          Permission state: {status}\n        </Text>\n        <Stack direction={{ base: 'column', md: 'row' }} gap=\"s\">\n          {handleRequestPermission ? (\n            <Button\n              color=\"primary\"\n              disabled={status === 'requesting'}\n              onPress={handleRequestPermission}\n              {...requestButtonProps}\n              interactionPolicy={interactionPolicy}\n            >\n              {primaryLabel}\n            </Button>\n          ) : null}\n          {handleManualEntry ? (\n            <Button\n              color=\"neutral\"\n              onPress={handleManualEntry}\n              variant=\"soft\"\n              {...manualEntryButtonProps}\n              interactionPolicy={interactionPolicy}\n            >\n              {manualEntryLabel}\n            </Button>\n          ) : null}\n        </Stack>\n      </Stack>\n    </Card>\n  );\n}\n\n/***\n * ZORA-owned camera permission state for scanner flows.\n *\n * Native permission APIs stay in app adapters. This component renders the\n * request, denied, requesting, and manual-entry surfaces consistently.\n *\n */\nexport const CameraPermissionView = withZoraThemeScope(CameraPermissionViewInner);\n"]}
+{"version":3,"file":"CameraPermissionView.js","sourceRoot":"","sources":["../../../src/patterns/scanner/CameraPermissionView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,kCAAkC,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,qBAAqB,CAAC,MAA2C;IACxE,IAAI,MAAM,KAAK,QAAQ,EAAE,CAAC;QACxB,OAAO;YACL,KAAK,EAAE,0BAA0B;YACjC,WAAW,EACT,iGAAiG;SACpG,CAAC;IACJ,CAAC;IAED,IAAI,MAAM,KAAK,YAAY,EAAE,CAAC;QAC5B,OAAO;YACL,KAAK,EAAE,0BAA0B;YACjC,WAAW,EAAE,2CAA2C;SACzD,CAAC;IACJ,CAAC;IAED,OAAO;QACL,KAAK,EAAE,qBAAqB;QAC5B,WAAW,EACT,sFAAsF;KACzF,CAAC;AACJ,CAAC;AAED,SAAS,yBAAyB,CAAC,EACjC,OAAO,EAAE,QAAQ,EACjB,iBAAiB,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,WAAW,EACX,YAAY,GAAG,qBAAqB,EACpC,WAAW,GAAG,eAAe,EAC7B,gBAAgB,GAAG,wBAAwB,EAC3C,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,sBAAsB,EACtB,MAAM,GACoB;IAC1B,MAAM,IAAI,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAC3C,MAAM,YAAY,GAAG,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC;IACtE,MAAM,uBAAuB,GAAG,mBAAmB;QACjD,CAAC,CAAC,GAAG,EAAE;YACH,KAAK,mBAAmB,EAAE,CAAC;QAC7B,CAAC;QACH,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,iBAAiB,GAAG,aAAa;QACrC,CAAC,CAAC,GAAG,EAAE;YACH,KAAK,aAAa,EAAE,CAAC;QACvB,CAAC;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CACP,WAAW,CAAC,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,CAC7C,OAAO,CAAC,oBAAoB,CAC5B,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAC3B,IAAI,CAAC,QAAQ,CAEb;MAAA,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CACX;QAAA,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CACxC;4BAAkB,CAAC,MAAM,CAC3B;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CACrD;UAAA,CAAC,uBAAuB,CAAC,CAAC,CAAC,CACzB,CAAC,MAAM,CACL,KAAK,CAAC,SAAS,CACf,QAAQ,CAAC,CAAC,MAAM,KAAK,YAAY,CAAC,CAClC,OAAO,CAAC,CAAC,uBAAuB,CAAC,CACjC,IAAI,kBAAkB,CAAC,CACvB,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CAErC;cAAA,CAAC,YAAY,CACf;YAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACR;UAAA,CAAC,iBAAiB,CAAC,CAAC,CAAC,CACnB,CAAC,MAAM,CACL,KAAK,CAAC,SAAS,CACf,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAC3B,OAAO,CAAC,MAAM,CACd,IAAI,sBAAsB,CAAC,CAC3B,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CAErC;cAAA,CAAC,gBAAgB,CACnB;YAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,kBAAkB,CAAC,yBAAyB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../features/button/public';\nimport { Card } from '../../features/card/public';\nimport { View } from '../../features/layout/public';\nimport { Text } from '../../features/typography/public';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { CameraPermissionViewProps } from './types';\n\nfunction resolvePermissionCopy(status: CameraPermissionViewProps['status']) {\n  if (status === 'denied') {\n    return {\n      title: 'Camera permission needed',\n      description:\n        'Camera access is denied. Enable camera access in system settings or enter the barcode manually.',\n    };\n  }\n\n  if (status === 'requesting') {\n    return {\n      title: 'Requesting camera access',\n      description: 'Waiting for the system permission prompt.',\n    };\n  }\n\n  return {\n    title: 'Allow camera access',\n    description:\n      'Camera access is required to scan barcodes. You can also enter the barcode manually.',\n  };\n}\n\nfunction CameraPermissionViewInner({\n  themeId: _themeId,\n  interactionPolicy,\n  mode: _mode,\n  status,\n  title,\n  description,\n  requestLabel = 'Allow camera access',\n  deniedLabel = 'Open settings',\n  manualEntryLabel = 'Enter barcode manually',\n  onRequestPermission,\n  onManualEntry,\n  requestButtonProps,\n  manualEntryButtonProps,\n  testID,\n}: CameraPermissionViewProps) {\n  const copy = resolvePermissionCopy(status);\n  const primaryLabel = status === 'denied' ? deniedLabel : requestLabel;\n  const handleRequestPermission = onRequestPermission\n    ? () => {\n        void onRequestPermission();\n      }\n    : undefined;\n  const handleManualEntry = onManualEntry\n    ? () => {\n        void onManualEntry();\n      }\n    : undefined;\n\n  return (\n    <Card\n      compact\n      description={description ?? copy.description}\n      eyebrow=\"Scanner permission\"\n      interactionPolicy={interactionPolicy}\n      testID={testID}\n      title={title ?? copy.title}\n      tone=\"subtle\"\n    >\n      <View gap=\"m\">\n        <Text emphasis=\"muted\" variant=\"bodySmall\">\n          Permission state: {status}\n        </Text>\n        <View direction={{ base: 'column', md: 'row' }} gap=\"s\">\n          {handleRequestPermission ? (\n            <Button\n              color=\"primary\"\n              disabled={status === 'requesting'}\n              onPress={handleRequestPermission}\n              {...requestButtonProps}\n              interactionPolicy={interactionPolicy}\n            >\n              {primaryLabel}\n            </Button>\n          ) : null}\n          {handleManualEntry ? (\n            <Button\n              color=\"neutral\"\n              onPress={handleManualEntry}\n              variant=\"soft\"\n              {...manualEntryButtonProps}\n              interactionPolicy={interactionPolicy}\n            >\n              {manualEntryLabel}\n            </Button>\n          ) : null}\n        </View>\n      </View>\n    </Card>\n  );\n}\n\n/***\n * ZORA-owned camera permission state for scanner flows.\n *\n * Native permission APIs stay in app adapters. This component renders the\n * request, denied, requesting, and manual-entry surfaces consistently.\n *\n */\nexport const CameraPermissionView = withZoraThemeScope(CameraPermissionViewInner);\n"]}

package/dist/patterns/scanner/ScanOverlay.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { Badge } from '../../features/badge/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Text } from '../../features/typography/public';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
@@ -13,8 +13,8 @@ function ScanOverlayInner({ themeId: _themeId, interactionPolicy: _interactionPo
     const cornerStyle = {
         borderColor: theme.semantics.border.focus,
     };
-    return (<Box testID={testID}>
-      <Stack gap="m">
+    return (<View testID={testID}>
+      <View gap="m">
         <View accessibilityRole="image" style={[styles.frame, frameStyle]}>
           <View style={[styles.corner, styles.topLeft, cornerStyle]}/>
           <View style={[styles.corner, styles.topRight, cornerStyle]}/>
@@ -22,16 +22,16 @@ function ScanOverlayInner({ themeId: _themeId, interactionPolicy: _interactionPo
           <View style={[styles.corner, styles.bottomRight, cornerStyle]}/>
           <Badge color="primary">{cornerLabel}</Badge>
         </View>
-        <Stack gap="xs">
+        <View gap="xs">
           <Text align="center" variant="label" weight="semiBold">
             {title}
           </Text>
           <Text align="center" emphasis="muted" variant="bodySmall">
             {description}
           </Text>
-        </Stack>
-      </Stack>
-    </Box>);
+        </View>
+      </View>
+    </View>);
 }
 const styles = StyleSheet.create({
     frame: {