@startsimpli/ui-native 0.1.1 → 0.1.2

package/src/__tests__/logic-misc.test.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect } from 'vitest';
+import { clampSwipe, settleSwipe } from '../logic/swipe';
+import { createToastStore } from '../logic/toast';
+import { canSend } from '../logic/chat';
+import { statusTone, formatProgress } from '../logic/status';
+import { filterOptions, selectedLabel } from '../logic/select';
+
+describe('swipe', () => {
+  it('clamps between -actionsWidth (open) and 0', () => {
+    expect(clampSwipe(-300, 160)).toBe(-160);
+    expect(clampSwipe(40, 160)).toBe(0);
+    expect(clampSwipe(-50, 160)).toBe(-50);
+  });
+  it('settles open past half or on a fast left fling, closed otherwise', () => {
+    expect(settleSwipe(-90, 0, 160)).toBe('open');
+    expect(settleSwipe(-30, -0.8, 160)).toBe('open');
+    expect(settleSwipe(-90, 0.8, 160)).toBe('closed');
+    expect(settleSwipe(-30, 0, 160)).toBe('closed');
+  });
+});
+
+describe('toast store', () => {
+  it('show/dismiss/clear notify subscribers', () => {
+    let n = 0;
+    const s = createToastStore();
+    s.subscribe(() => { n++; });
+    const a = s.show('Saved');
+    const b = s.show('Oops', { tone: 'error', durationMs: 0 });
+    expect(s.getToasts().map((t) => [t.id, t.message, t.tone])).toEqual([[a, 'Saved', 'info'], [b, 'Oops', 'error']]);
+    expect(s.getToasts()[0].durationMs).toBe(3000);
+    s.dismiss(a);
+    expect(s.getToasts()).toHaveLength(1);
+    s.clear();
+    expect(s.getToasts()).toEqual([]);
+    expect(n).toBe(4);
+  });
+  it('unsubscribe stops notifications; dismissing unknown id is a no-op', () => {
+    let n = 0;
+    const s = createToastStore();
+    const off = s.subscribe(() => { n++; });
+    off();
+    s.show('x'); s.dismiss('nope');
+    expect(n).toBe(0);
+  });
+});
+
+describe('canSend', () => {
+  it('needs non-blank text and not already sending', () => {
+    expect(canSend('hi', false)).toBe(true);
+    expect(canSend('  \n', false)).toBe(false);
+    expect(canSend('hi', true)).toBe(false);
+    expect(canSend('', false)).toBe(false);
+  });
+});
+
+describe('status', () => {
+  it('maps domain statuses onto badge variants', () => {
+    expect(statusTone('queued')).toEqual({ variant: 'secondary', label: 'Queued' });
+    expect(statusTone('processing').variant).toBe('default');
+    expect(statusTone('Transcribing').variant).toBe('default');
+    expect(statusTone('done')).toEqual({ variant: 'success', label: 'Done' });
+    expect(statusTone('ready').variant).toBe('success');
+    expect(statusTone('failed')).toEqual({ variant: 'destructive', label: 'Failed' });
+    expect(statusTone('partial').variant).toBe('warning');
+    expect(statusTone('weird_thing')).toEqual({ variant: 'outline', label: 'Weird thing' });
+  });
+  it('formats progress as a clamped percent', () => {
+    expect(formatProgress(0.4)).toBe('40%');
+    expect(formatProgress(2)).toBe('100%');
+    expect(formatProgress(-1)).toBe('0%');
+    expect(formatProgress(Number.NaN)).toBe('0%');
+  });
+});
+
+describe('select', () => {
+  const opts = [{ value: 'a', label: 'Alpha', description: 'first' }, { value: 'b', label: 'Beta' }];
+  it('filters by label/description, case-insensitive', () => {
+    expect(filterOptions(opts, 'ALP')).toEqual([opts[0]]);
+    expect(filterOptions(opts, 'first')).toEqual([opts[0]]);
+    expect(filterOptions(opts, '  ')).toEqual(opts);
+  });
+  it('selectedLabel falls back to null', () => {
+    expect(selectedLabel(opts, 'b')).toBe('Beta');
+    expect(selectedLabel(opts, null)).toBeNull();
+    expect(selectedLabel(opts, 'zzz')).toBeNull();
+  });
+});

package/src/__tests__/styles-overlay.test.ts

@@ -0,0 +1,14 @@
+import { describe, it, expect } from 'vitest';
+import { errorTextColor, toastStyle, swipeActionStyle } from '../styles-overlay';
+import { lightTheme, darkTheme } from '../theme';
+
+describe('styles-overlay', () => {
+  it('error text is the token in light and a brighter red in dark', () => {
+    expect(errorTextColor(lightTheme)).toBe(lightTheme.colors.destructive);
+    expect(errorTextColor(darkTheme)).not.toBe(darkTheme.colors.destructive);
+  });
+  it('toast and swipe actions follow the tone tokens', () => {
+    expect(toastStyle(lightTheme, 'success').backgroundColor).toBe(lightTheme.colors.success);
+    expect(swipeActionStyle(darkTheme, 'destructive', 80)).toMatchObject({ width: 80, backgroundColor: darkTheme.colors.destructive });
+  });
+});

package/src/components/ChatComposer.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { KeyboardAvoidingView, Platform, Pressable, Text as RNText, View, type StyleProp, type ViewStyle } from 'react-native';
+import { Input } from './Input';
+import { useTheme } from './ThemeProvider';
+import { composerStyle, sendButtonStyle, sendGlyphStyle } from '../styles-chat';
+import { canSend } from '../logic/chat';
+
+export interface ChatComposerProps {
+  onSend: (text: string) => void;
+  /** Controlled value. Omit to let the composer own (and clear) its text. */
+  value?: string;
+  onChangeText?: (text: string) => void;
+  placeholder?: string;
+  /** Disables sending while an answer is in flight. */
+  sending?: boolean;
+  /** Extra offset for headers above the keyboard-avoiding view. */
+  keyboardVerticalOffset?: number;
+  /** Bottom safe-area padding (home indicator). */
+  bottomInset?: number;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** Keyboard-avoiding message input with a send button. Trims text on send. */
+export function ChatComposer({ onSend, value, onChangeText, placeholder = 'Message', sending = false, keyboardVerticalOffset = 0, bottomInset = 0, style, testID }: ChatComposerProps) {
+  const theme = useTheme();
+  const [own, setOwn] = useState('');
+  const controlled = value !== undefined;
+  const text = controlled ? value : own;
+  const enabled = canSend(text, sending);
+  const id = (s: string) => (testID ? `${testID}-${s}` : undefined);
+
+  const submit = () => {
+    if (!enabled) return;
+    onSend(text.trim());
+    if (!controlled) setOwn('');
+  };
+
+  return (
+    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={keyboardVerticalOffset}>
+      <View style={[composerStyle(theme), { paddingBottom: bottomInset + theme.spacing.sm }, style]}>
+        <Input
+          testID={id('input')}
+          value={text}
+          onChangeText={(t) => { if (!controlled) setOwn(t); onChangeText?.(t); }}
+          placeholder={placeholder}
+          accessibilityLabel={placeholder}
+          multiline
+          style={{ flex: 1, maxHeight: 120, borderRadius: theme.radii.xl }}
+        />
+        <Pressable
+          testID={id('send')}
+          accessibilityRole="button"
+          accessibilityLabel="Send message"
+          accessibilityState={{ disabled: !enabled }}
+          disabled={!enabled}
+          onPress={submit}
+          style={sendButtonStyle(theme, enabled)}
+        >
+          <RNText style={sendGlyphStyle(theme, enabled)}>↑</RNText>
+        </Pressable>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}

package/src/components/Chip.tsx

@@ -7,17 +7,21 @@ export interface ChipProps {
   selected?: boolean;
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
+  testID?: string;
+  accessibilityLabel?: string;
 }
 
 /** Selectable filter pill. Filled with the primary color when selected,
  *  outlined otherwise. Compose a row of these for a filter bar. */
-export function Chip({ label, selected = false, onPress, style }: ChipProps) {
+export function Chip({ label, selected = false, onPress, style, testID, accessibilityLabel }: ChipProps) {
   const theme = useTheme();
   return (
     <Pressable
       accessibilityRole="button"
       accessibilityState={{ selected }}
       onPress={onPress}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
       style={({ pressed }) => [chipStyle(theme, selected), pressed ? { opacity: 0.7 } : null, style]}
     >
       <RNText style={chipTextStyle(theme, selected)}>{label}</RNText>

package/src/components/DataList.tsx

@@ -0,0 +1,52 @@
+import type { ReactElement } from 'react';
+import { FlatList, View, type FlatListProps, type ListRenderItem } from 'react-native';
+import { ListControls } from './ListControls';
+import { useServerList } from './useServerList';
+import { useTheme } from './ThemeProvider';
+import type { ServerListProps } from './serverListTypes';
+
+export type DataListProps<T> = ServerListProps &
+  Pick<FlatListProps<T>, 'keyExtractor' | 'extraData' | 'ItemSeparatorComponent' | 'contentContainerStyle'> & {
+    data: readonly T[];
+    renderItem: ListRenderItem<T>;
+  };
+
+/**
+ * List for server-driven data: debounced search, sort + filter controls with an
+ * active-filter summary, pull-to-refresh, infinite scroll with a hasMore /
+ * loadingMore footer, and distinct loading / empty / no-results / error states.
+ * It renders exactly the rows it is given: filtering, sorting and paging are the
+ * server's job, reported through the callbacks.
+ */
+export function DataList<T>(props: DataListProps<T>): ReactElement {
+  const { data, renderItem, keyExtractor, extraData, ItemSeparatorComponent, contentContainerStyle, ListHeaderComponent, testID, search, filters, onFilterChange, onClearFilters, sort } = props;
+  const theme = useTheme();
+  const { empty, footer, onEndReached, refreshControl } = useServerList(props, data.length);
+  const hasControls = !!(search || sort || filters?.length);
+  return (
+    <View style={{ flex: 1 }} testID={testID ? `${testID}-root` : undefined}>
+      {hasControls ? (
+        <View style={{ paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }}>
+          <ListControls search={search} filters={filters} onFilterChange={onFilterChange} onClearFilters={onClearFilters} sort={sort} testID={testID} />
+        </View>
+      ) : null}
+      <FlatList
+        testID={testID}
+        data={data}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        extraData={extraData}
+        ItemSeparatorComponent={ItemSeparatorComponent}
+        ListHeaderComponent={ListHeaderComponent ? <>{ListHeaderComponent}</> : undefined}
+        ListEmptyComponent={empty ?? undefined}
+        ListFooterComponent={footer ?? undefined}
+        onEndReached={onEndReached}
+        onEndReachedThreshold={0.5}
+        refreshControl={refreshControl}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="on-drag"
+        contentContainerStyle={[{ paddingHorizontal: theme.spacing.lg, paddingBottom: theme.spacing.xl, flexGrow: 1 }, contentContainerStyle]}
+      />
+    </View>
+  );
+}

package/src/components/EmptyState.tsx

@@ -14,6 +14,9 @@ export interface EmptyStateProps {
   onAction?: () => void;
   /** Layout overrides (e.g. margins), merged after the base style. */
   style?: StyleProp<ViewStyle>;
+  testID?: string;
+  /** testID for the action button. */
+  actionTestID?: string;
 }
 
 /**
@@ -22,10 +25,11 @@ export interface EmptyStateProps {
  * leaving a screen blank (or showing a bare table header) when there's nothing
  * to display yet.
  */
-export function EmptyState({ icon, title, description, actionLabel, onAction, style }: EmptyStateProps) {
+export function EmptyState({ icon, title, description, actionLabel, onAction, style, testID, actionTestID }: EmptyStateProps) {
   const theme = useTheme();
   return (
     <View
+      testID={testID}
       style={[
         {
           alignItems: 'center',
@@ -55,6 +59,7 @@ export function EmptyState({ icon, title, description, actionLabel, onAction, st
           title={actionLabel}
           variant="primary"
           onPress={onAction}
+          testID={actionTestID}
           style={{ marginTop: theme.spacing.sm, alignSelf: 'stretch' }}
         />
       ) : null}

package/src/components/FormField.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import { Text as RNText, View, type StyleProp, type ViewStyle } from 'react-native';
+import { Label } from './Label';
+import { useTheme } from './ThemeProvider';
+import { errorTextColor } from '../styles-overlay';
+
+export interface FormFieldProps {
+  label?: string;
+  required?: boolean;
+  hint?: string;
+  /** When set, replaces the hint and is announced as an alert. */
+  error?: string;
+  /** Right-aligned text under the control, e.g. a character counter. */
+  footerRight?: string;
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Label + control + hint/error wrapper for any input. */
+export function FormField({ label, required, hint, error, footerRight, children, style }: FormFieldProps) {
+  const theme = useTheme();
+  return (
+    <View style={[{ gap: theme.spacing.xs }, style]}>
+      {label ? <Label>{label}{required ? <RNText style={{ color: theme.colors.destructive }}> *</RNText> : null}</Label> : null}
+      {children}
+      {error || hint || footerRight ? (
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between', gap: theme.spacing.sm }}>
+          {error ? (
+            <RNText accessibilityRole="alert" style={{ flex: 1, color: errorTextColor(theme), fontSize: theme.fontSizes.xs }}>{error}</RNText>
+          ) : (
+            <RNText style={{ flex: 1, color: theme.colors.mutedForeground, fontSize: theme.fontSizes.xs }}>{hint ?? ''}</RNText>
+          )}
+          {footerRight ? <RNText style={{ color: theme.colors.mutedForeground, fontSize: theme.fontSizes.xs }}>{footerRight}</RNText> : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/components/Header.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import { Pressable, Text as RNText, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from './ThemeProvider';
+import { headerStyle } from '../styles-overlay';
+import { textStyle } from '../styles';
+
+export interface HeaderProps {
+  title: string;
+  subtitle?: string;
+  /** Shows a back button when set. */
+  onBack?: () => void;
+  backLabel?: string;
+  /** Node pinned right, e.g. an action Button. */
+  trailing?: ReactNode;
+  /** Pad for the status bar / notch. Default false (Screen already does). */
+  safeArea?: boolean;
+  testID?: string;
+}
+
+/** Stack-screen header: back button, title/subtitle, trailing actions. */
+export function Header({ title, subtitle, onBack, backLabel = 'Back', trailing, safeArea = false, testID }: HeaderProps) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  return (
+    <View testID={testID} style={headerStyle(theme, safeArea ? insets.top : 0)}>
+      {onBack ? (
+        <Pressable
+          testID={testID ? `${testID}-back` : undefined}
+          accessibilityRole="button"
+          accessibilityLabel={backLabel}
+          hitSlop={8}
+          onPress={onBack}
+          style={{ width: 44, height: 44, marginLeft: -theme.spacing.sm, alignItems: 'center', justifyContent: 'center' }}
+        >
+          <RNText style={{ color: theme.colors.primary, fontSize: 32, lineHeight: 34 }}>‹</RNText>
+        </Pressable>
+      ) : null}
+      <View style={{ flex: 1 }}>
+        <RNText accessibilityRole="header" numberOfLines={1} style={[textStyle(theme, 'heading'), { fontSize: theme.fontSizes.lg }]}>{title}</RNText>
+        {subtitle ? <RNText numberOfLines={1} style={textStyle(theme, 'caption')}>{subtitle}</RNText> : null}
+      </View>
+      {trailing ? <View style={{ flexDirection: 'row', alignItems: 'center', gap: theme.spacing.sm }}>{trailing}</View> : null}
+    </View>
+  );
+}

package/src/components/ListControls.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useRef } from 'react';
+import { Pressable, ScrollView, Text as RNText, View } from 'react-native';
+import { Chip } from './Chip';
+import { SearchBar } from './SearchBar';
+import { SegmentedControl } from './SegmentedControl';
+import { Select } from './Select';
+import { useTheme } from './ThemeProvider';
+import { createDebouncer, summarizeFilters } from '../logic/listState';
+import type { ServerListProps } from './serverListTypes';
+
+type Props = Pick<ServerListProps, 'search' | 'filters' | 'onFilterChange' | 'onClearFilters' | 'sort' | 'testID'>;
+
+/** Search, sort, filter chips and the active-filter summary shared by the server lists. */
+export function ListControls({ search, filters = [], onFilterChange, onClearFilters, sort, testID }: Props) {
+  const theme = useTheme();
+  const id = (s: string) => (testID ? `${testID}-${s}` : undefined);
+  const latest = useRef(search);
+  latest.current = search;
+  const debouncer = useRef(createDebouncer<string>((t) => latest.current?.onSearch(t), search?.debounceMs ?? 300)).current;
+  useEffect(() => () => debouncer.cancel(), [debouncer]);
+
+  const summary = summarizeFilters(filters, search?.value ?? '');
+
+  return (
+    <View style={{ gap: theme.spacing.sm, paddingBottom: theme.spacing.sm }}>
+      {search ? (
+        <SearchBar
+          testID={id('search')}
+          value={search.value}
+          placeholder={search.placeholder}
+          onChangeText={(t) => { search.onChange(t); debouncer.call(t); }}
+          onSubmit={(t) => { debouncer.cancel(); search.onSearch(t); }}
+          onClear={() => debouncer.flush()}
+        />
+      ) : null}
+      {sort ? <SegmentedControl testID={id('sort')} options={sort.options} value={sort.value} onChange={sort.onChange} /> : null}
+      {filters.length ? (
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} keyboardShouldPersistTaps="handled" contentContainerStyle={{ gap: theme.spacing.sm, alignItems: 'center' }}>
+          {filters.map((g) =>
+            g.display === 'select' ? (
+              <Select
+                key={g.key}
+                compact
+                testID={id(`filter-${g.key}`)}
+                label={g.label}
+                options={g.options}
+                value={g.value}
+                clearLabel={`All ${g.label.toLowerCase()}`}
+                onChange={(v) => onFilterChange?.(g.key, v)}
+              />
+            ) : (
+              g.options.map((o) => {
+                const active = g.value === o.value;
+                return (
+                  <Chip
+                    key={`${g.key}:${o.value}`}
+                    testID={id(`filter-${g.key}-${o.value}`)}
+                    label={o.label}
+                    selected={active}
+                    accessibilityLabel={`${g.label}: ${o.label}`}
+                    onPress={() => onFilterChange?.(g.key, active ? null : o.value)}
+                  />
+                );
+              })
+            ),
+          )}
+        </ScrollView>
+      ) : null}
+      {summary.count > 0 && onClearFilters ? (
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: theme.spacing.sm }}>
+          <RNText numberOfLines={2} style={{ flex: 1, color: theme.colors.mutedForeground, fontSize: theme.fontSizes.xs }}>{summary.labels.join(' · ')}</RNText>
+          <Pressable
+            testID={id('clear-filters')}
+            accessibilityRole="button"
+            accessibilityLabel={`Clear ${summary.count} filter${summary.count === 1 ? '' : 's'}`}
+            hitSlop={8}
+            onPress={onClearFilters}
+          >
+            <RNText style={{ color: theme.colors.primary, fontSize: theme.fontSizes.sm, fontWeight: '600' }}>Clear</RNText>
+          </Pressable>
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/components/Markdown.tsx

@@ -0,0 +1,93 @@
+import { type ReactNode } from 'react';
+import { Linking, Platform, Text as RNText, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { useTheme } from './ThemeProvider';
+import { textStyle } from '../styles';
+import { parseMarkdown, type Block, type Inline } from '../logic/markdown';
+import type { Theme } from '../theme';
+
+export interface MarkdownProps {
+  /** Markdown source. */
+  children: string;
+  /** Called with the href of a pressed link. Defaults to Linking.openURL. */
+  onLinkPress?: (href: string) => void;
+  /** Overrides the body text colour (e.g. inside a coloured bubble). */
+  color?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+const MONO = Platform.select({ ios: 'Menlo', default: 'monospace' });
+
+function Inlines({ items, theme, onLink, color }: { items: Inline[]; theme: Theme; onLink: (h: string) => void; color?: string }): ReactNode {
+  return items.map((n, i) => {
+    switch (n.type) {
+      case 'text':
+        return n.text;
+      case 'bold':
+        return <RNText key={i} style={{ fontWeight: '700' }}>{Inlines({ items: n.children, theme, onLink, color })}</RNText>;
+      case 'italic':
+        return <RNText key={i} style={{ fontStyle: 'italic' }}>{Inlines({ items: n.children, theme, onLink, color })}</RNText>;
+      case 'code':
+        return <RNText key={i} style={{ fontFamily: MONO, backgroundColor: theme.colors.muted, fontSize: theme.fontSizes.sm }}>{n.text}</RNText>;
+      case 'link':
+        return (
+          <RNText key={i} accessibilityRole="link" onPress={() => onLink(n.href)} style={{ color: theme.colors.primary, textDecorationLine: 'underline' }}>
+            {Inlines({ items: n.children, theme, onLink, color })}
+          </RNText>
+        );
+    }
+  });
+}
+
+function BlockView({ block, theme, onLink, color }: { block: Block; theme: Theme; onLink: (h: string) => void; color?: string }) {
+  const body: TextStyle = { ...textStyle(theme, 'body'), lineHeight: Math.round(theme.fontSizes.base * 1.5), ...(color ? { color } : null) };
+  const inl = (items: Inline[]) => <Inlines items={items} theme={theme} onLink={onLink} color={color} />;
+  switch (block.type) {
+    case 'heading': {
+      const size = { 1: theme.fontSizes['2xl'], 2: theme.fontSizes.xl, 3: theme.fontSizes.lg }[block.level];
+      return <RNText accessibilityRole="header" style={{ ...body, fontSize: size, fontWeight: '700', lineHeight: Math.round(size * 1.25) }}>{inl(block.inlines)}</RNText>;
+    }
+    case 'paragraph':
+      return <RNText style={body}>{inl(block.inlines)}</RNText>;
+    case 'bullets':
+    case 'numbered':
+      return (
+        <View style={{ gap: theme.spacing.xs }}>
+          {block.items.map((item, i) => (
+            <View key={i} style={{ flexDirection: 'row', gap: theme.spacing.sm }}>
+              <RNText style={[body, { minWidth: 18 }]}>{block.type === 'bullets' ? '•' : `${i + 1}.`}</RNText>
+              <RNText style={[body, { flex: 1 }]}>{inl(item)}</RNText>
+            </View>
+          ))}
+        </View>
+      );
+    case 'quote':
+      return (
+        <View style={{ borderLeftWidth: 3, borderLeftColor: theme.colors.border, paddingLeft: theme.spacing.md }}>
+          <RNText style={[body, { color: color ?? theme.colors.mutedForeground }]}>{inl(block.inlines)}</RNText>
+        </View>
+      );
+    case 'code':
+      return (
+        <View style={{ backgroundColor: theme.colors.muted, borderRadius: theme.radii.md, padding: theme.spacing.md }}>
+          <RNText style={[body, { fontFamily: MONO, fontSize: theme.fontSizes.sm }]}>{block.text}</RNText>
+        </View>
+      );
+    case 'rule':
+      return <View style={{ height: 1, backgroundColor: theme.colors.border }} />;
+  }
+}
+
+/** Renders a markdown subset (headings, bold/italic/code, bullets, numbered,
+ *  quotes, fenced code, safe links). For summaries, answers and transcripts. */
+export function Markdown({ children, onLinkPress, color, style, testID }: MarkdownProps) {
+  const theme = useTheme();
+  const blocks = parseMarkdown(children);
+  const onLink = onLinkPress ?? ((href: string) => { void Linking.openURL(href); });
+  if (!blocks.length) return null;
+  return (
+    <View testID={testID} style={[{ gap: theme.spacing.md }, style]}>
+      {blocks.map((b, i) => <BlockView key={i} block={b} theme={theme} onLink={onLink} color={color} />)}
+    </View>
+  );
+}

package/src/components/MessageBubble.tsx

@@ -0,0 +1,49 @@
+import { Pressable, Text as RNText, View, type StyleProp, type ViewStyle } from 'react-native';
+import { Markdown } from './Markdown';
+import { Spinner } from './Spinner';
+import { useTheme } from './ThemeProvider';
+import { bubbleStyle, bubbleTextColor, type ChatRole } from '../styles-chat';
+
+export interface MessageBubbleProps {
+  role: ChatRole;
+  text: string;
+  /** Assistant is still answering: shows a typing indicator. */
+  pending?: boolean;
+  /** Message failed to send; shows a retry row when onRetry is given. */
+  error?: boolean;
+  onRetry?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** Chat message. User bubbles are right-aligned/primary; assistant text renders as markdown. */
+export function MessageBubble({ role, text, pending, error, onRetry, style, testID }: MessageBubbleProps) {
+  const theme = useTheme();
+  const color = bubbleTextColor(theme, role);
+  return (
+    <View
+      testID={testID}
+      accessibilityLabel={pending ? 'Assistant is typing' : undefined}
+      style={[bubbleStyle(theme, role), style]}
+    >
+      {pending ? (
+        <Spinner size="small" color={theme.colors.mutedForeground} />
+      ) : role === 'assistant' ? (
+        <Markdown color={color}>{text}</Markdown>
+      ) : (
+        <RNText selectable style={{ color, fontSize: theme.fontSizes.base, lineHeight: Math.round(theme.fontSizes.base * 1.4) }}>{text}</RNText>
+      )}
+      {error ? (
+        <Pressable
+          testID={testID ? `${testID}-retry` : undefined}
+          accessibilityRole="button"
+          accessibilityLabel="Retry sending"
+          onPress={onRetry}
+          style={{ marginTop: theme.spacing.xs }}
+        >
+          <RNText style={{ color: theme.colors.destructiveForeground, fontSize: theme.fontSizes.xs, fontWeight: '600' }}>Not sent. Tap to retry</RNText>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}

package/src/components/SearchBar.tsx

@@ -0,0 +1,52 @@
+import { Pressable, Text as RNText, View, type StyleProp, type ViewStyle } from 'react-native';
+import { Input } from './Input';
+import { useTheme } from './ThemeProvider';
+
+export interface SearchBarProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  /** Keyboard "search" key. Receives the current value. */
+  onSubmit?: (text: string) => void;
+  /** Called after the clear button empties the field. */
+  onClear?: () => void;
+  placeholder?: string;
+  autoFocus?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** Search field with a leading glyph and a clear button. Controlled; debouncing is the caller's job (see DataList). */
+export function SearchBar({ value, onChangeText, onSubmit, onClear, placeholder = 'Search', autoFocus, style, testID }: SearchBarProps) {
+  const theme = useTheme();
+  return (
+    <View style={[{ justifyContent: 'center' }, style]}>
+      <Input
+        testID={testID}
+        value={value}
+        onChangeText={onChangeText}
+        onSubmitEditing={() => onSubmit?.(value)}
+        placeholder={placeholder}
+        accessibilityLabel={placeholder}
+        returnKeyType="search"
+        autoCapitalize="none"
+        autoCorrect={false}
+        autoFocus={autoFocus}
+        clearButtonMode="never"
+        style={{ paddingLeft: theme.spacing.md + 22, paddingRight: value ? 44 : theme.spacing.md, borderRadius: theme.radii.full }}
+      />
+      <RNText pointerEvents="none" accessibilityElementsHidden importantForAccessibility="no" style={{ position: 'absolute', left: theme.spacing.md, color: theme.colors.mutedForeground, fontSize: theme.fontSizes.sm }}>🔍</RNText>
+      {value ? (
+        <Pressable
+          testID={testID ? `${testID}-clear` : undefined}
+          accessibilityRole="button"
+          accessibilityLabel="Clear search"
+          hitSlop={8}
+          onPress={() => { onChangeText(''); onClear?.(); }}
+          style={{ position: 'absolute', right: 0, width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }}
+        >
+          <RNText style={{ color: theme.colors.mutedForeground, fontSize: theme.fontSizes.lg }}>✕</RNText>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}