@appinternalleads/ui 0.2.0

package/src/widgets/output/renderers/findings/FindingsCard.tsx

@@ -0,0 +1,142 @@
+import { useState } from 'react';
+import { Box, MotionView, Pressable, Text } from '../../../../core';
+import { useDs } from '../../../../tokens';
+import { OutputWidgetShell } from '../../OutputWidgetShell';
+import { staggerDelay, useEntrance, useEntranceTracker } from '../../motion';
+import type { OutputActionId } from '../../document';
+
+/**
+ * **`findings` — X4.** `docs/output-type-sheets/findings.md`, variation A, "list with locators,"
+ * plus the count-gated severity summary (C). **Variation B ("anchored to the document") is
+ * deliberately not built this pass** — the sheet's own framing calls it "the expensive one,"
+ * needing real document-position rendering; A/C cover every fixture this pass ships. `source`
+ * remains unset in the payload for now, so `FindingsCard` always renders A/C — the routing
+ * function is written so B slots in later without touching A/C.
+ */
+
+export type FindingSeverity = 'high' | 'medium' | 'low';
+export type Finding = { id: string; severity: FindingSeverity; text: string; locator?: string };
+export type FindingsPhase = 'loading' | 'settled';
+
+const SEVERITY_ORDER: FindingSeverity[] = ['high', 'medium', 'low'];
+const SEVERITY_LABEL: Record<FindingSeverity, string> = { high: 'High', medium: 'Medium', low: 'Low' };
+
+function severityColors(colors: ReturnType<typeof useDs>['colors'], severity: FindingSeverity) {
+  if (severity === 'high') return { bg: colors.statusBg.error, ink: colors.status.error };
+  if (severity === 'medium') return { bg: colors.statusBg.needsUser, ink: colors.status.needsUser };
+  return { bg: colors.surfaceSunken, ink: colors.textSecondary };
+}
+
+function SeverityPill({ severity }: { severity: FindingSeverity }) {
+  const { colors } = useDs();
+  const c = severityColors(colors, severity);
+  return (
+    <Box style={{ backgroundColor: c.bg, borderRadius: 999, paddingVertical: 6, paddingHorizontal: 8 }}>
+      <Text mono uppercase style={{ fontSize: 9.5, fontWeight: '600', letterSpacing: 0.5, color: c.ink }}>
+        {SEVERITY_LABEL[severity]}
+      </Text>
+    </Box>
+  );
+}
+
+function FindingRowView({ finding, index, seen }: { finding: Finding; index: number; seen: Set<string> }) {
+  const { colors } = useDs();
+  const { opacity, translateY } = useEntrance(finding.id, seen, { variant: 'rise', delayMs: staggerDelay(index, 70) });
+  return (
+    <MotionView style={{ opacity, transform: [{ translateY }] }}>
+      <Box bg="surfaceSunken" radius="control" style={{ padding: 12, gap: 7 }}>
+        <Box row align="center" justify="space-between">
+          <SeverityPill severity={finding.severity} />
+          {finding.locator ? <Text mono color="textSecondary" style={{ fontSize: 11 }}>{finding.locator}</Text> : null}
+        </Box>
+        <Text style={{ fontSize: 12.5, lineHeight: 18, color: colors.textPrimary }}>{finding.text}</Text>
+      </Box>
+    </MotionView>
+  );
+}
+
+function FindingsSummary({ findings, onSeeAll }: { findings: Finding[]; onSeeAll: () => void }) {
+  const { colors } = useDs();
+  const counts = SEVERITY_ORDER.map(s => ({ severity: s, count: findings.filter(f => f.severity === s).length })).filter(c => c.count > 0);
+  const top = findings[0]!;
+  return (
+    <Box style={{ padding: 12, gap: 10 }}>
+      <Box row style={{ gap: 9 }}>
+        {counts.map(({ severity, count }) => {
+          const c = severityColors(colors, severity);
+          return (
+            <Box key={severity} style={{ flex: 1, backgroundColor: c.bg, borderRadius: 14, padding: 12, alignItems: 'center', gap: 2 }}>
+              <Text style={{ fontSize: 21, fontWeight: '700', color: c.ink }}>{count}</Text>
+              <Text mono uppercase style={{ fontSize: 9.5, fontWeight: '600', letterSpacing: 0.5, color: c.ink }}>{SEVERITY_LABEL[severity]}</Text>
+            </Box>
+          );
+        })}
+      </Box>
+      <Text style={{ fontSize: 12.5, lineHeight: 18, color: colors.textPrimary }}>{top.text}</Text>
+      <Pressable
+        onPress={onSeeAll}
+        hit={44}
+        bg="accentTint"
+        radius="pill"
+        align="center"
+        aria-label={`See all ${findings.length} findings`}
+        style={{ paddingVertical: 12, paddingHorizontal: 14, alignSelf: 'flex-start' }}>
+        <Text color="accentInk" style={{ fontSize: 12, fontWeight: '600' }}>See all {findings.length}</Text>
+      </Pressable>
+    </Box>
+  );
+}
+
+export type FindingsCardProps = {
+  title: string;
+  chip?: string;
+  meta?: string;
+  findings: Finding[];
+  phase?: FindingsPhase;
+  onMenu?: () => void;
+  onAction?: (id: OutputActionId) => void;
+  testID?: string;
+};
+
+const SUMMARY_THRESHOLD = 4;
+
+export function FindingsCard({ title, chip = 'findings', meta, findings, phase = 'settled', onMenu, onAction, testID }: FindingsCardProps) {
+  const seen = useEntranceTracker();
+  const [expanded, setExpanded] = useState(false);
+
+  if (phase === 'loading') {
+    return (
+      <OutputWidgetShell kind={chip} title={title} onMenu={onMenu} onAction={onAction} meta={meta} provisional testID={testID}>
+        <Box style={{ padding: 12, gap: 7 }}>
+          <Box bg="surfaceSunken" radius="control" style={{ height: 60 }} />
+        </Box>
+      </OutputWidgetShell>
+    );
+  }
+
+  if (findings.length === 0) {
+    return (
+      <OutputWidgetShell kind={chip} title={title} onMenu={onMenu} onAction={onAction} meta={meta} testID={testID}>
+        <Box style={{ padding: 16 }}><Text color="textSecondary" style={{ fontSize: 12.5 }}>No findings</Text></Box>
+      </OutputWidgetShell>
+    );
+  }
+
+  const dense = findings.length > SUMMARY_THRESHOLD && !expanded;
+
+  return (
+    <OutputWidgetShell kind={chip} title={title} onMenu={onMenu} onAction={onAction} meta={meta} testID={testID}>
+      {dense ? (
+        <FindingsSummary findings={findings} onSeeAll={() => setExpanded(true)} />
+      ) : (
+        <Box style={{ padding: 12, gap: 7 }}>
+          {findings.map((f, i) => <FindingRowView key={f.id} finding={f} index={i} seen={seen} />)}
+        </Box>
+      )}
+    </OutputWidgetShell>
+  );
+}
+
+export function findingsToText(findings: Finding[]): string {
+  return findings.map(f => `[${SEVERITY_LABEL[f.severity]}] ${f.text}${f.locator ? ` (${f.locator})` : ''}`).join('\n');
+}

package/src/widgets/output/renderers/findings/index.ts

@@ -0,0 +1,4 @@
+export {
+  FindingsCard, findingsToText,
+  type FindingsCardProps, type Finding, type FindingSeverity, type FindingsPhase,
+} from './FindingsCard';

package/src/widgets/output/renderers/keyvalue/KeyValueCard.tsx

@@ -0,0 +1,433 @@
+import { useEffect, useState } from 'react';
+import { Animated, Easing } from 'react-native';
+import { Box, Input, MotionView, Pressable, Text } from '../../../../core';
+import { groundFor } from '../../../../core/roles';
+import { useDs } from '../../../../tokens';
+import { useSurface } from '../../../useSurface';
+import { OutputWidgetShell } from '../../OutputWidgetShell';
+import { outputKeyValue } from '../../tokens';
+import { staggerDelay, useEntrance, useEntranceTracker } from '../../motion';
+import type { OutputActionId } from '../../document';
+
+/**
+ * **`keyvalue` — X1, rebuilt.** `design_handoff_output_blockers/README.md` §2 (2026-09-17),
+ * "the implementation-depth spec," replaces the earlier build entirely — not a patch. That
+ * earlier version used `--well`-boxed tile rows and a single `mount: 'read'|'write'` toggle; this
+ * one is a `<dl>`-shaped list of unboxed rows gated by TWO independent axes (`mount` for whether
+ * mutation is permitted at all, per-field `confidence` for whether a given field is offered),
+ * with three cumulative behaviours derived from what the payload actually carries.
+ *
+ * **Why it is the checkpoint.** It proves the confidence-driven per-field write model that
+ * `findings` and `quote` are meant to reuse — get it right once here.
+ *
+ * **Two disclosed platform limits, not silent gaps:**
+ * 1. **No real `<dl>`/`<dt>`/`<dd>`.** The shared `Box`/`Text` primitives render RN `View`/`Text`
+ *    on both platforms; there is no HTML-tag escape hatch at this layer (the one this system has,
+ *    `.web.tsx`, is reserved for primitives with no native equivalent — SPEC §3.1 — and a data
+ *    list has one). `role="list"` / `role="listitem"` is the closest portable equivalent and is
+ *    what's built here.
+ * 2. **Enter-commits and Escape-cancels are not wired.** `core/Input` exposes `onChangeText` and
+ *    `onBlur` only — no `onSubmitEditing`, no key events. **Blur commits**, which is the one exit
+ *    path the shared primitive actually supports; adding the other two means extending
+ *    `core/Input` itself, out of scope for one renderer's rebuild.
+ */
+
+export type KeyValueSource = {
+  locator: string;
+  excerpt: string;
+  /** Character offsets into `excerpt`. Highlighted with `<mark>`-equivalent styling when present. */
+  span?: [number, number];
+};
+
+export type KeyValueField = {
+  /** Stable — keys the entrance animation. */
+  id: string;
+  label: string;
+  /** `null` = the document didn't contain it ("Not found"). `''` = present but blank ("—"). */
+  value: string | null;
+  /** Absent → read-only (O11), unless `editable: true` overrides it explicitly. */
+  confidence?: number;
+  editable?: boolean;
+  source?: KeyValueSource;
+};
+
+export type KeyValueThresholds = { flag: number; loud: number };
+/** Gates mutation entirely. Distinct from per-field `confidence`, which gates one field at a time. */
+export type KeyValueMount = 'canvas' | 'dashboard';
+export type KeyValueBehaviour = 'flat' | 'review' | 'evidenced';
+export type KeyValuePhase = 'loading' | 'partial' | 'settled';
+type Band = 'none' | 'neutral' | 'loud' | 'corrected';
+
+const DEFAULT_THRESHOLDS: KeyValueThresholds = outputKeyValue.thresholds;
+
+/** The card's `behaviour` is descriptive (state-shape §2.8) — each ROW still reads its own field's capability. */
+function deriveBehaviour(fields: KeyValueField[]): KeyValueBehaviour {
+  if (fields.some(f => f.source)) return 'evidenced';
+  if (fields.some(f => f.confidence !== undefined)) return 'review';
+  return 'flat';
+}
+
+function bandFor(field: KeyValueField, thresholds: KeyValueThresholds, corrected: boolean, mount: KeyValueMount): Band {
+  if (corrected) return 'corrected';
+  if (field.confidence === undefined) return 'none';
+  if (field.confidence >= thresholds.flag) return 'none';
+  /* Dashboard: "confidence marks still shown, in the neutral band styling" — visual urgency
+     (apricot) is reserved for a state the reader can act on, and nothing is actionable here. */
+  if (mount === 'dashboard') return 'neutral';
+  return field.confidence < thresholds.loud ? 'loud' : 'neutral';
+}
+
+function isEditableFor(field: KeyValueField, thresholds: KeyValueThresholds, mount: KeyValueMount, corrected: boolean): boolean {
+  if (mount === 'dashboard' || corrected) return false;
+  if (field.confidence !== undefined) return field.confidence < thresholds.flag;
+  return field.editable === true;
+}
+
+/** "Low confidence, 61 percent at extraction" — never a bare figure, never colour alone. */
+function confidenceWords(confidence: number, band: Band): string {
+  const pct = Math.round(confidence * 100);
+  const level = band === 'loud' ? 'Low' : 'Medium';
+  return `${level} confidence, ${pct} percent at extraction`;
+}
+
+function displayValue(value: string | null): string {
+  if (value === null) return 'Not found';
+  if (value === '') return '—';
+  return value;
+}
+
+/** The flat-text fallback (`toText()`) — `_shared/SHELL.md` rule 1, runs server-side, no DOM. */
+export function keyValueToText(fields: KeyValueField[], thresholds: KeyValueThresholds = DEFAULT_THRESHOLDS): string {
+  return fields
+    .map(f => {
+      if (f.value === null) return `${f.label}: not found`;
+      const val = f.value === '' ? '—' : f.value;
+      if (f.confidence !== undefined && f.confidence < thresholds.flag) {
+        const pct = Math.round(f.confidence * 100);
+        const word = f.confidence < thresholds.loud ? 'review' : 'check';
+        return `${f.label}: ${val} (${pct}% — ${word})`;
+      }
+      return `${f.label}: ${val}`;
+    })
+    .join('\n');
+}
+
+function Mark({ band, confidence }: { band: Exclude<Band, 'none'>; confidence?: number }) {
+  const { colors } = useDs();
+  const tone =
+    band === 'corrected'
+      ? { bg: colors.statusBg.executed, fg: colors.status.executed, text: 'corrected' }
+      : band === 'loud'
+      ? { bg: colors.statusBg.needsUser, fg: colors.status.needsUser, text: confidence !== undefined ? `${Math.round(confidence * 100)}%` : '' }
+      : { bg: colors.surfaceSunken, fg: colors.textSecondary, text: confidence !== undefined ? `${Math.round(confidence * 100)}%` : '' };
+  const m = outputKeyValue.mark;
+  return (
+    <Box
+      style={{ backgroundColor: tone.bg, borderRadius: m.radius, paddingVertical: m.padY, paddingHorizontal: m.padX, alignSelf: 'flex-start' }}
+      aria-label={band === 'corrected' ? 'corrected' : confidence !== undefined ? confidenceWords(confidence, band) : undefined}>
+      <Text mono uppercase style={{ fontSize: m.size, lineHeight: m.size, letterSpacing: m.size * m.tracking, color: tone.fg }}>
+        {tone.text}
+      </Text>
+    </Box>
+  );
+}
+
+/**
+ * `sheetUp` — a local one-shot slide, not the identity-keyed entrance system (this is
+ * interaction-driven, not arrival-driven). `EvidenceSheet` only mounts while open, so this
+ * animates the mount, not a toggle; closing is a plain unmount, no exit animation.
+ */
+function useSheetMotion() {
+  const [progress] = useState(() => new Animated.Value(0));
+  useEffect(() => {
+    Animated.timing(progress, { toValue: 1, duration: 240, easing: Easing.bezier(0.2, 0.8, 0.2, 1), useNativeDriver: false }).start();
+  }, [progress]);
+  return progress;
+}
+
+function EvidenceSheet({ field, onClose }: { field: KeyValueField; onClose: () => void }) {
+  const { colors, lift2 } = useDs();
+  const s = outputKeyValue.evidenceSheet;
+  const progress = useSheetMotion();
+  const translateY = progress.interpolate({ inputRange: [0, 1], outputRange: [80, 0] });
+  const source = field.source!;
+  const [before, mark, after] =
+    source.span
+      ? [source.excerpt.slice(0, source.span[0]), source.excerpt.slice(source.span[0], source.span[1]), source.excerpt.slice(source.span[1])]
+      : [source.excerpt, '', ''];
+
+  return (
+    <MotionView style={{ position: 'absolute', left: 0, right: 0, bottom: 0, opacity: progress, transform: [{ translateY }] }}>
+      <Box
+        style={{
+          backgroundColor: colors.surface1,
+          borderTopWidth: 1,
+          borderTopColor: colors.hairlineStrong,
+          /* Spec draws a bespoke upward shadow for the sheet; "two elevations only, no third"
+             (`_shared/SHELL.md` rule 6) makes `--lift-2` — the system's own floating tier — the
+             correct token here rather than a one-off value. */
+          boxShadow: lift2,
+          paddingTop: s.pad.top, paddingHorizontal: s.pad.x, paddingBottom: s.pad.bottom,
+          gap: 8,
+        }}>
+        <Box row align="center" justify="space-between">
+          <Text mono uppercase color="textSecondary" style={{ fontSize: 10, lineHeight: 10, letterSpacing: 10 * 0.09 }}>
+            {source.locator}
+          </Text>
+          <Pressable onPress={onClose} hit={44} radius="pill" bg="surfaceSunken" aria-label="Close source">
+            <Text style={{ fontSize: 13, lineHeight: 13, color: colors.textSecondary }}>✕</Text>
+          </Pressable>
+        </Box>
+        <Box style={{ backgroundColor: colors.surfaceSunken, borderRadius: 14, paddingVertical: s.excerptPad.y, paddingHorizontal: s.excerptPad.x }}>
+          <Text style={{ fontSize: 13, lineHeight: 13 * 1.6, color: colors.textPrimary }}>
+            {before}
+            {mark ? (
+              <Text style={{ fontSize: 13, lineHeight: 13 * 1.6, color: colors.accentInk, backgroundColor: groundFor(colors, 'brandSubtle') }}>
+                {mark}
+              </Text>
+            ) : null}
+            {after}
+          </Text>
+        </Box>
+      </Box>
+    </MotionView>
+  );
+}
+
+function SourceChip({ field, open, onToggle }: { field: KeyValueField; open: boolean; onToggle: () => void }) {
+  const { colors } = useDs();
+  const c = outputKeyValue.sourceChip;
+  return (
+    <Pressable
+      onPress={onToggle}
+      hit={44}
+      radius="pill"
+      bg={open ? undefined : 'referenceBg'}
+      style={{ backgroundColor: open ? colors.reference.fg : undefined, minHeight: c.minHeight, paddingHorizontal: c.padX, width: undefined, height: undefined }}
+      aria-label={`Show source for ${field.label}`}
+      aria-pressed={open}>
+      <Text mono uppercase style={{ fontSize: c.size, lineHeight: c.size, letterSpacing: c.size * c.tracking, color: open ? colors.textOnAccent : colors.reference.fg }}>
+        {field.source!.locator}
+      </Text>
+    </Pressable>
+  );
+}
+
+function SkeletonRow({ index }: { index: number }) {
+  const { colors } = useDs();
+  const k = outputKeyValue;
+  const surface = useSurface();
+  /* Alternates by position, not `Math.random()` — a random pick re-runs on the client's own
+     lazy-`useState` initializer during hydration (SSR and client each roll their own), so the
+     server's markup and the client's never agreed on a width. Deterministic by `index` instead. */
+  const valueWidth = k.skeleton.valueWidths[index % k.skeleton.valueWidths.length]!;
+  return (
+    <Box style={{ minHeight: k.row.minHeight, paddingVertical: k.row.pad[surface], justifyContent: 'center', gap: 6 }}>
+      <Box style={{ width: k.skeleton.labelWidth, height: k.skeleton.barHeight, borderRadius: k.skeleton.barRadius, backgroundColor: colors.hairlineStrong }} />
+      <Box style={{ width: valueWidth, height: k.skeleton.barHeight, borderRadius: k.skeleton.barRadius, backgroundColor: colors.hairlineStrong }} />
+    </Box>
+  );
+}
+
+function KeyValueRow({
+  field, index, seen, mount, thresholds, corrected, editing, openSource, onStartEdit, onCommit, onToggleSource, announce,
+}: {
+  field: KeyValueField; index: number; seen: Set<string>; mount: KeyValueMount; thresholds: KeyValueThresholds;
+  corrected: string | undefined; editing: boolean; openSource: boolean;
+  onStartEdit: (id: string) => void; onCommit: (id: string, value: string) => void; onToggleSource: (id: string) => void;
+  announce: (msg: string) => void;
+}) {
+  const { colors } = useDs();
+  const surface = useSurface();
+  const k = outputKeyValue;
+  const { opacity, translateY } = useEntrance(field.id, seen, { variant: 'rise', delayMs: staggerDelay(index, 70) });
+
+  const isCorrected = corrected !== undefined;
+  const effectiveValue = isCorrected ? corrected : field.value;
+  const band = bandFor(field, thresholds, isCorrected, mount);
+  const editable = isEditableFor(field, thresholds, mount, isCorrected);
+  const [draft, setDraft] = useState(effectiveValue ?? '');
+
+  const commit = () => {
+    const original = field.value ?? '';
+    if (draft !== original) onCommit(field.id, draft);
+    else onCommit(field.id, original); // still exits edit mode; caller decides whether this counts as a change
+  };
+
+  return (
+    <MotionView style={{ opacity, transform: [{ translateY }] }}>
+      <Box
+        role="listitem"
+        style={{
+          minHeight: k.row.minHeight,
+          paddingVertical: k.row.pad[surface],
+          borderBottomWidth: 1,
+          borderBottomColor: colors.hairline,
+        }}>
+        <Box row={surface === 'web'} align={surface === 'web' ? 'center' : undefined} style={{ gap: 8 }}>
+          <Box style={{ width: surface === 'web' ? k.row.labelCapWeb : undefined }}>
+            <Text style={{ fontSize: k.label.size[surface], lineHeight: k.label.size[surface] * k.label.lineHeight[surface], color: colors.textSecondary }}>
+              {field.label}
+            </Text>
+          </Box>
+          <Box flex={1} style={{ alignItems: surface === 'web' ? 'flex-end' : 'flex-start', gap: 4 }}>
+            <Box row align="center" style={{ gap: 8, alignSelf: surface === 'web' ? 'flex-end' : 'flex-start' }}>
+              {band !== 'none' ? <Mark band={band} confidence={field.confidence} /> : null}
+              {field.source ? <SourceChip field={field} open={openSource} onToggle={() => onToggleSource(field.id)} /> : null}
+            </Box>
+            {editing ? (
+              <Box style={{ width: k.input.width, backgroundColor: groundFor(colors, 'accentTint'), borderWidth: 1, borderColor: groundFor(colors, 'accentFill'), borderRadius: k.input.radius, paddingVertical: k.input.padY, paddingHorizontal: k.input.padX }}>
+                <Input
+                  value={draft}
+                  onChangeText={setDraft}
+                  onBlur={commit}
+                  autoFocus
+                  aria-label={field.label}
+                  style={{ fontSize: k.value.size, textAlign: 'right' }}
+                />
+              </Box>
+            ) : (() => {
+              const valueText = (
+                <Text
+                  numeric={field.value !== null && field.value !== ''}
+                  style={{
+                    fontSize: k.value.size, lineHeight: k.value.size * k.value.lineHeight, fontWeight: '600',
+                    color: field.value === null ? colors.textSecondary : colors.textPrimary,
+                    textAlign: surface === 'web' ? 'right' : 'left',
+                  }}>
+                  {displayValue(effectiveValue ?? null)}
+                </Text>
+              );
+              /* B1 (no confidence, no source): "nothing is clickable and nothing implies it
+                 should be" — a disabled `<button>` still carries `role="button"` to assistive
+                 tech and to a DOM query, which is exactly the implication the spec forbids. An
+                 inert field renders plain text, not a Pressable that happens to be disabled. */
+              if (!editable) return valueText;
+              return (
+                <Pressable
+                  onPress={() => onStartEdit(field.id)}
+                  style={{
+                    width: '100%', height: undefined, alignSelf: surface === 'web' ? 'flex-end' : 'flex-start',
+                    borderBottomWidth: 1, borderBottomColor: groundFor(colors, 'accentFill'), paddingBottom: 1,
+                  }}
+                  aria-label={`Edit ${field.label}`}>
+                  {valueText}
+                </Pressable>
+              );
+            })()}
+          </Box>
+        </Box>
+        {openSource && field.source ? <EvidenceSheet field={field} onClose={() => onToggleSource(field.id)} /> : null}
+      </Box>
+    </MotionView>
+  );
+}
+
+export type KeyValueCardProps = {
+  title: string;
+  chip?: string;
+  meta?: string;
+  fields: KeyValueField[];
+  mount?: KeyValueMount;
+  thresholds?: Partial<KeyValueThresholds>;
+  phase?: KeyValuePhase;
+  /** Skeleton row count while `phase === 'loading'` and no fields are known yet. */
+  loadingCount?: number;
+  onCorrect?: (fieldId: string, value: string) => void;
+  onMenu?: () => void;
+  onAction?: (id: OutputActionId) => void;
+  testID?: string;
+};
+
+export function KeyValueCard({
+  title, chip = 'keyvalue', meta, fields, mount = 'canvas', thresholds: thresholdsOverride, phase = 'settled',
+  loadingCount = 3, onCorrect, onMenu, onAction, testID,
+}: KeyValueCardProps) {
+  const seen = useEntranceTracker();
+  const thresholds: KeyValueThresholds = { ...DEFAULT_THRESHOLDS, ...thresholdsOverride };
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [openSourceId, setOpenSourceId] = useState<string | null>(null);
+  const [corrected, setCorrected] = useState<Record<string, string>>({});
+  const [announcement, setAnnouncement] = useState('');
+
+  const behaviour = deriveBehaviour(fields);
+  const pendingCount = fields.filter(f => isEditableFor(f, thresholds, mount, corrected[f.id] !== undefined)).length;
+
+  const commit = (fieldId: string, value: string) => {
+    const field = fields.find(f => f.id === fieldId);
+    setEditingId(null);
+    if (!field) return;
+    const original = field.value ?? '';
+    if (value !== original) {
+      setCorrected(c => ({ ...c, [fieldId]: value }));
+      setAnnouncement(`${field.label} corrected to ${value}`);
+      onCorrect?.(fieldId, value);
+    }
+  };
+
+  const acceptAll = () => {
+    const next = { ...corrected };
+    for (const f of fields) {
+      if (isEditableFor(f, thresholds, mount, corrected[f.id] !== undefined) && corrected[f.id] === undefined) {
+        /* "Accept all with a missing field → commits `Not found` as the accepted value." */
+        const value = f.value ?? 'Not found';
+        next[f.id] = value;
+        onCorrect?.(f.id, value);
+      }
+    }
+    setCorrected(next);
+    setAnnouncement('Accept all');
+  };
+
+  if (phase === 'loading') {
+    return (
+      <OutputWidgetShell kind={chip} title={title} onMenu={onMenu} onAction={onAction} meta={meta} provisional testID={testID}>
+        <Box role="list" style={{ paddingTop: outputKeyValue.body.padTop, paddingHorizontal: outputKeyValue.body.padX, paddingBottom: outputKeyValue.body.padBottom }}>
+          {Array.from({ length: loadingCount }, (_, i) => <SkeletonRow key={i} index={i} />)}
+        </Box>
+      </OutputWidgetShell>
+    );
+  }
+
+  return (
+    <OutputWidgetShell kind={chip} title={title} onMenu={onMenu} onAction={onAction} meta={meta} provisional={phase === 'partial'} testID={testID}>
+      <Box role="list" style={{ paddingTop: outputKeyValue.body.padTop, paddingHorizontal: outputKeyValue.body.padX, paddingBottom: outputKeyValue.body.padBottom }}>
+        {behaviour !== 'flat' && mount === 'canvas' && pendingCount > 0 ? (
+          <Box row align="center" justify="space-between" style={{ paddingVertical: 8 }}>
+            <Text color="textSecondary" style={{ fontSize: 12.5, lineHeight: 16 }}>
+              {pendingCount === 1 ? '1 field needs review' : `${pendingCount} fields need review`}
+            </Text>
+            <Pressable onPress={acceptAll} hit={44} radius="pill" bg="accentTint" style={{ height: undefined, width: undefined, paddingHorizontal: 12, paddingVertical: 8 }}>
+              <Text color="accentInk" style={{ fontSize: 12.5, lineHeight: 12.5, fontWeight: '600' }}>Accept all</Text>
+            </Pressable>
+          </Box>
+        ) : null}
+
+        {fields.length === 0 ? (
+          <Text color="textSecondary" style={{ fontSize: 12.5, lineHeight: 16 }}>No fields extracted</Text>
+        ) : (
+          fields.map((f, i) => (
+            <KeyValueRow
+              key={f.id}
+              field={f}
+              index={i}
+              seen={seen}
+              mount={mount}
+              thresholds={thresholds}
+              corrected={corrected[f.id]}
+              editing={editingId === f.id}
+              openSource={openSourceId === f.id}
+              onStartEdit={setEditingId}
+              onCommit={commit}
+              onToggleSource={id => setOpenSourceId(o => (o === id ? null : id))}
+              announce={setAnnouncement}
+            />
+          ))
+        )}
+      </Box>
+      <Text accessibilityLiveRegion="polite" style={{ position: 'absolute', width: 1, height: 1, opacity: 0 }}>
+        {announcement}
+      </Text>
+    </OutputWidgetShell>
+  );
+}

package/src/widgets/output/renderers/keyvalue/index.ts

@@ -0,0 +1,5 @@
+export {
+  KeyValueCard, keyValueToText,
+  type KeyValueCardProps, type KeyValueField, type KeyValueSource, type KeyValueThresholds,
+  type KeyValueMount, type KeyValueBehaviour, type KeyValuePhase,
+} from './KeyValueCard';