@ankhorage/zora 18.0.1 → 19.0.1

package/src/features/chat/adapters/inbound/MessageBubble.tsx

@@ -0,0 +1,276 @@
+import { Pressable } from '@ankhorage/surface';
+import React from 'react';
+
+import type {
+  MessageBubbleAvatar,
+  MessageBubbleDirection,
+  MessageBubbleProps,
+  MessageBubbleStatus,
+} from '../../../../types/chat';
+import { Avatar } from '../../../avatar/public';
+import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
+import { Text } from '../../../typography/public';
+
+function resolveAvatarName({
+  avatar,
+  authorName,
+}: {
+  avatar: MessageBubbleAvatar | undefined;
+  authorName: React.ReactNode | undefined;
+}): string | undefined {
+  if (avatar?.name) return avatar.name;
+  return typeof authorName === 'string' ? authorName : undefined;
+}
+
+function resolvePadding(compact: boolean) {
+  return compact ? { px: 'm' as const, py: 's' as const } : { px: 'm' as const, py: 'm' as const };
+}
+
+function resolveStatusLabel(status: MessageBubbleStatus): string {
+  switch (status) {
+    case 'sending':
+      return 'Sending';
+    case 'sent':
+      return 'Sent';
+    case 'delivered':
+      return 'Delivered';
+    case 'read':
+      return 'Read';
+    case 'failed':
+      return 'Failed';
+    default:
+      return status;
+  }
+}
+
+function isMessageBubbleStatus(
+  status: MessageBubbleProps['status'],
+): status is MessageBubbleStatus {
+  return (
+    status === 'sending' ||
+    status === 'sent' ||
+    status === 'delivered' ||
+    status === 'read' ||
+    status === 'failed'
+  );
+}
+
+function resolveStatus(status: MessageBubbleProps['status']) {
+  if (status == null) return null;
+  return isMessageBubbleStatus(status) ? resolveStatusLabel(status) : status;
+}
+
+function resolveBubbleStyles({
+  direction,
+  disabled,
+  hovered,
+  pressed,
+  selected,
+  theme,
+}: {
+  direction: MessageBubbleDirection;
+  disabled: boolean;
+  hovered: boolean;
+  pressed: boolean;
+  selected: boolean;
+  theme: ReturnType<typeof useZoraTheme>['theme'];
+}) {
+  const borderColor = selected ? theme.semantics.border.focus : theme.semantics.border.default;
+
+  if (direction === 'system') {
+    return {
+      bg: selected ? theme.semantics.neutral.surface : 'transparent',
+      borderColor,
+      borderWidth: selected ? 1 : 0,
+      opacity: disabled ? 0.72 : 1,
+    };
+  }
+
+  const interactiveBg = pressed
+    ? theme.semantics.neutral.surfaceActive
+    : hovered
+      ? theme.semantics.neutral.surfaceHover
+      : undefined;
+
+  return {
+    bg:
+      interactiveBg ??
+      (direction === 'outgoing' ? theme.semantics.neutral.surface : theme.semantics.surface.raised),
+    borderColor,
+    borderWidth: selected ? 1 : 0,
+    opacity: disabled ? 0.72 : 1,
+  };
+}
+
+function MessageAvatar({
+  avatar,
+  authorName,
+  compact,
+}: {
+  avatar: MessageBubbleAvatar;
+  authorName: React.ReactNode | undefined;
+  compact: boolean;
+}) {
+  const avatarName = resolveAvatarName({ avatar, authorName });
+
+  return (
+    <Avatar
+      initials={avatar.initials}
+      label={avatar.label ?? avatarName}
+      name={avatarName}
+      shape={avatar.shape}
+      size={avatar.size ?? (compact ? 'xs' : 's')}
+      source={avatar.source}
+      color={avatar.color}
+    />
+  );
+}
+
+function MessageBubbleInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy,
+  testID,
+  direction = 'incoming',
+  text,
+  children,
+  author,
+  timestamp,
+  meta,
+  status,
+  leading,
+  trailing,
+  footer,
+  selected = false,
+  disabled = false,
+  compact = false,
+  accessibilityLabel,
+  onPress,
+}: MessageBubbleProps) {
+  const { theme } = useZoraTheme();
+  const padding = resolvePadding(compact);
+  const isInteractive = Boolean(onPress);
+  const isOutgoing = direction === 'outgoing';
+  const isSystem = direction === 'system';
+  const renderedStatus = resolveStatus(status);
+  const authorName = author?.name;
+  const authorAvatar = author?.avatar;
+  const hasAuthorName = authorName != null && !isOutgoing && !isSystem;
+  const hasAvatar = authorAvatar != null && !isOutgoing && !isSystem;
+  const hasMetaRow = timestamp != null || meta != null || renderedStatus != null;
+
+  const renderBubble = ({ pressed, hovered }: { pressed: boolean; hovered: boolean }) => {
+    const styles = resolveBubbleStyles({ direction, disabled, hovered, pressed, selected, theme });
+
+    return (
+      <View
+        bg={styles.bg}
+        borderColor={styles.borderColor}
+        borderWidth={styles.borderWidth}
+        px={padding.px}
+        py={padding.py}
+        radius={isSystem ? 'm' : 'l'}
+        style={{ maxWidth: compact ? 420 : 560, opacity: styles.opacity }}
+      >
+        <View align={isSystem ? 'center' : 'flex-start'} gap={compact ? 'xxs' : 'xs'}>
+          {hasAuthorName ? (
+            <Text emphasis="muted" variant="caption" weight="semiBold">
+              {authorName}
+            </Text>
+          ) : null}
+          {text != null ? (
+            <Text align={isSystem ? 'center' : undefined} emphasis={disabled ? 'muted' : 'default'}>
+              {text}
+            </Text>
+          ) : null}
+          {children != null ? <View width="100%">{children}</View> : null}
+          {hasMetaRow ? (
+            <View
+              direction="row"
+              align="center"
+              gap="xs"
+              justify={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}
+              wrap="wrap"
+            >
+              {timestamp != null ? (
+                <Text emphasis="subtle" variant="caption">
+                  {timestamp}
+                </Text>
+              ) : null}
+              {meta != null ? (
+                <Text emphasis="subtle" variant="caption">
+                  {meta}
+                </Text>
+              ) : null}
+              {renderedStatus != null ? (
+                <Text
+                  color={status === 'failed' ? 'danger' : undefined}
+                  emphasis={status === 'failed' ? 'default' : 'subtle'}
+                  variant="caption"
+                >
+                  {renderedStatus}
+                </Text>
+              ) : null}
+            </View>
+          ) : null}
+        </View>
+      </View>
+    );
+  };
+
+  const bubbleContent = isInteractive ? (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      accessibilityState={{ disabled, selected }}
+      disabled={disabled}
+      interactionPolicy={interactionPolicy}
+      onPress={onPress}
+      radius={isSystem ? 'm' : 'l'}
+      testID={testID}
+    >
+      {(state) => renderBubble({ pressed: state.pressed, hovered: state.hovered })}
+    </Pressable>
+  ) : (
+    <View testID={testID}>{renderBubble({ pressed: false, hovered: false })}</View>
+  );
+
+  return (
+    <View gap="xs" style={{ width: '100%' }}>
+      <View
+        direction="row"
+        align="flex-end"
+        gap="s"
+        justify={isSystem ? 'center' : isOutgoing ? 'flex-end' : 'flex-start'}
+        wrap="nowrap"
+      >
+        {!isOutgoing && !isSystem ? (
+          <View>
+            {leading ??
+              (hasAvatar ? (
+                <MessageAvatar avatar={authorAvatar} authorName={authorName} compact={compact} />
+              ) : null)}
+          </View>
+        ) : null}
+        {isOutgoing && trailing ? <View>{trailing}</View> : null}
+        {bubbleContent}
+        {isOutgoing && leading ? <View>{leading}</View> : null}
+        {!isOutgoing && !isSystem && trailing ? <View>{trailing}</View> : null}
+      </View>
+      {footer != null ? (
+        <View alignSelf={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}>
+          {footer}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+/***
+ * Message bubble pattern for chat UIs with direction and status styling.
+ *
+ 
+ */
+export const MessageBubble = withZoraThemeScope(MessageBubbleInner);

package/src/features/chat/chatListItemMeta.ts

@@ -0,0 +1,74 @@
+import type { ZoraComponentMeta } from '../authoring';
+
+export const chatListItemMeta = {
+  name: 'ChatListItem',
+  category: 'pattern',
+  description:
+    'Conversation preview row with avatar, title, preview text, timestamp, and unread state.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Chat list item',
+    icon: { name: 'chatbubble-outline' },
+    defaultProps: {
+      title: 'Ada Lovelace',
+      preview: 'Can you review the latest UI update?',
+      timestamp: '2m',
+      avatar: {
+        name: 'Ada Lovelace',
+      },
+    },
+  },
+  props: {
+    title: {
+      type: 'string',
+      category: 'Content',
+      label: 'Title',
+      default: 'Ada Lovelace',
+    },
+    preview: {
+      type: 'string',
+      category: 'Content',
+      label: 'Preview',
+    },
+    meta: {
+      type: 'string',
+      category: 'Content',
+      label: 'Meta',
+    },
+    timestamp: {
+      type: 'string',
+      category: 'Content',
+      label: 'Timestamp',
+    },
+    unread: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Unread',
+      default: false,
+    },
+    unreadCount: {
+      type: 'string',
+      category: 'State',
+      label: 'Unread count',
+    },
+    selected: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Selected',
+      default: false,
+    },
+    disabled: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Disabled',
+      default: false,
+    },
+    compact: {
+      type: 'boolean',
+      category: 'Layout',
+      label: 'Compact',
+      default: false,
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/chat/messageBubbleMeta.ts

@@ -0,0 +1,68 @@
+import type { ZoraComponentMeta } from '../authoring';
+import { CONTAINER_ALLOWED_CHILDREN } from '../authoring/allowedChildren';
+
+export const messageBubbleMeta = {
+  name: 'MessageBubble',
+  category: 'pattern',
+  description:
+    'Chat/message bubble with direction, author, text, meta, and delivery status presentation.',
+  directManifestNode: true,
+  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+  blueprint: {
+    label: 'Message bubble',
+    icon: { name: 'chatbubble-outline' },
+    defaultProps: {
+      direction: 'incoming',
+      text: 'Can you review the latest message pattern?',
+      timestamp: '10:41',
+    },
+  },
+  props: {
+    direction: {
+      type: 'enum',
+      category: 'Content',
+      label: 'Direction',
+      enum: ['incoming', 'outgoing', 'system'],
+      default: 'incoming',
+    },
+    text: {
+      type: 'string',
+      category: 'Content',
+      label: 'Text',
+    },
+    timestamp: {
+      type: 'string',
+      category: 'Content',
+      label: 'Timestamp',
+    },
+    meta: {
+      type: 'string',
+      category: 'Content',
+      label: 'Meta',
+    },
+    status: {
+      type: 'enum',
+      category: 'Content',
+      label: 'Status',
+      enum: ['sending', 'sent', 'delivered', 'read', 'failed'],
+    },
+    selected: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Selected',
+      default: false,
+    },
+    disabled: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Disabled',
+      default: false,
+    },
+    compact: {
+      type: 'boolean',
+      category: 'Layout',
+      label: 'Compact',
+      default: false,
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/chat/public.ts

@@ -0,0 +1,11 @@
+export type {
+  ChatListAvatar,
+  ChatListItemProps,
+  MessageBubbleAuthor,
+  MessageBubbleAvatar,
+  MessageBubbleDirection,
+  MessageBubbleProps,
+  MessageBubbleStatus,
+} from '../../types/chat';
+export { ChatListItem } from './adapters/inbound/ChatListItem';
+export { MessageBubble } from './adapters/inbound/MessageBubble';

package/src/features/chip/adapters/inbound/Chip.tsx

@@ -1,12 +1,12 @@
 import { Pressable } from '@ankhorage/surface';
 import React from 'react';
 
-import { resolveIconSize } from '../../../../internal/recipes';
-import { useZoraTheme } from '../../../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { ChipInteractionState, ChipProps } from '../../../../types/chip';
 import { Icon } from '../../../icon/public';
+import { resolveIconSize } from '../../../icon/utils/resolveIconSize';
 import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
 import { Text } from '../../../typography/public';
 import { resolveChipColors } from '../../utils/resolveChipColors';
 /***

package/src/features/chip/adapters/inbound/ChipGroup.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { ChipGroupItem, ChipGroupProps } from '../../../../types/chip-group';
 import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
 import { Chip } from '../../public';
 /***
  * Renders a row or wrap layout of `Chip` items.

package/src/features/chip/chipGroupMeta.ts

@@ -1,4 +1,4 @@
-import type { ZoraComponentMeta } from '../../metadata/types';
+import type { ZoraComponentMeta } from '../../types/authoring';
 
 export const chipGroupMeta = {
   name: 'ChipGroup',

package/src/features/chip/chipMeta.ts

@@ -1,4 +1,4 @@
-import type { ZoraComponentMeta } from '../../metadata/types';
+import type { ZoraComponentMeta } from '../../types/authoring';
 
 export const chipMeta = {
   name: 'Chip',

package/src/features/chip/utils/resolveChipColors.ts

@@ -1,7 +1,7 @@
 import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
 
-import type { ZoraColor } from '../../../internal/recipes';
 import type { ChipColors, ChipInteractionState } from '../../../types/chip';
+import type { ZoraColor } from '../../../types/theme';
 export function resolveChipColors({
   theme,
   color,

package/src/features/collection-editor/adapters/inbound/CollectionEditor.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+
+import type { CollectionEditorProps } from '../../../../types/collection-editor';
+import { Button } from '../../../button/public';
+import { IconButton } from '../../../button/public';
+import { Card } from '../../../card/public';
+import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { Text } from '../../../typography/public';
+
+function CollectionEditorInner<TItem>({
+  themeId: _themeId,
+  mode: _mode,
+  title,
+  description,
+  items,
+  renderItem,
+  onAdd,
+  onRemove,
+  onMove,
+  addLabel = 'Add Item',
+  emptyLabel = 'No items yet.',
+  disabled,
+  testID,
+  interactionPolicy,
+}: CollectionEditorProps<TItem>) {
+  const isEmpty = items.length === 0;
+
+  return (
+    <Card
+      compact
+      description={description}
+      interactionPolicy={interactionPolicy}
+      testID={testID}
+      title={title}
+      actions={
+        onAdd ? (
+          <Button
+            variant="soft"
+            size="s"
+            disabled={disabled}
+            interactionPolicy={interactionPolicy}
+            onPress={onAdd}
+          >
+            {addLabel}
+          </Button>
+        ) : null
+      }
+    >
+      <View gap="s">
+        {isEmpty ? (
+          <View py="m">
+            <Text align="center" emphasis="muted">
+              {emptyLabel}
+            </Text>
+          </View>
+        ) : (
+          items.map((item, index) => (
+            <View key={index} bg="subtle" p="s" radius="m" borderColor="border" borderWidth={1}>
+              <View direction="row" gap="m" align="center">
+                <View flex={1}>
+                  {renderItem({
+                    item,
+                    index,
+                    remove: () => onRemove?.(index),
+                    moveUp: () => onMove?.(index, index - 1),
+                    moveDown: () => onMove?.(index, index + 1),
+                    canMoveUp: index > 0,
+                    canMoveDown: index < items.length - 1,
+                  })}
+                </View>
+                <View direction="row" gap="xs">
+                  {onMove ? (
+                    <>
+                      <IconButton
+                        icon={{ name: 'arrow-up-outline' }}
+                        label="Move Up"
+                        disabled={disabled ?? index === 0}
+                        interactionPolicy={interactionPolicy}
+                        onPress={() => onMove(index, index - 1)}
+                        size="s"
+                        variant="ghost"
+                      />
+                      <IconButton
+                        icon={{ name: 'arrow-down-outline' }}
+                        label="Move Down"
+                        disabled={disabled ?? index === items.length - 1}
+                        interactionPolicy={interactionPolicy}
+                        onPress={() => onMove(index, index + 1)}
+                        size="s"
+                        variant="ghost"
+                      />
+                    </>
+                  ) : null}
+                  {onRemove ? (
+                    <IconButton
+                      icon={{ name: 'trash-outline' }}
+                      label="Remove"
+                      color="danger"
+                      disabled={disabled}
+                      interactionPolicy={interactionPolicy}
+                      onPress={() => onRemove(index)}
+                      size="s"
+                      variant="ghost"
+                    />
+                  ) : null}
+                </View>
+              </View>
+            </View>
+          ))
+        )}
+      </View>
+    </Card>
+  );
+}
+
+/***
+ * Editor pattern for adding, removing, and reordering a collection of items.
+ *
+ 
+ */
+export const CollectionEditor = withZoraThemeScope(CollectionEditorInner);

package/src/features/collection-editor/meta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../authoring';
+
+export const collectionEditorMeta = {
+  name: 'CollectionEditor',
+  category: 'pattern',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Specialized editing pattern; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/features/collection-editor/public.ts

@@ -0,0 +1,5 @@
+export type {
+  CollectionEditorProps,
+  CollectionEditorRenderItemProps,
+} from '../../types/collection-editor';
+export { CollectionEditor } from './adapters/inbound/CollectionEditor';

package/src/features/content-rail/adapters/inbound/ContentRail.tsx

@@ -7,14 +7,14 @@ import {
   type ViewStyle,
 } from 'react-native';
 
-import { useZoraTheme } from '../../../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type {
   ContentRailProps,
   ContentRailVisibleRangeChangeEvent,
 } from '../../../../types/content-rail';
 import { IconButton } from '../../../button/public';
 import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
 import { Text } from '../../../typography/public';
 import { resolveContentRailItemWidth } from '../../utils/resolveContentRailItemWidth';
 import { resolveContentRailPhysicalOffset } from '../../utils/resolveContentRailPhysicalOffset';

package/src/features/content-rail/adapters/inbound/ContentRailFlow.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ScrollView } from 'react-native';
 
-import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import type { ContentRailProps } from '../../../../types/content-rail';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
 
 /*** Wraps intrinsically sized content in a free horizontal native scroll view. */
 export function ContentRailFlow({

package/src/features/content-rail/contentRailMeta.ts

@@ -1,5 +1,5 @@
-import type { ZoraComponentMeta } from '../../metadata';
-import { CONTENT_RAIL_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+import type { ZoraComponentMeta } from '../authoring';
+import { CONTENT_RAIL_ALLOWED_CHILDREN } from '../authoring/allowedChildren';
 import { CONTENT_RAIL_SPACING_VALUES } from './constants';
 
 export const contentRailMeta = {

package/src/features/data-table/adapters/inbound/DataTable.tsx

@@ -3,7 +3,6 @@ import { Show } from '@ankhorage/surface';
 import React from 'react';
 import { ScrollView, type ViewStyle } from 'react-native';
 
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type {
   DataTableCellContext,
   DataTableColumn,
@@ -20,6 +19,7 @@ import { EmptyState } from '../../../empty-state/public';
 import { View } from '../../../layout/public';
 import { PopoverMenu, type PopoverMenuAction } from '../../../popover-menu/public';
 import { SkeletonList } from '../../../skeleton/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
 import { Text, type TextAlign } from '../../../typography/public';
 import { resolveDataTableRowKey } from '../../utils/resolveDataTableRowKey';
 /***

package/src/features/data-table/dataTableMeta.ts

@@ -1,4 +1,4 @@
-import type { ZoraComponentMeta } from '../../metadata/types';
+import type { ZoraComponentMeta } from '../../types/authoring';
 
 export const dataTableMeta = {
   name: 'DataTable',