@lotics/ui 7.19.3 → 9.0.0

package/src/checklist.tsx

@@ -0,0 +1,104 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { ActionMenu, type ActionMenuItem } from "./action_menu";
+
+// The record-scoped CHECKLIST — the compound that owns the list's GEOMETRY
+// (row height, ring/title alignment, one trailing column width) while the
+// CONTENT stays composed: a `CheckCircle` (live or read-only) in `control`,
+// a struck `InlineTextInput` or plain `Text` as the title, an
+// `InlineMemberSelect` or nothing in `trailing`, and `menu` for the row's
+// ⋯ options (Delete lives BEHIND the menu — indirection that prevents
+// accidental destructive taps). Suggested tasks are NOT rows: offer the record
+// type's commons as `SuggestionChip`s under the list (tap = materialize,
+// ✕ = dismiss) — a pill can't be mistaken for a task. `CaptureRow` closes the
+// list as its add affordance. There is deliberately NO monolithic Task
+// component — richer task-management rows (expand affordances, tag/clip meta,
+// board cards) compose their own anatomy directly.
+//
+//   <Checklist trailingWidth={140}>
+//     <ChecklistRow control={<CheckCircle …/>} trailing={<InlineMemberSelect …/>}
+//                   menu={{ items: [{ key: "delete", label: "Delete task", danger: true, … }],
+//                           accessibilityLabel: "Task options: …" }}>
+//       <InlineTextInput background="transparent" struck={done} … />
+//     </ChecklistRow>
+//     <SuggestionChip label="Verify the tax ID" onAdd={materialize} onDismiss={dismiss} />
+//     <CaptureRow … />
+//   </Checklist>
+
+interface ChecklistContextValue {
+  trailingWidth?: number;
+}
+
+const ChecklistContext = createContext<ChecklistContextValue>({});
+
+export interface ChecklistProps {
+  /** Fixed width of every row's trailing cell (an assignee select) — set it
+   *  once so the column lines up; omit when rows carry no trailing. */
+  trailingWidth?: number;
+  children: ReactNode;
+}
+
+export function Checklist(props: ChecklistProps) {
+  const { trailingWidth, children } = props;
+  return (
+    <ChecklistContext.Provider value={{ trailingWidth }}>
+      <View style={styles.list}>{children}</View>
+    </ChecklistContext.Provider>
+  );
+}
+
+interface ChecklistRowBaseProps {
+  /** The leading toggle — a `CheckCircle` (omit `onChange` for a read-only ring). */
+  control: ReactNode;
+  /** The title — a struck transparent `InlineTextInput`, or plain `Text`. */
+  children: ReactNode;
+  /** The row's ⋯ options menu (destructive items last, `danger: true`) —
+   *  Delete lives HERE, never as a bare ✕ on the row, so a stray tap can't
+   *  destroy a task. Name the task in the label ("Task options: Book the
+   *  carrier"). The ⋯ column aligns only when every row in the list carries
+   *  a menu — keep its presence uniform per list. */
+  menu?: { items: ActionMenuItem[]; accessibilityLabel: string };
+}
+
+/** `trailing` (wide surfaces) and `meta` (narrow) are exclusive by type. */
+export type ChecklistRowProps = ChecklistRowBaseProps &
+  (
+    | {
+        /** The trailing cell (an `InlineMemberSelect`); sized by the list's `trailingWidth`. */
+        trailing?: ReactNode;
+        meta?: never;
+      }
+    | {
+        /** SECOND line under the title (indented past the ring) for a NARROW
+         *  surface — a drawer or popover checklist: put the assignee/due
+         *  editors here so the title keeps the full width and stays readable. */
+        meta?: ReactNode;
+        trailing?: never;
+      }
+  );
+
+/** One task line: control · title (flex) · the aligned trailing cell · ⋯,
+ *  with an optional indented `meta` line below for narrow surfaces. */
+export function ChecklistRow(props: ChecklistRowProps) {
+  const { control, children, trailing, menu, meta } = props;
+  const { trailingWidth } = useContext(ChecklistContext);
+  return (
+    <View>
+      <View style={styles.row}>
+        {control}
+        <View style={styles.title}>{children}</View>
+        {trailing != null ? <View style={trailingWidth != null ? { width: trailingWidth } : null}>{trailing}</View> : null}
+        {menu != null ? <ActionMenu items={menu.items} accessibilityLabel={menu.accessibilityLabel} /> : null}
+      </View>
+      {meta != null ? <View style={styles.meta}>{meta}</View> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  list: { gap: 4 },
+  row: { flexDirection: "row", alignItems: "center", gap: 12, minHeight: 32 },
+  title: { flex: 1 },
+  // Indent past the ring (20) + the row gap (12) so meta aligns with the title.
+  meta: { paddingLeft: 32, paddingBottom: 4, flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 2 },
+});

package/src/chip.tsx

@@ -1,5 +1,6 @@
 import { Ref } from "react";
 import { IconButton } from "./icon_button";
+import { useLoticsLocale } from "./locale";
 import { PressableHighlight } from "./pressable_highlight";
 import { chipSurfaceStyle } from "./control_surface";
 import { StyleSheet, View } from "react-native";
@@ -8,19 +9,27 @@ interface ChipProps {
   testID?: string;
   children: React.ReactNode;
   onPress?: () => void;
+  /** Accessible name of the press target. The pressable pill announces as a
+   *  button either way — its name derives from the children when they are
+   *  self-describing text; pass this when they aren't (icon-led content). */
+  accessibilityLabel?: string;
   onDismiss?: () => void;
   dismissTooltip?: string;
   ref?: Ref<View>;
 }
 
 export function Chip(props: ChipProps) {
-  const { testID, children, onPress, onDismiss, dismissTooltip, ref } = props;
+  const { testID, children, onPress, accessibilityLabel, onDismiss, dismissTooltip, ref } = props;
+  const labels = useLoticsLocale().chip;
 
   return (
     <View ref={ref}>
       {onPress ? (
         <PressableHighlight
-          focusRing          testID={testID}
+          focusRing
+          testID={testID}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
           onPress={onPress}
           style={(state) => [chipSurfaceStyle(state), styles.pillLayout, onDismiss && styles.pillWithDismiss]}
         >
@@ -34,7 +43,7 @@ export function Chip(props: ChipProps) {
           <IconButton
             icon="x"
             tooltip={dismissTooltip}
-            accessibilityLabel={dismissTooltip ?? "Remove"}
+            accessibilityLabel={dismissTooltip ?? labels.remove}
             onPress={onDismiss}
             testID={testID ? `${testID}-remove` : undefined}
           />

package/src/composer.tsx

@@ -2,6 +2,7 @@ import React, { type ReactNode, type Ref, useCallback, useEffect, useState } fro
 import { View, TextInput as RNTextInput, ScrollView, StyleSheet, type TextInputProps } from "react-native";
 import { IconButton } from "./icon_button";
 import { colors } from "./colors";
+import { Text } from "./text";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
 import { useAutoGrowHeight } from "./use_auto_grow_height";
 
@@ -189,7 +190,6 @@ export function Composer(props: ComposerProps) {
         autoFocus={autoFocus}
         onChangeText={handleChangeText}
         onSubmitEditing={handleSend}
-        placeholder={placeholder}
         placeholderTextColor={colors.zinc[500]}
         value={text}
         onFocus={() => setFocused(true)}
@@ -208,6 +208,15 @@ export function Composer(props: ComposerProps) {
           spreadInputProps?.style,
         ]}
       />
+      {/* The placeholder is OURS, not the textarea's: a long hint must never
+          wrap into clipped lines inside the pill — one line, ellipsized. */}
+      {emptyText && placeholder ? (
+        <View pointerEvents="none" style={[styles.placeholderOverlay, expanded ? styles.placeholderOverlayExpanded : { paddingHorizontal: 10 }]}>
+          <Text size="sm" numberOfLines={1} style={{ color: colors.zinc[500], letterSpacing: -0.4 }}>
+            {placeholder}
+          </Text>
+        </View>
+      ) : null}
     </View>
   );
 
@@ -314,6 +323,18 @@ const styles = StyleSheet.create({
   field: {
     flex: 1,
   },
+  placeholderOverlay: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: "center",
+  },
+  placeholderOverlayExpanded: {
+    justifyContent: "flex-start",
+    paddingTop: 2,
+  },
   textInput: {
     flex: 1,
     fontFamily: fontFamilyRegular,

package/src/confidence.tsx

@@ -36,7 +36,7 @@ export function levelFromScore(score: number): ConfidenceLevel {
  * How sure the AI is — a calibrated high / medium / low read as a 3-tick meter
  * (emerald / amber / zinc) beside the level word. The fill count and the colour
  * both carry the level. The human weights an AI proposal or estimate by it. Pair
- * with `ReviewCard` or `ChangeReview`.
+ * with `ChangeReview`.
  */
 export function Confidence(props: ConfidenceProps) {
   const level = props.level ?? (props.score != null ? levelFromScore(props.score) : "medium");

package/src/control_surface.ts

@@ -39,20 +39,6 @@ export const CONTROL_TRANSITION = {
   transitionDuration: "0.12s",
 };
 
-/** THE review-card surface — the bordered white card every "AI proposes, you
- *  decide" surface wears (`ReviewCard`, and the whole-set `ChangeReview`), so the
- *  review family reads as ONE contract instead of look-alikes drifting apart. One
- *  definition; each adds its own header / body / footer on top.
- *  `reviewResolvedStyle` is the settled wash once decided. */
-export const reviewCardStyle: ViewStyle = {
-  borderWidth: 1,
-  borderColor: colors.border,
-  backgroundColor: colors.white,
-  borderRadius: 12,
-  padding: 16,
-  gap: 12,
-};
-export const reviewResolvedStyle: ViewStyle = { backgroundColor: colors.zinc[50] };
 
 /**
  * THE pill-surface contract — the single definition of the bordered, white,

package/src/detail_row.tsx

@@ -1,24 +1,107 @@
-import { ReactNode } from "react";
-import { StyleSheet, View } from "react-native";
+import { createContext, ReactNode, useContext, useState } from "react";
+import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { INLINE_CONTROL_HEIGHT } from "./inline_edit";
 import { Text } from "./text";
 
+interface DetailTableColumns {
+  labelWidth: number;
+  trailingWidth?: number;
+  minHeight: number;
+  /** Container too narrow for the side-by-side columns — rows render STACKED
+   *  (label above a full-width value row). */
+  stacked: boolean;
+}
+
+const DetailTableContext = createContext<DetailTableColumns | null>(null);
+
+/** The value cell must keep at least this width before the table gives up its
+ *  side-by-side columns and stacks — below it, editors get crushed. */
+const MIN_VALUE_WIDTH = 160;
+
+export interface DetailTableProps {
+  /** Label column width (px). Default 130. */
+  labelWidth?: number;
+  /** Reserved width (px) for the trailing column. Set it when ANY row carries a
+   *  trailing action/unit/badge: EVERY row then reserves the column, so all
+   *  value cells share ONE width and the trailing items align at one x — the
+   *  table look. Omit when no row has a trailing (values fill to the edge). */
+  trailingWidth?: number;
+  /** Min row height. Default 40 (`INLINE_CONTROL_HEIGHT`) so editor, static,
+   *  and custom rows all sit on the inline-control baseline grid. */
+  minHeight?: number;
+  /** The usable width the value cell must keep before the table STACKS
+   *  (default 160). Raise it when a cell holds MORE than one editor (an
+   *  amount + method pair) — side-by-side columns that technically fit can
+   *  still crush a multi-editor cell. */
+  minValueWidth?: number;
+  /** `DetailRow`s (each inherits the table's columns; row props override). */
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * The column grid for a stack of `DetailRow`s — label · value · trailing laid
+ * out like a TABLE: one label width, one value width, one trailing width, set
+ * ONCE on the parent instead of repeated (and drifting) per row. Rows without a
+ * trailing still reserve the trailing column, so a `Copy` action on one row
+ * never makes its editor narrower than its neighbours'.
+ *
+ *   <DetailTable labelWidth={130} trailingWidth={96}>
+ *     <DetailRow label="Reference" trailing={<Button title="Copy" … />}>
+ *       <InlineTextInput … />
+ *     </DetailRow>
+ *     <DetailRow label="Priority"><InlineSelect … /></DetailRow>
+ *   </DetailTable>
+ *
+ * It owns the 6px row gap (zinc-50 editor chips need visible separation) and
+ * the 40px row height of the inline-control grid.
+ *
+ * RESPONSIVE: the table measures its own container (not the viewport — a table
+ * inside a narrow Drawer on a wide screen must adapt too). When the columns
+ * would crush the value cell below a usable width, every row STACKS: label
+ * above a full-width value row (trailing stays beside the value). No prop —
+ * the switch is automatic.
+ */
+export function DetailTable(props: DetailTableProps) {
+  const { labelWidth = 130, trailingWidth, minHeight = INLINE_CONTROL_HEIGHT, minValueWidth = MIN_VALUE_WIDTH, children, style } = props;
+  const [width, setWidth] = useState<number | null>(null);
+  const stacked =
+    width != null && width < labelWidth + (trailingWidth ?? 0) + minValueWidth + 24;
+  return (
+    <DetailTableContext.Provider value={{ labelWidth, trailingWidth, minHeight, stacked }}>
+      <View
+        onLayout={(e) => setWidth(e.nativeEvent.layout.width)}
+        // Measure-then-REVEAL: the unmeasured first frame renders invisible
+        // (opacity 0), so the first PAINT the user sees is already in the
+        // right mode — no table→stacked reshuffle as a drawer opens.
+        style={[stacked ? styles.tableStacked : styles.table, width == null ? styles.unmeasured : null, style]}
+      >
+        {children}
+      </View>
+    </DetailTableContext.Provider>
+  );
+}
+
 export interface DetailRowProps {
   /** The field label — rendered `sm muted`. */
   label: ReactNode;
   /** The value — any node (a `Text`, a `Badge`, a stack). */
   children: ReactNode;
   /** An optional right-side slot, rendered as the LAST child of the row (after
-   *  `children`) — a small action `Button`, a status `Badge`, a unit label, an
-   *  `IconButton`. In form mode (`labelWidth` set) the value column already fills
-   *  the row, so the trailing pins to the right edge automatically. */
+   *  `children`) — a small action `Button`, a status `Badge`, an `IconButton`.
+   *  NOT for units: "kg" / "₫" belong IN the value (`InlineNumberInput format`).
+   *  In form mode (`labelWidth` set) the value column already fills
+   *  the row, so the trailing pins to the right edge automatically. Inside a
+   *  `DetailTable` with `trailingWidth` it sits in the reserved trailing column. */
   trailing?: ReactNode;
   /** Fixed label-column width (px) to align labels in a left column — for a peek
    *  or form-like stack. Omit for a spread row: the label takes the slack and the
-   *  value sits at the right edge (the default drawer-detail look). */
+   *  value sits at the right edge (the default drawer-detail look). Inside a
+   *  `DetailTable` the table's `labelWidth` applies; this overrides per row. */
   labelWidth?: number;
   /** Label text size — `xs` for a compact peek, `sm` (default) for a drawer. */
   labelSize?: "xs" | "sm";
-  /** Min row height. Default 28. */
+  /** Min row height. Default 28 (or the `DetailTable`'s `minHeight`). */
   minHeight?: number;
 }
 
@@ -27,23 +110,61 @@ export interface DetailRowProps {
  * `PressableRow` / `TableRow`). Spread by default (muted label left, value pushed
  * to the right edge); pass `labelWidth` to align labels in a fixed left column —
  * the value column then FILLS the rest of the row, so a stack of inline editors
- * all span the same width (none jumps wider on edit).
+ * all span the same width (none jumps wider on edit). For a stack of rows, wrap
+ * them in a `DetailTable`: the label/trailing column widths live ONCE on the
+ * parent and every row aligns.
  */
 export function DetailRow(props: DetailRowProps) {
-  const { label, children, trailing, labelWidth, labelSize = "sm", minHeight = 28 } = props;
+  const table = useContext(DetailTableContext);
+  const { label, children, trailing, labelSize = "sm" } = props;
+  const labelWidth = props.labelWidth ?? table?.labelWidth;
+  const minHeight = props.minHeight ?? table?.minHeight ?? 28;
   const form = labelWidth != null;
+  if (table?.stacked) {
+    // Stacked mode wears the FORM grammar: the label renders exactly like a
+    // `FormField` label (medium, default ink), so a narrow record surface
+    // reads as one vocabulary with forms. The COMPONENTS stay separate — a
+    // FormField wraps a draft control validated and committed together, an
+    // inline editor self-persists — only the look converges.
+    return (
+      <View style={styles.stackedRow}>
+        <Text weight="medium" numberOfLines={1}>
+          {label}
+        </Text>
+        <View style={[styles.stackedValueRow, { minHeight }]}>
+          <View style={styles.value}>{children}</View>
+          {trailing != null ? trailing : null}
+        </View>
+      </View>
+    );
+  }
   return (
     <View style={[styles.row, { minHeight }]}>
       <Text size={labelSize} color="muted" style={form ? { width: labelWidth } : styles.flexLabel}>
         {label}
       </Text>
       {form ? <View style={styles.value}>{children}</View> : children}
-      {trailing != null ? trailing : null}
+      {table?.trailingWidth != null ? (
+        <View style={[styles.trailingCell, { width: table.trailingWidth }]}>{trailing}</View>
+      ) : trailing != null ? (
+        trailing
+      ) : null}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  // 6px between rows — the zinc-50 editor chips need visible separation.
+  table: { gap: 6 },
+  // Stacked (narrow) mode: label-over-value blocks need more air between rows.
+  tableStacked: { gap: 14 },
+  unmeasured: { opacity: 0 },
+  stackedRow: { gap: 4 },
+  stackedValueRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
   row: {
     flexDirection: "row",
     alignItems: "center",
@@ -56,4 +177,10 @@ const styles = StyleSheet.create({
   // child fills it edge-to-edge. A status Badge or action is NOT a value — pass
   // it as `trailing` (pins right); one placed here would stretch full-width.
   value: { flex: 1 },
+  // The reserved trailing column: every row renders it (empty or not) so value
+  // cells share one width and trailing items align at one x, like a table.
+  trailingCell: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
 });

package/src/finding.tsx

@@ -1,110 +1,142 @@
-import { StyleSheet, View } from "react-native";
-import { colors, solid, type ColorName } from "./colors";
-import { Text } from "./text";
+import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
+import { type ReactNode } from "react";
 import { Badge } from "./badge";
-import { Button } from "./button";
+import { Text } from "./text";
 import { Sources, type SourceRef } from "./sources";
 import { useLoticsLocale } from "./locale";
+import { colors, type ColorName } from "./colors";
 
 export type FindingSeverity = "critical" | "warning" | "info" | "positive";
 
+/** The localized strings — the `finding` LoticsLocale slice. */
+export type FindingLabels = Record<FindingSeverity, string> & {
+  /** The delta row's label in `FindingComparison`. */
+  difference: string;
+};
+
+const SEVERITY_COLOR: Record<FindingSeverity, ColorName> = {
+  critical: "red",
+  warning: "amber",
+  info: "zinc",
+  positive: "emerald",
+};
+
 export interface FindingProps {
-  severity?: FindingSeverity;
-  /** Translated severity words. Defaults resolve through the locale ("Critical" …). */
-  labels?: Partial<FindingLabels>;
-  /** The headline — what the agent found. */
+  /** Ranked severity — the dot badge + its localized word. */
+  severity: FindingSeverity;
+  /** What the agent found — one line. */
   title: string;
-  /** One or two lines explaining it. */
+  /** The explanation under the title. */
   detail?: string;
-  /** A headline figure tied to the finding (a value, a delta, a count), shown in
-   *  the header row in the severity colour. */
+  /** The emphasized MEASURE of the finding ("−40 pcs") — prominent in the
+   *  body (lg, semibold), never a side note. */
   metric?: string;
-  /** A short caption beside the metric giving it context ("exposure", "overdue",
-   *  "vs target"). */
+  /** What the metric compares ("invoice vs packing list"). */
   metricCaption?: string;
-  /** Provenance — the records / documents the finding rests on. */
+  /** Provenance — the one `Sources` idiom, chips at the bottom. */
   sources?: SourceRef[];
-  onOpenSource?: (s: SourceRef) => void;
-  /** The single action the finding suggests. */
-  action?: { label: string; onPress: () => void };
+  onOpenSource?: (source: SourceRef) => void;
+  /** Compose anything extra between the body and the sources — a band pair,
+   *  an action row, a custom block. */
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
 }
 
-// Severity reads through a coloured dot badge + the order it's stacked in (most
-// severe first): red critical, amber warning, blue note, emerald on-track. The
-// metric takes the same colour. Words resolve prop → locale → English default.
-export type FindingLabels = Record<FindingSeverity, string>;
-const SEV_COLOR: Record<FindingSeverity, ColorName> = {
-  critical: "red",
-  warning: "amber",
-  info: "blue",
-  positive: "emerald",
-};
-
 /**
- * One ranked insight from an AI briefing / audit / anomaly scan — a severity dot
- * badge and a headline figure share the top row, the headline + explanation read
- * below, then provenance and the single action it suggests. Severity reads
- * through the coloured badge + metric and the stacking order (most severe first).
- * Unlike `Callout` (a flat inline status), a Finding is ranked, sourced, and
- * carries its own next action.
+ * One ranked insight from an AI check — a cross-check discrepancy, an audit
+ * observation, a briefing item. Good defaults (severity word · title · detail
+ * · the PROMINENT metric · `Sources` chips) with a `children` slot for any
+ * extra composition. Display-only: a finding informs the verdict the host
+ * records; it decides nothing itself. Stack several most-severe first —
+ * inside a `ChangeReview` wrap each in a display-only `Change` (the family's
+ * dividers apply); standalone, separate them yourself.
  */
 export function Finding(props: FindingProps) {
-  const severity = props.severity ?? "info";
-  const words = { ...useLoticsLocale().finding, ...props.labels };
-  const sev = { word: words[severity], color: SEV_COLOR[severity] };
+  const words = useLoticsLocale().finding;
   return (
-    <View style={styles.card}>
-      <View style={styles.header}>
-        <Badge variant="dot" color={sev.color} label={sev.word} />
-        <View style={{ flex: 1 }} />
-        {props.metric ? (
-          <View style={styles.metric}>
-            <Text size="lg" weight="semibold" tabular style={{ color: solid(sev.color), letterSpacing: -0.3 }}>
-              {props.metric}
-            </Text>
-            {props.metricCaption ? (
-              <Text size="xs" color="muted">
-                {props.metricCaption}
-              </Text>
-            ) : null}
-          </View>
-        ) : null}
-      </View>
-
-      <View style={styles.body}>
-        <Text size="md" weight="semibold" numberOfLines={2}>
-          {props.title}
+    <View style={[styles.root, props.style]}>
+      <Badge variant="dot" color={SEVERITY_COLOR[props.severity]} label={words[props.severity]} />
+      <Text size="sm" weight="medium">
+        {props.title}
+      </Text>
+      {props.detail ? (
+        <Text size="sm" color="muted">
+          {props.detail}
         </Text>
-        {props.detail ? (
-          <Text size="sm" color="muted">
-            {props.detail}
+      ) : null}
+      {props.metric ? (
+        <View style={styles.metricBlock}>
+          <Text size="lg" weight="semibold" tabular>
+            {props.metric}
           </Text>
-        ) : null}
-      </View>
-
+          {props.metricCaption ? (
+            <Text size="xs" color="muted">
+              {props.metricCaption}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+      {props.children}
       {props.sources && props.sources.length > 0 ? (
-        <Sources sources={props.sources} onOpen={props.onOpenSource} />
+        <Sources label={null} sources={props.sources} onOpen={props.onOpenSource} />
       ) : null}
-      {props.action ? (
-        <View style={styles.actionRow}>
-          <Button title={props.action.label} color="secondary" onPress={props.action.onPress} />
+    </View>
+  );
+}
+
+export interface FindingComparisonProps {
+  /** The disagreeing sides — each value with where it came from
+   *  ("invoice.pdf" · "480 pcs"). Two or more. */
+  values: { label: string; value: string }[];
+  /** The computed difference, EMPHASIZED ("−40 pcs"). */
+  delta?: string;
+  /** Label for the delta row. Defaults to the localized "Difference". */
+  deltaLabel?: string;
+}
+
+/**
+ * The expected-vs-actual body of a `Finding` — each side a labeled row
+ * (source · value), a hairline, then the DELTA emphasized. Compose it as the
+ * finding's children; it replaces ad-hoc metric text for any
+ * one-value-disagrees insight (quantities, totals, dates).
+ */
+export function FindingComparison(props: FindingComparisonProps) {
+  const words = useLoticsLocale().finding;
+  return (
+    <View style={styles.comparison}>
+      {props.values.map((v, i) => (
+        <View key={`${v.label}-${i}`} style={styles.comparisonRow}>
+          <Text size="sm" color="muted" style={styles.comparisonLabel} numberOfLines={1}>
+            {v.label}
+          </Text>
+          <Text size="sm" weight="semibold" tabular numberOfLines={1} style={{ flexShrink: 1 }}>
+            {v.value}
+          </Text>
         </View>
+      ))}
+      {props.delta ? (
+        <>
+          <View style={styles.comparisonRule} />
+          <View style={styles.comparisonRow}>
+            <Text size="sm" color="muted" style={styles.comparisonLabel} numberOfLines={1}>
+              {props.deltaLabel ?? words.difference}
+            </Text>
+            <Text size="lg" weight="semibold" tabular>
+              {props.delta}
+            </Text>
+          </View>
+        </>
       ) : null}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  card: {
-    borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.white,
-    borderRadius: 12,
-    padding: 16,
-    gap: 12,
-  },
-  header: { flexDirection: "row", alignItems: "center", gap: 12 },
-  metric: { flexDirection: "row", alignItems: "baseline", gap: 5 },
-  body: { gap: 6 },
-  actionRow: { flexDirection: "row", justifyContent: "flex-end" },
+  root: { gap: 6, alignItems: "flex-start" },
+  metricBlock: { gap: 1, paddingVertical: 2 },
+  comparison: { gap: 6, paddingVertical: 4, alignSelf: "stretch", maxWidth: 420 },
+  comparisonRow: { flexDirection: "row", alignItems: "baseline", gap: 12 },
+  comparisonLabel: { width: 130 },
+  comparisonRule: { height: 1, backgroundColor: colors.zinc[100] },
 });
+

package/src/floating_action_bar.tsx

@@ -31,7 +31,7 @@ export function FloatingActionBar(props: FloatingActionBarProps) {
     <View pointerEvents="box-none" style={styles.wrap}>
       <Card style={styles.bar}>
         <Text size="sm" weight="semibold" tabular>{`${count} ${label}`}</Text>
-        <Button title={clearLabel} color="secondary" onPress={onClear} />
+        <Button title={clearLabel} color="muted" onPress={onClear} />
         {children}
       </Card>
     </View>