@lotics/ui 4.8.0 → 5.0.0

package/src/review_card.tsx

@@ -0,0 +1,172 @@
+import { type ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors, solid } from "./colors";
+import { reviewCardStyle } from "./control_surface";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { Button } from "./button";
+import { Confidence, type ConfidenceLevel } from "./confidence";
+
+export interface ReviewAction {
+  label: string;
+  onPress: () => void;
+  /** Visual weight. Default: the LAST action reads "primary" (the affirmative),
+   *  the rest "muted". Use "secondary" for a non-destructive middle action
+   *  (Edit / Reassign). */
+  kind?: "primary" | "secondary" | "muted";
+}
+
+export interface ReviewCardProps {
+  /** Header-first: a small muted eyebrow above the body — e.g. "Proposed". */
+  eyebrow?: string;
+  /** Header-first: a headline above the body — a record name, a proposal. */
+  title?: string;
+  confidence?: ConfidenceLevel;
+  confidenceScore?: number;
+  /** One line of WHY — the rationale the human weighs. */
+  rationale?: string;
+  /** The proposal BODY — render it however fits: a `RecordFields`, a `MatchSides`
+   *  pairing, a spec stack, a chip row. Omit for a title-only proposal. */
+  children?: ReactNode;
+  /** Decision actions, left→right (the last reads as the primary affirmative):
+   *  Accept / Edit / Dismiss, Confirm / Remove, Accept / Reassign / Not-a-match —
+   *  whatever the proposal's verbs are. Nothing applies until the host acts. */
+  actions?: ReviewAction[];
+  /** Resolved → the card COLLAPSES to a quiet one-line row (a check or ✕ + a
+   *  summary + Undo), so a stack reads as a tidy checklist of what's decided. */
+  status?: "open" | "accepted" | "dismissed";
+  /** The summary text in the resolved row (defaults to `title`; required when
+   *  body-first, since the body is arbitrary). */
+  summary?: string;
+  /** Resolved outcome words. Default "Accepted" / "Dismissed"; set per surface
+   *  ("Confirmed" / "Removed", `Matched · …` / "Dismissed"). */
+  acceptedLabel?: string;
+  dismissedLabel?: string;
+  onUndo?: () => void;
+}
+
+/**
+ * THE single-proposal review card — an AI proposal the human accepts, edits, or
+ * dismisses, never auto-applied. It owns the chrome (the shared `reviewCardStyle`
+ * surface, `Confidence` + rationale, the decision footer, the collapse-to-a-row
+ * resolved state); the proposal BODY is `children` — a `RecordFields` (an
+ * extracted record to confirm), a `MatchSides` (a pairing to reconcile), a spec
+ * stack, anything.
+ *
+ * Layout follows the props: give it an `eyebrow`/`title` and the chrome LEADS
+ * (header-first — a value or record proposal); give it only `children` and the
+ * BODY leads, the confidence + reason sitting beneath it (body-first — a pairing,
+ * where the body is the hero). For a BATCH you decide each then commit, use the
+ * `ChangeReview` engine instead.
+ */
+export function ReviewCard(props: ReviewCardProps) {
+  const status = props.status ?? "open";
+
+  if (status === "accepted" || status === "dismissed") {
+    const accepted = status === "accepted";
+    return (
+      <View style={styles.resolvedRow}>
+        <Icon name={accepted ? "check" : "x"} size={15} color={accepted ? solid("emerald") : colors.zinc[400]} />
+        <Text
+          size="sm"
+          weight="medium"
+          color={accepted ? "default" : "muted"}
+          numberOfLines={1}
+          style={[{ flex: 1 }, accepted ? null : styles.strike]}
+        >
+          {props.summary ?? props.title ?? ""}
+        </Text>
+        <Text size="sm" weight="medium" color="muted" numberOfLines={1}>
+          {accepted ? props.acceptedLabel ?? "Accepted" : props.dismissedLabel ?? "Dismissed"}
+        </Text>
+        {props.onUndo ? <Button title="Undo" color="muted" shape="rounded" onPress={props.onUndo} /> : null}
+      </View>
+    );
+  }
+
+  const headed = !!(props.eyebrow || props.title);
+  const hasConfidence = props.confidence != null || props.confidenceScore != null;
+  const confidence = hasConfidence ? <Confidence level={props.confidence} score={props.confidenceScore} /> : null;
+  const actions = props.actions ?? [];
+
+  return (
+    <View style={reviewCardStyle}>
+      {/* Header-first: eyebrow + confidence, title, rationale ABOVE the body. */}
+      {props.eyebrow ? (
+        <View style={styles.headRow}>
+          <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>
+            {props.eyebrow}
+          </Text>
+          {confidence}
+        </View>
+      ) : null}
+      {props.title ? (
+        <View style={styles.headRow}>
+          <Text size="sm" weight="semibold" style={{ flex: 1 }} numberOfLines={2}>
+            {props.title}
+          </Text>
+          {!props.eyebrow ? confidence : null}
+        </View>
+      ) : null}
+      {headed && props.rationale ? (
+        <Text size="sm" color="muted">
+          {props.rationale}
+        </Text>
+      ) : null}
+
+      {props.children ? <View>{props.children}</View> : null}
+
+      {/* Body-first: the confidence + reason sit BENEATH the body, as one unit. */}
+      {!headed && (hasConfidence || props.rationale) ? (
+        <View style={styles.basis}>
+          {confidence}
+          {props.rationale ? (
+            <Text size="sm" color="muted">
+              {props.rationale}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+
+      {actions.length > 0 ? (
+        <View style={styles.footer}>
+          {actions.map((a, i) => {
+            const kind = a.kind ?? (i === actions.length - 1 ? "primary" : "muted");
+            return <Button key={a.label} title={a.label} color={kind} shape="rounded" onPress={a.onPress} />;
+          })}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  headRow: { flexDirection: "row", alignItems: "center", gap: 10 },
+  // Body-first: confidence on top, the reason beneath — "this sure, because…".
+  basis: { alignItems: "flex-start", gap: 6 },
+  // The decisions sit below a hairline so the CTA row reads as a deliberate
+  // footer, not buttons crowding the body.
+  footer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 8,
+    borderTopWidth: 1,
+    borderTopColor: colors.zinc[100],
+    paddingTop: 14,
+  },
+  resolvedRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    backgroundColor: colors.white,
+    borderWidth: 1,
+    borderColor: colors.zinc[100],
+    borderRadius: 10,
+    paddingLeft: 12,
+    paddingRight: 8,
+    paddingVertical: 6,
+    minHeight: 44,
+  },
+  strike: { textDecorationLine: "line-through" },
+});

package/src/search_input.tsx

@@ -49,25 +49,27 @@ export function SearchInput(props: SearchInputProps) {
         onKeyPress={handleKeyPress}
         icon="search"
         clearable
-        style={styles.pill}
+        style={styles.search}
       />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  // Search reads as a view-control by SHAPE (rounded pill + the leading
-  // search glyph). White fill pops against the zinc-50 canvas where most
-  // toolbars live; a zinc-300 border (one step up from the form-input
-  // hairline) keeps it defined on white cards too, where the fill alone
-  // would vanish. 40px (TextInputField default) — the system control height
-  // every band aligns to.
-  pill: {
-    borderRadius: 999,
+  // Search reads as a view-control by its leading search glyph + white fill —
+  // NOT by a distinct shape. It shares the rounded-8 radius of every other
+  // input/picker (TextInputField, Combobox, the date filter), so a toolbar of
+  // controls reads as one consistent band. The white fill still pops against
+  // the zinc-50 canvas where most toolbars live; a zinc-300 border (one step up
+  // from the form-input hairline) keeps it defined on white cards too, where
+  // the fill alone would vanish. 40px (TextInputField default) — the system
+  // control height every band aligns to.
+  search: {
+    borderRadius: 8,
     backgroundColor: colors.white,
-    // A thin 1px resting border (TextInputField's default width) — emphasis on
-    // interaction comes from the input's own focus outline, so the pill stays
-    // quiet at rest. zinc-300 keeps it defined on white cards.
+    // A thin 1px resting border (TextInputField's default width) — interaction
+    // emphasis comes from the input's own focus outline, so it stays quiet at
+    // rest. zinc-300 keeps it defined on white cards.
     borderColor: colors.zinc[300],
   },
 });

package/src/match_row.tsx

@@ -1,133 +0,0 @@
-import { StyleSheet, View } from "react-native";
-import { colors } from "./colors";
-import { Text } from "./text";
-import { Icon } from "./icon";
-import { Button } from "./button";
-import { Confidence, type ConfidenceLevel } from "./confidence";
-
-export interface MatchSide {
-  /** Primary line — the record name / id. */
-  title: string;
-  /** Secondary line — amount, date, customer. */
-  detail?: string;
-}
-
-export interface MatchRowProps {
-  /** The known item we're finding a counterpart for. */
-  source: MatchSide;
-  /** The agent's proposed counterpart. Omit → the "no confident match" state. */
-  match?: MatchSide;
-  /** One line of WHY the agent paired them. */
-  rationale?: string;
-  confidence?: ConfidenceLevel;
-  confidenceScore?: number;
-  onAccept?: () => void;
-  /** Pick a different counterpart — the host opens its candidate list. */
-  onReassign?: () => void;
-  onDismiss?: () => void;
-  acceptLabel?: string;
-  /** Resolved → settles to a quiet outcome line. */
-  status?: "open" | "accepted" | "dismissed";
-}
-
-/**
- * An AI-proposed PAIRING — a known item, an arrow, the agent's proposed
- * counterpart; a confidence meter and one muted line of why. The human accepts,
- * reassigns, or rejects; nothing links on its own. Deliberately spare: two
- * sides, an arrow, the reason. The unit of an AI reconciliation / dedup /
- * correlation queue. Unlike `Suggestion` (a single proposed value) this is
- * two-sided; unlike the deterministic reconcile recipe, the agent reasons it.
- */
-export function MatchRow(props: MatchRowProps) {
-  const status = props.status ?? "open";
-  const resolved = status !== "open";
-  const hasMatch = props.match != null;
-  const hasConfidence = props.confidence != null || props.confidenceScore != null;
-
-  if (resolved) {
-    return (
-      <View style={[styles.card, styles.resolved]}>
-        <View style={styles.pair}>
-          <Side side={props.source} />
-        </View>
-        <Text size="xs" color="muted" weight="medium">
-          {status === "accepted" ? (hasMatch ? `Matched · ${props.match!.title}` : "Matched") : "Dismissed"}
-        </Text>
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.card}>
-      <View style={styles.pair}>
-        <Side side={props.source} />
-        <Icon name="arrow-right" size={16} color={colors.zinc[400]} />
-        {hasMatch ? (
-          <Side side={props.match!} right />
-        ) : (
-          <View style={[styles.side, styles.sideRight]}>
-            <Text size="sm" weight="medium" color="muted" align="right" numberOfLines={1}>
-              No confident match
-            </Text>
-            <Text size="xs" color="muted" align="right" numberOfLines={1}>
-              Pick a counterpart
-            </Text>
-          </View>
-        )}
-      </View>
-
-      {hasConfidence || props.rationale ? (
-        <View style={styles.meta}>
-          {hasConfidence ? <Confidence level={props.confidence} score={props.confidenceScore} /> : null}
-          {props.rationale ? (
-            <Text size="xs" color="muted" style={{ flex: 1 }} numberOfLines={2}>
-              {props.rationale}
-            </Text>
-          ) : null}
-        </View>
-      ) : null}
-
-      <View style={styles.footer}>
-        {props.onDismiss ? <Button title="Not a match" color="muted" shape="rounded" onPress={props.onDismiss} /> : null}
-        {props.onReassign ? (
-          <Button title={hasMatch ? "Reassign" : "Find match"} color="secondary" shape="rounded" onPress={props.onReassign} />
-        ) : null}
-        {hasMatch && props.onAccept ? (
-          <Button title={props.acceptLabel ?? "Accept"} color="primary" shape="rounded" onPress={props.onAccept} />
-        ) : null}
-      </View>
-    </View>
-  );
-}
-
-function Side({ side, right }: { side: MatchSide; right?: boolean }) {
-  return (
-    <View style={[styles.side, right ? styles.sideRight : null]}>
-      <Text size="sm" weight="medium" numberOfLines={1} align={right ? "right" : undefined}>
-        {side.title}
-      </Text>
-      {side.detail ? (
-        <Text size="xs" color="muted" numberOfLines={1} align={right ? "right" : undefined}>
-          {side.detail}
-        </Text>
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  card: {
-    borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.white,
-    borderRadius: 12,
-    padding: 16,
-    gap: 12,
-  },
-  resolved: { backgroundColor: colors.zinc[50] },
-  pair: { flexDirection: "row", alignItems: "center", gap: 12 },
-  side: { flex: 1, gap: 2 },
-  sideRight: { alignItems: "flex-end" },
-  meta: { flexDirection: "row", alignItems: "center", gap: 12 },
-  footer: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 },
-});

package/src/record_review.tsx

@@ -1,149 +0,0 @@
-import { StyleSheet, View } from "react-native";
-import { colors, solid } from "./colors";
-import { Text } from "./text";
-import { Icon } from "./icon";
-import { Button } from "./button";
-import { InlineTextInput } from "./inline_text_input";
-import { Confidence, type ConfidenceLevel } from "./confidence";
-
-export interface RecordField {
-  label: string;
-  value: string;
-  /** Unit suffix shown after the value (₫, kg, pcs). */
-  unit?: string;
-  /** Mark a low-confidence field worth double-checking — a subtle amber dot. */
-  uncertain?: boolean;
-}
-
-export interface RecordReviewProps {
-  /** A short identifier for the record ("Carton 1", a code, a name). */
-  title?: string;
-  fields: RecordField[];
-  confidence?: ConfidenceLevel;
-  confidenceScore?: number;
-  /** Edit a field — fired on save of the inline editor (blur / Enter). When set,
-   *  each value is click-to-edit; omit for a read-only review. */
-  onEditField?: (index: number, value: string) => void;
-  /** Confirm the record — it collapses to a summary the host can re-open. */
-  onConfirm?: () => void;
-  /** Remove / skip the record (don't add it). */
-  onRemove?: () => void;
-  /** Re-open a confirmed or removed record. */
-  onUndo?: () => void;
-  status?: "pending" | "confirmed" | "removed";
-}
-
-/**
- * One extracted record under review before it's saved — the agent's fields, each
- * click-to-edit (`InlineTextInput`), with a confidence and Confirm / Remove. On
- * confirm (or remove) the card COLLAPSES to a one-line summary with Undo, so a
- * long extraction reads as a tidy checklist of what's been reviewed. Stack
- * several under a "Save all" to capture a whole document → table; the source +
- * streaming + save belong to the host (see `tpl_extract`). Replaces per-field
- * confirmable estimates with a whole-record review.
- */
-export function RecordReview(props: RecordReviewProps) {
-  const status = props.status ?? "pending";
-  const hasConfidence = props.confidence != null || props.confidenceScore != null;
-
-  if (status === "confirmed" || status === "removed") {
-    const removed = status === "removed";
-    return (
-      <View style={styles.collapsed}>
-        <Icon name={removed ? "x" : "check"} size={15} color={removed ? colors.zinc[400] : solid("emerald")} />
-        <Text
-          size="sm"
-          weight="medium"
-          color={removed ? "muted" : "default"}
-          numberOfLines={1}
-          style={[{ flex: 1 }, removed ? styles.strike : null]}
-        >
-          {props.title ?? props.fields[0]?.value ?? "Record"}
-        </Text>
-        <Text size="sm" weight="medium" color="muted">
-          {removed ? "Removed" : "Confirmed"}
-        </Text>
-        {props.onUndo ? <Button title="Undo" color="muted" shape="rounded" onPress={props.onUndo} /> : null}
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.card}>
-      <View style={styles.header}>
-        <Text size="sm" weight="semibold" style={{ flex: 1 }} numberOfLines={1}>
-          {props.title ?? "Record"}
-        </Text>
-        {hasConfidence ? <Confidence level={props.confidence} score={props.confidenceScore} /> : null}
-      </View>
-
-      <View style={styles.fields}>
-        {props.fields.map((f, i) => (
-          <View key={`${f.label}-${i}`} style={styles.fieldRow}>
-            <View style={styles.labelCol}>
-              {f.uncertain ? <View style={styles.uncertainDot} /> : null}
-              <Text size="sm" color="muted" numberOfLines={1}>
-                {f.label}
-              </Text>
-            </View>
-            <View style={styles.valueCol}>
-              <View style={{ flex: 1 }}>
-                {props.onEditField ? (
-                  <InlineTextInput value={f.value} accessibilityLabel={`Edit ${f.label}`} onSave={(next) => props.onEditField?.(i, next)} />
-                ) : (
-                  <Text size="sm" weight="medium" tabular>
-                    {f.value}
-                  </Text>
-                )}
-              </View>
-              {f.unit ? (
-                <Text size="sm" color="muted">
-                  {f.unit}
-                </Text>
-              ) : null}
-            </View>
-          </View>
-        ))}
-      </View>
-
-      {props.onConfirm || props.onRemove ? (
-        <View style={styles.footer}>
-          {props.onRemove ? <Button title="Remove" color="muted" shape="rounded" onPress={props.onRemove} /> : null}
-          {props.onConfirm ? <Button title="Confirm" color="secondary" shape="rounded" onPress={props.onConfirm} /> : null}
-        </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: 10 },
-  fields: { gap: 2 },
-  fieldRow: { flexDirection: "row", alignItems: "center", gap: 16, minHeight: 34 },
-  labelCol: { flexDirection: "row", alignItems: "center", gap: 6, width: 132 },
-  uncertainDot: { width: 6, height: 6, borderRadius: 999, backgroundColor: solid("amber") },
-  valueCol: { flex: 1, flexDirection: "row", alignItems: "center", gap: 6 },
-  collapsed: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-    backgroundColor: colors.white,
-    borderWidth: 1,
-    borderColor: colors.border,
-    borderRadius: 12,
-    paddingLeft: 14,
-    paddingRight: 8,
-    paddingVertical: 6,
-    minHeight: 48,
-  },
-  strike: { textDecorationLine: "line-through" },
-  footer: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 },
-});

package/src/suggestion.tsx

@@ -1,92 +0,0 @@
-import { ReactNode } from "react";
-import { StyleSheet, View } from "react-native";
-import { colors } from "./colors";
-import { Text } from "./text";
-import { Button } from "./button";
-import { Confidence, type ConfidenceLevel } from "./confidence";
-
-export interface SuggestionProps {
-  /** The proposal headline — what the AI suggests. */
-  title: string;
-  /** One line of WHY — the rationale the human is weighing. */
-  rationale?: string;
-  confidence?: ConfidenceLevel;
-  confidenceScore?: number;
-  /** The proposal body — render the proposed value/preview however fits (a
-   *  field stack, a chip row, a diagram). Omit for a title-only suggestion. */
-  children?: ReactNode;
-  onAccept?: () => void;
-  /** Tweak before accepting — the host opens its editor. */
-  onEdit?: () => void;
-  onDismiss?: () => void;
-  acceptLabel?: string;
-  /** Once resolved the card settles to a quiet outcome line (no actions). */
-  status?: "open" | "accepted" | "dismissed";
-}
-
-/**
- * The core review-for-approval surface: an AI proposal the human accepts,
- * edits, or dismisses — never auto-applied. A "PROPOSED" eyebrow marks it as
- * the agent's, a `Confidence` meter says how sure, and the rationale is set as a
- * left-ruled margin note — the machine's reasoning, quoted and kept apart from
- * the facts and your controls. The decision is the human's. For a shortlist,
- * stack several (rank by confidence, the top one first). Pair with `AgentRun`
- * (what produced it) and `ChangeReview` (when the proposal edits existing state).
- */
-export function Suggestion(props: SuggestionProps) {
-  const status = props.status ?? "open";
-  const hasConfidence = props.confidence != null || props.confidenceScore != null;
-  return (
-    <View style={[styles.card, status !== "open" ? styles.resolved : null]}>
-      <View style={styles.eyebrow}>
-        <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>
-          Proposed
-        </Text>
-        {status === "open" && hasConfidence ? <Confidence level={props.confidence} score={props.confidenceScore} /> : null}
-      </View>
-
-      <Text size="md" weight="semibold" numberOfLines={2}>
-        {props.title}
-      </Text>
-
-      {props.rationale ? (
-        <View style={styles.note}>
-          <Text size="sm" color="muted">
-            {props.rationale}
-          </Text>
-        </View>
-      ) : null}
-
-      {props.children ? <View>{props.children}</View> : null}
-
-      {status !== "open" ? (
-        <Text size="xs" color="muted" weight="medium">
-          {status === "accepted" ? "Accepted" : "Dismissed"}
-        </Text>
-      ) : (
-        <View style={styles.footer}>
-          {props.onDismiss ? <Button title="Dismiss" color="muted" shape="rounded" onPress={props.onDismiss} /> : null}
-          {props.onEdit ? <Button title="Edit" color="secondary" shape="rounded" onPress={props.onEdit} /> : null}
-          {props.onAccept ? (
-            <Button title={props.acceptLabel ?? "Accept"} color="primary" shape="rounded" onPress={props.onAccept} />
-          ) : null}
-        </View>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  card: {
-    borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.white,
-    borderRadius: 12,
-    padding: 16,
-    gap: 12,
-  },
-  resolved: { backgroundColor: colors.zinc[50] },
-  eyebrow: { flexDirection: "row", alignItems: "center", gap: 8 },
-  note: { borderLeftWidth: 2, borderLeftColor: colors.zinc[300], paddingLeft: 12 },
-  footer: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 },
-});