@startsimpli/ui-native 0.1.1 → 0.1.3

package/README.md

@@ -69,6 +69,19 @@ export default function App() {
 `theme={lightTheme | darkTheme | customTheme}` to pin it) and mounts a
 `SafeAreaProvider` so `Screen` can apply insets.
 
+## Tandem-screen primitives
+
+`Markdown`, `Sheet`, `Select`, `FormField`, `TextArea`, `SearchBar`, `Header`,
+`StatusChip`, `SwipeRow`, `ToastProvider`/`useToast`, `MessageBubble`,
+`ChatComposer`, `DataList` and `SectionedList`. Core React Native only (no
+gesture-handler, reanimated or markdown dependency).
+
+`DataList` / `SectionedList` are built for server-driven data and never filter,
+sort or slice rows themselves: debounced `search.onSearch`, `filters` +
+`onFilterChange`, `sort`, an active-filter summary with `onClearFilters`,
+`onRefresh`, `onLoadMore` guarded to one call per loaded length (`hasMore` /
+`loadingMore` footer), and distinct loading / empty / no-results / error states.
+
 ## Design tokens
 
 Tokens are the single source for color, spacing, type scale, radii, and

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui-native",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "React Native UI primitives for StartSimpli apps (View/Text/Pressable), fed by shared design tokens",
   "license": "MIT",
   "homepage": "https://startsimpli.com",
@@ -51,6 +51,7 @@
     "react-native": "0.85.3",
     "react-native-safe-area-context": "~5.7.0",
     "react-native-svg": "15.15.4",
+    "react-test-renderer": "19.2.5",
     "typescript": "^6.0.3",
     "vitest": "^4.1.5"
   },

package/src/__tests__/forms.test.tsx

@@ -0,0 +1,169 @@
+import { describe, it, expect } from 'vitest';
+import { render, renderDark, allText, hostById, maybeById, press, act, flat } from '../../test/render';
+import { Markdown } from '../components/Markdown';
+import { Sheet } from '../components/Sheet';
+import { Select } from '../components/Select';
+import { TextArea } from '../components/TextArea';
+import { FormField } from '../components/FormField';
+import { SearchBar } from '../components/SearchBar';
+import { Header } from '../components/Header';
+import { StatusChip } from '../components/StatusChip';
+import * as RN from 'react-native';
+import { Text } from '../components/Text';
+
+describe('Markdown', () => {
+  const src = '# Title\n\nHello **bold** and [link](https://a.com)\n\n- one\n- two\n\n1. first';
+  it('renders headings as headers, list markers and bold weight', () => {
+    const r = render(<Markdown testID="md">{src}</Markdown>);
+    const t = allText(r);
+    expect(t).toContain('Title');
+    expect(t).toContain('•');
+    expect(t).toContain('1.');
+    const header = r.root.findAll((n) => n.props.accessibilityRole === 'header');
+    expect(header.length).toBe(1);
+    const bold = r.root.findAll((n) => n.type === 'Text' && flat(n.props.style).fontWeight === '700' && n.children.includes('bold'));
+    expect(bold.length).toBe(1);
+  });
+  it('links open via onLinkPress, default Linking, and take the primary colour per scheme', () => {
+    const calls: string[] = [];
+    const r = render(<Markdown onLinkPress={(u) => calls.push(u)}>{src}</Markdown>);
+    const link = r.root.findAll((n) => n.props.accessibilityRole === 'link')[0];
+    act(() => link.props.onPress());
+    expect(calls).toEqual(['https://a.com']);
+    const r2 = render(<Markdown>{src}</Markdown>);
+    act(() => r2.root.findAll((n) => n.props.accessibilityRole === 'link')[0].props.onPress());
+    expect((RN as any).opened).toContain('https://a.com');
+    const light = flat(link.props.style).color;
+    const dark = flat(renderDark(<Markdown>{src}</Markdown>).root.findAll((n) => n.props.accessibilityRole === 'link')[0].props.style).color;
+    expect(light).not.toBe(dark);
+  });
+  it('renders nothing for blank source', () => {
+    expect(allText(render(<Markdown>{'  '}</Markdown>))).toBe('');
+  });
+});
+
+describe('Sheet', () => {
+  it('renders nothing when closed, title + content when open', () => {
+    expect(allText(render(<Sheet visible={false} onClose={() => {}} title="T"><Text>body</Text></Sheet>))).toBe('');
+    const r = render(<Sheet visible onClose={() => {}} title="Pick" testID="s"><Text>body</Text></Sheet>);
+    expect(allText(r)).toContain('Pick');
+    expect(allText(r)).toContain('body');
+  });
+  it('backdrop dismisses and is labelled', () => {
+    let closed = 0;
+    const r = render(<Sheet visible onClose={() => closed++} testID="s"><Text>b</Text></Sheet>);
+    const bd = hostById(r, 's-backdrop');
+    expect(bd.props.accessibilityLabel).toBe('Dismiss');
+    press(bd);
+    expect(closed).toBe(1);
+  });
+});
+
+describe('Select', () => {
+  const options = [{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }, { value: 'c', label: 'Gamma' }];
+  it('shows placeholder then selected label; opens sheet; picks option', () => {
+    const picks: (string | null)[] = [];
+    const r = render(<Select testID="sel" label="Project" options={options} value={null} onChange={(v) => picks.push(v)} placeholder="Choose" />);
+    expect(allText(r)).toContain('Choose');
+    expect(maybeById(r, 'sel-sheet')).toHaveLength(0);
+    press(hostById(r, 'sel'));
+    expect(maybeById(r, 'sel-option-b')).toHaveLength(1);
+    press(hostById(r, 'sel-option-b'));
+    expect(picks).toEqual(['b']);
+    expect(maybeById(r, 'sel-option-b')).toHaveLength(0); // closed
+  });
+  it('trigger is an accessible button with the current value', () => {
+    const r = render(<Select testID="sel" label="Project" options={options} value="c" onChange={() => {}} />);
+    const t = hostById(r, 'sel');
+    expect(t.props.accessibilityRole).toBe('button');
+    expect(t.props.accessibilityLabel).toBe('Project: Gamma');
+  });
+  it('searchable filters the options', () => {
+    const r = render(<Select testID="sel" options={options} value={null} onChange={() => {}} searchable />);
+    press(hostById(r, 'sel'));
+    act(() => hostById(r, 'sel-search-input').props.onChangeText('gam'));
+    expect(maybeById(r, 'sel-option-a')).toHaveLength(0);
+    expect(maybeById(r, 'sel-option-c')).toHaveLength(1);
+  });
+  it('clearLabel offers an explicit "all" row that emits null', () => {
+    const picks: (string | null)[] = [];
+    const r = render(<Select testID="sel" options={options} value="a" onChange={(v) => picks.push(v)} clearLabel="All projects" />);
+    press(hostById(r, 'sel'));
+    press(hostById(r, 'sel-clear'));
+    expect(picks).toEqual([null]);
+  });
+});
+
+describe('TextArea + FormField', () => {
+  it('multiline input with label, hint and error alert', () => {
+    const r = render(<TextArea testID="ta" label="Notes" hint="Optional" error="Too short" value="x" onChangeText={() => {}} />);
+    const input = hostById(r, 'ta');
+    expect(input.props.multiline).toBe(true);
+    expect(input.props.accessibilityLabel).toBe('Notes');
+    expect(allText(r)).toContain('Notes');
+    expect(allText(r)).toContain('Too short');
+    expect(allText(r)).not.toContain('Optional'); // error replaces hint
+    expect(r.root.findAll((n) => n.props.accessibilityRole === 'alert').length).toBeGreaterThan(0);
+  });
+  it('shows a character counter with maxLength', () => {
+    const r = render(<TextArea testID="ta" value="abc" onChangeText={() => {}} maxLength={10} />);
+    expect(allText(r)).toContain('3/10');
+  });
+  it('FormField marks required and shows hint without error', () => {
+    const r = render(<FormField label="Name" required hint="Your name"><Text>child</Text></FormField>);
+    expect(allText(r)).toContain('Name');
+    expect(allText(r)).toContain('*');
+    expect(allText(r)).toContain('Your name');
+    expect(allText(r)).toContain('child');
+  });
+});
+
+describe('SearchBar', () => {
+  it('reports text, submit, and clears with an accessible button', () => {
+    const log: string[] = [];
+    const r = render(<SearchBar testID="sb" value="milk" onChangeText={(t) => log.push('t:' + t)} onSubmit={(t) => log.push('s:' + t)} onClear={() => log.push('clear')} />);
+    const input = hostById(r, 'sb');
+    expect(input.props.returnKeyType).toBe('search');
+    act(() => input.props.onChangeText('mil'));
+    act(() => input.props.onSubmitEditing({ nativeEvent: { text: 'mil' } }));
+    const clear = hostById(r, 'sb-clear');
+    expect(clear.props.accessibilityLabel).toBe('Clear search');
+    press(clear);
+    expect(log).toEqual(['t:mil', 's:milk', 't:', 'clear']);
+  });
+  it('no clear button when empty', () => {
+    expect(maybeById(render(<SearchBar testID="sb" value="" onChangeText={() => {}} />), 'sb-clear')).toHaveLength(0);
+  });
+});
+
+describe('Header', () => {
+  it('title, subtitle, back and trailing', () => {
+    let back = 0;
+    const r = render(<Header testID="h" title="Note" subtitle="Today" onBack={() => back++} trailing={<Text>Edit</Text>} />);
+    expect(allText(r)).toContain('Note');
+    expect(allText(r)).toContain('Today');
+    expect(allText(r)).toContain('Edit');
+    const b = hostById(r, 'h-back');
+    expect(b.props.accessibilityLabel).toBe('Back');
+    press(b);
+    expect(back).toBe(1);
+    expect(r.root.findAll((n) => n.props.accessibilityRole === 'header').length).toBeGreaterThan(0);
+  });
+  it('no back button without onBack', () => {
+    expect(maybeById(render(<Header testID="h" title="Home" />), 'h-back')).toHaveLength(0);
+  });
+});
+
+describe('StatusChip', () => {
+  it('maps status to label and variant colours', () => {
+    const ok = render(<StatusChip testID="c" status="done" />);
+    expect(allText(ok)).toContain('Done');
+    const bad = render(<StatusChip testID="c" status="failed" />);
+    expect(flat(hostById(ok, 'c').props.style).backgroundColor).not.toBe(flat(hostById(bad, 'c').props.style).backgroundColor);
+  });
+  it('shows progress percent and a labelled bar', () => {
+    const r = render(<StatusChip testID="c" status="processing" progress={0.42} />);
+    expect(allText(r)).toContain('42%');
+    expect(hostById(r, 'c').props.accessibilityLabel).toBe('Processing 42%');
+  });
+});

package/src/__tests__/interactive.test.tsx

@@ -0,0 +1,117 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, allText, hostById, maybeById, press, act, flat, texts } from '../../test/render';
+import { SwipeRow } from '../components/SwipeRow';
+import { ToastProvider, useToast } from '../components/Toast';
+import { MessageBubble } from '../components/MessageBubble';
+import { ChatComposer } from '../components/ChatComposer';
+import { Text } from '../components/Text';
+
+describe('SwipeRow', () => {
+  const mk = (log: string[]) => (
+    <SwipeRow testID="row" actions={[
+      { key: 'done', label: 'Done', tone: 'success', onPress: () => log.push('done') },
+      { key: 'delete', label: 'Delete', tone: 'destructive', onPress: () => log.push('delete') },
+    ]}><Text>Buy milk</Text></SwipeRow>
+  );
+  it('renders content and tappable actions', () => {
+    const log: string[] = [];
+    const r = render(mk(log));
+    expect(allText(r)).toContain('Buy milk');
+    press(hostById(r, 'row-action-delete'));
+    press(hostById(r, 'row-action-done'));
+    expect(log).toEqual(['delete', 'done']);
+  });
+  it('exposes actions to VoiceOver without swiping', () => {
+    const log: string[] = [];
+    const r = render(mk(log));
+    const row = hostById(r, 'row');
+    expect(row.props.accessibilityActions).toEqual([{ name: 'done', label: 'Done' }, { name: 'delete', label: 'Delete' }]);
+    act(() => row.props.onAccessibilityAction({ nativeEvent: { actionName: 'delete' } }));
+    expect(log).toEqual(['delete']);
+  });
+  it('defaultOpen starts with the actions revealed', () => {
+    const r = render(<SwipeRow testID="row" defaultOpen actions={[{ key: 'a', label: 'A', onPress: () => {} }, { key: 'b', label: 'B', onPress: () => {} }]}><Text>x</Text></SwipeRow>);
+    const view = r.root.findAll((n) => n.props.__cfg)[0];
+    expect(view.props.style.transform[0].translateX.v).toBe(-168);
+  });
+  it('pan handler opens past half and closes on slow short drag', () => {
+    const r = render(mk([]));
+    const cfg = r.root.findAll((n) => n.props.__cfg)[0]?.props.__cfg ?? (r.root.findAll((n) => n.props.panHandlers)[0]?.props.panHandlers.__cfg);
+    expect(cfg).toBeTruthy();
+    expect(cfg.onMoveShouldSetPanResponder({}, { dx: -20, dy: 2 })).toBe(true);
+    expect(cfg.onMoveShouldSetPanResponder({}, { dx: 3, dy: 30 })).toBe(false); // vertical scroll wins
+  });
+});
+
+describe('Toast', () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+  function Trigger({ opts }: { opts?: any }) {
+    const toast = useToast();
+    return <Text testID="go" onPress={() => toast.show('Saved!', opts)}>go</Text>;
+  }
+  it('shows a toast, then auto-dismisses after durationMs', () => {
+    const r = render(<ToastProvider><Trigger /></ToastProvider>);
+    act(() => hostById(r, 'go').props.onPress());
+    expect(allText(r)).toContain('Saved!');
+    act(() => { vi.advanceTimersByTime(3001); });
+    expect(allText(r)).not.toContain('Saved!');
+  });
+  it('durationMs 0 sticks until tapped; role alert for errors', () => {
+    const r = render(<ToastProvider><Trigger opts={{ tone: 'error', durationMs: 0 }} /></ToastProvider>);
+    act(() => hostById(r, 'go').props.onPress());
+    act(() => { vi.advanceTimersByTime(60000); });
+    expect(allText(r)).toContain('Saved!');
+    const t = r.root.findAll((n) => n.props.accessibilityRole === 'alert')[0];
+    expect(t).toBeTruthy();
+    act(() => t.props.onPress());
+    expect(allText(r)).not.toContain('Saved!');
+  });
+  it('useToast without a provider throws a clear error', () => {
+    expect(() => render(<Trigger />)).toThrow(/ToastProvider/);
+  });
+});
+
+describe('MessageBubble', () => {
+  it('user bubbles right, assistant left, colours differ', () => {
+    const u = render(<MessageBubble testID="b" role="user" text="hi" />);
+    const a = render(<MessageBubble testID="b" role="assistant" text="hello" />);
+    expect(flat(hostById(u, 'b').props.style).alignSelf).toBe('flex-end');
+    expect(flat(hostById(a, 'b').props.style).alignSelf).toBe('flex-start');
+    expect(flat(hostById(u, 'b').props.style).backgroundColor).not.toBe(flat(hostById(a, 'b').props.style).backgroundColor);
+  });
+  it('assistant text renders markdown', () => {
+    const a = render(<MessageBubble testID="b" role="assistant" text={'- one\n- two'} />);
+    expect(allText(a)).toContain('•');
+  });
+  it('pending shows indicator, error offers retry', () => {
+    let retried = 0;
+    const p = render(<MessageBubble testID="b" role="assistant" text="" pending />);
+    expect(hostById(p, 'b').props.accessibilityLabel).toMatch(/typing|thinking/i);
+    const e = render(<MessageBubble testID="b" role="user" text="x" error onRetry={() => retried++} />);
+    press(hostById(e, 'b-retry'));
+    expect(retried).toBe(1);
+  });
+});
+
+describe('ChatComposer', () => {
+  it('keyboard-avoiding wrapper, send disabled until text', () => {
+    const sent: string[] = [];
+    const r = render(<ChatComposer testID="c" onSend={(t) => sent.push(t)} placeholder="Ask" />);
+    expect(r.root.findAllByType('KeyboardAvoidingView' as any).length).toBe(1);
+    const send = hostById(r, 'c-send');
+    expect(send.props.accessibilityLabel).toBe('Send message');
+    expect(send.props.disabled).toBe(true);
+    act(() => hostById(r, 'c-input').props.onChangeText('  hello '));
+    expect(hostById(r, 'c-send').props.disabled).toBe(false);
+    press(hostById(r, 'c-send'));
+    expect(sent).toEqual(['hello']);
+    expect(hostById(r, 'c-input').props.value).toBe(''); // uncontrolled clears
+  });
+  it('controlled mode does not clear; sending disables', () => {
+    const sent: string[] = [];
+    const r = render(<ChatComposer testID="c" value="q" onChangeText={() => {}} onSend={(t) => sent.push(t)} sending />);
+    expect(hostById(r, 'c-send').props.disabled).toBe(true);
+    expect(hostById(r, 'c-input').props.value).toBe('q');
+  });
+});

package/src/__tests__/lists.test.tsx

@@ -0,0 +1,190 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, allText, hostById, maybeById, press, act } from '../../test/render';
+import { DataList } from '../components/DataList';
+import { SectionedList } from '../components/SectionedList';
+import { Text } from '../components/Text';
+import { ThemeProvider } from '../components/ThemeProvider';
+import { create } from 'react-test-renderer';
+
+type Row = { id: string; name: string };
+const rows: Row[] = [{ id: '1', name: 'Alpha' }, { id: '2', name: 'Beta' }];
+const base = {
+  testID: 'l',
+  data: rows,
+  keyExtractor: (r: Row) => r.id,
+  renderItem: ({ item }: { item: Row }) => <Text>{item.name}</Text>,
+};
+
+describe('DataList states', () => {
+  it('loading shows skeletons only when no rows', () => {
+    const r = render(<DataList {...base} data={[]} loading />);
+    expect(maybeById(r, 'l-loading')).toHaveLength(1);
+    const r2 = render(<DataList {...base} loading />);
+    expect(maybeById(r2, 'l-loading')).toHaveLength(0);
+    expect(allText(r2)).toContain('Alpha');
+  });
+  it('error with retry', () => {
+    let n = 0;
+    const r = render(<DataList {...base} data={[]} error="Network down" onRetry={() => n++} />);
+    expect(allText(r)).toContain('Network down');
+    press(hostById(r, 'l-retry'));
+    expect(n).toBe(1);
+  });
+  it('empty vs noResults are distinct copy; noResults offers clear', () => {
+    const e = render(<DataList {...base} data={[]} emptyTitle="Nothing yet" noResultsTitle="No matches" />);
+    expect(allText(e)).toContain('Nothing yet');
+    let cleared = 0;
+    const nr = render(<DataList {...base} data={[]} emptyTitle="Nothing yet" noResultsTitle="No matches" search={{ value: 'zzz', onChange: () => {}, onSearch: () => {} }} onClearFilters={() => cleared++} />);
+    expect(allText(nr)).toContain('No matches');
+    expect(allText(nr)).not.toContain('Nothing yet');
+    press(hostById(nr, 'l-empty-clear'));
+    expect(cleared).toBe(1);
+  });
+  it('renders exactly the rows it is given: no client-side filter or sort', () => {
+    const r = render(<DataList {...base} data={[{ id: '9', name: 'Zulu' }, ...rows]} search={{ value: 'alpha', onChange: () => {}, onSearch: () => {} }} />);
+    const t = allText(r);
+    expect(t.indexOf('Zulu')).toBeGreaterThan(-1);
+    expect(t.indexOf('Zulu')).toBeLessThan(t.indexOf('Alpha'));
+    expect(t).toContain('Beta');
+  });
+});
+
+describe('DataList search debounce', () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+  it('onChange is immediate, onSearch fires once after debounceMs', () => {
+    const changes: string[] = []; const searches: string[] = [];
+    const r = render(<DataList {...base} search={{ value: '', onChange: (t) => changes.push(t), onSearch: (t) => searches.push(t), debounceMs: 250 }} />);
+    const input = () => hostById(r, 'l-search');
+    act(() => input().props.onChangeText('m'));
+    act(() => { vi.advanceTimersByTime(100); });
+    act(() => input().props.onChangeText('mi'));
+    act(() => { vi.advanceTimersByTime(249); });
+    expect(searches).toEqual([]);
+    act(() => { vi.advanceTimersByTime(1); });
+    expect(changes).toEqual(['m', 'mi']);
+    expect(searches).toEqual(['mi']);
+  });
+  it('submit flushes immediately and does not double-fire', () => {
+    const searches: string[] = [];
+    const r = render(<DataList {...base} search={{ value: 'milk', onChange: () => {}, onSearch: (t) => searches.push(t), debounceMs: 250 }} />);
+    act(() => hostById(r, 'l-search').props.onChangeText('milk'));
+    act(() => hostById(r, 'l-search').props.onSubmitEditing({ nativeEvent: { text: 'milk' } }));
+    act(() => { vi.advanceTimersByTime(1000); });
+    expect(searches).toEqual(['milk']);
+  });
+  it('clear button searches empty immediately', () => {
+    const searches: string[] = []; const changes: string[] = [];
+    const r = render(<DataList {...base} search={{ value: 'milk', onChange: (t) => changes.push(t), onSearch: (t) => searches.push(t) }} />);
+    press(hostById(r, 'l-search-clear'));
+    expect(changes).toEqual(['']);
+    expect(searches).toEqual(['']);
+  });
+});
+
+describe('DataList filters, sort, summary', () => {
+  const filters = [
+    { key: 'status', label: 'Status', value: 'open', options: [{ value: 'open', label: 'Open' }, { value: 'done', label: 'Done' }] },
+    { key: 'project', label: 'Project', value: null, display: 'select' as const, options: [{ value: 'p1', label: 'Alpha' }] },
+  ];
+  it('chip tap selects; tapping the active chip clears that filter', () => {
+    const log: any[] = [];
+    const r = render(<DataList {...base} filters={filters} onFilterChange={(k, v) => log.push([k, v])} />);
+    press(hostById(r, 'l-filter-status-done'));
+    press(hostById(r, 'l-filter-status-open'));
+    expect(log).toEqual([['status', 'done'], ['status', null]]);
+  });
+  it('select-style groups open a sheet picker', () => {
+    const log: any[] = [];
+    const r = render(<DataList {...base} filters={filters} onFilterChange={(k, v) => log.push([k, v])} />);
+    press(hostById(r, 'l-filter-project'));
+    press(hostById(r, 'l-filter-project-option-p1'));
+    expect(log).toEqual([['project', 'p1']]);
+  });
+  it('active-filter summary with count, and clear-all', () => {
+    let cleared = 0;
+    const r = render(<DataList {...base} filters={filters} search={{ value: 'milk', onChange: () => {}, onSearch: () => {} }} onFilterChange={() => {}} onClearFilters={() => cleared++} />);
+    expect(allText(r)).toContain('Status: Open');
+    expect(allText(r)).toContain('"milk"');
+    const clear = hostById(r, 'l-clear-filters');
+    expect(clear.props.accessibilityLabel).toBe('Clear 2 filters');
+    press(clear);
+    expect(cleared).toBe(1);
+  });
+  it('no summary when nothing is active', () => {
+    const r = render(<DataList {...base} filters={[{ ...filters[0], value: null }]} onFilterChange={() => {}} onClearFilters={() => {}} />);
+    expect(maybeById(r, 'l-clear-filters')).toHaveLength(0);
+  });
+  it('sort control emits the chosen option', () => {
+    const log: string[] = [];
+    const r = render(<DataList {...base} sort={{ value: 'new', options: [{ value: 'new', label: 'Newest' }, { value: 'old', label: 'Oldest' }], onChange: (v) => log.push(v) }} />);
+    expect(allText(r)).toContain('Oldest');
+    press(hostById(r, 'l-sort-old'));
+    expect(log).toEqual(['old']);
+  });
+});
+
+describe('DataList paging and refresh', () => {
+  const list = (r: any) => r.root.findByType('FlatList' as any);
+  it('end reached fetches once per page length (no duplicate fetches)', () => {
+    let n = 0;
+    const r = render(<DataList {...base} hasMore onLoadMore={() => n++} />);
+    act(() => list(r).props.onEndReached());
+    act(() => list(r).props.onEndReached());
+    act(() => list(r).props.onEndReached());
+    expect(n).toBe(1);
+    r.update(<></>);
+  });
+  it('same instance: grows then fetches again; hasMore false / loadingMore block', () => {
+    let n = 0;
+    const wrap = (p: any) => <ThemeProvider><DataList {...base} onLoadMore={() => n++} {...p} /></ThemeProvider>;
+    const a = act;
+    let r: any;
+    a(() => { r = create(wrap({ hasMore: true })); });
+    const fl = () => r.root.findByType('FlatList');
+    a(() => fl().props.onEndReached());
+    a(() => r.update(wrap({ hasMore: true, loadingMore: true })));
+    a(() => fl().props.onEndReached());
+    a(() => r.update(wrap({ hasMore: true, data: [...rows, { id: '3', name: 'G' }] })));
+    a(() => fl().props.onEndReached());
+    a(() => r.update(wrap({ hasMore: false, data: [...rows, { id: '3', name: 'G' }, { id: '4', name: 'H' }] })));
+    a(() => fl().props.onEndReached());
+    expect(n).toBe(2);
+  });
+  it('footer: spinner while loadingMore, retry row on paging error', () => {
+    const r = render(<DataList {...base} hasMore loadingMore />);
+    expect(maybeById(r, 'l-footer-loading')).toHaveLength(1);
+    let retry = 0;
+    const e = render(<DataList {...base} hasMore error="Page failed" onRetry={() => retry++} />);
+    expect(allText(e)).toContain('Page failed');
+    expect(maybeById(e, 'l-footer-loading')).toHaveLength(0);
+    press(hostById(e, 'l-footer-retry'));
+    expect(retry).toBe(1);
+  });
+  it('pull to refresh wires refreshing/onRefresh', () => {
+    let n = 0;
+    const r = render(<DataList {...base} refreshing onRefresh={() => n++} />);
+    const rc = list(r).props.refreshControl;
+    expect(rc.props.refreshing).toBe(true);
+    rc.props.onRefresh();
+    expect(n).toBe(1);
+  });
+});
+
+describe('SectionedList', () => {
+  const sections = [{ title: 'Today', data: [{ id: '1', name: 'A' }] }, { title: 'Earlier', data: [{ id: '2', name: 'B' }] }];
+  it('renders section headers and rows; headers are accessibility headers', () => {
+    const r = render(<SectionedList testID="s" sections={sections} keyExtractor={(i: Row) => i.id} renderItem={({ item }: any) => <Text>{item.name}</Text>} />);
+    const t = allText(r);
+    expect(t).toContain('Today'); expect(t).toContain('Earlier'); expect(t).toContain('A'); expect(t).toContain('B');
+    expect(r.root.findAll((n) => n.props.accessibilityRole === 'header').length).toBe(2);
+  });
+  it('shares the empty/error states and paging guard', () => {
+    let n = 0;
+    const r = render(<SectionedList testID="s" sections={[]} emptyTitle="No groups" keyExtractor={(i: Row) => i.id} renderItem={() => null} hasMore onLoadMore={() => n++} />);
+    expect(allText(r)).toContain('No groups');
+    const l = r.root.findByType('SectionList' as any);
+    act(() => l.props.onEndReached()); act(() => l.props.onEndReached());
+    expect(n).toBe(1);
+  });
+});

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

@@ -0,0 +1,88 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { resolveListState, createLoadMoreGuard, createDebouncer, summarizeFilters } from '../logic/listState';
+
+describe('resolveListState', () => {
+  it('loading only when nothing is shown yet', () => {
+    expect(resolveListState({ itemCount: 0, loading: true })).toBe('loading');
+    expect(resolveListState({ itemCount: 5, loading: true })).toBe('content');
+  });
+  it('refreshing an empty list is not the skeleton', () => {
+    expect(resolveListState({ itemCount: 0, loading: true, refreshing: true })).toBe('empty');
+  });
+  it('error wins over empty but not over content', () => {
+    expect(resolveListState({ itemCount: 0, error: 'boom' })).toBe('error');
+    expect(resolveListState({ itemCount: 2, error: 'boom' })).toBe('content');
+  });
+  it('empty with an active query/filter is noResults', () => {
+    expect(resolveListState({ itemCount: 0, hasActiveQuery: true })).toBe('noResults');
+    expect(resolveListState({ itemCount: 0 })).toBe('empty');
+  });
+});
+
+describe('createLoadMoreGuard', () => {
+  const ok = { hasMore: true, loading: false, loadingMore: false, error: false };
+  it('allows one fetch per data length (no duplicate pages)', () => {
+    const g = createLoadMoreGuard();
+    expect(g.tryStart(ok, 20)).toBe(true);
+    expect(g.tryStart(ok, 20)).toBe(false);
+    expect(g.tryStart(ok, 20)).toBe(false);
+    expect(g.tryStart(ok, 40)).toBe(true);
+  });
+  it('refuses when no more, loading, loadingMore or error', () => {
+    const g = createLoadMoreGuard();
+    expect(g.tryStart({ ...ok, hasMore: false }, 1)).toBe(false);
+    expect(g.tryStart({ ...ok, loading: true }, 2)).toBe(false);
+    expect(g.tryStart({ ...ok, loadingMore: true }, 3)).toBe(false);
+    expect(g.tryStart({ ...ok, error: true }, 4)).toBe(false);
+  });
+  it('refused attempts do not burn the token', () => {
+    const g = createLoadMoreGuard();
+    g.tryStart({ ...ok, loadingMore: true }, 20);
+    expect(g.tryStart(ok, 20)).toBe(true);
+  });
+  it('reset allows retrying the same length (refresh / retry / new query)', () => {
+    const g = createLoadMoreGuard();
+    g.tryStart(ok, 20);
+    g.reset();
+    expect(g.tryStart(ok, 20)).toBe(true);
+  });
+});
+
+describe('createDebouncer', () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+  it('fires once with the last value after the quiet period', () => {
+    const fn = vi.fn();
+    const d = createDebouncer(fn, 300);
+    d.call('a'); vi.advanceTimersByTime(200);
+    d.call('ab'); vi.advanceTimersByTime(299);
+    expect(fn).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(1);
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith('ab');
+  });
+  it('flush fires immediately, cancel drops', () => {
+    const fn = vi.fn();
+    const d = createDebouncer(fn, 300);
+    d.call('x'); d.flush();
+    expect(fn).toHaveBeenCalledWith('x');
+    d.call('y'); d.cancel(); vi.advanceTimersByTime(1000);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('summarizeFilters', () => {
+  const groups = [
+    { key: 'project', label: 'Project', options: [{ value: 'p1', label: 'Alpha' }], value: 'p1' },
+    { key: 'status', label: 'Status', options: [{ value: 'open', label: 'Open' }], value: null },
+  ];
+  it('lists only active groups with option labels', () => {
+    expect(summarizeFilters(groups)).toEqual({ count: 1, labels: ['Project: Alpha'] });
+  });
+  it('counts a search query', () => {
+    expect(summarizeFilters(groups, 'milk')).toEqual({ count: 2, labels: ['Project: Alpha', '"milk"'] });
+  });
+  it('empty when nothing active', () => {
+    expect(summarizeFilters([groups[1]], '  ')).toEqual({ count: 0, labels: [] });
+  });
+});

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

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest';
+import { parseMarkdown, parseInline } from '../logic/markdown';
+
+describe('parseInline', () => {
+  it('plain text', () => expect(parseInline('hi')).toEqual([{ type: 'text', text: 'hi' }]));
+  it('bold, italic, code', () => {
+    expect(parseInline('a **b** *c* `d`')).toEqual([
+      { type: 'text', text: 'a ' },
+      { type: 'bold', children: [{ type: 'text', text: 'b' }] },
+      { type: 'text', text: ' ' },
+      { type: 'italic', children: [{ type: 'text', text: 'c' }] },
+      { type: 'text', text: ' ' },
+      { type: 'code', text: 'd' },
+    ]);
+  });
+  it('links keep http(s)/mailto/tel only', () => {
+    expect(parseInline('[x](https://a.com)')).toEqual([{ type: 'link', href: 'https://a.com', children: [{ type: 'text', text: 'x' }] }]);
+    expect(parseInline('[x](javascript:alert(1))')).toEqual([{ type: 'text', text: 'x' }]);
+  });
+  it('unclosed markers stay literal', () => expect(parseInline('a **b')).toEqual([{ type: 'text', text: 'a **b' }]));
+  it('bold with nested italic', () => {
+    expect(parseInline('**a *b***')).toEqual([{ type: 'bold', children: [{ type: 'text', text: 'a ' }, { type: 'italic', children: [{ type: 'text', text: 'b' }] }] }]);
+  });
+});
+
+describe('parseMarkdown', () => {
+  it('headings, paragraphs, bullets, numbered, quote, rule, code', () => {
+    const src = ['# T', '', 'para one', 'still one', '', '- a', '* b **x**', '', '1. one', '2. two', '', '> q', '', '---', '', '```', 'code **raw**', '```'].join('\n');
+    const b = parseMarkdown(src);
+    expect(b.map((x) => x.type)).toEqual(['heading', 'paragraph', 'bullets', 'numbered', 'quote', 'rule', 'code']);
+    expect(b[0]).toMatchObject({ type: 'heading', level: 1 });
+    expect(b[1]).toEqual({ type: 'paragraph', inlines: [{ type: 'text', text: 'para one\nstill one' }] });
+    expect((b[2] as any).items).toHaveLength(2);
+    expect(b[6]).toEqual({ type: 'code', text: 'code **raw**' });
+  });
+  it('heading levels clamp to 3', () => expect(parseMarkdown('#### deep')[0]).toMatchObject({ type: 'heading', level: 3 }));
+  it('empty / whitespace gives no blocks', () => expect(parseMarkdown('  \n\n')).toEqual([]));
+  it('unterminated code fence consumes the rest', () => expect(parseMarkdown('```\na\nb')).toEqual([{ type: 'code', text: 'a\nb' }]));
+});