@appinternalleads/ui 0.2.0

package/src/widgets/output/renderers/comparison/ComparisonCard.tsx

@@ -0,0 +1,181 @@
+import { Box, MotionView, Pressable, Text } from '../../../../core';
+import { groundFor } from '../../../../core/roles';
+import { useDs } from '../../../../tokens';
+import { useSurface } from '../../../useSurface';
+import { OutputWidgetShell } from '../../OutputWidgetShell';
+import { outputRow, outputComparison } from '../../tokens';
+import { staggerDelay, useEntrance, useEntranceTracker } from '../../motion';
+import type { OutputActionId } from '../../document';
+
+/**
+ * **`comparison` — X3.** `design_handoff_output_variations/comparison.md`, variation A,
+ * **"two cards"** — matches the option shape the first handoff bundle already drew (winner ring,
+ * per-card ✓ attribute list), so it is the one built first; no variation is marked canonical, but
+ * this one isn't a fresh guess. **"Attributes do not line up across cards" is the cost of this
+ * layout** — each option's attribute list is its own, not a shared table (that is variation B).
+ *
+ * `mount: 'read'` — weigh the options. `mount: 'write'` — pick one, single select.
+ */
+
+export type ComparisonOption = {
+  id: string;
+  label: string;
+  winner?: boolean;
+  attributes: string[];
+  /** This option failed to evaluate — interim apricot treatment, same as Stats' one-tile error. */
+  error?: boolean;
+};
+
+export type ComparisonPhase = 'loading' | 'partial' | 'settled';
+
+function ComparisonSkeletonCard() {
+  const { colors } = useDs();
+  return (
+    <Box flex={1} style={{ backgroundColor: colors.surfaceSunken, borderRadius: outputRow.radius, padding: outputComparison.card.pad, gap: outputComparison.card.gap, minHeight: 96 }}>
+      <Box style={{ width: 90, height: 12, borderRadius: 6, backgroundColor: colors.hairlineStrong }} />
+      <Box style={{ width: '80%', height: 9, borderRadius: 4, backgroundColor: colors.hairlineStrong }} />
+      <Box style={{ width: '60%', height: 9, borderRadius: 4, backgroundColor: colors.hairlineStrong }} />
+    </Box>
+  );
+}
+
+function OptionCard({
+  option, index, seen, selectable, selected, onSelect,
+}: {
+  option: ComparisonOption; index: number; seen: Set<string>; selectable: boolean;
+  selected: boolean; onSelect?: (id: string) => void;
+}) {
+  const { colors } = useDs();
+  const c = outputComparison.card;
+  const { opacity, translateY } = useEntrance(option.id, seen, {
+    variant: 'rise',
+    delayMs: option.winner ? staggerDelay(0, 60) : staggerDelay(index + 1, 60) + 100,
+  });
+
+  if (option.error) {
+    return (
+      <MotionView style={{ flex: 1, opacity, transform: [{ translateY }] }}>
+        <Box
+          flex={1}
+          style={{
+            backgroundColor: colors.statusBg.needsUser, borderWidth: 1, borderColor: colors.status.needsUser,
+            borderRadius: outputRow.radius, padding: c.pad, gap: 4,
+          }}>
+          <Text mono uppercase style={{ fontSize: 10, fontWeight: '700', letterSpacing: 0.8, color: colors.status.needsUser }}>Failed</Text>
+          <Text style={{ fontSize: 14.5, fontWeight: '600', color: colors.textPrimary }}>{option.label}</Text>
+        </Box>
+      </MotionView>
+    );
+  }
+
+  const content = (
+    <Box
+      flex={1}
+      lift={selected ? 2 : undefined}
+      style={{
+        backgroundColor: option.winner ? groundFor(colors, 'accentTint') : colors.surface1,
+        borderWidth: option.winner ? outputComparison.card.ringWidth : 1,
+        borderColor: option.winner ? groundFor(colors, 'accentFill') : colors.hairlineStrong,
+        borderRadius: outputRow.radius,
+        padding: c.pad,
+        gap: c.gap,
+      }}>
+      <Box row align="center" justify="space-between">
+        <Text style={{ fontSize: 14.5, lineHeight: 18, fontWeight: '600', color: colors.textPrimary }}>{option.label}</Text>
+        {option.winner ? (
+          <Box
+            style={{
+              backgroundColor: groundFor(colors, 'accentTint'), borderRadius: 999,
+              paddingVertical: outputComparison.winnerPill.padY, paddingHorizontal: outputComparison.winnerPill.padX,
+            }}>
+            <Text
+              uppercase color="accentInk"
+              style={{
+                fontSize: outputComparison.winnerPill.size, lineHeight: outputComparison.winnerPill.size, fontWeight: '600',
+                letterSpacing: outputComparison.winnerPill.size * outputComparison.winnerPill.tracking,
+              }}>
+              Winner
+            </Text>
+          </Box>
+        ) : null}
+      </Box>
+      {option.attributes.map((a, i) => (
+        <Box key={i} row align="baseline" style={{ gap: 9 }}>
+          <Text style={{ fontSize: 11, fontWeight: '600', color: colors.status.executed }}>✓</Text>
+          <Text style={{ fontSize: 12.5, lineHeight: 16, color: option.winner ? colors.textPrimary : colors.textSecondary }}>{a}</Text>
+        </Box>
+      ))}
+    </Box>
+  );
+
+  return (
+    <MotionView style={{ flex: 1, opacity, transform: [{ translateY }] }}>
+      {selectable ? (
+        <Pressable onPress={() => onSelect?.(option.id)} aria-pressed={selected} aria-label={option.label} style={{ width: '100%' }}>
+          {content}
+        </Pressable>
+      ) : (
+        content
+      )}
+    </MotionView>
+  );
+}
+
+/** The flat-text fallback — `_shared/SHELL.md` rule 1. */
+export function comparisonToText(options: ComparisonOption[]): string {
+  return options
+    .map(o => `${o.label}${o.winner ? ' (winner)' : ''}: ${o.attributes.join(', ')}`)
+    .join('\n');
+}
+
+export type ComparisonCardProps = {
+  title: string;
+  chip?: string;
+  meta?: string;
+  options: ComparisonOption[];
+  mount?: 'read' | 'write';
+  selected?: string | null;
+  phase?: ComparisonPhase;
+  onSelect?: (id: string) => void;
+  onMenu?: () => void;
+  onAction?: (id: OutputActionId) => void;
+  testID?: string;
+};
+
+export function ComparisonCard({
+  title, chip = 'comparison', meta, options, mount = 'read', selected = null, phase = 'settled',
+  onSelect, onMenu, onAction, testID,
+}: ComparisonCardProps) {
+  const seen = useEntranceTracker();
+  const surface = useSurface();
+
+  if (phase === 'loading') {
+    return (
+      <OutputWidgetShell kind={chip} title={title} onMenu={onMenu} onAction={onAction} meta={meta} provisional testID={testID}>
+        <Box style={{ padding: 14 }}>
+          <Box row={surface === 'web'} style={{ gap: outputComparison.grid.gap }}>
+            <ComparisonSkeletonCard />
+            <ComparisonSkeletonCard />
+          </Box>
+        </Box>
+      </OutputWidgetShell>
+    );
+  }
+
+  return (
+    <OutputWidgetShell
+      kind={chip} title={title} onMenu={onMenu} onAction={onAction} meta={meta}
+      provisional={phase === 'partial'} testID={testID}>
+      <Box style={{ padding: 14 }}>
+        <Box row={surface === 'web'} style={{ gap: outputComparison.grid.gap }}>
+          {options.map((o, i) => (
+            <OptionCard
+              key={o.id} option={o} index={i} seen={seen}
+              selectable={mount === 'write' && !o.error} selected={selected === o.id} onSelect={onSelect}
+            />
+          ))}
+        </Box>
+      </Box>
+    </OutputWidgetShell>
+  );
+}

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

@@ -0,0 +1,4 @@
+export {
+  ComparisonCard, comparisonToText,
+  type ComparisonCardProps, type ComparisonOption, type ComparisonPhase,
+} from './ComparisonCard';

package/src/widgets/output/renderers/deck/DeckCard.tsx

@@ -0,0 +1,144 @@
+import { Box, Pressable, Text } from '../../../../core';
+import { useDs } from '../../../../tokens';
+import { OutputWidgetShell } from '../../OutputWidgetShell';
+import type { OutputActionId } from '../../document';
+
+/**
+ * **`deck` — X4, decision family.** `docs/output-type-sheets/deck.md`, variation B, "default (as
+ * shipped)". `mount: 'write'` decides the top card; `mount: 'read'` shows an already-decided set,
+ * no controls (KeyValue's B1 "nothing is clickable and nothing implies it should be," applied to
+ * controls instead of field rows). Dashboard/replay freezes decisions — no Undo regardless of
+ * density, handled by the host passing `mount: 'read'` for that case (this renderer does not
+ * itself know about Canvas/Dashboard).
+ */
+
+export type DeckDecision = 'kept' | 'passed';
+export type DeckDensity = 'compact' | 'default' | 'expanded';
+export type DeckItem = { id: string; title: string; note?: string; attributes?: { label: string; notable?: boolean }[] };
+export type DeckPhase = 'loading' | 'settled';
+
+function StackCard({ item, layer }: { item: DeckItem | undefined; layer: 0 | 1 | 2 }) {
+  const { colors } = useDs();
+  const insets = [0, 8, 15];
+  const tops = [0, 6, 12];
+  const lifts = [2, 1, 1] as const;
+  return (
+    <Box
+      lift={lifts[layer]}
+      bg="surface1"
+      style={{
+        position: layer === 0 ? 'relative' : 'absolute',
+        left: insets[layer], right: insets[layer], top: tops[layer],
+        padding: 15, gap: 7, minHeight: 130, borderRadius: 18,
+        borderWidth: layer === 0 ? 0 : 1, borderColor: colors.hairline,
+        zIndex: 3 - layer,
+      }}>
+      {item ? (
+        <>
+          <Text style={{ fontSize: 16, fontWeight: '600', color: colors.textPrimary }}>{item.title}</Text>
+          {item.note ? <Text color="textSecondary" style={{ fontSize: 12.5, lineHeight: 18 }}>{item.note}</Text> : null}
+        </>
+      ) : null}
+    </Box>
+  );
+}
+
+export type DeckCardProps = {
+  title: string;
+  chip?: string;
+  meta?: string;
+  items: DeckItem[];
+  decided: Record<string, DeckDecision>;
+  /** Accepted for contract-completeness; the three densities render identically this pass — see
+      `docs/output-type-sheets/deck.md`'s A/C variations for the not-yet-built difference
+      (title-only compact top card, and the chip-row/footer/Undo expanded treatment). */
+  density?: DeckDensity;
+  mount?: 'read' | 'write';
+  phase?: DeckPhase;
+  onDecide?: (id: string, decision: DeckDecision) => void;
+  onMenu?: () => void;
+  onAction?: (id: OutputActionId) => void;
+  testID?: string;
+};
+
+export function DeckCard({
+  title, chip = 'deck', meta, items, decided, mount = 'read', phase = 'settled', onDecide, onMenu, onAction, testID,
+}: DeckCardProps) {
+  const { colors } = useDs();
+  const queue = items.filter(it => !decided[it.id]);
+  const kept = Object.values(decided).filter(d => d === 'kept').length;
+  const passed = Object.values(decided).filter(d => d === 'passed').length;
+
+  if (phase === 'loading') {
+    return (
+      <OutputWidgetShell kind={chip} title={title} onMenu={onMenu} onAction={onAction} meta={meta} provisional testID={testID}>
+        <Box style={{ padding: 15 }}>
+          <Box style={{ height: 130, borderRadius: 18, backgroundColor: colors.surfaceSunken }} />
+        </Box>
+      </OutputWidgetShell>
+    );
+  }
+
+  if (items.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 }}>Nothing to decide</Text></Box>
+      </OutputWidgetShell>
+    );
+  }
+
+  const exhausted = queue.length === 0;
+
+  return (
+    <OutputWidgetShell kind={chip} title={title} onMenu={onMenu} onAction={onAction} meta={meta} testID={testID}>
+      <Box style={{ padding: 15, gap: 13 }}>
+        {exhausted ? (
+          <Text color="textSecondary" style={{ fontSize: 13, textAlign: 'center' }}>Kept {kept} · Passed {passed}</Text>
+        ) : (
+          <>
+            <Box row align="center" style={{ gap: 13 }}>
+              {mount === 'write' ? (
+                <Pressable
+                  onPress={() => onDecide?.(queue[0]!.id, 'passed')}
+                  hit={44}
+                  bg="accentTint"
+                  radius="pill"
+                  align="center" justify="center"
+                  aria-label="Pass"
+                  style={{ width: 44, height: 44 }}>
+                  <Text color="accentInk" style={{ fontSize: 16, fontWeight: '700' }}>✕</Text>
+                </Pressable>
+              ) : null}
+
+              <Box style={{ flex: 1, height: 160, position: 'relative' }}>
+                <StackCard item={queue[2]} layer={2} />
+                <StackCard item={queue[1]} layer={1} />
+                <StackCard item={queue[0]} layer={0} />
+              </Box>
+
+              {mount === 'write' ? (
+                <Pressable
+                  onPress={() => onDecide?.(queue[0]!.id, 'kept')}
+                  hit={44}
+                  style={{ width: 44, height: 44, borderRadius: 22, backgroundColor: colors.statusBg.executed, alignItems: 'center', justifyContent: 'center' }}
+                  aria-label="Keep">
+                  <Text style={{ fontSize: 16, fontWeight: '700', color: colors.status.executed }}>✓</Text>
+                </Pressable>
+              ) : null}
+            </Box>
+            <Text color="textSecondary" style={{ fontSize: 13, textAlign: 'center' }}>
+              Kept {kept} · Passed {passed} · {queue.length} left
+            </Text>
+          </>
+        )}
+      </Box>
+    </OutputWidgetShell>
+  );
+}
+
+export function deckToText(items: DeckItem[], decided: Record<string, DeckDecision>): string {
+  const kept = items.filter(it => decided[it.id] === 'kept').length;
+  const passed = items.filter(it => decided[it.id] === 'passed').length;
+  const left = items.length - kept - passed;
+  return `Kept ${kept} · Passed ${passed} · ${left} left`;
+}

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

@@ -0,0 +1,4 @@
+export {
+  DeckCard, deckToText,
+  type DeckCardProps, type DeckItem, type DeckDensity, type DeckDecision, type DeckPhase,
+} from './DeckCard';

package/src/widgets/output/renderers/delta/DeltaCard.tsx

@@ -0,0 +1,146 @@
+import { Box, MotionView, Text } from '../../../../core';
+import { useDs } from '../../../../tokens';
+import { OutputWidgetShell } from '../../OutputWidgetShell';
+import { outputRow, outputDelta } from '../../tokens';
+import { staggerDelay, useEntrance, useEntranceTracker } from '../../motion';
+import type { OutputActionId } from '../../document';
+
+export type DeltaPhase = 'loading' | 'partial' | 'settled';
+
+/**
+ * **`delta` — X3.** `design_handoff_output_variations/delta.md`, variation A, **"pill (as
+ * shipped)"** — the one variation this bundle explicitly marks as the shipped treatment, so
+ * there's no O9-style default to pick or document.
+ *
+ * With `deck`, one of only two output widgets producing a real outcome metric — everything else
+ * falls to count or nothing. Read-only; direction is derived from the payload, never stored.
+ */
+
+export type DeltaTone = 'improvement' | 'regression' | 'flat';
+
+export type DeltaRow = {
+  slug: string;
+  label: string;
+  value: string;
+  /** A true minus (`−38m`), not a hyphen — the spec's own copy rule. Omit for `flat`. */
+  magnitude?: string;
+  tone: DeltaTone;
+};
+
+function toneColor(tone: DeltaTone, colors: ReturnType<typeof useDs>['colors']) {
+  /* `regression` is `--clay-deep` per the spec's own literal colour choice — not apricot, so
+     there is no X6 substitution question here at all. `improvement` is mint. `flat` (not drawn
+     in the handoff; a reasonable extension for a genuinely unchanged value) is muted. */
+  if (tone === 'improvement') return colors.status.executed;
+  if (tone === 'regression') return colors.status.error;
+  return colors.textSecondary;
+}
+
+function DeltaPill({ row }: { row: DeltaRow }) {
+  const { colors } = useDs();
+  const p = outputDelta.pill;
+  const color = toneColor(row.tone, colors);
+  const arrow = row.tone === 'improvement' ? '↑' : row.tone === 'regression' ? '↓' : '—';
+  const magnitude = row.magnitude ?? '';
+  return (
+    <Box
+      style={{ backgroundColor: colors.surface1, paddingVertical: p.padY, paddingHorizontal: p.padX, borderRadius: p.radius }}
+      aria-label={`${row.tone} ${magnitude}`.trim()}>
+      <Box row align="center" style={{ gap: 4 }}>
+        <Text style={{ fontSize: 12, lineHeight: 12, fontWeight: '600', color }}>{arrow}</Text>
+        <Text mono style={{ fontSize: 12, lineHeight: 12, color }}>{magnitude}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+/** Loading/partial placeholder — same footprint as a real row so nothing jumps on resolve. */
+function DeltaSkeletonRow() {
+  const { colors } = useDs();
+  return (
+    <Box
+      row align="center" justify="space-between"
+      style={{ backgroundColor: colors.surfaceSunken, borderRadius: outputRow.radius, padding: outputDelta.row.pad, gap: outputDelta.row.gap }}>
+      <Box style={{ gap: 6 }}>
+        <Box style={{ width: 62, height: 14, borderRadius: 6, backgroundColor: colors.hairlineStrong }} />
+        <Box style={{ width: 88, height: 9, borderRadius: 4, backgroundColor: colors.hairlineStrong }} />
+      </Box>
+      <Box style={{ width: 54, height: 22, borderRadius: outputDelta.pill.radius, backgroundColor: colors.hairlineStrong }} />
+    </Box>
+  );
+}
+
+function DeltaRowView({ row, index, seen }: { row: DeltaRow; index: number; seen: Set<string> }) {
+  const { colors } = useDs();
+  const { opacity, translateY } = useEntrance(row.slug, seen, { variant: 'rise', delayMs: staggerDelay(index, outputRow.gap) });
+  return (
+    <MotionView style={{ opacity, transform: [{ translateY }] }}>
+      <Box
+        row align="center" justify="space-between"
+        style={{ backgroundColor: colors.surfaceSunken, borderRadius: outputRow.radius, padding: outputDelta.row.pad, gap: outputDelta.row.gap }}>
+        <Box>
+          <Text style={{ fontSize: 14.5, lineHeight: 18, fontWeight: '600', color: colors.textPrimary }}>{row.value}</Text>
+          <Text
+            mono uppercase color="textSecondary"
+            style={{ fontSize: outputRow.label.size, lineHeight: outputRow.label.size * 1.4, letterSpacing: outputRow.label.size * outputRow.label.tracking }}>
+            {row.label}
+          </Text>
+        </Box>
+        <DeltaPill row={row} />
+      </Box>
+    </MotionView>
+  );
+}
+
+/** The flat-text fallback — `_shared/SHELL.md` rule 1. */
+export function deltaToText(rows: DeltaRow[]): string {
+  return rows
+    .map(r => {
+      const sign = r.tone === 'improvement' ? '+' : r.tone === 'regression' ? '' : '';
+      return `${r.label}: ${r.value} (${sign}${r.magnitude ?? 'no change'})`;
+    })
+    .join('\n');
+}
+
+export type DeltaCardProps = {
+  title: string;
+  chip?: string;
+  meta?: string;
+  rows: DeltaRow[];
+  phase?: DeltaPhase;
+  /** How many skeleton rows while `phase === 'loading'` and no rows are known yet. */
+  loadingCount?: number;
+  onMenu?: () => void;
+  onAction?: (id: OutputActionId) => void;
+  testID?: string;
+};
+
+export function DeltaCard({
+  title, chip = 'delta', meta, rows, phase = 'settled', loadingCount = 3, onMenu, onAction, testID,
+}: DeltaCardProps) {
+  const seen = useEntranceTracker();
+
+  if (phase === 'loading') {
+    return (
+      <OutputWidgetShell kind={chip} title={title} onMenu={onMenu} onAction={onAction} meta={meta} provisional testID={testID}>
+        <Box style={{ padding: 14, gap: 8 }}>
+          {Array.from({ length: loadingCount }, (_, i) => <DeltaSkeletonRow key={i} />)}
+        </Box>
+      </OutputWidgetShell>
+    );
+  }
+
+  return (
+    <OutputWidgetShell
+      kind={chip} title={title} onMenu={onMenu} onAction={onAction} meta={meta}
+      provisional={phase === 'partial'} testID={testID}>
+      <Box style={{ padding: 14, gap: 8 }}>
+        {rows.length === 0 ? (
+          <Text color="textSecondary" style={{ fontSize: 12.5, lineHeight: 16 }}>No changes since the last run</Text>
+        ) : (
+          rows.map((r, i) => <DeltaRowView key={r.slug} row={r} index={i} seen={seen} />)
+        )}
+      </Box>
+    </OutputWidgetShell>
+  );
+}

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

@@ -0,0 +1,4 @@
+export {
+  DeltaCard, deltaToText,
+  type DeltaCardProps, type DeltaRow, type DeltaTone, type DeltaPhase,
+} from './DeltaCard';

package/src/widgets/output/renderers/diff/DiffCard.tsx

@@ -0,0 +1,139 @@
+import { Box, MotionView, Text } from '../../../../core';
+import { useDs } from '../../../../tokens';
+import { OutputWidgetShell } from '../../OutputWidgetShell';
+import { staggerDelay, useEntrance, useEntranceTracker } from '../../motion';
+import type { OutputActionId } from '../../document';
+
+/**
+ * **`diff` — X4.** `docs/output-type-sheets/diff.md`. Field-level value diff, never a text/code
+ * diff. Colour never carries change meaning — strike-through and `→` do, per the source's own
+ * "all three are text... never red/green fills."
+ */
+
+export type DiffField = { id: string; label: string; before: string | null; after: string | null; rule?: string };
+export type DiffPhase = 'loading' | 'settled';
+
+function DiffValue({ text, dim, strike }: { text: string; dim?: boolean; strike?: boolean }) {
+  const { colors } = useDs();
+  return (
+    <Text
+      mono
+      style={{
+        flex: 1, fontSize: 11.5, color: dim ? colors.textSecondary : colors.textPrimary,
+        textDecorationLine: strike ? 'line-through' : 'none',
+      }}>
+      {text}
+    </Text>
+  );
+}
+
+function DiffRowView({ field, index, seen }: { field: DiffField; index: number; seen: Set<string> }) {
+  const { colors } = useDs();
+  const { opacity, translateY } = useEntrance(field.id, seen, { variant: 'rise', delayMs: staggerDelay(index, 70) });
+  const before = field.before ?? '—';
+  const after = field.after ?? '—';
+  return (
+    <MotionView style={{ opacity, transform: [{ translateY }] }}>
+      <Box style={{ borderBottomWidth: 1, borderBottomColor: colors.hairline, paddingVertical: 12, paddingHorizontal: 14 }}>
+        <Box row align="baseline" style={{ gap: 10 }}>
+          <Text mono uppercase color="textSecondary" style={{ width: 72, fontSize: 10, fontWeight: '600', letterSpacing: 0.8 }}>
+            {field.label}
+          </Text>
+          <DiffValue text={before} dim strike={field.before != null} />
+          <Text mono color="textSecondary" style={{ fontSize: 11 }}>→</Text>
+          <DiffValue text={after} />
+        </Box>
+        {field.rule ? (
+          <Text color="textSecondary" style={{ fontSize: 11.5, paddingLeft: 82, marginTop: 4 }}>{field.rule}</Text>
+        ) : null}
+      </Box>
+    </MotionView>
+  );
+}
+
+export type DiffCardProps = {
+  title: string;
+  chip?: string;
+  meta?: string;
+  fields?: DiffField[];
+  before?: string | null;
+  after?: string | null;
+  phase?: DiffPhase;
+  onMenu?: () => void;
+  onAction?: (id: OutputActionId) => void;
+  testID?: string;
+};
+
+export function DiffCard({
+  title, chip = 'diff', meta, fields, before, after, phase = 'settled', onMenu, onAction, testID,
+}: DiffCardProps) {
+  const { colors } = useDs();
+  const seen = useEntranceTracker();
+
+  if (phase === 'loading') {
+    return (
+      <OutputWidgetShell kind={chip} title={title} onMenu={onMenu} onAction={onAction} meta={meta} provisional testID={testID}>
+        <Box style={{ padding: 13, gap: 8 }}>
+          {[0, 1].map(i => (
+            <Box key={i} style={{ height: 14, borderRadius: 6, backgroundColor: colors.hairlineStrong }} />
+          ))}
+        </Box>
+      </OutputWidgetShell>
+    );
+  }
+
+  const hasFields = fields && fields.length > 0;
+
+  if (!hasFields) {
+    // Variation A — "in and out": a single before/after pair, no per-field breakdown.
+    if (before == null && after == null) {
+      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 changes</Text></Box>
+        </OutputWidgetShell>
+      );
+    }
+    return (
+      <OutputWidgetShell kind={chip} title={title} onMenu={onMenu} onAction={onAction} meta={meta} testID={testID}>
+        <Box bg="surfaceSunken" radius="control" style={{ padding: 13, gap: 5 }}>
+          <Text mono color="textSecondary" style={{ fontSize: 11.5 }}>{before ?? '—'}</Text>
+          <Text mono style={{ fontSize: 11.5, color: colors.textPrimary }}>{after ?? '—'}</Text>
+        </Box>
+      </OutputWidgetShell>
+    );
+  }
+
+  const changed = fields!.filter(f => f.before !== f.after);
+  const withRule = changed.some(f => f.rule);
+  const unresolved = 0; // resolved fields only reach this renderer; a producer omits pending ones
+
+  return (
+    <OutputWidgetShell kind={chip} title={title} onMenu={onMenu} onAction={onAction} meta={meta} testID={testID}>
+      {changed.length === 0 ? (
+        <Box style={{ padding: 16 }}><Text color="textSecondary" style={{ fontSize: 12.5 }}>No changes</Text></Box>
+      ) : (
+        <Box>
+          {withRule ? (
+            <Box row bg="surfaceSunken" justify="space-between" style={{ padding: 11, paddingHorizontal: 14 }}>
+              <Text mono uppercase color="textSecondary" style={{ fontSize: 10, fontWeight: '600', letterSpacing: 0.8 }}>
+                {changed.length} field{changed.length === 1 ? '' : 's'} changed
+              </Text>
+              <Text mono color="textSecondary" style={{ fontSize: 11 }}>{unresolved} unresolved</Text>
+            </Box>
+          ) : null}
+          {changed.map((f, i) => <DiffRowView key={f.id} field={f} index={i} seen={seen} />)}
+        </Box>
+      )}
+    </OutputWidgetShell>
+  );
+}
+
+export function diffToText(fields?: DiffField[], before?: string | null, after?: string | null): string {
+  if (fields && fields.length > 0) {
+    return fields
+      .filter(f => f.before !== f.after)
+      .map(f => `${f.label}: ${f.before ?? 'added'} → ${f.after ?? 'removed'}${f.rule ? ` (${f.rule})` : ''}`)
+      .join('\n');
+  }
+  return `${before ?? '—'} → ${after ?? '—'}`;
+}

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

@@ -0,0 +1,4 @@
+export {
+  DiffCard, diffToText,
+  type DiffCardProps, type DiffField, type DiffPhase,
+} from './DiffCard';