@lotics/ui 28.3.1 → 29.2.0

package/examples/tpl_task_board.tsx

@@ -28,7 +28,8 @@ import { INLINE_CONTROL_HEIGHT } from "@lotics/ui/inline_edit";
 import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
 import { Composer } from "@lotics/ui/composer";
 import { AgentRun } from "@lotics/ui/agent_run";
-import { Change, ChangeReview, ChangeReviewActions, ChangeReviewHeader, ChangeSummary, type ChangeStatus } from "@lotics/ui/change_review";
+import { DiffMark } from "@lotics/ui/diff_mark";
+import { useChangeSet } from "@lotics/ui/use_change_set";
 import { Dialog, DialogHeader, DialogHeaderTitle, DialogScrollArea, DialogFooter } from "@lotics/ui/dialog";
 import { CompletionState } from "@lotics/ui/completion_state";
 import { type ConfidenceLevel } from "@lotics/ui/confidence";
@@ -228,23 +229,26 @@ export function TplTaskBoard() {
   const [phase, setPhase] = useState<Phase>("idle");
   const [revealed, setRevealed] = useState(0);
   const [proposals, setProposals] = useState<Proposal[]>([]);
-  const [decisions, setDecisions] = useState<Record<string, ChangeStatus>>({});
   const [addedCount, setAddedCount] = useState(0);
 
+  // Each drafted task deserves its OWN verdict, so this set starts `pending` and
+  // the commit counts what was kept. An intake where the whole drop is one
+  // decision leaves `initial` at its default and never renders per-row buttons.
+  const proposalIds = useMemo(() => proposals.map((p) => p.id), [proposals]);
+  const review = useChangeSet(proposalIds, { initial: "pending" });
+
   const startDraft = useCallback(() => { setRevealed(0); setPhase("reading"); }, []);
-  const resetDraft = useCallback(() => { setProposals([]); setDecisions({}); setRevealed(0); setPhase("idle"); }, []);
+  const resetDraft = useCallback(() => { setProposals([]); review.reset(); setRevealed(0); setPhase("idle"); }, [review]);
   const closeDraft = useCallback(() => { setDraftOpen(false); resetDraft(); }, [resetDraft]);
   const editProposal = useCallback((id: string, p: Partial<Proposal>) =>
     setProposals((ps) => ps.map((x) => (x.id === id ? { ...x, ...p } : x))), []);
-  const decide = useCallback((id: string, status: ChangeStatus | null) =>
-    setDecisions((dec) => { const n = { ...dec }; if (status) n[id] = status; else delete n[id]; return n; }), []);
-  const acceptedCount = proposals.filter((p) => decisions[p.id] === "accepted").length;
   const addAccepted = useCallback(() => {
-    const accepted = proposals.filter((p) => decisions[p.id] === "accepted");
+    const kept = new Set(review.accepted);
+    const accepted = proposals.filter((p) => kept.has(p.id));
     setTasks((ts) => [...ts, ...accepted.map((p, i) => ({ id: `d-${p.id}-${i}`, title: p.title, ownerId: null, due: p.due, status: "todo" as Status, tags: [], files: [], action: null }))]);
     setAddedCount(accepted.length);
     setPhase("done");
-  }, [proposals, decisions]);
+  }, [proposals, review.accepted]);
 
   useEffect(() => {
     if (phase !== "reading") return;
@@ -382,10 +386,10 @@ export function TplTaskBoard() {
       </View>
     </ScrollView>
 
-    {/* Draft from notes — Composer → AgentRun → ChangeReview → commit (adds tasks).
-        The review provider wraps the WHOLE dialog so the `Change`s (scroll area)
-        and the commit bar (`DialogFooter`) share one review context. */}
-    <ChangeReview>
+    {/* Draft from notes — Composer → AgentRun → review → commit (adds tasks).
+        NO provider wraps the dialog: `useChangeSet` holds the decisions, so the
+        counter in the scroll area and the commit bar in the footer read one
+        object without a context spanning both. */}
     <Dialog open={draftOpen} onOpenChange={(o) => { if (!o) closeDraft(); }} maxWidth={620}>
       <DialogHeader><DialogHeaderTitle>Draft from notes</DialogHeaderTitle></DialogHeader>
       <DialogScrollArea>
@@ -398,25 +402,37 @@ export function TplTaskBoard() {
         {phase === "reading" ? <AgentRun parts={runItems} state={revealed >= DRAFT_STEPS.length ? "done" : "streaming"} /> : null}
         {phase === "review" ? (
           <View style={{ gap: 8 }}>
-            <ChangeReviewHeader title="Drafted tasks" />
+            {/* Heading + counter are ordinary components — the count is one
+                expression off `review`, so it can sit here, in the footer, or
+                nowhere, without a context spanning the screen to supply it. */}
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              <Text size="md" weight="semibold" style={{ flex: 1 }}>Drafted tasks</Text>
+              <Text size="xs" color="muted">{`${review.keptCount} of ${review.total} kept`}</Text>
+            </View>
             <Text size="sm" color="muted">{`${proposals.length} from your notes — keep, edit, or drop each. A “Low” mark is worth a glance.`}</Text>
             {proposals.map((p) => {
-              const status = decisions[p.id] ?? "pending";
-              const kept = status === "accepted";
+              const status = review.status(p.id);
+              if (status !== "pending") {
+                // The decided row: a mark, the title, an Undo. The template says
+                // how a settled proposal reads instead of inheriting one
+                // container's answer.
+                const kept = status === "accepted";
+                return (
+                  <View key={p.id} style={{ flexDirection: "row", alignItems: "center", gap: 8, paddingVertical: 6 }}>
+                    <DiffMark kind={kept ? "added" : "removed"} />
+                    <Text size="sm" numberOfLines={1} style={{ flex: 1 }} color={kept ? "default" : "muted"} decoration={kept ? undefined : "lineThrough"}>{p.title}</Text>
+                    <Button title="Undo" color="muted" onPress={() => review.undo(p.id)} />
+                  </View>
+                );
+              }
               return (
-                <Change
-                  key={p.id}
-                  id={p.id}
-                  status={status}
-                  onAccept={() => decide(p.id, "accepted")}
-                  onReject={() => decide(p.id, "rejected")}
-                  onUndo={() => decide(p.id, null)}
-                >
+                <View key={p.id} style={{ gap: 8, paddingVertical: 6 }}>
                   <TaskProposal proposal={p} onEdit={editProposal} />
-                  <ChangeSummary>
-                    <Text size="sm" numberOfLines={1} color={kept ? "default" : "muted"} style={kept ? undefined : { textDecorationLine: "line-through" }}>{p.title}</Text>
-                  </ChangeSummary>
-                </Change>
+                  <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: 8 }}>
+                    <Button title="Drop" color="muted" onPress={() => review.reject(p.id)} />
+                    <Button title="Keep" color="secondary" onPress={() => review.accept(p.id)} />
+                  </View>
+                </View>
               );
             })}
           </View>
@@ -427,7 +443,8 @@ export function TplTaskBoard() {
       </DialogScrollArea>
       {phase === "review" ? (
         <DialogFooter>
-          <ChangeReviewActions onApply={addAccepted} onDiscard={resetDraft} applyLabel={`Add ${acceptedCount} ${acceptedCount === 1 ? "task" : "tasks"}`} />
+          <Button title="Discard" color="secondary" onPress={resetDraft} />
+          <Button title={`Add ${review.keptCount} ${review.keptCount === 1 ? "task" : "tasks"}`} color="primary" disabled={review.keptCount === 0} onPress={addAccepted} />
         </DialogFooter>
       ) : phase === "done" ? (
         <DialogFooter>
@@ -436,7 +453,6 @@ export function TplTaskBoard() {
         </DialogFooter>
       ) : null}
     </Dialog>
-    </ChangeReview>
     </>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "28.3.1",
+  "version": "29.2.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -106,7 +106,6 @@
     },
     "./markdown.css": "./src/markdown.css",
     "./confidence": "./src/confidence.tsx",
-    "./change_review": "./src/change_review.tsx",
     "./finding": "./src/finding.tsx",
     "./clarify": "./src/clarify.tsx",
     "./clarify_wizard": "./src/clarify_wizard.tsx",
@@ -147,6 +146,7 @@
     "./inset": "./src/inset.tsx",
     "./inline_button": "./src/inline_button.tsx",
     "./inline_edit": "./src/inline_edit.tsx",
+    "./inline_slot": "./src/inline_slot.tsx",
     "./inline_static": "./src/inline_static.tsx",
     "./inline_text_input": "./src/inline_text_input.tsx",
     "./inline_number_input": "./src/inline_number_input.tsx",
@@ -256,7 +256,10 @@
     "./skip_link": "./src/skip_link.tsx",
     "./text_utils": "./src/text_utils.ts",
     "./column_filter": "./src/column_filter.tsx",
-    "./chip_group": "./src/chip_group.tsx"
+    "./chip_group": "./src/chip_group.tsx",
+    "./diff_value": "./src/diff_value.tsx",
+    "./diff_mark": "./src/diff_mark.tsx",
+    "./use_change_set": "./src/use_change_set.ts"
   },
   "files": [
     "src",

package/src/agent_run.tsx

@@ -142,7 +142,7 @@ const INK = colors.zinc[700];
  * fires (not a growing stack of dots); once prose resumes the group settles into
  * one row — "{final action} ({n} steps)" — that EXPANDS on press to the steps in
  * between. Text segments render as prose. The run always ends on the agent's text.
- * Pair with `Composer` + `ChangeReview`.
+ * Pair with `Composer` + a review surface (`DiffValue` / `useChangeSet`).
  */
 export function AgentRun(props: AgentRunProps) {
   const { parts, labelForCall, renderToolOutput, onRetry, stepsLabel, accessibilityLabel } = props;

package/src/clarify_wizard.tsx

@@ -49,7 +49,7 @@ const ScopeContext = createContext<ClarifyWizardScopeValue | null>(null);
 /**
  * The compound frame for a wizard whose actions live in the dialog's footer —
  * the dialog grammar's home for action bars. Wrap the `Dialog` from OUTSIDE
- * (the `ChangeReview` position), put the `ClarifyWizard` in the content pane
+ * (where the review would sit), put the `ClarifyWizard` in the content pane
  * and `ClarifyWizardActions` in the `DialogFooter`; the wizard then suppresses
  * its inline action row and drives the bar through this scope. One wizard per
  * scope. Standalone `ClarifyWizard` (no scope — e.g. riding a parked run's

package/src/diff_mark.tsx

@@ -0,0 +1,110 @@
+import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
+import { Text } from "./text";
+import { Icon, type IconName } from "./icon";
+import { colors } from "./colors";
+import { useLoticsLocale } from "./locale";
+
+/**
+ * WHAT HAPPENED TO THIS ROW — the second atom, and the other half of a review.
+ *
+ * `DiffValue` says how a value moved; this says what happened to the thing
+ * holding it, for the cases where no single value carries the change: a row that
+ * is entirely new, one that will be removed, one that a document merely touched.
+ *
+ * Deliberately tiny and layout-free so it can lead a table row, sit in a card
+ * corner, precede a field label, or annotate a list item — the host decides
+ * where. It renders a glyph plus an accessible word, never colour alone: "added"
+ * and "removed" differing only by hue is invisible to a reader who cannot
+ * separate them, and this is exactly the distinction a review turns on.
+ *
+ * ONE treatment, everywhere: a filled DISC. It briefly had two — a bare glyph
+ * for dense surfaces, a filled shape for sparse ones — and a form marked with
+ * bare glyphs sitting beside a table marked with filled shapes read as two
+ * different systems saying the same thing. A reader parses shape before meaning,
+ * so an unexplained difference reads as an accident however principled the
+ * reason was. The disc also gives the glyph its own ground, which is what lets
+ * one mark sit on a white row, a tinted cell, or a photograph.
+ */
+export type DiffKind = "added" | "changed" | "removed" | "unchanged";
+
+export interface DiffMarkProps {
+  kind: DiffKind;
+  /** Print the word beside the disc. Off by default — in a table the column
+   *  already says what the mark means, and repeating it on every row is noise. */
+  showLabel?: boolean;
+  /** Override the word (the row is not "added", it is "new claim line"). */
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Sized to be READ, not to be tasteful. The glyph began at 13px against 14px
+ * label text — proportionate, and too small to identify without looking
+ * straight at it, which is the one thing a scan mark must never require.
+ *
+ * The ink is 700 on a 100 ground: at 600-on-50 the amber measured ~3.4:1, over
+ * the 3:1 floor for a graphical object by so little that any dimming — a decided
+ * row at half opacity, which this renders inside routinely — put it under.
+ */
+export const DIFF_MARK_SIZE = 22;
+const GLYPH_SIZE = 14;
+
+const GLYPH: Record<DiffKind, { icon: IconName | null; color: string; ground: string }> = {
+  added: { icon: "plus", color: colors.emerald[700], ground: colors.emerald[100] },
+  changed: { icon: "pencil", color: colors.amber[700], ground: colors.amber[100] },
+  removed: { icon: "minus", color: colors.red[700], ground: colors.red[100] },
+  unchanged: { icon: null, color: colors.zinc[300], ground: "transparent" },
+};
+
+export function DiffMark({ kind, showLabel, label, style }: DiffMarkProps) {
+  const loc = useLoticsLocale().diff;
+  const g = GLYPH[kind];
+  const word = label ?? loc[kind];
+
+  // UNTOUCHED IS SILENCE — an empty disc-sized hole, not a mark.
+  //
+  // Most rows in a real review are untouched, and a glyph on every one of them
+  // is the noise the mark existed to cut through: the reader ends up reading
+  // the column to find the rows that moved. The hole keeps the column's width,
+  // so the marks still form a line down the page and no untouched row shifts
+  // left. It announces nothing either — "Unchanged" eleven times is the same
+  // noise to a screen reader that a dot is to an eye.
+  if (kind === "unchanged") {
+    return <View style={[styles.disc, style]} />;
+  }
+
+  const disc = (extra?: StyleProp<ViewStyle>) => (
+    <View
+      style={[styles.disc, { backgroundColor: g.ground }, extra]}
+      accessibilityLabel={showLabel ? undefined : word}
+    >
+      <Icon name={g.icon as IconName} size={GLYPH_SIZE} color={g.color} />
+    </View>
+  );
+
+  // The word sits OUTSIDE the disc — text crammed inside stops it being a
+  // circle, and the shape is what makes the mark findable without reading.
+  // Without a word the disc IS the root: a wrapper around it would take the
+  // caller's style and leave the disc unstyled, which is a box with no size.
+  if (!showLabel) return disc(style);
+
+  return (
+    <View style={[styles.row, style]}>
+      {disc()}
+      <Text size="xs" color="muted">
+        {word}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "center", gap: 6 },
+  disc: {
+    width: DIFF_MARK_SIZE,
+    height: DIFF_MARK_SIZE,
+    borderRadius: DIFF_MARK_SIZE / 2,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/diff_value.tsx

@@ -0,0 +1,232 @@
+import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
+import { type ReactNode } from "react";
+import { Text } from "./text";
+import { colors } from "./colors";
+import { type TextColor } from "./text_utils";
+
+/**
+ * A VALUE THAT CHANGED — the atom of every review surface.
+ *
+ * It owns no layout beyond its own two lines: no container, no context, no
+ * section, no decision. That is the whole point. A review is not a place you go;
+ * it is a thing that happens to values already on screen, so the diff has to
+ * render wherever the value renders — a table cell, a `DetailRow`, a total, a
+ * chip, a sentence — and inherit that container's width, alignment and rhythm.
+ *
+ * The predecessor got this backwards: it was a compound family whose root was a
+ * required context provider emitting its own divided stack, so a change could
+ * only ever look like a stack of labelled field diffs. Every surface that needed
+ * a diff somewhere else — inside a ledger row, beside a total — had to rebuild
+ * it, and did.
+ *
+ * BOTH values stay on screen. The old one is the only evidence a reader has that
+ * the correction is the right SIZE; a bare new value asks them to trust it.
+ */
+export interface DiffValueProps {
+  /**
+   * The value being replaced. Omit for an ADDITION — nothing was there.
+   *
+   * Usually a string or a number. It may also be a NODE — a `FileBadge` for a
+   * scan being superseded, a chip for a link being repointed — and that case is
+   * struck by a drawn rule rather than by text decoration, because
+   * `line-through` set on a `Text` does not cross a `View` child: the old value
+   * would render at full strength beside its replacement with nothing saying it
+   * is the one going away.
+   */
+  before?: ReactNode;
+  /** The proposed value. Omit for a REMOVAL — the struck `before` is the change. */
+  after?: ReactNode;
+  /**
+   * `stacked` (default) puts `before` above `after` — the shape for a column of
+   * figures, where the eye compares down the column and the row height is free.
+   * `inline` puts them on one line with an arrow, for prose and dense rows where
+   * vertical space is the scarce thing.
+   */
+  layout?: "stacked" | "inline";
+  size?: "xs" | "sm" | "md";
+  /** Right for figures (with `tabular`), left for text. Inherited container
+   *  alignment is not enough: the two lines must agree with EACH OTHER. */
+  align?: "left" | "right";
+  /** Tabular figures — always on for money and counts, so the digits line up
+   *  between the struck value and its replacement. */
+  tabular?: boolean;
+  /** The tone of the AFTER value. Default `success` (a proposal, not yet a
+   *  fact); `danger` when the change itself is the bad news. */
+  tone?: "success" | "danger" | "default";
+  /**
+   * Shown in place of a missing `after` on a removal, and a missing `before` on
+   * an addition, when the absence needs a word rather than a blank.
+   *
+   * YOUR string, and yours to translate. This component renders no word of its
+   * own — the only fallbacks are `—` and empty — so nothing here reaches the
+   * locale packs. `DiffMark` beside it does ship localized words, and the two
+   * are different sentences even where English collides them: the mark says
+   * what happened to the ROW ("Removed"), this says what is in the FIELD now,
+   * which in Vietnamese is "đã xóa" or "bỏ trống" rather than the bare verb.
+   * The same prop also carries "Pick a candidate below".
+   */
+  placeholder?: string;
+  /**
+   * HOW FAR the value moved, pre-formatted by the host — "+250 pcs",
+   * "−118.519 ₫ VAT", "3 days later".
+   *
+   * `1.600.000 → 1.481.481` makes the reader do subtraction to find out whether
+   * a correction is trivial or alarming; the delta is the thing they were going
+   * to work out anyway. A string, not a number, because only the host knows the
+   * unit, the sign convention and the rounding — the same contract
+   * `FindingComparison.delta` already uses.
+   */
+  delta?: string;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+const TONE: Record<NonNullable<DiffValueProps["tone"]>, TextColor> = {
+  success: "success",
+  danger: "danger",
+  default: "default",
+};
+
+export function DiffValue(props: DiffValueProps) {
+  const {
+    before,
+    after,
+    layout = "stacked",
+    size = "sm",
+    align = "left",
+    tabular,
+    tone = "success",
+    placeholder,
+    delta,
+    style,
+    accessibilityLabel,
+  } = props;
+
+  const hasBefore = before !== undefined && before !== null && before !== "";
+  const hasAfter = after !== undefined && after !== null && after !== "";
+
+  /**
+   * AGREEMENT IS NOT A CHANGE — and it is information worth showing.
+   *
+   * A document that confirms the value already on the record is the good case:
+   * a supplier invoice matching the amount that was claimed, a second source
+   * agreeing with the first. Rendered as a diff it came out as the value struck
+   * through above an identical copy in the proposal colour, which asserts a
+   * change that did not happen and puts the reader through a comparison whose
+   * answer is "nothing". One value, plain, is the honest rendering.
+   *
+   * Compared only for primitives: two ReactNodes cannot be equality-checked, and
+   * guessing would silently collapse two genuinely different renders.
+   */
+  const comparable = (v: ReactNode) => typeof v === "string" || typeof v === "number";
+  const unchanged = hasBefore && hasAfter && comparable(before) && comparable(after) && before === after;
+
+  if (unchanged) {
+    return (
+      <View style={[align === "right" ? styles.stackedRight : null, style]} accessibilityLabel={accessibilityLabel}>
+        <Text size={size} tabular={tabular} numberOfLines={1} style={{ textAlign: align }}>
+          {after}
+        </Text>
+      </View>
+    );
+  }
+
+  // A DiffValue with neither side is not a diff — render the placeholder rather
+  // than an empty box that reads as a loading state.
+  if (!hasBefore && !hasAfter) {
+    return (
+      <Text size={size} color="muted" tabular={tabular} style={{ textAlign: align }}>
+        {placeholder ?? "—"}
+      </Text>
+    );
+  }
+
+  const beforeText = comparable(before) ? (
+    <Text
+      size={layout === "stacked" ? "xs" : size}
+      color="muted"
+      tabular={tabular}
+      decoration="lineThrough"
+      numberOfLines={1}
+      style={{ textAlign: align }}
+    >
+      {before}
+    </Text>
+  ) : (
+    // A NODE being replaced — a file badge, a chip, an avatar. Text
+    // decoration cannot reach it, so the rule is drawn across it and the
+    // whole thing is dimmed. Both are needed: the dimming alone reads as
+    // "secondary", the rule alone reads as a divider.
+    <View style={styles.struckNode}>
+      {before}
+      <View style={styles.struckRule} pointerEvents="none" />
+    </View>
+  );
+
+  const afterText = (
+    <Text
+      size={size}
+      // A removal has no replacement to emphasise, so the struck value carries
+      // the whole change and nothing below it should compete. The placeholder
+      // goes LIGHTER than muted deliberately: at `muted` it rendered 14px/400/
+      // zinc-600 — pixel-identical to the field LABEL beside it, so the one word
+      // saying a value is being deleted read as chrome. It describes an absence,
+      // so it sits below the label rather than level with it.
+      color={hasAfter ? TONE[tone] : "zinc-400"}
+      weight={hasAfter ? "medium" : "regular"}
+      tabular={tabular}
+      numberOfLines={1}
+      style={{ textAlign: align }}
+    >
+      {hasAfter ? after : (placeholder ?? "")}
+    </Text>
+  );
+
+  const deltaText =
+    delta === undefined || delta === "" ? null : (
+      <Text size="xs" color="muted" tabular={tabular} numberOfLines={1} style={{ textAlign: align }}>
+        {delta}
+      </Text>
+    );
+
+  if (layout === "inline") {
+    return (
+      <View
+        style={[styles.inline, align === "right" ? styles.inlineRight : null, style]}
+        accessibilityLabel={accessibilityLabel}
+      >
+        {hasBefore ? beforeText : null}
+        {hasBefore && (hasAfter || placeholder !== undefined) ? (
+          // Reads aloud as "becomes". The one piece of punctuation this file
+          // allows itself: a diff arrow names its relation, which is the test
+          // the composition grammar sets for any glue mark.
+          <Text size={size} color="muted" aria-hidden>
+            →
+          </Text>
+        ) : null}
+        {hasAfter || placeholder !== undefined ? afterText : null}
+        {deltaText}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[styles.stacked, align === "right" ? styles.stackedRight : null, style]}
+      accessibilityLabel={accessibilityLabel}
+    >
+      {hasBefore ? beforeText : null}
+      {hasAfter || placeholder !== undefined ? afterText : null}
+      {deltaText}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  struckNode: { position: "relative", alignSelf: "flex-start", opacity: 0.55 },
+  struckRule: { position: "absolute", left: 0, right: 0, top: "50%", height: 1, backgroundColor: colors.zinc[500] },
+  stacked: { gap: 1 },
+  stackedRight: { alignItems: "flex-end" },
+  inline: { flexDirection: "row", alignItems: "baseline", gap: 6, flexWrap: "wrap" },
+  inlineRight: { justifyContent: "flex-end" },
+});

package/src/file_badge.tsx

@@ -12,6 +12,8 @@ const MIME_MAP: Record<string, { label: string; color: string }> = {
   "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": { label: "XLSX", color: "#16a34a" },
   "application/vnd.ms-excel": { label: "XLS", color: "#16a34a" },
   "text/csv": { label: "CSV", color: "#16a34a" },
+  "application/zip": { label: "ZIP", color: "#a16207" },
+  "application/x-zip-compressed": { label: "ZIP", color: "#a16207" },
   "application/vnd.openxmlformats-officedocument.wordprocessingml.document": { label: "DOCX", color: "#2563eb" },
   "application/msword": { label: "DOC", color: "#2563eb" },
   "image/png": { label: "PNG", color: "#7c3aed" },

package/src/file_row.tsx

@@ -9,8 +9,18 @@ import { useFocusRing } from "./use_focus_ring";
 export interface FileRowProps {
   /** The file / document name — the primary line. */
   name: string;
-  /** Secondary line: size, status, timestamp, etc. */
-  meta?: string;
+  /**
+   * Secondary line: size, status, timestamp — or a NODE, when the second line
+   * is itself carrying a change.
+   *
+   * A document set under review needs it: a file being RECLASSIFIED is the same
+   * bytes with a different filing ("Other" becomes "Certificate of origin"),
+   * and a file being SUPERSEDED wants the scan it displaces struck beneath it.
+   * Both are `DiffValue`s, and a string could only have described them in prose.
+   * A node renders OUTSIDE the muted single-line `Text` — that wrapper would
+   * clip it and its colour would fight the diff's own.
+   */
+  meta?: React.ReactNode;
   /** File type → the FileBadge glyph + color. Omit (with `placeholder`) for an
    *  expected-but-not-yet-provided document. */
   mimeType?: string;
@@ -25,6 +35,16 @@ export interface FileRowProps {
    *  control. An independently-interactive SIBLING: never swallowed by the row
    *  press (a button never nests in the door button). */
   trailing?: React.ReactNode;
+  /**
+   * Leading slot, BEFORE the badge — a `DiffMark` saying what happened to this
+   * document, a selection checkbox, a status dot.
+   *
+   * It sits outside the badge rather than on it because it must line up DOWN
+   * the list: a mark drawn over a 30px badge moves with the badge's size, and
+   * `sm` and `md` rows would stop agreeing. Give every row the same slot,
+   * filled or empty, or the names stop forming a column.
+   */
+  leading?: React.ReactNode;
   /**
    * Row weight. `"sm"` (default) is the compact attachment line — many files
    * scanned as a list. `"md"` is the DOCUMENT-DESK row: a taller badge and a
@@ -53,6 +73,7 @@ export function FileRow({
   isTemplate,
   onPress,
   trailing,
+  leading,
   size = "sm",
 }: FileRowProps) {
   const md = size === "md";
@@ -68,16 +89,22 @@ export function FileRow({
 
   const content = (
     <>
+      {leading}
       <FileBadge size={md ? 38 : 30} mimeType={mimeType} placeholder={placeholder} isTemplate={isTemplate} />
       <View style={styles.text}>
         <Text size="sm" weight="medium" numberOfLines={1}>
           {name}
         </Text>
-        {meta ? (
+        {/* A STRING keeps the muted single-line treatment; a node renders as
+            itself. Wrapping a node here would clip it at one line and tint it
+            muted, which is exactly wrong for a diff that has its own colour. */}
+        {meta == null || meta === "" ? null : typeof meta === "string" ? (
           <Text size="xs" color="muted" numberOfLines={1}>
             {meta}
           </Text>
-        ) : null}
+        ) : (
+          meta
+        )}
       </View>
     </>
   );
@@ -117,19 +144,44 @@ export function FileRow({
   );
 }
 
+/**
+ * THE ROW BEAT, owned in one place.
+ *
+ * `sm` used to have no minimum and no vertical padding at all, so a static row
+ * was as tall as its own contents — 37px measured — while the same component
+ * with an `onPress` came out at 49, because only the pressable variant carried
+ * padding for its hover wash. Whether a row was a DOOR decided how tall it was,
+ * which is two owners for one property that happened never to be compared.
+ *
+ * 37 was also under every other row beat in the kit — `DetailRow` 40, the
+ * `TableRow` 52, this component's own `md` 56 — which is what "squeezed"
+ * literally was: a file line packed tighter than any list it sits beside.
+ */
+const ROW_MIN_HEIGHT = 48;
+const ROW_PAD_Y = 6;
+
 const styles = StyleSheet.create({
-  row: { flexDirection: "row", alignItems: "center", gap: 12 },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    minHeight: ROW_MIN_HEIGHT,
+    // The pressable variant's padding too, so the badge sits at the same height
+    // in both and a list mixing them keeps one baseline.
+    paddingVertical: ROW_PAD_Y,
+  },
   pressableRow: {
     flexDirection: "row",
     alignItems: "center",
     gap: 12,
+    minHeight: ROW_MIN_HEIGHT,
     // Negative horizontal margin cancels the padding for the CONTENT's position
     // (badge stays aligned with static rows / the container edge) while the hover
     // wash bleeds 8px outward into the parent's padding — a hit area with no
     // layout shift. The parent is expected to have ≥8px horizontal padding.
     marginHorizontal: -8,
     paddingHorizontal: 8,
-    paddingVertical: 6,
+    paddingVertical: ROW_PAD_Y,
     borderRadius: 8,
     ...({ transitionDuration: "0.1s", transitionProperty: "background-color" } as object),
   },