@appinternalleads/ui 0.2.0

package/src/components/onboarding/data-view/DataView.tsx

@@ -0,0 +1,661 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { Platform, ScrollView, View, type NativeScrollEvent, type NativeSyntheticEvent } from 'react-native';
+import { Box, Icon, MotionView, Pressable, Select, Text, useSwap, useTween } from '../../../core';
+import { gridColumns } from '../../../ds';
+import { blockRadii, blockScrim, useDs, type DensityName } from '../../../tokens';
+import type { OnboardingResult, PatternStatus } from '../shared/contract';
+import type { OnboardingOperation } from '../shared/mock';
+import { OnboardingCard } from '../shared/OnboardingCard';
+import { usePatternStatus, useSceneReport } from '../shared/runtime';
+import { ComboPanel, ComboSheet, ComboTrigger } from '../combobox/ComboboxView';
+import { useCombobox } from '../combobox/runtime';
+import { ExportFormat } from '../export-format/ExportFormatView';
+import type { ColumnDef, DataRow, DataViewScene, DataViewSettings } from './contract';
+import { dataViewSeed, type DataViewSeed } from './engine';
+import { CardToast, Cell, Ghost, Initials, Pill, RowMotion, SelectBox, Sentinel, webOnly, type WebEvents } from './parts';
+import { RevealContext, useDataViewReveal, useRowReveal } from './reveal';
+import { useInView } from '../shared/viz';
+import { useReduceMotion } from '../../../core';
+import { cellModel, initials, isEnd, toTextValue, typeOf } from './registry';
+import { DEMO_NOW } from './demoSource';
+import { useDataView, type DataViewEvents, type DataViewOperations, type DataViewPage } from './runtime';
+
+export type DataViewProps = DataViewEvents & {
+  density?: DensityName;
+  /** M15 (config.m15): increment to play the reveal again — the board's Replay. */
+  replay?: number;
+  /** The board's Reduced motion toggle — as if the OS asked. */
+  forceReduced?: boolean;
+  status?: PatternStatus;
+  result?: OnboardingResult;
+  operations?: Partial<DataViewOperations>;
+  /** The host's first page. Omitted with `operations.page`, the view fetches it. */
+  data?: DataViewPage;
+  reload?: OnboardingOperation<void>;
+  initial?: DataViewSeed;
+  /** `mobile`: stacked cards whatever the width (React Native). Below 640px the web stacks too. */
+  viewport?: 'web' | 'mobile';
+  /** "Now" for relative dates. Default: the demo clock with the demo server, the real clock with a host's. */
+  now?: number;
+  /** The host's clipboard for "Copy as text". Omitted on the web, the browser's is used. */
+  onCopy?: (text: string) => void | Promise<void>;
+  onScene?: (scene: string) => void;
+  testID?: string;
+};
+
+const WEB = Platform.OS === 'web';
+const DENSITY: Record<DensityName, { rowH: number; gap: number }> = {
+  compact: { rowH: 36, gap: 8 },
+  default: { rowH: 44, gap: 12 },
+  comfortable: { rowH: 52, gap: 16 },
+};
+
+/**
+ * **The one data view Table and Grid are drawn from.** The card shell (S1) with a flush body: an
+ * optional header row (select all, Sort by, "+1 sort", Multi-sort), a scroll container (max 480)
+ * holding the table or the record cards and the sentinel, a footer whose two layers cross-fade in
+ * one cell (M4: "20 of 64 invoices loaded" · Copy as text, or the bulk bar), and the overlays that
+ * anchor to the card — the delete popover, C14's panel or sheet, the Export modal and the toast.
+ */
+export function DataView({ mode, config, ...props }: DataViewProps & { mode: 'table' | 'grid'; config: DataViewSettings }) {
+  const { colors, lift2 } = useDs();
+  const dens = DENSITY[props.density ?? 'default'];
+  /* A case that SHIPS in a scene (config.ship) starts there — a pattern status, or a seed. */
+  const ship = !props.initial && !props.status && config.ship ? config.ship : undefined;
+  const shipStatus = ship === 'loading' || ship === 'empty' || ship === 'error' ? ship : undefined;
+  const pattern = usePatternStatus(props.status ?? shipStatus ?? 'ready', props.reload);
+  const dv = useDataView({ config, ...props, initial: props.initial ?? (ship && !shipStatus ? dataViewSeed(config, ship as DataViewScene) : undefined) });
+  const s = dv.state;
+  const v = dv.model;
+  /* The demo clock whenever the rows are the demo server's (no host page, or a demo seed). */
+  const now = props.now ?? (props.data || (props.operations?.page && !props.initial?.rows) ? Date.now() : DEMO_NOW);
+  const [width, setWidth] = useState(0);
+  const narrow = s.mobile || props.viewport === 'mobile' || (width > 0 && width < 640);
+  const cards = mode === 'grid' || narrow;
+  const skeleton = pattern.status === 'loading' || (s.rows.length === 0 && Boolean(s.pend));
+  const scene = pattern.status !== 'ready' ? pattern.status
+    : s.overlay === 'export' ? 'exportOpen' : s.bulk === 'deleting' ? 'deleting' : s.overlay === 'delete' ? 'deleteConfirm'
+    : s.pend ? 'sorting' : s.more === 'loading' ? 'loadingMore' : s.more === 'error' ? 'errorMore'
+    : s.sel.length ? 'someSelected' : 'default';
+  useSceneReport(scene, props.onScene);
+
+  const combo = useCombobox({
+    config: { ...dv.comboConfig, viewport: narrow ? 'mobile' : 'web' },
+    operations: dv.comboOps,
+    result: props.result,
+    initial: s.assign.open ? { open: true, draft: [] } : undefined,
+    toasts: false,
+    onChange: dv.assigned,
+    resetKey: s.assign.nonce,
+  });
+
+  const scrollRef = useRef<ScrollView>(null);
+  const sortKey = JSON.stringify(s.sort);
+  const first = useRef(true);
+  /* A new sort lands on page 1 — back to the top. */
+  useEffect(() => {
+    if (first.current) { first.current = false; return; }
+    scrollRef.current?.scrollTo({ y: 0, animated: false });
+  }, [sortKey]);
+
+  const delRef = useRef<View>(null);
+  const cancelRef = useRef<View>(null);
+  const modalCloseRef = useRef<View>(null);
+  const focusLater = (r: { current: { focus?: () => void } | null }) => setTimeout(() => r.current?.focus?.(), 40);
+  const closeDelete = () => { dv.overlay(null); focusLater(delRef); };
+  /* Focus moves into a layer the person opened — never into one a restored scene starts with, so a
+     page of boards does not jump to the one that ships with its confirm open. */
+  const openDelete = () => { dv.overlay('delete'); focusLater(cancelRef); };
+  const openExport = () => { dv.overlay('export'); focusLater(modalCloseRef); };
+
+  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const { contentOffset, layoutMeasurement, contentSize } = e.nativeEvent;
+    if (contentOffset.y + layoutMeasurement.height > contentSize.height - 60) dv.loadMore();
+  };
+
+  const open = (r: DataRow) => dv.open(r.id, toTextValue(config.columns[0]!, r[config.columns[0]!.id]));
+  /* M15 (config.m15): the first reveal waits until the table is 30% in view; every page staggers. */
+  const [revealRef, inView] = useInView();
+  const osReduced = useReduceMotion();
+  const reveal = useDataViewReveal(config, dv.rows, inView && !skeleton && pattern.status === 'ready', props.replay ?? 0, Boolean(props.forceReduced) || osReduced);
+
+  const body = (
+    <RevealContext.Provider value={reveal}>
+    <View ref={revealRef} onLayout={e => setWidth(e.nativeEvent.layout.width)} style={{ position: 'relative' }}>
+      {cards ? (
+        <CardsHeader mode={mode} narrow={narrow} dv={dv} config={config} disabled={skeleton || !s.rows.length} />
+      ) : null}
+      {cards ? (
+        <ScrollView
+          ref={scrollRef}
+          aria-busy={skeleton || Boolean(s.pend) || s.more === 'loading'}
+          style={{ maxHeight: 480 }}
+          onScroll={onScroll}
+          scrollEventThrottle={64}>
+          <Cards dv={dv} config={config} width={width} narrow={narrow} gap={dens.gap} skeleton={skeleton} now={now} open={open} />
+          {skeleton ? null : <Sentinel state={v.sentinel} endLabel={v.endLabel} onMore={dv.loadMore} />}
+        </ScrollView>
+      ) : (
+        <TableScroll dv={dv} config={config} width={width} rowH={dens.rowH} skeleton={skeleton} now={now} open={open} scrollRef={scrollRef} onScroll={onScroll} />
+      )}
+      <Footer dv={dv} skeleton={skeleton} onExport={openExport} onCopy={() => { void dv.copy(props.onCopy); }}>
+        <ComboTrigger api={combo} config={dv.comboConfig} bare />
+        {combo.state.open && !narrow ? <ComboPanel api={combo} config={dv.comboConfig} applyLabel={v.applyLabel} placement="top" align="end" /> : null}
+        <View style={{ position: 'relative' }}>
+          <Ghost
+            ref={delRef}
+            label="Delete"
+            tone="apricot"
+            onPress={() => (s.overlay === 'delete' ? closeDelete() : openDelete())}
+            haspopup="dialog"
+            expanded={s.overlay === 'delete'}
+          />
+          {s.overlay === 'delete' ? (
+            <DeleteConfirm title={v.deleteTitle} deleting={s.bulk === 'deleting'} cancelRef={cancelRef} onCancel={closeDelete} onConfirm={dv.deleteNow} />
+          ) : null}
+        </View>
+      </Footer>
+      {s.toast ? (
+        <CardToast
+          key={s.toast.id}
+          tone={s.toast.tone}
+          text={s.toast.text}
+          action={s.toast.retry ? 'Retry' : undefined}
+          onAction={dv.toastAction}
+          onClose={dv.dropToast}
+          style={{ right: 16, bottom: 64 }}
+        />
+      ) : null}
+      {s.overlay === 'export' ? (
+        <View
+          {...webOnly<WebEvents>({ onClick: () => dv.overlay(null) })}
+          style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 8, alignItems: 'center', justifyContent: 'center', padding: 20, backgroundColor: blockScrim, borderBottomLeftRadius: blockRadii.major, borderBottomRightRadius: blockRadii.major }}>
+          <View
+            role="dialog"
+            aria-modal
+            aria-label={v.exportTitle}
+            {...webOnly<WebEvents>({
+              onClick: e => { (e as unknown as { stopPropagation: () => void }).stopPropagation(); },
+              onKeyDown: e => { if (e.key === 'Escape') { e.preventDefault(); dv.overlay(null); } },
+            })}
+            style={{ maxWidth: '100%', maxHeight: '100%', gap: 10, paddingTop: 12, paddingHorizontal: 12, paddingBottom: 14, borderRadius: blockRadii.major, backgroundColor: colors.surfaceSunken, boxShadow: lift2 }}>
+            <ScrollView contentContainerStyle={{ gap: 10 }}>
+              <Box row align="center" justify="space-between" gap="s3" style={{ paddingLeft: 4 }}>
+                <Text numeric style={{ fontSize: 14, fontWeight: '600', letterSpacing: -0.2, color: colors.textPrimary }}>{v.exportTitle}</Text>
+                <Pressable ref={modalCloseRef} aria-label="Close export" onPress={() => dv.overlay(null)} width={32} height={32} radius="pill">
+                  <Icon name="close" size={15} color={colors.textSecondary} />
+                </Pressable>
+              </Box>
+              <View style={{ width: 580, maxWidth: '100%' }}>
+                <ExportFormat preset="case1" density={props.density} result={props.result} onScene={sc => { if (sc === 'exported') dv.exported(); }} />
+              </View>
+            </ScrollView>
+          </View>
+        </View>
+      ) : null}
+      {combo.state.open && narrow ? <ComboSheet api={combo} config={dv.comboConfig} applyLabel={v.applyLabel} /> : null}
+    </View>
+    </RevealContext.Provider>
+  );
+
+  return (
+    <OnboardingCard
+      testID={props.testID}
+      header={config}
+      copy={config}
+      density={props.density}
+      status={pattern.status === 'loading' ? 'ready' : pattern.status}
+      onRetry={pattern.retry}
+      onEmptyAction={pattern.retry}
+      chip={skeleton ? undefined : { tone: 'neutral', label: v.chipLabel }}
+      flush>
+      {body}
+    </OnboardingCard>
+  );
+}
+
+/* ── Header row (cards) ─────────────────────────────────────────────────────────────────── */
+
+function CardsHeader({ mode, narrow, dv, config, disabled }: {
+  mode: 'table' | 'grid'; narrow: boolean; dv: ReturnType<typeof useDataView>; config: DataViewSettings; disabled: boolean;
+}) {
+  const { colors } = useDs();
+  const v = dv.model;
+  const sortable = config.columns.filter(c => c.sortable !== false);
+  const options = [{ value: '', label: 'None' }].concat(sortable.flatMap(c => [
+    { value: `${c.id}:asc`, label: `${c.label}, ascending` },
+    { value: `${c.id}:desc`, label: `${c.label}, descending` },
+  ]));
+  const s0 = v.shownSort[0];
+  const multiRef = useRef<View>(null);
+  const multiOpen = dv.state.overlay === 'sort';
+  return (
+    <Box row wrap align="center" justify="space-between" style={{ gap: 8, columnGap: 12, paddingVertical: 4, paddingLeft: 8, paddingRight: 16, borderBottomWidth: 1, borderBottomColor: colors.hairline, zIndex: 3 }}>
+      {config.selectable === false ? <View /> : (
+        <Box row align="center">
+          <SelectBox checked={v.allOn ? true : v.mixed ? 'mixed' : false} onChange={dv.toggleAll} label={v.selectAllLabel} disabled={disabled} />
+          <Text numeric aria-hidden style={{ fontSize: 12, fontWeight: '600', color: colors.textPrimary }}>{v.selectAllLabel}</Text>
+        </Box>
+      )}
+      <Box row wrap align="center" gap="s2">
+        {narrow && v.shownSort.length > 1 ? (
+          <Box row align="center" height={24} radius="pill" style={{ paddingHorizontal: 10, backgroundColor: colors.band }}>
+            <Text numeric style={{ fontSize: 12, fontWeight: '600', color: colors.textSecondary }}>{`+${v.shownSort.length - 1} sort`}</Text>
+          </Box>
+        ) : null}
+        <Text style={{ fontSize: 12, color: colors.textSecondary }}>Sort by</Text>
+        <Box style={{ width: 190 }}>
+          <Select
+            aria-label="Sort by"
+            value={s0 ? `${s0.id}:${s0.dir}` : ''}
+            options={options}
+            onChange={val => {
+              const [id, dir] = String(val).split(':');
+              dv.setSort(val ? [{ id: id!, dir: dir as 'asc' | 'desc' }] : []);
+            }}
+          />
+        </Box>
+        {mode === 'grid' && !narrow ? (
+          <View style={{ position: 'relative' }}>
+            <Ghost
+              ref={multiRef}
+              label={v.shownSort.length > 1 ? `Multi-sort · ${v.shownSort.length}` : 'Multi-sort'}
+              onPress={() => dv.overlay(multiOpen ? null : 'sort')}
+              haspopup="dialog"
+              expanded={multiOpen}
+            />
+            {multiOpen ? (
+              <MultiSort
+                dv={dv}
+                columns={sortable}
+                onClose={() => { dv.overlay(null); setTimeout(() => multiRef.current?.focus?.(), 40); }}
+              />
+            ) : null}
+          </View>
+        ) : null}
+      </Box>
+    </Box>
+  );
+}
+
+/** The Multi-sort popover (web Grid): one row per sortable column — priority, label, Off / Ascending / Descending. */
+function MultiSort({ dv, columns, onClose }: { dv: ReturnType<typeof useDataView>; columns: ColumnDef[]; onClose: () => void }) {
+  const { colors, lift2 } = useDs();
+  const firstRef = useRef<View>(null);
+  useEffect(() => { setTimeout(() => firstRef.current?.focus?.(), 40); }, []);
+  const shown = dv.model.shownSort;
+  return (
+    <View
+      role="dialog"
+      aria-label="Sort order"
+      {...webOnly<WebEvents>({ onKeyDown: e => { if (e.key === 'Escape') { e.preventDefault(); onClose(); } } })}
+      style={{
+        position: 'absolute', right: 0, top: '100%', marginTop: 6, zIndex: 6, width: 250, gap: 2, padding: 4,
+        borderWidth: 1, borderColor: colors.hairlineStrong, borderRadius: blockRadii.mid, backgroundColor: colors.surface1, boxShadow: lift2,
+      }}>
+      <Text style={{ paddingTop: 6, paddingHorizontal: 8, paddingBottom: 4, fontSize: 12, color: colors.textSecondary }}>Click to cycle ascending, descending, off</Text>
+      {columns.map((c, i) => {
+        const k = shown.findIndex(x => x.id === c.id);
+        const st = k === -1 ? null : shown[k]!;
+        return (
+          <Pressable
+            key={c.id}
+            ref={i === 0 ? firstRef : undefined}
+            onPress={() => dv.sort(c.id, true)}
+            row
+            gap="s2"
+            justify="flex-start"
+            style={{ paddingVertical: 8, paddingHorizontal: 10, borderRadius: blockRadii.inset }}>
+            <Text numeric style={{ width: 16, fontSize: 12, fontWeight: '600', color: colors.textSecondary }}>{st ? String(k + 1) : ''}</Text>
+            <Text style={{ flex: 1, fontSize: 13, color: colors.textPrimary }}>{c.label}</Text>
+            <Text style={{ fontSize: 12, color: st ? colors.textPrimary : colors.textSecondary }}>{st ? (st.dir === 'asc' ? 'Ascending' : 'Descending') : 'Off'}</Text>
+          </Pressable>
+        );
+      })}
+      <Box row style={{ padding: 4 }}><Ghost label="Clear sort" onPress={() => dv.setSort([])} height={28} /></Box>
+    </View>
+  );
+}
+
+/* ── Record cards (Grid, and Table below 640px) ─────────────────────────────────────────── */
+
+function Cards({ narrow, dv, config, width, gap, skeleton, now, open }: {
+  narrow: boolean; dv: ReturnType<typeof useDataView>; config: DataViewSettings; width: number; gap: number;
+  skeleton: boolean; now: number; open: (r: DataRow) => void;
+}) {
+  const s = dv.state;
+  const inner = Math.max(0, width - 24);
+  const cols = narrow ? 1 : gridColumns(inner, 240, 12, gap);
+  const tileW = inner > 0 ? (inner - gap * (cols - 1)) / cols : undefined;
+  const fade = useTween(s.pend ? 0.6 : 1);
+  return (
+    <MotionView style={{ opacity: fade, flexDirection: 'row', flexWrap: 'wrap', gap, paddingTop: 12, paddingHorizontal: 12 }}>
+      {skeleton
+        ? [0, 1, 2, 3, 4, 5].map(i => <SkeletonCard key={i} width={tileW} />)
+        : dv.rows.map((r, i) => (
+          <RowMotion key={r.id} fresh={s.fresh !== null && i >= s.fresh} leaving={s.leaving.includes(r.id)} style={{ width: tileW ?? '100%' }}>
+            <RecordCard row={r} config={config} selected={s.sel.includes(r.id)} onToggle={() => dv.toggle(r.id)} onOpen={() => open(r)} now={now} />
+          </RowMotion>
+        ))}
+    </MotionView>
+  );
+}
+
+function SkeletonCard({ width }: { width?: number }) {
+  const { colors } = useDs();
+  return (
+    <View aria-hidden style={{ width: width ?? '100%', gap: 12, paddingVertical: 16, paddingHorizontal: 14, borderWidth: 1, borderColor: colors.hairline, borderRadius: blockRadii.mid }}>
+      <Pill width="60%" height={12} />
+      {['40%', '52%', '34%', '46%'].map(b => (
+        <Box key={b} row gap="s3"><Pill width="30%" height={8} /><Pill width={b as `${number}%`} height={8} /></Box>
+      ))}
+    </View>
+  );
+}
+
+/**
+ * **The record card** — Grid's tile and Table's stacked row. A 1px line edge, radius 12; selected is
+ * a 2px coral ring (M7). Top row: an optional 32px avatar, the title `<button>` (14/600) and the
+ * 44px checkbox. Body: a `<dl>` of up to four `columns[1..4]`, 96px labels.
+ */
+export function RecordCard({ row, config, selected, onToggle, onOpen, now }: {
+  row: DataRow; config: DataViewSettings; selected: boolean; onToggle: () => void; onOpen: () => void; now: number;
+}) {
+  const { colors } = useDs();
+  const [hover, setHover] = useState(false);
+  const ring = useTween(selected ? 1 : 0);
+  const t0 = config.columns[0]!;
+  const title = toTextValue(t0, row[t0.id]);
+  const rv = useRowReveal();
+  const r = rv.row(row.id);
+  return (
+    <View
+      role="group"
+      aria-label={title}
+      {...webOnly<WebEvents & { onMouseEnter: () => void; onMouseLeave: () => void }>({
+        onClick: e => { if (!isControl(e.target)) onOpen(); },
+        onMouseEnter: () => setHover(true),
+        onMouseLeave: () => setHover(false),
+      })}
+      style={{
+        position: 'relative', gap: 8, paddingTop: 6, paddingRight: 4, paddingBottom: 14, paddingLeft: 14,
+        opacity: r.opacity, transform: [{ translateY: r.y }],
+        borderWidth: 1, borderColor: colors.hairlineStrong, borderRadius: blockRadii.mid,
+        backgroundColor: hover ? colors.surfaceSunken : colors.surface1,
+        ...(WEB ? ({ cursor: 'pointer' } as object) : null),
+      }}>
+      <MotionView
+        aria-hidden
+        pointerEvents="none"
+        style={{ position: 'absolute', top: -1, left: -1, right: -1, bottom: -1, borderWidth: 2, borderColor: colors.accentFill, borderRadius: blockRadii.mid, opacity: ring }}
+      />
+      <Box row align="center" gap="s2" style={{ minHeight: 44 }}>
+        {t0.type === 'avatar' ? <Initials text={initials(title)} size={32} /> : null}
+        <OpenButton title={title} onPress={onOpen} size={14} />
+        {config.selectable === false ? null : <SelectBox checked={selected} onChange={onToggle} label={`Select ${title}`} />}
+      </Box>
+      <View role="list" style={{ gap: 6, paddingRight: 10 }}>
+        {config.columns.slice(1).filter(col => col.card !== false).slice(0, 4).map(col => (
+          <View key={col.id} role="listitem" style={{ flexDirection: 'row', alignItems: 'center', gap: 8, minHeight: 22 }}>
+            <Text style={{ width: 96, fontSize: 12, color: colors.textSecondary }}>{col.label}</Text>
+            <View style={{ flex: 1, minWidth: 0 }}><Cell m={cellModel(col, row[col.id], 'card', now, { max: rv.max(col.id) })} card fill={r.fill} tone={r.tone} scale={rv.scale(col.id, Number(row[col.id]))} /></View>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+/** The title is a real button (600, radius 8, the well on hover). The rest of the row forwards to it. */
+function OpenButton({ title, onPress, size }: { title: string; onPress: () => void; size: 13 | 14 }) {
+  const { colors } = useDs();
+  const [hover, setHover] = useState(false);
+  return (
+    <Pressable
+      onPress={onPress}
+      onHoverIn={() => setHover(true)}
+      onHoverOut={() => setHover(false)}
+      aria-label={title}
+      justify="flex-start"
+      row
+      style={{
+        flexGrow: size === 14 ? 1 : 0, flexShrink: 1, minWidth: 0, paddingVertical: 4, paddingHorizontal: 6, marginHorizontal: -6,
+        borderRadius: blockRadii.inset, backgroundColor: hover ? colors.surfaceSunken : 'transparent',
+      }}>
+      <Text numberOfLines={1} style={{ fontSize: size, fontWeight: '600', letterSpacing: size === 14 ? -0.2 : 0, color: colors.textPrimary }}>{title}</Text>
+    </Pressable>
+  );
+}
+
+/** Clicks on a control inside a row are that control's — the row forwards only the rest. */
+function isControl(target: unknown): boolean {
+  const el = target as { closest?: (sel: string) => unknown } | null;
+  return Boolean(el?.closest?.('button, a, input, label, select, [role="button"], [role="checkbox"], [role="link"]'));
+}
+
+/* ── The table (web, 640px and up) ──────────────────────────────────────────────────────── */
+
+function TableScroll({ dv, config, width, rowH, skeleton, now, open, scrollRef, onScroll }: {
+  dv: ReturnType<typeof useDataView>; config: DataViewSettings; width: number; rowH: number; skeleton: boolean; now: number; open: (r: DataRow) => void;
+  scrollRef: { current: ScrollView | null }; onScroll: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
+}) {
+  const { colors } = useDs();
+  const s = dv.state;
+  const v = dv.model;
+  const cols = config.columns;
+  /* table-layout: fixed, width 100%, min-width 52 + Σ(width ?? 140): wider cards share the space out. */
+  const check = config.selectable === false ? 0 : 52;
+  const minW = check + cols.reduce((n, c) => n + (c.width ?? 140), 0);
+  const tableW = Math.max(width, minW);
+  const scale = tableW / minW;
+  const w = (c?: ColumnDef) => (c ? (c.width ?? 140) : check) * scale;
+  const fade = useTween(s.pend ? 0.6 : 1);
+  const wide = width > 0 && tableW > width + 1;
+  return (
+    <ScrollView horizontal scrollEnabled={wide} showsHorizontalScrollIndicator={wide} contentContainerStyle={{ width: tableW }}>
+      <ScrollView
+        ref={scrollRef}
+        role="table"
+        aria-label={config.title}
+        aria-busy={skeleton || Boolean(s.pend) || s.more === 'loading'}
+        style={{ maxHeight: 480, width: tableW }}
+        onScroll={onScroll}
+        scrollEventThrottle={64}
+        stickyHeaderIndices={[0]}>
+        <View role="row" style={{ flexDirection: 'row', width: tableW, backgroundColor: colors.surface1, borderBottomWidth: 1, borderBottomColor: colors.hairline, zIndex: 2 }}>
+          {config.selectable === false ? null : (
+            <View role="columnheader" style={{ width: w(), paddingLeft: 8, justifyContent: 'center' }}>
+              <SelectBox checked={v.allOn ? true : v.mixed ? 'mixed' : false} onChange={dv.toggleAll} label={v.selectAllLabel} disabled={skeleton || !s.rows.length} />
+            </View>
+          )}
+          {cols.map((c, i) => <HeaderCell key={c.id} col={c} width={w(c)} end={i > 0 && isEnd(c)} dv={dv} />)}
+        </View>
+        <MotionView role="rowgroup" style={{ opacity: fade }}>
+          {skeleton
+            ? [0, 1, 2, 3, 4, 5, 6, 7].map(i => <SkeletonRow key={i} i={i} rowH={rowH} />)
+            : dv.rows.map((r, i) => (
+              <RowMotion key={r.id} fresh={s.fresh !== null && i >= s.fresh} leaving={s.leaving.includes(r.id)}>
+                <TableRow row={r} config={config} widths={cols.map(c => w(c))} checkW={w()} rowH={rowH} selected={s.sel.includes(r.id)} onToggle={() => dv.toggle(r.id)} onOpen={() => open(r)} now={now} />
+              </RowMotion>
+            ))}
+        </MotionView>
+        {/* The sentinel is the table's last row (one cell), so role="table" owns only rows. */}
+        {skeleton ? null : (
+          <View role="row" style={{ width: wide ? width : tableW }}>
+            <View role="cell"><Sentinel state={v.sentinel} endLabel={v.endLabel} onMore={dv.loadMore} /></View>
+          </View>
+        )}
+      </ScrollView>
+    </ScrollView>
+  );
+}
+
+/**
+ * A sortable header: a `<button>` (32px, radius 8, 12/600) in a cell carrying `aria-sort`. The arrow
+ * sits at .35 when unsorted and turns 180° for descending; priority digits appear with 2+ keys.
+ * Click cycles asc → desc → none; Shift-click, or Shift+Enter, adds or cycles the key.
+ */
+function HeaderCell({ col, width, end, dv }: { col: ColumnDef; width: number; end: boolean; dv: ReturnType<typeof useDataView> }) {
+  const { colors } = useDs();
+  const shown = dv.model.shownSort;
+  const k = shown.findIndex(x => x.id === col.id);
+  const st = k === -1 ? null : shown[k]!;
+  const rot = useTween(st?.dir === 'desc' ? 1 : 0);
+  const sortable = col.sortable !== false;
+  return (
+    <View
+      role="columnheader"
+      aria-sort={st ? (st.dir === 'asc' ? 'ascending' : 'descending') : 'none'}
+      style={{ width, paddingLeft: 8, paddingRight: 12, justifyContent: 'center', alignItems: end ? 'flex-end' : 'flex-start' }}>
+      {sortable ? (
+        <Pressable
+          onPress={((e?: { nativeEvent?: { shiftKey?: boolean }; shiftKey?: boolean }) => dv.sort(col.id, Boolean(e?.nativeEvent?.shiftKey ?? e?.shiftKey))) as () => void}
+          onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); dv.sort(col.id, Boolean((e as { shiftKey?: boolean }).shiftKey)); } }}
+          aria-label={`Sort by ${col.label}${st ? `, currently ${st.dir === 'asc' ? 'ascending' : 'descending'}` : ''}. Shift to add a sort`}
+          row
+          gap="s1"
+          height={32}
+          style={{ marginVertical: 6, paddingHorizontal: 6, borderRadius: blockRadii.inset }}>
+          <Text numberOfLines={1} style={{ fontSize: 12, fontWeight: '600', color: st ? colors.textPrimary : colors.textSecondary }}>{col.label}</Text>
+          <MotionView
+            aria-hidden
+            style={{ opacity: st ? 1 : 0.35, transform: [{ rotate: rot.interpolate({ inputRange: [0, 1], outputRange: ['180deg', '360deg'] }) }] }}>
+            <Icon name="arrow-d" size={13} color={st ? colors.textPrimary : colors.textSecondary} />
+          </MotionView>
+          {st && shown.length > 1 ? <Text numeric style={{ fontSize: 11, color: colors.textSecondary }}>{String(k + 1)}</Text> : null}
+        </Pressable>
+      ) : (
+        <Text style={{ fontSize: 12, fontWeight: '600', color: colors.textSecondary }}>{col.label}</Text>
+      )}
+    </View>
+  );
+}
+
+function TableRow({ row, config, widths, checkW, rowH, selected, onToggle, onOpen, now }: {
+  row: DataRow; config: DataViewSettings; widths: number[]; checkW: number; rowH: number; selected: boolean; onToggle: () => void; onOpen: () => void; now: number;
+}) {
+  const { colors } = useDs();
+  const [hover, setHover] = useState(false);
+  const cols = config.columns;
+  const t0 = cols[0]!;
+  const title = toTextValue(t0, row[t0.id]);
+  const rv = useRowReveal();
+  const r = rv.row(row.id);
+  const selectable = config.selectable !== false;
+  const cell = (child: ReactNode, width: number, key: string, end = false, first = false) => (
+    <View key={key} role="cell" style={{ width, minHeight: rowH, paddingLeft: first && !selectable ? 14 : 8, paddingRight: 12, justifyContent: 'center', alignItems: end ? 'flex-end' : 'stretch', overflow: 'hidden' }}>
+      {child}
+    </View>
+  );
+  return (
+    <View
+      role="row"
+      aria-selected={selected}
+      {...webOnly<WebEvents & { onMouseEnter: () => void; onMouseLeave: () => void }>({
+        onClick: e => { if (!isControl(e.target)) onOpen(); },
+        onMouseEnter: () => setHover(true),
+        onMouseLeave: () => setHover(false),
+      })}
+      style={{
+        flexDirection: 'row', minHeight: rowH, borderBottomWidth: 1, borderBottomColor: colors.hairline,
+        opacity: r.opacity, transform: [{ translateY: r.y }],
+        backgroundColor: selected || hover ? colors.surfaceSunken : colors.surface1,
+        ...(WEB ? ({ cursor: 'pointer' } as object) : null),
+      }}>
+      {selectable ? (
+        <View role="cell" style={{ width: checkW, paddingLeft: 8, justifyContent: 'center' }}>
+          <SelectBox checked={selected} onChange={onToggle} label={`Select ${title}`} />
+        </View>
+      ) : null}
+      {cell(
+        <Box row align="center" gap="s2" style={{ minWidth: 0 }}>
+          {t0.type === 'avatar' ? <Initials text={initials(title)} /> : null}
+          <OpenButton title={title} onPress={onOpen} size={13} />
+        </Box>,
+        widths[0]!, t0.id, false, true,
+      )}
+      {cols.slice(1).map((c, i) => cell(<Cell m={cellModel(c, row[c.id], 'cell', now, { max: rv.max(c.id) })} fill={r.fill} tone={r.tone} scale={rv.scale(c.id, Number(row[c.id]))} />, widths[i + 1]!, c.id, isEnd(c) && typeOf(c) !== 'bar'))}
+    </View>
+  );
+}
+
+function SkeletonRow({ i, rowH }: { i: number; rowH: number }) {
+  const { colors } = useDs();
+  const a = ['18%', '14%', '22%', '16%'][i % 4] as `${number}%`;
+  const b = ['26%', '20%', '30%', '24%'][i % 4] as `${number}%`;
+  const c = ['10%', '14%', '8%', '12%'][i % 4] as `${number}%`;
+  return (
+    <View aria-hidden style={{ flexDirection: 'row', alignItems: 'center', gap: 24, height: rowH, paddingHorizontal: 16, borderBottomWidth: 1, borderBottomColor: colors.hairline }}>
+      <View style={{ width: 18, height: 18, borderRadius: blockRadii.key, backgroundColor: colors.band }} />
+      <Pill width={a} height={10} />
+      <Pill width={b} height={8} />
+      <Pill width={c} height={8} />
+    </View>
+  );
+}
+
+/* ── Footer: "loaded" + Copy as text ⇄ the bulk bar, one cell (M4) ──────────────────────── */
+
+function Footer({ dv, skeleton, onCopy, onExport, children }: { dv: ReturnType<typeof useDataView>; skeleton: boolean; onCopy: () => void; onExport: () => void; children: ReactNode }) {
+  const { colors } = useDs();
+  const v = dv.model;
+  const s = dv.state;
+  const bulk = v.selN > 0;
+  const fade = useSwap(bulk ? 'bulk' : 'normal');
+  return (
+    <View style={{ borderTopWidth: 1, borderTopColor: colors.hairline, zIndex: 5 }}>
+      <MotionView style={{ opacity: fade }}>
+        {bulk ? (
+          <Box row wrap align="center" justify="space-between" style={{ gap: 8, columnGap: 12, paddingVertical: 10, paddingLeft: 20, paddingRight: 12 }}>
+            <Text aria-live="polite" numeric style={{ fontSize: 13, fontWeight: '600', color: colors.textPrimary }}>
+              {v.selLabel}
+              <Text style={{ fontWeight: '400', color: colors.textSecondary }}>{v.notShownLabel}</Text>
+            </Text>
+            <Box row wrap align="center" justify="flex-end" gap="s2" style={{ flexShrink: 1, minWidth: 0, maxWidth: '100%' }}>
+              <Ghost label="Clear" onPress={dv.clearSel} />
+              <Ghost label="Export" onPress={onExport} haspopup="dialog" />
+              {children}
+            </Box>
+          </Box>
+        ) : (
+          <Box row align="center" justify="space-between" gap="s3" style={{ paddingVertical: 12, paddingHorizontal: 20 }}>
+            <Text aria-live="polite" numeric style={{ fontSize: 12, color: colors.textSecondary }}>{skeleton ? 'Loading…' : v.loadedLabel}</Text>
+            <Ghost label={s.copied ? 'Copied' : 'Copy as text'} onPress={onCopy} height={28} disabled={skeleton || !s.rows.length} />
+          </Box>
+        )}
+      </MotionView>
+    </View>
+  );
+}
+
+/**
+ * **Delete confirm (O3 popover)** — above the Delete button, 260 wide: "Delete 5 invoices?", "This
+ * can’t be undone.", Cancel and a bold apricot-deep Delete that becomes "Deleting…" (`aria-busy`).
+ * Focus moves to Cancel on open; Esc closes and returns focus to the trigger.
+ */
+function DeleteConfirm({ title, deleting, cancelRef, onCancel, onConfirm }: {
+  title: string; deleting: boolean; cancelRef: { current: View | null }; onCancel: () => void; onConfirm: () => void;
+}) {
+  const { colors, lift2 } = useDs();
+  return (
+    <View
+      role="dialog"
+      aria-label="Confirm delete"
+      {...webOnly<WebEvents>({ onKeyDown: e => { if (e.key === 'Escape') { e.preventDefault(); onCancel(); } } })}
+      style={{
+        position: 'absolute', right: 0, bottom: '100%', marginBottom: 8, zIndex: 6, width: 260, gap: 12, padding: 14,
+        borderWidth: 1, borderColor: colors.hairlineStrong, borderRadius: blockRadii.mid, backgroundColor: colors.surface1, boxShadow: lift2,
+      }}>
+      <Box gap="s1">
+        <Text numeric style={{ fontSize: 13, fontWeight: '600', color: colors.textPrimary }}>{title}</Text>
+        <Text style={{ fontSize: 12, color: colors.textSecondary }}>This can’t be undone.</Text>
+      </Box>
+      <Box row justify="flex-end" gap="s2">
+        <Ghost ref={cancelRef as never} label="Cancel" onPress={onCancel} disabled={deleting} />
+        <Ghost label={deleting ? 'Deleting…' : 'Delete'} tone="apricot" onPress={onConfirm} busy={deleting} />
+      </Box>
+    </View>
+  );
+}
+
+export { dataViewSeed };