@startsimpli/ui-native 0.1.0 → 0.1.2

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>
+  );
+}

package/src/components/SectionedList.tsx

@@ -0,0 +1,55 @@
+import type { ReactElement } from 'react';
+import { SectionList, Text as RNText, View, type SectionListProps } from 'react-native';
+import { ListControls } from './ListControls';
+import { useServerList } from './useServerList';
+import { useTheme } from './ThemeProvider';
+import type { ServerListProps } from './serverListTypes';
+
+export type SectionedListProps<T, S = { title: string }> = ServerListProps &
+  Pick<SectionListProps<T, S>, 'keyExtractor' | 'renderItem' | 'extraData' | 'contentContainerStyle'> & {
+    sections: ReadonlyArray<S & { data: readonly T[] }>;
+    /** Custom header; defaults to a bold section title. */
+    renderSectionHeader?: (info: { section: S & { data: readonly T[] } }) => ReactElement | null;
+  };
+
+/** Grouped variant of DataList (e.g. to-dos by day). Same server-driven contract: it never regroups or filters rows. */
+export function SectionedList<T, S extends { title: string } = { title: string }>(props: SectionedListProps<T, S>): ReactElement {
+  const { sections, renderItem, keyExtractor, extraData, contentContainerStyle, renderSectionHeader, ListHeaderComponent, testID, search, filters, onFilterChange, onClearFilters, sort } = props;
+  const theme = useTheme();
+  const count = sections.reduce((n, s) => n + s.data.length, 0);
+  const { empty, footer, onEndReached, refreshControl } = useServerList(props, count);
+  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}
+      <SectionList
+        testID={testID}
+        sections={sections as any}
+        renderItem={renderItem as any}
+        keyExtractor={keyExtractor}
+        extraData={extraData}
+        stickySectionHeadersEnabled={false}
+        renderSectionHeader={({ section }) =>
+          renderSectionHeader ? renderSectionHeader({ section: section as any }) : (
+            <RNText accessibilityRole="header" style={{ paddingTop: theme.spacing.lg, paddingBottom: theme.spacing.xs, color: theme.colors.mutedForeground, fontSize: theme.fontSizes.sm, fontWeight: '600', textTransform: 'uppercase', backgroundColor: theme.colors.background }}>
+              {(section as any).title}
+            </RNText>
+          )
+        }
+        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/SegmentedControl.tsx

@@ -11,6 +11,8 @@ export interface SegmentedControlProps<T extends string | number> {
   value: T;
   onChange: (value: T) => void;
   style?: StyleProp<ViewStyle>;
+  /** Each option gets testID `${testID}-${value}`. */
+  testID?: string;
 }
 
 /** Mutually-exclusive option selector rendered as a row of Chips. Generic over
@@ -20,11 +22,12 @@ export function SegmentedControl<T extends string | number>({
   value,
   onChange,
   style,
+  testID,
 }: SegmentedControlProps<T>) {
   return (
     <View style={[{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }, style]}>
       {options.map((o) => (
-        <Chip key={String(o.value)} label={o.label} selected={o.value === value} onPress={() => onChange(o.value)} />
+        <Chip key={String(o.value)} label={o.label} selected={o.value === value} testID={testID ? `${testID}-${o.value}` : undefined} onPress={() => onChange(o.value)} />
       ))}
     </View>
   );

package/src/components/Select.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import { Pressable, Text as RNText, View, type StyleProp, type ViewStyle } from 'react-native';
+import { Sheet } from './Sheet';
+import { SearchBar } from './SearchBar';
+import { FormField } from './FormField';
+import { useTheme } from './ThemeProvider';
+import { filterOptions, selectedLabel, type SelectOption } from '../logic/select';
+import { inputStyle } from '../styles';
+
+export type { SelectOption } from '../logic/select';
+
+export interface SelectProps {
+  options: SelectOption[];
+  value: string | null;
+  /** Receives the chosen value, or null when the clear row is picked. */
+  onChange: (value: string | null) => void;
+  label?: string;
+  placeholder?: string;
+  /** Sheet title. Defaults to the label. */
+  title?: string;
+  /** Adds an "all / none" row (e.g. "All projects") that emits null. */
+  clearLabel?: string;
+  /** Shows a search box in the sheet. */
+  searchable?: boolean;
+  error?: string;
+  disabled?: boolean;
+  /** Pill-sized trigger for filter bars. */
+  compact?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** Picker: a field-style trigger that opens a bottom Sheet of options. */
+export function Select({ options, value, onChange, label, placeholder = 'Select', title, clearLabel, searchable, error, disabled, compact, style, testID }: SelectProps) {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const current = selectedLabel(options, value);
+  const id = (s: string) => (testID ? `${testID}-${s}` : undefined);
+  const close = () => { setOpen(false); setQuery(''); };
+  const pick = (v: string | null) => { onChange(v); close(); };
+
+  const row = (key: string, text: string, selected: boolean, onPress: () => void, tid?: string, description?: string) => (
+    <Pressable
+      key={key}
+      testID={tid}
+      accessibilityRole="button"
+      accessibilityState={{ selected }}
+      onPress={onPress}
+      style={({ pressed }) => ({ minHeight: 48, flexDirection: 'row', alignItems: 'center', gap: theme.spacing.md, borderBottomWidth: 1, borderBottomColor: theme.colors.border, opacity: pressed ? 0.6 : 1 })}
+    >
+      <View style={{ flex: 1 }}>
+        <RNText style={{ color: theme.colors.foreground, fontSize: theme.fontSizes.base, fontWeight: selected ? '600' : '400' }}>{text}</RNText>
+        {description ? <RNText style={{ color: theme.colors.mutedForeground, fontSize: theme.fontSizes.sm }}>{description}</RNText> : null}
+      </View>
+      {selected ? <RNText style={{ color: theme.colors.primary, fontSize: theme.fontSizes.lg }}>✓</RNText> : null}
+    </Pressable>
+  );
+
+  const shown = filterOptions(options, query);
+  const trigger = (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={`${label ?? placeholder}: ${current ?? 'none selected'}`}
+      accessibilityState={{ disabled: !!disabled, expanded: open }}
+      disabled={disabled}
+      onPress={() => setOpen(true)}
+      style={({ pressed }) => [
+        compact
+          ? { flexDirection: 'row', alignItems: 'center', gap: 6, paddingHorizontal: theme.spacing.md, paddingVertical: 6, borderRadius: theme.radii.full, borderWidth: 1, borderColor: value != null ? theme.colors.primary : theme.colors.border, backgroundColor: value != null ? theme.colors.primary : 'transparent' }
+          : { ...(inputStyle(theme, { invalid: !!error }) as ViewStyle), flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+        disabled ? { opacity: 0.5 } : null,
+        pressed ? { opacity: 0.7 } : null,
+      ]}
+    >
+      <RNText numberOfLines={1} style={{ flexShrink: 1, fontSize: compact ? theme.fontSizes.sm : theme.fontSizes.base, color: compact ? (value != null ? theme.colors.primaryForeground : theme.colors.mutedForeground) : current ? theme.colors.foreground : theme.colors.mutedForeground }}>
+        {current ?? (compact && label ? label : placeholder)}
+      </RNText>
+      <RNText style={{ color: compact && value != null ? theme.colors.primaryForeground : theme.colors.mutedForeground }}>▾</RNText>
+    </Pressable>
+  );
+
+  return (
+    <>
+      {compact ? <View style={style}>{trigger}</View> : <FormField label={label} error={error} style={style}>{trigger}</FormField>}
+      <Sheet visible={open} onClose={close} title={title ?? label ?? placeholder} testID={id('sheet')}>
+        {searchable ? <SearchBar testID={id('search-input')} value={query} onChangeText={setQuery} style={{ marginBottom: theme.spacing.sm }} /> : null}
+        {clearLabel ? row('__clear', clearLabel, value == null, () => pick(null), id('clear')) : null}
+        {shown.map((o) => row(o.value, o.label, o.value === value, () => pick(o.value), id(`option-${o.value}`), o.description))}
+        {!shown.length ? <RNText style={{ color: theme.colors.mutedForeground, paddingVertical: theme.spacing.lg }}>No matches</RNText> : null}
+      </Sheet>
+    </>
+  );
+}

package/src/components/Sheet.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import { Modal, Pressable, ScrollView, Text as RNText, View, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from './ThemeProvider';
+import { sheetBackdropStyle, sheetGrabberStyle, sheetPanelStyle } from '../styles-overlay';
+import { textStyle } from '../styles';
+
+export interface SheetProps {
+  visible: boolean;
+  onClose: () => void;
+  title?: string;
+  children?: ReactNode;
+  /** Fraction of the window height the sheet may fill. Default 0.85. */
+  maxHeightRatio?: number;
+  testID?: string;
+}
+
+/** Bottom sheet over a dimmed backdrop. Tap the backdrop (or swipe back / hardware back) to dismiss. */
+export function Sheet({ visible, onClose, title, children, maxHeightRatio = 0.85, testID }: SheetProps) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const { height } = useWindowDimensions();
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose} testID={testID}>
+      <View style={{ flex: 1, justifyContent: 'flex-end' }}>
+        <Pressable
+          testID={testID ? `${testID}-backdrop` : undefined}
+          accessibilityRole="button"
+          accessibilityLabel="Dismiss"
+          onPress={onClose}
+          style={sheetBackdropStyle()}
+        />
+        <View accessibilityViewIsModal style={sheetPanelStyle(theme, height * maxHeightRatio, insets.bottom)}>
+          <View style={sheetGrabberStyle(theme)} />
+          {title ? <RNText accessibilityRole="header" style={[textStyle(theme, 'heading'), { marginBottom: theme.spacing.md }]}>{title}</RNText> : null}
+          <ScrollView keyboardShouldPersistTaps="handled">{children}</ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+}

package/src/components/StatusChip.tsx

@@ -0,0 +1,27 @@
+import { Text as RNText, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from './ThemeProvider';
+import { badgeStyle, badgeTextStyle } from '../styles';
+import { formatProgress, statusTone } from '../logic/status';
+
+export interface StatusChipProps {
+  /** Domain status, e.g. queued / processing / done / failed. */
+  status: string;
+  /** 0..1. Appends a percent to the label. */
+  progress?: number;
+  /** Overrides the derived label. */
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** Badge that maps a domain status (and optional progress) to a themed variant. */
+export function StatusChip({ status, progress, label, style, testID }: StatusChipProps) {
+  const theme = useTheme();
+  const tone = statusTone(status);
+  const text = `${label ?? tone.label}${progress != null ? ` ${formatProgress(progress)}` : ''}`;
+  return (
+    <View testID={testID} accessible accessibilityLabel={text} style={[badgeStyle(theme, tone.variant), style]}>
+      <RNText style={badgeTextStyle(theme, tone.variant)}>{text}</RNText>
+    </View>
+  );
+}

package/src/components/SwipeRow.tsx

@@ -0,0 +1,85 @@
+import { useMemo, useRef, type ReactNode } from 'react';
+import { Animated, PanResponder, Pressable, Text as RNText, View } from 'react-native';
+import { useTheme } from './ThemeProvider';
+import { swipeActionStyle, swipeActionTextStyle, type SwipeTone } from '../styles-overlay';
+import { clampSwipe, settleSwipe } from '../logic/swipe';
+
+export interface SwipeAction {
+  key: string;
+  label: string;
+  onPress: () => void;
+  tone?: SwipeTone;
+}
+
+export interface SwipeRowProps {
+  /** Trailing actions revealed by swiping left (and exposed to VoiceOver as custom actions). */
+  actions: SwipeAction[];
+  children: ReactNode;
+  /** Width of each action button. Default 84. */
+  actionWidth?: number;
+  /** Start with the actions revealed. */
+  defaultOpen?: boolean;
+  testID?: string;
+}
+
+/** Row that reveals trailing actions (done / delete ...) on a left swipe. Core RN only. */
+export function SwipeRow({ actions, children, actionWidth = 84, defaultOpen = false, testID }: SwipeRowProps) {
+  const theme = useTheme();
+  const total = actionWidth * actions.length;
+  const x = useRef(new Animated.Value(defaultOpen ? -total : 0)).current;
+  const offset = useRef(defaultOpen ? -total : 0);
+  const start = useRef(0);
+
+  const settle = (to: number) => {
+    offset.current = to;
+    Animated.spring(x, { toValue: to, useNativeDriver: true, bounciness: 0 }).start();
+  };
+
+  const pan = useMemo(
+    () =>
+      PanResponder.create({
+        // Horizontal intent only, so vertical list scrolling wins otherwise.
+        onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) > 10 && Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
+        onPanResponderGrant: () => { start.current = offset.current; },
+        onPanResponderMove: (_e, g) => x.setValue(clampSwipe(start.current + g.dx, total)),
+        onPanResponderRelease: (_e, g) => {
+          const at = clampSwipe(start.current + g.dx, total);
+          settle(settleSwipe(at, g.vx, total) === 'open' ? -total : 0);
+        },
+        onPanResponderTerminate: () => settle(offset.current),
+      }),
+    [total], // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  const run = (a: SwipeAction) => { settle(0); a.onPress(); };
+
+  return (
+    <View
+      testID={testID}
+      accessibilityActions={actions.map((a) => ({ name: a.key, label: a.label }))}
+      onAccessibilityAction={(e) => {
+        const a = actions.find((x2) => x2.key === e.nativeEvent.actionName);
+        if (a) a.onPress();
+      }}
+      style={{ overflow: 'hidden' }}
+    >
+      <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, flexDirection: 'row' }}>
+        {actions.map((a) => (
+          <Pressable
+            key={a.key}
+            testID={testID ? `${testID}-action-${a.key}` : undefined}
+            accessibilityRole="button"
+            accessibilityLabel={a.label}
+            onPress={() => run(a)}
+            style={swipeActionStyle(theme, a.tone ?? 'neutral', actionWidth)}
+          >
+            <RNText style={swipeActionTextStyle(theme, a.tone ?? 'neutral')}>{a.label}</RNText>
+          </Pressable>
+        ))}
+      </View>
+      <Animated.View {...pan.panHandlers} style={{ transform: [{ translateX: x }], backgroundColor: theme.colors.background }}>
+        {children}
+      </Animated.View>
+    </View>
+  );
+}

package/src/components/TextArea.tsx

@@ -0,0 +1,38 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Input, type InputProps } from './Input';
+import { FormField } from './FormField';
+
+export interface TextAreaProps extends Omit<InputProps, 'multiline' | 'invalid'> {
+  label?: string;
+  hint?: string;
+  error?: string;
+  required?: boolean;
+  /** Visible lines at rest. Default 4. */
+  rows?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+/** Multiline Input wrapped in a FormField (label, hint, error, optional char counter with maxLength). */
+export function TextArea({ label, hint, error, required, rows = 4, containerStyle, style, maxLength, value, accessibilityLabel, ...rest }: TextAreaProps) {
+  return (
+    <FormField
+      label={label}
+      hint={hint}
+      error={error}
+      required={required}
+      style={containerStyle}
+      footerRight={maxLength ? `${(value ?? '').length}/${maxLength}` : undefined}
+    >
+      <Input
+        multiline
+        textAlignVertical="top"
+        value={value}
+        maxLength={maxLength}
+        invalid={!!error}
+        accessibilityLabel={accessibilityLabel ?? label}
+        style={[{ minHeight: rows * 22 + 16 }, style]}
+        {...rest}
+      />
+    </FormField>
+  );
+}

package/src/components/Toast.tsx

@@ -0,0 +1,61 @@
+import { createContext, useContext, useEffect, useMemo, useRef, useSyncExternalStore, 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 { toastStyle, toastTextStyle } from '../styles-overlay';
+import { createToastStore, type ToastItem, type ToastOptions } from '../logic/toast';
+
+export type { ToastOptions, ToastTone } from '../logic/toast';
+
+export interface ToastApi {
+  show: (message: string, options?: ToastOptions) => string;
+  dismiss: (id: string) => void;
+  clear: () => void;
+}
+
+const ToastContext = createContext<ToastApi | null>(null);
+
+function ToastView({ toast, onDismiss }: { toast: ToastItem; onDismiss: (id: string) => void }) {
+  const theme = useTheme();
+  useEffect(() => {
+    if (toast.durationMs <= 0) return;
+    const t = setTimeout(() => onDismiss(toast.id), toast.durationMs);
+    return () => clearTimeout(t);
+  }, [toast.id, toast.durationMs, onDismiss]);
+  return (
+    <Pressable
+      testID={`toast-${toast.tone}`}
+      accessibilityRole="alert"
+      accessibilityLiveRegion="polite"
+      accessibilityLabel={toast.message}
+      accessibilityHint="Tap to dismiss"
+      onPress={() => onDismiss(toast.id)}
+      style={toastStyle(theme, toast.tone)}
+    >
+      <RNText style={toastTextStyle(theme, toast.tone)}>{toast.message}</RNText>
+    </Pressable>
+  );
+}
+
+/** Mount once near the root (inside ThemeProvider). Renders toasts at the top of the screen. */
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const store = useRef(createToastStore()).current;
+  const toasts = useSyncExternalStore(store.subscribe, store.getToasts, store.getToasts);
+  const api = useMemo<ToastApi>(() => ({ show: store.show, dismiss: store.dismiss, clear: store.clear }), [store]);
+  return (
+    <ToastContext.Provider value={api}>
+      {children}
+      <View pointerEvents="box-none" style={{ position: 'absolute', top: insets.top + theme.spacing.sm, left: theme.spacing.lg, right: theme.spacing.lg, gap: theme.spacing.sm }}>
+        {toasts.map((t) => <ToastView key={t.id} toast={t} onDismiss={store.dismiss} />)}
+      </View>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast(): ToastApi {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast must be used inside a <ToastProvider>');
+  return ctx;
+}