@startsimpli/ui-native 0.1.0 → 0.1.2

package/src/components/serverListTypes.ts

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react';
+import type { FilterGroup } from '../logic/listState';
+
+export type { FilterGroup, FilterOption } from '../logic/listState';
+
+export interface ListSearch {
+  /** Controlled text shown in the field. */
+  value: string;
+  /** Fires on every keystroke (update your input state here). */
+  onChange: (text: string) => void;
+  /** Fires debounced, and immediately on submit / clear. Run the server query here. */
+  onSearch: (text: string) => void;
+  debounceMs?: number;
+  placeholder?: string;
+}
+
+export interface ListSort {
+  value: string;
+  options: Array<{ value: string; label: string }>;
+  onChange: (value: string) => void;
+}
+
+/**
+ * Props shared by DataList and SectionedList. Everything is server-driven: the
+ * list never filters, sorts or slices rows itself, it only reports what the user
+ * asked for and renders what it is given.
+ */
+export interface ServerListProps {
+  loading?: boolean;
+  refreshing?: boolean;
+  onRefresh?: () => void;
+  /** Error message. With no rows it is the full-screen error; with rows it is the paging footer error. */
+  error?: string | null;
+  onRetry?: () => void;
+  hasMore?: boolean;
+  loadingMore?: boolean;
+  /** Called at most once per loaded length when the end is reached. */
+  onLoadMore?: () => void;
+  search?: ListSearch;
+  filters?: FilterGroup[];
+  /** value null clears that group. */
+  onFilterChange?: (key: string, value: string | null) => void;
+  /** Clears search text and every filter. Shown in the summary and the no-results state. */
+  onClearFilters?: () => void;
+  sort?: ListSort;
+  emptyTitle?: string;
+  emptyDescription?: string;
+  noResultsTitle?: string;
+  noResultsDescription?: string;
+  /** Rendered above the rows inside the scroll area. */
+  ListHeaderComponent?: ReactNode;
+  testID?: string;
+}

package/src/components/useServerList.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useRef, type ReactElement } from 'react';
+import { RefreshControl, Text as RNText, View } from 'react-native';
+import { Button } from './Button';
+import { EmptyState } from './EmptyState';
+import { SkeletonList } from './SkeletonList';
+import { Spinner } from './Spinner';
+import { useTheme } from './ThemeProvider';
+import { errorTextColor } from '../styles-overlay';
+import { createLoadMoreGuard, resolveListState, summarizeFilters } from '../logic/listState';
+import type { ServerListProps } from './serverListTypes';
+
+/** Behaviour shared by DataList and SectionedList: state views, the paging guard, footer and refresh control. */
+export function useServerList(p: ServerListProps, itemCount: number) {
+  const theme = useTheme();
+  const guard = useRef(createLoadMoreGuard()).current;
+  const id = (s: string) => (p.testID ? `${p.testID}-${s}` : undefined);
+  const summary = summarizeFilters(p.filters ?? [], p.search?.value ?? '');
+  const signature = `${summary.labels.join('|')}#${p.sort?.value ?? ''}`;
+
+  // A new query, refresh or initial load starts a new paging sequence.
+  useEffect(() => { guard.reset(); }, [guard, signature, p.loading, p.refreshing]);
+
+  const state = resolveListState({ itemCount, loading: p.loading, refreshing: p.refreshing, error: p.error, hasActiveQuery: summary.count > 0 });
+  const retry = () => { guard.reset(); p.onRetry?.(); };
+
+  let empty: ReactElement | null = null;
+  if (state === 'loading') {
+    empty = <View testID={id('loading')} style={{ paddingTop: theme.spacing.sm }}><SkeletonList count={4} height={64} /></View>;
+  } else if (state === 'error') {
+    empty = <EmptyState testID={id('error')} icon="⚠️" title="Something went wrong" description={p.error ?? undefined} actionLabel={p.onRetry ? 'Retry' : undefined} onAction={retry} actionTestID={id('retry')} />;
+  } else if (state === 'noResults') {
+    empty = <EmptyState testID={id('no-results')} icon="🔍" title={p.noResultsTitle ?? 'No results'} description={p.noResultsDescription ?? 'Try a different search or clear the filters.'} actionLabel={p.onClearFilters ? 'Clear filters' : undefined} onAction={p.onClearFilters} actionTestID={id('empty-clear')} />;
+  } else if (state === 'empty') {
+    empty = <EmptyState testID={id('empty')} title={p.emptyTitle ?? 'Nothing here yet'} description={p.emptyDescription} />;
+  }
+
+  let footer: ReactElement | null = null;
+  if (state === 'content') {
+    if (p.error) {
+      footer = (
+        <View testID={id('footer-error')} style={{ alignItems: 'center', gap: theme.spacing.sm, paddingVertical: theme.spacing.lg }}>
+          <RNText accessibilityRole="alert" style={{ color: errorTextColor(theme), fontSize: theme.fontSizes.sm }}>{p.error}</RNText>
+          {p.onRetry ? <Button testID={id('footer-retry')} title="Retry" variant="outline" size="sm" onPress={retry} /> : null}
+        </View>
+      );
+    } else if (p.loadingMore) {
+      footer = <View testID={id('footer-loading')} style={{ paddingVertical: theme.spacing.lg }}><Spinner /></View>;
+    }
+  }
+
+  const onEndReached = () => {
+    if (guard.tryStart({ hasMore: !!p.hasMore, loading: !!p.loading, loadingMore: !!p.loadingMore, error: !!p.error }, itemCount)) p.onLoadMore?.();
+  };
+
+  const refreshControl = p.onRefresh ? <RefreshControl refreshing={!!p.refreshing} onRefresh={p.onRefresh} tintColor={theme.colors.mutedForeground} /> : undefined;
+
+  return { empty, footer, onEndReached, refreshControl, state };
+}

package/src/index.ts

@@ -62,3 +62,23 @@ export { GradientBox, type GradientBoxProps } from './components/GradientBox';
 export { HeroBanner, type HeroBannerProps } from './components/HeroBanner';
 export { AccentProvider, useAccent } from './components/AccentContext';
 export { DataTable, type DataTableProps, type DataColumn, type DataRow } from './components/DataTable';
+
+// Tandem-screen primitives: rich text, overlays, forms, server-driven lists, chat
+export { Markdown, type MarkdownProps } from './components/Markdown';
+export { parseMarkdown, parseInline, type Block as MarkdownBlock, type Inline as MarkdownInline } from './logic/markdown';
+export { Sheet, type SheetProps } from './components/Sheet';
+export { Select, type SelectProps, type SelectOption } from './components/Select';
+export { FormField, type FormFieldProps } from './components/FormField';
+export { TextArea, type TextAreaProps } from './components/TextArea';
+export { SearchBar, type SearchBarProps } from './components/SearchBar';
+export { Header, type HeaderProps } from './components/Header';
+export { StatusChip, type StatusChipProps } from './components/StatusChip';
+export { statusTone, formatProgress } from './logic/status';
+export { SwipeRow, type SwipeRowProps, type SwipeAction } from './components/SwipeRow';
+export { ToastProvider, useToast, type ToastApi, type ToastOptions, type ToastTone } from './components/Toast';
+export { MessageBubble, type MessageBubbleProps } from './components/MessageBubble';
+export { ChatComposer, type ChatComposerProps } from './components/ChatComposer';
+export { DataList, type DataListProps } from './components/DataList';
+export { SectionedList, type SectionedListProps } from './components/SectionedList';
+export type { ServerListProps, ListSearch, ListSort, FilterGroup, FilterOption } from './components/serverListTypes';
+export { resolveListState, createLoadMoreGuard, createDebouncer, summarizeFilters, type ListViewState } from './logic/listState';

package/src/logic/chat.ts

@@ -0,0 +1,3 @@
+export function canSend(text: string, sending: boolean): boolean {
+  return !sending && text.trim().length > 0;
+}

package/src/logic/listState.ts

@@ -0,0 +1,77 @@
+/** Pure state logic for server-driven lists. Nothing here ever sees the full
+ *  dataset: search, filter, sort and paging all belong to the server. */
+
+export type ListViewState = 'loading' | 'error' | 'noResults' | 'empty' | 'content';
+
+export interface ListStateInput {
+  itemCount: number;
+  loading?: boolean;
+  refreshing?: boolean;
+  error?: unknown;
+  /** True when a search query or filter is applied (empty then means "no results"). */
+  hasActiveQuery?: boolean;
+}
+
+export function resolveListState(i: ListStateInput): ListViewState {
+  if (i.itemCount > 0) return 'content';
+  if (i.error) return 'error';
+  if (i.loading && !i.refreshing) return 'loading';
+  return i.hasActiveQuery ? 'noResults' : 'empty';
+}
+
+export interface LoadMoreState {
+  hasMore: boolean;
+  loading: boolean;
+  loadingMore: boolean;
+  error: boolean;
+}
+
+/** Stops onEndReached (which fires repeatedly) from requesting the same page
+ *  twice: one request per data length until the data grows or reset() is called. */
+export function createLoadMoreGuard() {
+  let lastToken: number | null = null;
+  return {
+    tryStart(s: LoadMoreState, token: number): boolean {
+      if (!s.hasMore || s.loading || s.loadingMore || s.error) return false;
+      if (lastToken === token) return false;
+      lastToken = token;
+      return true;
+    },
+    reset() { lastToken = null; },
+  };
+}
+
+export function createDebouncer<T>(fn: (v: T) => void, ms: number) {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  let pending: { v: T } | null = null;
+  const clear = () => { if (timer) clearTimeout(timer); timer = null; };
+  const fire = () => { clear(); if (pending) { const { v } = pending; pending = null; fn(v); } };
+  return {
+    call(v: T) { pending = { v }; clear(); timer = setTimeout(fire, ms); },
+    flush: fire,
+    cancel() { clear(); pending = null; },
+  };
+}
+
+export interface FilterOption { value: string; label: string }
+export interface FilterGroup {
+  key: string;
+  label: string;
+  options: FilterOption[];
+  /** Selected option value, or null when the filter is off. */
+  value: string | null;
+  /** 'chips' (default) for few options, 'select' opens a Sheet picker. */
+  display?: 'chips' | 'select';
+}
+
+export function summarizeFilters(groups: FilterGroup[], query = ''): { count: number; labels: string[] } {
+  const labels: string[] = [];
+  for (const g of groups) {
+    if (g.value == null) continue;
+    const opt = g.options.find((o) => o.value === g.value);
+    labels.push(`${g.label}: ${opt?.label ?? g.value}`);
+  }
+  const q = query.trim();
+  if (q) labels.push(`"${q}"`);
+  return { count: labels.length, labels };
+}

package/src/logic/markdown.ts

@@ -0,0 +1,112 @@
+/** Small dependency-free markdown subset for summaries, answers and transcripts:
+ *  headings, paragraphs, bullet/numbered lists, quotes, rules, fenced code, and
+ *  inline bold / italic / code / links. Unknown syntax stays literal text. */
+
+export type Inline =
+  | { type: 'text'; text: string }
+  | { type: 'bold'; children: Inline[] }
+  | { type: 'italic'; children: Inline[] }
+  | { type: 'code'; text: string }
+  | { type: 'link'; href: string; children: Inline[] };
+
+export type Block =
+  | { type: 'heading'; level: 1 | 2 | 3; inlines: Inline[] }
+  | { type: 'paragraph'; inlines: Inline[] }
+  | { type: 'bullets'; items: Inline[][] }
+  | { type: 'numbered'; items: Inline[][] }
+  | { type: 'quote'; inlines: Inline[] }
+  | { type: 'code'; text: string }
+  | { type: 'rule' };
+
+const SAFE_HREF = /^(https?:\/\/|mailto:|tel:)/i;
+
+function pushText(out: Inline[], text: string) {
+  if (!text) return;
+  const last = out[out.length - 1];
+  if (last && last.type === 'text') last.text += text;
+  else out.push({ type: 'text', text });
+}
+
+export function parseInline(src: string): Inline[] {
+  const out: Inline[] = [];
+  let i = 0;
+  while (i < src.length) {
+    const rest = src.slice(i);
+    let m: RegExpMatchArray | null;
+    if ((m = rest.match(/^`([^`\n]+)`/))) {
+      out.push({ type: 'code', text: m[1] });
+      i += m[0].length;
+    } else if ((m = rest.match(/^\[([^\]\n]+)\]\(((?:[^()\s]|\([^()\s]*\))+)\)/))) {
+      const children = parseInline(m[1]);
+      if (SAFE_HREF.test(m[2])) out.push({ type: 'link', href: m[2], children });
+      else children.forEach((c) => (c.type === 'text' ? pushText(out, c.text) : out.push(c)));
+      i += m[0].length;
+    } else if ((m = rest.match(/^\*\*(?=\S)([\s\S]+?)(?<=\S)\*\*(?!\*)/)) || (m = rest.match(/^\*\*(?=\S)([\s\S]+\*)(?<=\S)\*\*/))) {
+      out.push({ type: 'bold', children: parseInline(m[1]) });
+      i += m[0].length;
+    } else if ((m = rest.match(/^\*(?=[^\s*])([^*\n]+?)(?<=\S)\*/))) {
+      out.push({ type: 'italic', children: parseInline(m[1]) });
+      i += m[0].length;
+    } else {
+      // consume up to the next possible marker
+      const next = rest.slice(1).search(/[`[*]/);
+      const len = next === -1 ? rest.length : next + 1;
+      pushText(out, rest.slice(0, len));
+      i += len;
+    }
+  }
+  return out;
+}
+
+const BULLET = /^\s*[-*+]\s+(.*)$/;
+const NUMBERED = /^\s*\d+[.)]\s+(.*)$/;
+const HEADING = /^(#{1,6})\s+(.*?)\s*#*\s*$/;
+const RULE = /^\s*([-*_])(\s*\1){2,}\s*$/;
+const FENCE = /^\s*```/;
+
+export function parseMarkdown(src: string): Block[] {
+  const lines = src.replace(/\r\n?/g, '\n').split('\n');
+  const blocks: Block[] = [];
+  let i = 0;
+  const startsBlock = (l: string) =>
+    HEADING.test(l) || BULLET.test(l) || NUMBERED.test(l) || FENCE.test(l) || /^\s*>/.test(l) || RULE.test(l);
+
+  while (i < lines.length) {
+    const line = lines[i];
+    if (!line.trim()) { i++; continue; }
+    if (FENCE.test(line)) {
+      const body: string[] = [];
+      i++;
+      while (i < lines.length && !FENCE.test(lines[i])) body.push(lines[i++]);
+      i++; // closing fence (or end)
+      blocks.push({ type: 'code', text: body.join('\n') });
+      continue;
+    }
+    let m: RegExpMatchArray | null;
+    if ((m = line.match(HEADING))) {
+      blocks.push({ type: 'heading', level: Math.min(3, m[1].length) as 1 | 2 | 3, inlines: parseInline(m[2]) });
+      i++; continue;
+    }
+    if (RULE.test(line)) { blocks.push({ type: 'rule' }); i++; continue; }
+    if (BULLET.test(line)) {
+      const items: Inline[][] = [];
+      while (i < lines.length && (m = lines[i].match(BULLET))) { items.push(parseInline(m[1])); i++; }
+      blocks.push({ type: 'bullets', items }); continue;
+    }
+    if (NUMBERED.test(line)) {
+      const items: Inline[][] = [];
+      while (i < lines.length && (m = lines[i].match(NUMBERED))) { items.push(parseInline(m[1])); i++; }
+      blocks.push({ type: 'numbered', items }); continue;
+    }
+    if (/^\s*>/.test(line)) {
+      const body: string[] = [];
+      while (i < lines.length && /^\s*>/.test(lines[i])) body.push(lines[i++].replace(/^\s*>\s?/, ''));
+      blocks.push({ type: 'quote', inlines: parseInline(body.join('\n')) });
+      continue;
+    }
+    const para: string[] = [];
+    while (i < lines.length && lines[i].trim() && !(para.length && startsBlock(lines[i]))) para.push(lines[i++]);
+    blocks.push({ type: 'paragraph', inlines: parseInline(para.join('\n')) });
+  }
+  return blocks;
+}

package/src/logic/select.ts

@@ -0,0 +1,12 @@
+export interface SelectOption { value: string; label: string; description?: string }
+
+export function filterOptions(options: SelectOption[], query: string): SelectOption[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return options;
+  return options.filter((o) => o.label.toLowerCase().includes(q) || (o.description ?? '').toLowerCase().includes(q));
+}
+
+export function selectedLabel(options: SelectOption[], value: string | null | undefined): string | null {
+  if (value == null) return null;
+  return options.find((o) => o.value === value)?.label ?? null;
+}

package/src/logic/status.ts

@@ -0,0 +1,27 @@
+import type { BadgeVariant } from '../styles';
+
+const GROUPS: Array<[BadgeVariant, string[]]> = [
+  ['secondary', ['queued', 'pending', 'waiting', 'draft', 'new']],
+  ['default', ['processing', 'running', 'transcribing', 'in_progress', 'uploading', 'syncing', 'active']],
+  ['success', ['done', 'complete', 'completed', 'ready', 'success', 'synced', 'connected']],
+  ['destructive', ['failed', 'error', 'rejected', 'disconnected']],
+  ['warning', ['partial', 'warning', 'stale', 'needs_attention', 'paused']],
+];
+
+const norm = (s: string) => s.trim().toLowerCase().replace(/[\s-]+/g, '_');
+const title = (s: string) => {
+  const t = s.trim().replace(/[_-]+/g, ' ');
+  return t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
+};
+
+/** Domain status string to a Badge variant + display label. Unknown statuses are outlined. */
+export function statusTone(status: string): { variant: BadgeVariant; label: string } {
+  const key = norm(status);
+  for (const [variant, names] of GROUPS) if (names.includes(key)) return { variant, label: title(status) };
+  return { variant: 'outline', label: title(status) };
+}
+
+export function formatProgress(value: number): string {
+  const v = Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;
+  return `${Math.round(v * 100)}%`;
+}

package/src/logic/swipe.ts

@@ -0,0 +1,13 @@
+/** Swipe-row offset math. Offsets are <= 0: 0 is closed, -actionsWidth is open. */
+export function clampSwipe(offset: number, actionsWidth: number): number {
+  return Math.min(0, Math.max(-actionsWidth, offset));
+}
+
+const FLING = 0.5;
+
+/** Where a released row should settle. `velocity` is px/ms, negative = leftward. */
+export function settleSwipe(offset: number, velocity: number, actionsWidth: number): 'open' | 'closed' {
+  if (velocity <= -FLING) return 'open';
+  if (velocity >= FLING) return 'closed';
+  return -offset > actionsWidth / 2 ? 'open' : 'closed';
+}

package/src/logic/toast.ts

@@ -0,0 +1,28 @@
+export type ToastTone = 'info' | 'success' | 'error' | 'warning';
+export interface ToastItem { id: string; message: string; tone: ToastTone; durationMs: number }
+export interface ToastOptions { tone?: ToastTone; durationMs?: number }
+
+export const DEFAULT_TOAST_MS = 3000;
+
+export function createToastStore() {
+  let toasts: ToastItem[] = [];
+  let seq = 0;
+  const subs = new Set<() => void>();
+  const emit = () => subs.forEach((f) => f());
+  return {
+    getToasts: () => toasts,
+    show(message: string, opts: ToastOptions = {}): string {
+      const id = `toast-${++seq}`;
+      toasts = [...toasts, { id, message, tone: opts.tone ?? 'info', durationMs: opts.durationMs ?? DEFAULT_TOAST_MS }];
+      emit();
+      return id;
+    },
+    dismiss(id: string) {
+      if (!toasts.some((t) => t.id === id)) return;
+      toasts = toasts.filter((t) => t.id !== id);
+      emit();
+    },
+    clear() { toasts = []; emit(); },
+    subscribe(f: () => void) { subs.add(f); return () => { subs.delete(f); }; },
+  };
+}

package/src/styles-chat.ts

@@ -0,0 +1,51 @@
+/** Pure style builders for the chat surfaces: message bubble and composer. */
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { Theme } from './theme';
+
+export type ChatRole = 'user' | 'assistant' | 'system';
+
+export function bubbleStyle(theme: Theme, role: ChatRole): ViewStyle {
+  const base: ViewStyle = {
+    maxWidth: '85%',
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.sm + 2,
+    borderRadius: theme.radii.xl,
+  };
+  if (role === 'user') return { ...base, alignSelf: 'flex-end', backgroundColor: theme.colors.primary, borderBottomRightRadius: theme.radii.sm };
+  if (role === 'system') return { ...base, alignSelf: 'center', backgroundColor: 'transparent', maxWidth: '95%' };
+  return { ...base, alignSelf: 'flex-start', backgroundColor: theme.colors.muted, borderBottomLeftRadius: theme.radii.sm };
+}
+
+export function bubbleTextColor(theme: Theme, role: ChatRole): string {
+  if (role === 'user') return theme.colors.primaryForeground;
+  if (role === 'system') return theme.colors.mutedForeground;
+  return theme.colors.foreground;
+}
+
+export function composerStyle(theme: Theme): ViewStyle {
+  return {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: theme.spacing.sm,
+    paddingHorizontal: theme.spacing.md,
+    paddingTop: theme.spacing.sm,
+    borderTopWidth: 1,
+    borderTopColor: theme.colors.border,
+    backgroundColor: theme.colors.background,
+  };
+}
+
+export function sendButtonStyle(theme: Theme, enabled: boolean): ViewStyle {
+  return {
+    width: 44,
+    height: 44,
+    borderRadius: theme.radii.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: enabled ? theme.colors.primary : theme.colors.muted,
+  };
+}
+
+export function sendGlyphStyle(theme: Theme, enabled: boolean): TextStyle {
+  return { fontSize: 20, fontWeight: '700', color: enabled ? theme.colors.primaryForeground : theme.colors.mutedForeground };
+}

package/src/styles-overlay.ts

@@ -0,0 +1,100 @@
+/** Pure style builders for overlays and chrome: sheet, toast, header, swipe actions. */
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { Theme } from './theme';
+
+export type ToneName = 'info' | 'success' | 'error' | 'warning';
+
+export function sheetBackdropStyle(): ViewStyle {
+  return { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.45)' };
+}
+
+export function sheetPanelStyle(theme: Theme, maxHeight: number, bottomInset: number): ViewStyle {
+  return {
+    maxHeight,
+    backgroundColor: theme.colors.background,
+    borderTopLeftRadius: theme.radii.xl,
+    borderTopRightRadius: theme.radii.xl,
+    paddingTop: theme.spacing.sm,
+    paddingHorizontal: theme.spacing.lg,
+    paddingBottom: bottomInset + theme.spacing.lg,
+    borderWidth: 1,
+    borderBottomWidth: 0,
+    borderColor: theme.colors.border,
+  };
+}
+
+export function sheetGrabberStyle(theme: Theme): ViewStyle {
+  return { alignSelf: 'center', width: 36, height: 5, borderRadius: 3, backgroundColor: theme.colors.border, marginBottom: theme.spacing.md };
+}
+
+export function toastStyle(theme: Theme, tone: ToneName): ViewStyle {
+  const bg: Record<ToneName, string> = {
+    info: theme.colors.foreground,
+    success: theme.colors.success,
+    error: theme.colors.destructive,
+    warning: theme.colors.warning,
+  };
+  return {
+    backgroundColor: bg[tone],
+    borderRadius: theme.radii.lg,
+    paddingVertical: theme.spacing.md,
+    paddingHorizontal: theme.spacing.lg,
+    shadowColor: '#000',
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 4,
+  };
+}
+
+export function toastTextStyle(theme: Theme, tone: ToneName): TextStyle {
+  const fg: Record<ToneName, string> = {
+    info: theme.colors.background,
+    success: theme.colors.successForeground,
+    error: theme.colors.destructiveForeground,
+    warning: theme.colors.warningForeground,
+  };
+  return { color: fg[tone], fontSize: theme.fontSizes.sm, fontWeight: theme.fontWeights.medium as TextStyle['fontWeight'] };
+}
+
+export function headerStyle(theme: Theme, topInset: number): ViewStyle {
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing.sm,
+    paddingTop: topInset + theme.spacing.sm,
+    paddingBottom: theme.spacing.sm,
+    paddingHorizontal: theme.spacing.lg,
+    backgroundColor: theme.colors.background,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+    minHeight: 52 + topInset,
+  };
+}
+
+export type SwipeTone = 'primary' | 'success' | 'destructive' | 'neutral';
+
+export function swipeActionStyle(theme: Theme, tone: SwipeTone, width: number): ViewStyle {
+  const bg: Record<SwipeTone, string> = {
+    primary: theme.colors.primary,
+    success: theme.colors.success,
+    destructive: theme.colors.destructive,
+    neutral: theme.colors.muted,
+  };
+  return { width, alignItems: 'center', justifyContent: 'center', backgroundColor: bg[tone] };
+}
+
+export function swipeActionTextStyle(theme: Theme, tone: SwipeTone): TextStyle {
+  const fg: Record<SwipeTone, string> = {
+    primary: theme.colors.primaryForeground,
+    success: theme.colors.successForeground,
+    destructive: theme.colors.destructiveForeground,
+    neutral: theme.colors.foreground,
+  };
+  return { color: fg[tone], fontSize: theme.fontSizes.sm, fontWeight: theme.fontWeights.semibold as TextStyle['fontWeight'] };
+}
+
+/** Readable red for error TEXT: the dark-scheme destructive token is a fill colour and is too dim on a dark background. */
+export function errorTextColor(theme: Theme): string {
+  return theme.scheme === 'dark' ? 'hsl(0 90% 70%)' : theme.colors.destructive;
+}