@lotics/ui 4.4.0 → 4.5.0

package/src/scored_option.tsx

@@ -0,0 +1,139 @@
+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"}
+            shape="rounded"
+            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/sources.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet, View } from "react-native";
-import { colors } from "./colors";
+import { colors, solid, tint, type ColorName } from "./colors";
 import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
@@ -10,7 +10,7 @@ export interface SourceRef {
   id: string;
   label: string;
   kind?: SourceKind;
-  /** A locator under the label — "page 2", a record code, a column. */
+  /** A locator after the label — "page 2", a record code, a column. */
   detail?: string;
 }
 
@@ -18,36 +18,41 @@ export interface SourcesProps {
   sources: SourceRef[];
   /** Eyebrow above the chips. Default "Sources". */
   label?: string;
-  /** Pass to make each chip openable (jump to the record / document / page). */
+  /** Pass to make each chip openable (jump to the record / document / page). The
+   *  chips then show a hover state + an open glyph; the host does the navigation. */
   onOpen?: (source: SourceRef) => void;
 }
 
-const KIND_ICON: Record<SourceKind, IconName> = {
-  record: "box",
-  document: "file-text",
-  table: "table-2",
-  web: "external-link",
-  knowledge: "book-open",
+// Each kind carries its own glyph + colour — provenance you can recognise at a
+// glance (echoing the file-badge palette: document red, table green, …).
+const KIND: Record<SourceKind, { icon: IconName; color: ColorName }> = {
+  document: { icon: "file-text", color: "red" },
+  table: { icon: "table-2", color: "emerald" },
+  record: { icon: "box", color: "blue" },
+  knowledge: { icon: "book-open", color: "amber" },
+  web: { icon: "globe", color: "sky" },
 };
 
 /**
  * Where the AI's output came FROM — a row of source chips under a generated
- * answer, summary, or extracted value, each openable. Provenance is what makes
- * AI output verifiable; show it on anything the agent produced from data it
- * read (extraction, summarization, Q&A). Renders nothing for an empty list.
+ * answer, summary, or extracted value, each with a per-kind coloured glyph.
+ * When `onOpen` is set each chip is pressable (hover wash + an open glyph) and
+ * the host navigates to the record / document / page. Provenance is what makes
+ * AI output verifiable; show it on anything the agent produced from data it read.
+ * Renders nothing for an empty list.
  */
 export function Sources(props: SourcesProps) {
   if (props.sources.length === 0) return null;
   return (
-    <View style={{ gap: 6 }}>
-      <Text size="xs" color="muted" transform="uppercase">
+    <View style={{ gap: 8 }}>
+      <Text size="xs" color="muted" weight="medium">
         {props.label ?? "Sources"}
       </Text>
       <View style={styles.row}>
         {props.sources.map((s) =>
           props.onOpen ? (
-            <PressableHighlight key={s.id} onPress={() => props.onOpen?.(s)} style={styles.chip}>
-              <SourceChip source={s} />
+            <PressableHighlight key={s.id} onPress={() => props.onOpen?.(s)} accessibilityLabel={`Open ${s.label}`} style={styles.chip}>
+              <SourceChip source={s} openable />
             </PressableHighlight>
           ) : (
             <View key={s.id} style={styles.chip}>
@@ -60,10 +65,13 @@ export function Sources(props: SourcesProps) {
   );
 }
 
-function SourceChip({ source }: { source: SourceRef }) {
+function SourceChip({ source, openable }: { source: SourceRef; openable?: boolean }) {
+  const k = KIND[source.kind ?? "document"];
   return (
     <>
-      <Icon name={KIND_ICON[source.kind ?? "document"]} size={12} color={colors.zinc[500]} />
+      <View style={[styles.iconDisc, { backgroundColor: tint(k.color, 0.14) }]}>
+        <Icon name={k.icon} size={13} color={solid(k.color)} />
+      </View>
       <Text size="xs" weight="medium" numberOfLines={1}>
         {source.label}
       </Text>
@@ -72,6 +80,7 @@ function SourceChip({ source }: { source: SourceRef }) {
           {source.detail}
         </Text>
       ) : null}
+      {openable ? <Icon name="external-link" size={12} color={colors.zinc[400]} /> : null}
     </>
   );
 }
@@ -81,12 +90,20 @@ const styles = StyleSheet.create({
   chip: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 10,
+    gap: 8,
+    paddingLeft: 5,
+    paddingRight: 10,
     paddingVertical: 5,
-    borderRadius: 8,
+    borderRadius: 10,
     borderWidth: 1,
     borderColor: colors.border,
     backgroundColor: colors.white,
   },
+  iconDisc: {
+    width: 24,
+    height: 24,
+    borderRadius: 7,
+    alignItems: "center",
+    justifyContent: "center",
+  },
 });

package/src/spec_list.tsx

@@ -0,0 +1,81 @@
+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/suggestion.tsx

@@ -1,10 +1,8 @@
 import { ReactNode } from "react";
 import { StyleSheet, View } from "react-native";
-import { colors, solid, tint } from "./colors";
+import { colors } from "./colors";
 import { Text } from "./text";
-import { Icon } from "./icon";
 import { Button } from "./button";
-import { LinkButton } from "./link_button";
 import { Confidence, type ConfidenceLevel } from "./confidence";
 
 export interface SuggestionProps {
@@ -28,57 +26,50 @@ export interface SuggestionProps {
 
 /**
  * The core review-for-approval surface: an AI proposal the human accepts,
- * edits, or dismisses — never auto-applied. The violet sparkle marks it as
- * AI-proposed; a `Confidence` chip says how sure; the body shows the proposed
- * value. 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 is an edit to existing state).
+ * 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.header}>
-        <Icon name="sparkles" size={14} color={solid("violet")} />
-        <Text size="sm" weight="semibold" style={{ flex: 1 }} numberOfLines={2}>
-          {props.title}
+      <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}
+        {status === "open" && hasConfidence ? <Confidence level={props.confidence} score={props.confidenceScore} /> : null}
       </View>
 
+      <Text size="md" weight="semibold" numberOfLines={2}>
+        {props.title}
+      </Text>
+
       {props.rationale ? (
-        <Text size="xs" color="muted">
-          {props.rationale}
-        </Text>
+        <View style={styles.note}>
+          <Text size="sm" color="muted">
+            {props.rationale}
+          </Text>
+        </View>
       ) : null}
 
       {props.children ? <View>{props.children}</View> : null}
 
       {status !== "open" ? (
-        <View style={styles.outcome}>
-          <Icon
-            name={status === "accepted" ? "circle-check" : "x"}
-            size={14}
-            color={status === "accepted" ? solid("emerald") : colors.zinc[400]}
-          />
-          <Text size="xs" color="muted">
-            {status === "accepted" ? "Accepted" : "Dismissed"}
-          </Text>
-        </View>
+        <Text size="xs" color="muted" weight="medium">
+          {status === "accepted" ? "Accepted" : "Dismissed"}
+        </Text>
       ) : (
         <View style={styles.footer}>
-          {props.onDismiss ? <LinkButton title="Dismiss" onPress={props.onDismiss} /> : <View />}
-          <View style={styles.actions}>
-            {props.onEdit ? (
-              <Button title="Edit" color="secondary" shape="rounded" icon="square-pen" onPress={props.onEdit} />
-            ) : null}
-            {props.onAccept ? (
-              <Button title={props.acceptLabel ?? "Accept"} color="primary" shape="rounded" onPress={props.onAccept} />
-            ) : null}
-          </View>
+          {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>
@@ -88,15 +79,14 @@ export function Suggestion(props: SuggestionProps) {
 const styles = StyleSheet.create({
   card: {
     borderWidth: 1,
-    borderColor: tint("violet", 0.35),
+    borderColor: colors.border,
     backgroundColor: colors.white,
     borderRadius: 12,
-    padding: 14,
-    gap: 10,
+    padding: 16,
+    gap: 12,
   },
-  resolved: { borderColor: colors.border, backgroundColor: colors.zinc[50] },
-  header: { flexDirection: "row", alignItems: "center", gap: 8 },
-  outcome: { flexDirection: "row", alignItems: "center", gap: 6 },
-  footer: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
-  actions: { flexDirection: "row", alignItems: "center", gap: 8 },
+  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 },
 });

package/src/triage_row.tsx

@@ -0,0 +1,99 @@
+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" shape="rounded" onPress={props.onOverride} /> : null}
+          {props.onDismiss ? <Button title="Dismiss" color="muted" shape="rounded" onPress={props.onDismiss} /> : null}
+          {props.onAccept ? <Button title="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: 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 },
+});

package/src/assisted_field.tsx

@@ -1,93 +0,0 @@
-import { StyleSheet, View } from "react-native";
-import { solid, tint } from "./colors";
-import { Text } from "./text";
-import { Icon } from "./icon";
-import { IconButton } from "./icon_button";
-import { LinkButton } from "./link_button";
-import { Confidence, type ConfidenceLevel } from "./confidence";
-
-export interface AssistedFieldProps {
-  label: string;
-  /** The current value — an AI estimate until confirmed, or the final value. */
-  value: string;
-  /** Unit suffix shown after the value (mm, cm, kg). */
-  unit?: string;
-  confidence?: ConfidenceLevel;
-  confidenceScore?: number;
-  /** True while the value is still an unconfirmed AI estimate — it reads
-   *  amber-tinted with a Confidence chip and a Confirm action (visible
-   *  provenance). Confirm or override flips it to a plain confirmed value. */
-  estimated?: boolean;
-  onConfirm?: () => void;
-  /** Override — the host swaps in its own inline input to edit the value. */
-  onEdit?: () => void;
-}
-
-/**
- * A form value the AI pre-filled — shown as a tinted ESTIMATE the human
- * confirms (→ plain, checked) or overrides, never silently committed. The
- * provenance is always visible: an estimate looks different from a value a
- * person stood behind. Pair with `Confidence`; for a whole extracted record,
- * stack several and add one "Confirm all" at the form level.
- */
-export function AssistedField(props: AssistedFieldProps) {
-  const { label, value, unit, estimated, confidence, confidenceScore, onConfirm, onEdit } = props;
-  const display = unit ? `${value} ${unit}` : value;
-  return (
-    <View style={styles.row}>
-      <Text size="sm" color="muted" style={styles.label}>
-        {label}
-      </Text>
-      <View style={styles.valueCol}>
-        <View style={styles.valueRow}>
-          {estimated ? (
-            <View style={styles.estimatePill}>
-              <Icon name="sparkles" size={11} color={solid("violet")} />
-              <Text size="sm" weight="medium" tabular>
-                {display}
-              </Text>
-            </View>
-          ) : (
-            <View style={styles.confirmedRow}>
-              <Text size="sm" weight="medium" tabular>
-                {display}
-              </Text>
-              <Icon name="circle-check" size={13} color={solid("emerald")} />
-            </View>
-          )}
-          {onEdit ? (
-            <IconButton icon="square-pen" size="sm" color="none" accessibilityLabel={`Edit ${label}`} onPress={onEdit} />
-          ) : null}
-        </View>
-        {estimated ? (
-          <View style={styles.estimateMeta}>
-            {confidence != null || confidenceScore != null ? (
-              <Confidence level={confidence} score={confidenceScore} />
-            ) : null}
-            {onConfirm ? <LinkButton title="Confirm" onPress={onConfirm} /> : null}
-          </View>
-        ) : null}
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  row: { flexDirection: "row", alignItems: "flex-start", gap: 16, paddingVertical: 8 },
-  label: { width: 132, paddingTop: 6 },
-  valueCol: { flex: 1, gap: 6, alignItems: "flex-end" },
-  valueRow: { flexDirection: "row", alignItems: "center", gap: 6 },
-  estimatePill: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-    borderRadius: 8,
-    backgroundColor: tint("amber", 0.12),
-    borderWidth: 1,
-    borderColor: tint("amber", 0.35),
-  },
-  confirmedRow: { flexDirection: "row", alignItems: "center", gap: 6, paddingVertical: 5 },
-  estimateMeta: { flexDirection: "row", alignItems: "center", gap: 10 },
-});