@lotics/ui 7.19.3 → 8.0.0

package/src/match_sides.tsx

@@ -1,79 +0,0 @@
-import { type ReactNode } from "react";
-import { StyleSheet, View } from "react-native";
-import { colors } from "./colors";
-import { Text } from "./text";
-import { Icon } from "./icon";
-
-export interface MatchSideTextProps {
-  /** Primary line — the record name / id. */
-  title: string;
-  /** Secondary line — amount, date, customer. */
-  detail?: string;
-  /** Right-align for the proposed (right) side of a pairing. */
-  align?: "left" | "right";
-}
-
-/**
- * The DEFAULT side content — a title + a muted detail line. Pass it into a
- * `MatchSides` slot for the common case; drop a different node in when a side
- * needs more (a `Peek` to preview the record, an interactive card, a thumbnail).
- */
-export function MatchSideText({ title, detail, align }: MatchSideTextProps) {
-  const right = align === "right";
-  return (
-    <>
-      <Text size="sm" weight="semibold" numberOfLines={1} align={right ? "right" : undefined}>
-        {title}
-      </Text>
-      {detail ? (
-        <Text size="xs" color="muted" numberOfLines={1} align={right ? "right" : undefined}>
-          {detail}
-        </Text>
-      ) : null}
-    </>
-  );
-}
-
-export interface MatchSidesProps {
-  /** Left content — ANY node. `MatchSideText` for the default, or a `Peek` /
-   *  interactive card / thumbnail when a side needs to do more. */
-  source: ReactNode;
-  /** Right content. Omit → the "no confident match" placeholder. */
-  match?: ReactNode;
-  /** The connector between the sides. Default: a right arrow. Override to carry
-   *  a swap control, a label, or a different glyph. */
-  connector?: ReactNode;
-}
-
-/**
- * The two-sided PAIRING — a left slot, a connector, a right slot. A pure LAYOUT
- * primitive: it owns the two-column arrangement and the connector, the CONTENT
- * of each side is yours (`MatchSideText`, a `Peek`, anything). The hero of a
- * reconciliation; the confidence, reason, and decision come from the `ReviewCard`.
- */
-export function MatchSides(props: MatchSidesProps) {
-  return (
-    <View style={styles.pair}>
-      <View style={styles.side}>{props.source}</View>
-      {props.connector ?? <Icon name="arrow-right" size={16} color={colors.zinc[400]} />}
-      <View style={[styles.side, styles.sideRight]}>
-        {props.match ?? (
-          <>
-            <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>
-  );
-}
-
-const styles = StyleSheet.create({
-  pair: { flexDirection: "row", alignItems: "center", gap: 14 },
-  side: { flex: 1, gap: 3, minWidth: 0 },
-  sideRight: { alignItems: "flex-end" },
-});

package/src/record_fields.tsx

@@ -1,68 +0,0 @@
-import { StyleSheet, View } from "react-native";
-import { solid } from "./colors";
-import { Text } from "./text";
-import { InlineTextInput } from "./inline_text_input";
-
-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 RecordFieldsProps {
-  fields: RecordField[];
-  /** 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 record. */
-  onEditField?: (index: number, value: string) => void;
-}
-
-/**
- * The BODY of an extracted record — a label/value list, each value click-to-edit
- * (`InlineTextInput`) or read-only. A pure body atom: drop it into a `ReviewCard`
- * to review-before-save (a confidence + Confirm / Remove, stacked under a Save-all
- * → `tpl_extract`), or use it standalone as a live-edit field card (a params
- * panel). The review MECHANICS belong to the host / `ReviewCard`, not here.
- */
-export function RecordFields(props: RecordFieldsProps) {
-  return (
-    <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>
-  );
-}
-
-const styles = StyleSheet.create({
-  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 },
-});

package/src/review_card.tsx

@@ -1,172 +0,0 @@
-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" 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} 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/scored_option.tsx

@@ -1,138 +0,0 @@
-import { StyleSheet, View, type ViewStyle } from "react-native";
-import { colors } from "./colors";
-import { Text } from "./text";
-import { Button } from "./button";
-import { SpecList, type SpecRow } from "./spec_list";
-
-export interface ScoredOptionProps {
-  /** Rank in the shortlist (1 = top). */
-  rank?: number;
-  title: string;
-  /** Secondary line — the provider, the route summary. */
-  subtitle?: string;
-  /** 0–1 score the agent assigned — drives the score bar + figure. */
-  score?: number;
-  /** One line on why it ranks where it does. */
-  rationale?: string;
-  /** Key specs (price, transit, …) — rendered as a dense `SpecList`. */
-  specs?: SpecRow[];
-  /** The agent's top pick — a "RECOMMENDED" label + a heavier border. */
-  recommended?: boolean;
-  selected?: boolean;
-  onSelect?: () => void;
-  selectLabel?: string;
-}
-
-/**
- * An AI-RANKED candidate in a shortlist — rank, score, the agent's one-line
- * reason (a margin note), and the key specs — that the human picks from. The
- * agent scores and orders; the choice stays the human's. Mark the agent's top
- * pick `recommended` (a label + heavier border, no colour). The unit of an AI
- * compare / shortlist / recommend surface (quotes, carriers, suppliers, plans).
- * Monochrome and iconless. Stack several, highest rank first.
- */
-export function ScoredOption(props: ScoredOptionProps) {
-  const { rank, title, subtitle, score, rationale, specs, recommended, selected, onSelect, selectLabel } = props;
-  const pct = score != null ? Math.round(score * 100) : null;
-  return (
-    <View style={[styles.card, recommended ? styles.recCard : null, selected ? styles.selected : null]}>
-      {recommended ? (
-        <Text size="xs" color="default" weight="semibold">
-          Recommended
-        </Text>
-      ) : null}
-
-      <View style={styles.head}>
-        {rank != null ? (
-          <View style={styles.rank}>
-            <Text size="sm" weight="semibold" style={{ color: colors.zinc[700] }}>
-              {rank}
-            </Text>
-          </View>
-        ) : null}
-        <View style={styles.titleCol}>
-          <Text size="md" weight="semibold" numberOfLines={1}>
-            {title}
-          </Text>
-          {subtitle ? (
-            <Text size="xs" color="muted" numberOfLines={1}>
-              {subtitle}
-            </Text>
-          ) : null}
-        </View>
-        {pct != null ? (
-          <View style={styles.scoreCol}>
-            <Text size="lg" weight="semibold" tabular>
-              {pct}
-            </Text>
-            <Text size="xs" color="muted">
-              score
-            </Text>
-          </View>
-        ) : null}
-      </View>
-
-      {pct != null ? (
-        <View style={styles.track}>
-          <View style={[styles.fill, { width: `${pct}%` }]} />
-        </View>
-      ) : null}
-
-      {rationale ? (
-        <View style={styles.note}>
-          <Text size="sm" color="muted">
-            {rationale}
-          </Text>
-        </View>
-      ) : null}
-
-      {specs && specs.length > 0 ? <SpecList rows={specs} dense /> : null}
-
-      {onSelect ? (
-        <View style={styles.footer}>
-          <Button
-            title={selected ? "Selected" : selectLabel ?? "Choose"}
-            icon={selected ? "check" : undefined}
-            color={selected ? "secondary" : "primary"}
-            onPress={onSelect}
-          />
-        </View>
-      ) : null}
-    </View>
-  );
-}
-
-const RING: ViewStyle = { boxShadow: `0 0 0 2px ${colors.zinc[900]}` } as ViewStyle;
-
-const styles = StyleSheet.create({
-  card: {
-    borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.white,
-    borderRadius: 12,
-    padding: 16,
-    gap: 12,
-  },
-  recCard: { borderColor: colors.zinc[400] },
-  selected: RING,
-  footer: { flexDirection: "row", justifyContent: "flex-end" },
-  head: { flexDirection: "row", alignItems: "center", gap: 12 },
-  rank: {
-    width: 28,
-    height: 28,
-    borderRadius: 8,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: colors.zinc[100],
-  },
-  titleCol: { flex: 1, gap: 1 },
-  scoreCol: { alignItems: "flex-end" },
-  track: {
-    height: 6,
-    borderRadius: 999,
-    backgroundColor: colors.zinc[100],
-    overflow: "hidden",
-  },
-  fill: { height: "100%", borderRadius: 999, backgroundColor: colors.zinc[900] },
-  note: { borderLeftWidth: 2, borderLeftColor: colors.zinc[300], paddingLeft: 10 },
-});

package/src/spec_list.tsx

@@ -1,81 +0,0 @@
-import { StyleSheet, View } from "react-native";
-import { Text } from "./text";
-import { Divider } from "./divider";
-
-export interface SpecRow {
-  /** The line label (left). */
-  label: string;
-  /** The value (right). A number renders grouped + tabular. */
-  value: string | number;
-  /** Unit after the value (%, mm, kg, ₫). */
-  unit?: string;
-  /** A heavier value — a headline figure or a sub-total inside the list. */
-  emphasis?: boolean;
-}
-
-export interface SpecListProps {
-  rows: SpecRow[];
-  /** A pinned summary row, set off by a divider above and a heavier weight —
-   *  the total of a duty / cost / dimension breakdown. */
-  total?: SpecRow;
-  /** Tighter rows + xs labels for a dense side panel. */
-  dense?: boolean;
-}
-
-/**
- * A labeled-value breakdown — the structured "spec sheet": a duty table, a
- * dimensions list, a cost split, the exact numbers behind an answer. Each row is
- * just label → value (· unit); an optional `total` pins the sum under a divider.
- * Deliberately minimal — two columns, hierarchy from weight and tabular figures.
- * The right-hand panel of a lookup / answer surface, the specs of a compared
- * option.
- */
-export function SpecList({ rows, total, dense }: SpecListProps) {
-  return (
-    <View>
-      {rows.map((r, i) => (
-        <SpecLine key={`${r.label}-${i}`} row={r} dense={dense} />
-      ))}
-      {total ? (
-        <>
-          <Divider paddingVertical={dense ? 5 : 7} />
-          <SpecLine row={{ ...total, emphasis: true }} dense={dense} isTotal />
-        </>
-      ) : null}
-    </View>
-  );
-}
-
-function SpecLine({ row, dense, isTotal }: { row: SpecRow; dense?: boolean; isTotal?: boolean }) {
-  const { label, value, unit, emphasis } = row;
-  const display = typeof value === "number" ? value.toLocaleString("en-US") : value;
-  return (
-    <View style={[styles.row, { minHeight: dense ? 26 : 32 }]}>
-      <Text
-        size={dense ? "xs" : "sm"}
-        color={isTotal ? "default" : "muted"}
-        weight={isTotal ? "semibold" : "regular"}
-        numberOfLines={1}
-        style={styles.labelText}
-      >
-        {label}
-      </Text>
-      <View style={styles.valueRow}>
-        <Text size={dense && !isTotal ? "sm" : "md"} weight={emphasis ? "semibold" : "medium"} tabular>
-          {display}
-        </Text>
-        {unit ? (
-          <Text size={dense ? "xs" : "sm"} color="muted">
-            {unit}
-          </Text>
-        ) : null}
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  row: { flexDirection: "row", alignItems: "baseline", justifyContent: "space-between", gap: 16 },
-  labelText: { flexShrink: 1 },
-  valueRow: { flexDirection: "row", alignItems: "baseline", gap: 4 },
-});

package/src/triage_row.tsx

@@ -1,99 +0,0 @@
-import { StyleSheet, View } from "react-native";
-import { colors } from "./colors";
-import { Text } from "./text";
-import { Button } from "./button";
-import { Badge } from "./badge";
-import { Confidence, type ConfidenceLevel } from "./confidence";
-
-export interface TriageRowProps {
-  /** The incoming item's headline — a subject, a lead name, a ticket. */
-  title: string;
-  /** A one-line preview / snippet of the item. */
-  preview?: string;
-  /** Right meta — time, sender, channel. */
-  meta?: string;
-  /** The AI's classification, rendered as a neutral badge on the call line. */
-  category?: { label: string };
-  /** The AI's suggested action — the specific task to take ("Assign to Nguyen",
-   *  "Apply the payment"). Pairs with `category`, doesn't repeat it. */
-  suggestedAction?: string;
-  confidence?: ConfidenceLevel;
-  confidenceScore?: number;
-  /** Accept the AI's call — its classification + action. */
-  onAccept?: () => void;
-  /** Override — the host opens a reclassify control. */
-  onOverride?: () => void;
-  onDismiss?: () => void;
-  /** Resolved → settles to a quiet outcome line. */
-  status?: "open" | "accepted" | "dismissed";
-}
-
-/**
- * An incoming item the agent has TRIAGED — the item up top (title · preview ·
- * time), then the agent's CALL (a classification badge + the suggested action +
- * confidence), then the decision (accept / reclassify / dismiss). High-confidence
- * items batch-accept from the host. The unit of an AI inbox / intake / routing
- * queue. The classification is the agent's; the decision stays the human's.
- */
-export function TriageRow(props: TriageRowProps) {
-  const status = props.status ?? "open";
-  const resolved = status !== "open";
-  const hasConfidence = props.confidence != null || props.confidenceScore != null;
-  return (
-    <View style={[styles.card, resolved ? styles.resolved : null]}>
-      <View style={styles.titleRow}>
-        <Text size="sm" weight="semibold" style={{ flex: 1 }} numberOfLines={1}>
-          {props.title}
-        </Text>
-        {props.meta ? (
-          <Text size="xs" color="muted" numberOfLines={1}>
-            {props.meta}
-          </Text>
-        ) : null}
-      </View>
-
-      {props.preview ? (
-        <Text size="sm" color="muted" numberOfLines={1}>
-          {props.preview}
-        </Text>
-      ) : null}
-
-      <View style={styles.callRow}>
-        {props.category ? <Badge label={props.category.label} /> : null}
-        {props.suggestedAction ? (
-          <Text size="sm" weight="medium" numberOfLines={1} style={{ flexShrink: 1 }}>
-            {props.suggestedAction}
-          </Text>
-        ) : null}
-        {hasConfidence && !resolved ? <Confidence level={props.confidence} score={props.confidenceScore} /> : null}
-      </View>
-
-      {resolved ? (
-        <Text size="xs" color="muted" weight="medium">
-          {status === "accepted" ? "Accepted" : "Dismissed"}
-        </Text>
-      ) : (
-        <View style={styles.footer}>
-          {props.onOverride ? <Button title="Reclassify" color="muted" onPress={props.onOverride} /> : null}
-          {props.onDismiss ? <Button title="Dismiss" color="muted" onPress={props.onDismiss} /> : null}
-          {props.onAccept ? <Button title="Accept" color="primary" onPress={props.onAccept} /> : null}
-        </View>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  card: {
-    borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.white,
-    borderRadius: 12,
-    padding: 16,
-    gap: 10,
-  },
-  resolved: { backgroundColor: colors.zinc[50] },
-  titleRow: { flexDirection: "row", alignItems: "center", gap: 10 },
-  callRow: { flexDirection: "row", alignItems: "center", gap: 10 },
-  footer: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 },
-});