@lotics/ui 4.2.0 → 4.4.0

package/src/assisted_field.tsx

@@ -0,0 +1,93 @@
+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 },
+});

package/src/change_review.tsx

@@ -0,0 +1,166 @@
+import { StyleSheet, View } from "react-native";
+import { colors, solid, tint } from "./colors";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { Button } from "./button";
+import { IconButton } from "./icon_button";
+import { LinkButton } from "./link_button";
+
+export type ChangeReviewItemStatus = "pending" | "accepted" | "rejected";
+
+export interface ChangeReviewItem {
+  /** What changed — a field/parameter name. */
+  label: string;
+  /** Prior value. Omit for a newly-added value (renders as just the new value). */
+  before?: string;
+  /** Proposed value. */
+  after: string;
+  /** Per-item decision — only meaningful in the 1-by-1 mode (when the host
+   *  passes `onAcceptItem`/`onRejectItem`). */
+  status?: ChangeReviewItemStatus;
+}
+
+export interface ChangeReviewProps {
+  changes: ChangeReviewItem[];
+  /** The instruction that produced the edit ("make it 5 mm taller"). */
+  summary?: string;
+  onApply?: () => void;
+  onDiscard?: () => void;
+  applyLabel?: string;
+  /** Once resolved the card settles to a quiet outcome line (no actions). */
+  status?: "open" | "applied" | "discarded";
+  /** Providing either flips the card into 1-BY-1 mode: each change row gets its
+   *  own ✓/✕ and reflects `item.status`; the footer counts the accepted set and
+   *  Apply commits only those. The "review the agent's suggested edits one by
+   *  one" pattern. Omit both for whole-set apply/discard. */
+  onAcceptItem?: (index: number) => void;
+  onRejectItem?: (index: number) => void;
+}
+
+/**
+ * An agent-proposed edit to existing state, shown as a before→after diff the
+ * human reviews before it lands — never auto-applied. Two modes: whole-set
+ * (apply / discard the lot) or, when the host passes `onAcceptItem`/
+ * `onRejectItem`, 1-BY-1 — each suggested change accepted or rejected on its
+ * own, the footer applying only the accepted set. Where `Suggestion` proposes
+ * a NEW value, this reviews CHANGES to existing ones.
+ */
+export function ChangeReview(props: ChangeReviewProps) {
+  const status = props.status ?? "open";
+  const perItem = props.onAcceptItem != null || props.onRejectItem != null;
+  const accepted = props.changes.filter((c) => c.status === "accepted").length;
+
+  return (
+    <View style={[styles.card, status !== "open" ? styles.resolved : null]}>
+      {props.summary ? (
+        <View style={styles.summary}>
+          <Icon name="sparkles" size={13} color={solid("violet")} />
+          <Text size="sm" weight="medium" style={{ flex: 1 }}>
+            {props.summary}
+          </Text>
+        </View>
+      ) : null}
+
+      <View style={styles.changes}>
+        {props.changes.map((c, i) => {
+          const rejected = c.status === "rejected";
+          const ok = c.status === "accepted";
+          return (
+            <View key={`${c.label}-${i}`} style={styles.change}>
+              <Text size="xs" color="muted" transform="uppercase" style={styles.changeLabel}>
+                {c.label}
+              </Text>
+              <View style={styles.diff}>
+                {c.before != null ? (
+                  <>
+                    <Text size="sm" color="muted" tabular style={styles.before}>
+                      {c.before}
+                    </Text>
+                    <Icon name="arrow-right" size={13} color={colors.zinc[400]} />
+                  </>
+                ) : null}
+                <Text size="sm" weight="medium" tabular color={rejected ? "muted" : "default"} style={rejected ? styles.before : undefined}>
+                  {c.after}
+                </Text>
+              </View>
+              {perItem && status === "open" ? (
+                <View style={styles.itemControls}>
+                  <IconButton
+                    icon="check"
+                    size="sm"
+                    color="none"
+                    iconColor={ok ? solid("emerald") : colors.zinc[400]}
+                    accessibilityLabel={`Accept — ${c.label}`}
+                    onPress={() => props.onAcceptItem?.(i)}
+                  />
+                  <IconButton
+                    icon="x"
+                    size="sm"
+                    color="none"
+                    iconColor={rejected ? solid("red") : colors.zinc[400]}
+                    accessibilityLabel={`Reject — ${c.label}`}
+                    onPress={() => props.onRejectItem?.(i)}
+                  />
+                </View>
+              ) : null}
+            </View>
+          );
+        })}
+      </View>
+
+      {status !== "open" ? (
+        <View style={styles.outcome}>
+          <Icon
+            name={status === "applied" ? "circle-check" : "rotate-ccw"}
+            size={14}
+            color={status === "applied" ? solid("emerald") : colors.zinc[400]}
+          />
+          <Text size="xs" color="muted">
+            {status === "applied" ? "Applied" : "Discarded"}
+          </Text>
+        </View>
+      ) : (
+        <View style={styles.footer}>
+          <View style={{ flex: 1 }}>
+            {perItem ? (
+              <Text size="xs" color="muted">
+                {accepted} of {props.changes.length} accepted
+              </Text>
+            ) : null}
+          </View>
+          {props.onDiscard ? <LinkButton title={perItem ? "Reject all" : "Discard"} onPress={props.onDiscard} /> : null}
+          {props.onApply ? (
+            <Button
+              title={props.applyLabel ?? (perItem ? "Apply accepted" : "Apply")}
+              color="primary"
+              shape="rounded"
+              disabled={perItem && accepted === 0}
+              onPress={props.onApply}
+            />
+          ) : null}
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderWidth: 1,
+    borderColor: tint("violet", 0.35),
+    backgroundColor: colors.white,
+    borderRadius: 12,
+    padding: 14,
+    gap: 12,
+  },
+  resolved: { borderColor: colors.border, backgroundColor: colors.zinc[50] },
+  summary: { flexDirection: "row", alignItems: "center", gap: 8 },
+  changes: { gap: 8 },
+  change: { flexDirection: "row", alignItems: "center", gap: 12 },
+  changeLabel: { width: 120 },
+  diff: { flexDirection: "row", alignItems: "center", gap: 8, flex: 1 },
+  before: { textDecorationLine: "line-through" },
+  itemControls: { flexDirection: "row", alignItems: "center", gap: 2 },
+  outcome: { flexDirection: "row", alignItems: "center", gap: 6 },
+  footer: { flexDirection: "row", alignItems: "center", gap: 8 },
+});

package/src/clarify.tsx

@@ -0,0 +1,68 @@
+import { StyleSheet, View } from "react-native";
+import { colors, solid, tint } from "./colors";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { Button } from "./button";
+
+export interface ClarifyOption {
+  label: string;
+  value: string;
+}
+
+export interface ClarifyProps {
+  /** The agent's question — what it needs settled to proceed. */
+  question: string;
+  options: ClarifyOption[];
+  onAnswer: (value: string) => void;
+  /** Once answered, the card settles showing the chosen reply (pass the option
+   *  label). */
+  answer?: string;
+}
+
+/**
+ * The agent asks BACK — a question with quick-reply options the human picks
+ * before the run continues. Human-in-the-loop input: when the agent is unsure,
+ * it clarifies instead of guessing wrong. The run pauses on this; `onAnswer`
+ * resumes it. Pair with `AgentRun` / `AgentProgress`.
+ */
+export function Clarify(props: ClarifyProps) {
+  const answered = props.answer != null;
+  return (
+    <View style={styles.card}>
+      <View style={styles.header}>
+        <Icon name="message-circle-question-mark" size={15} color={solid("violet")} />
+        <Text size="sm" weight="medium" style={{ flex: 1 }}>
+          {props.question}
+        </Text>
+      </View>
+      {answered ? (
+        <View style={styles.answered}>
+          <Icon name="circle-check" size={14} color={solid("emerald")} />
+          <Text size="sm" color="muted">
+            {props.answer}
+          </Text>
+        </View>
+      ) : (
+        <View style={styles.options}>
+          {props.options.map((o) => (
+            <Button key={o.value} title={o.label} color="secondary" shape="rounded" onPress={() => props.onAnswer(o.value)} />
+          ))}
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderWidth: 1,
+    borderColor: tint("violet", 0.35),
+    backgroundColor: colors.white,
+    borderRadius: 12,
+    padding: 14,
+    gap: 12,
+  },
+  header: { flexDirection: "row", alignItems: "flex-start", gap: 8 },
+  options: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+  answered: { flexDirection: "row", alignItems: "center", gap: 6 },
+});

package/src/confidence.tsx

@@ -0,0 +1,31 @@
+import { Badge } from "./badge";
+import type { ColorName } from "./colors";
+
+export type ConfidenceLevel = "high" | "medium" | "low";
+
+export interface ConfidenceProps {
+  /** Pass a level directly, or a 0–1 `score` (≥0.8 high · ≥0.5 medium · else low). */
+  level?: ConfidenceLevel;
+  score?: number;
+}
+
+const LABEL: Record<ConfidenceLevel, string> = { high: "High", medium: "Medium", low: "Low" };
+// low is zinc (unsure, NOT an error — an error is a different signal); high
+// emerald, medium amber. One family per level, weights derive from the name.
+const COLOR: Record<ConfidenceLevel, ColorName> = { high: "emerald", medium: "amber", low: "zinc" };
+
+export function levelFromScore(score: number): ConfidenceLevel {
+  if (score >= 0.8) return "high";
+  if (score >= 0.5) return "medium";
+  return "low";
+}
+
+/**
+ * How sure the AI is — a calibrated high/medium/low chip on the kit's `Badge`
+ * (dot variant). The human weights an AI proposal or estimate by it before
+ * accepting. Pair with `Suggestion` and `AssistedField`.
+ */
+export function Confidence(props: ConfidenceProps) {
+  const level = props.level ?? (props.score != null ? levelFromScore(props.score) : "medium");
+  return <Badge variant="dot" color={COLOR[level]} label={LABEL[level]} />;
+}

package/src/inline_edit.tsx

@@ -102,8 +102,10 @@ interface InlineEditFrameProps {
 }
 
 interface InlineEditViewProps {
-  /** The formatted current value. Empty → placeholder. */
-  display: string;
+  /** The current value: a formatted string (empty → placeholder), or a node
+   *  rendered as-is — e.g. a `MemberChip` / `OptionBadge` for a rich resting
+   *  value. A node takes the flex slot; the trailing adornment still right-aligns. */
+  display: string | ReactNode;
   placeholder?: string;
   onPress?: () => void;
   disabled?: boolean;
@@ -136,9 +138,13 @@ export function InlineEditView(props: InlineEditViewProps) {
       userSelect="none"
       style={[styles.view, active && styles.viewActive]}
     >
-      <Text numberOfLines={1} style={[viewTextStyle, display ? null : styles.placeholder]}>
-        {display || placeholder || "—"}
-      </Text>
+      {typeof display === "string" ? (
+        <Text numberOfLines={1} style={[viewTextStyle, display ? null : styles.placeholder]}>
+          {display || placeholder || "—"}
+        </Text>
+      ) : (
+        <View style={styles.viewNode}>{display}</View>
+      )}
       {trailing != null ? trailing : null}
     </PressableHighlight>
   );
@@ -230,6 +236,7 @@ const styles = StyleSheet.create({
     boxShadow: ACTIVE_RING,
   },
   placeholder: { color: colors.zinc[400] },
+  viewNode: { flex: 1, minWidth: 0 },
   editRow: { flexDirection: "row", alignItems: "flex-start", gap: 6 },
   editControl: { flex: 1, position: "relative" },
   savingOverlay: { position: "absolute", right: 8, top: 0, bottom: 0, justifyContent: "center" },

package/src/inline_member_select.tsx

@@ -0,0 +1,62 @@
+import { useCallback, useMemo } from "react";
+import { InlineSelect } from "./inline_select";
+import { MemberChip } from "./member_chip";
+import type { MemberSelectMember } from "./member_select";
+import type { PickerOption } from "./picker";
+
+interface InlineMemberSelectProps {
+  /** The candidate roster — an app feeds `useMembers()`, the product any
+   *  directory. Each member carries its own avatar (`image`), so the resting
+   *  chip and every option render with no side lookup. */
+  members: MemberSelectMember[];
+  /** The currently-assigned member id, or `null` when unassigned. A value not
+   *  in `members` (a removed/deactivated member) reads as empty → placeholder. */
+  value: string | null;
+  /** Commit a new assignment (the picked member id). Throwing surfaces the
+   *  inline error and reverts, like every inline editor. */
+  onSave: (memberId: string) => void | Promise<void>;
+  placeholder?: string;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+}
+
+/**
+ * Edit a `select_member` field in place: the assigned member shows as a
+ * {@link MemberChip} (avatar + name) at the kit's control height; clicking it
+ * floats a member picker (every option a `MemberChip`) and picking commits — no
+ * layout shift. The inline-edit twin of {@link MemberSelect} (use that in a
+ * form); built on {@link InlineSelect}. PURE: pass the candidate `members` (an
+ * app feeds `useMembers`); this fetches nothing.
+ *
+ * ```tsx
+ * const { members } = useMembers();
+ * <InlineMemberSelect members={members} value={row.assignee} onSave={saveAssignee} />
+ * ```
+ */
+export function InlineMemberSelect(props: InlineMemberSelectProps) {
+  const { members, ...inline } = props;
+
+  const byId = useMemo(() => new Map(members.map((m) => [m.id, m])), [members]);
+  const options = useMemo<PickerOption<string>[]>(
+    () => members.map((m) => ({ value: m.id, label: m.name || m.email || m.id })),
+    [members],
+  );
+
+  const renderMember = useCallback(
+    (option: PickerOption<string>) => {
+      const member = byId.get(option.value);
+      if (!member) return null;
+      return <MemberChip name={member.name || member.email} image={member.image} />;
+    },
+    [byId],
+  );
+
+  return (
+    <InlineSelect<string>
+      options={options}
+      renderOptionContent={renderMember}
+      renderValue={renderMember}
+      {...inline}
+    />
+  );
+}

package/src/inline_select.tsx

@@ -16,6 +16,10 @@ export interface InlineSelectProps<T extends string> {
   /** Custom option content in the dropdown (icon + label, two-line, a badge…).
    *  Omit for a plain label list — both render through the same `PickerMenu`. */
   renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
+  /** Render the SELECTED value in the resting view as a node (an avatar chip, a
+   *  colored badge) instead of its plain label. Falls back to the label when
+   *  omitted; the empty state always shows the placeholder. */
+  renderValue?: (selected: PickerOption<T>) => React.ReactNode;
   placeholder?: string;
   disabled?: boolean;
   accessibilityLabel?: string;
@@ -29,7 +33,7 @@ export interface InlineSelectProps<T extends string> {
  * standard and custom-rendered pickers are both supported here.
  */
 export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
-  const { value, onSave, options, renderOptionContent, placeholder, disabled, accessibilityLabel } = props;
+  const { value, onSave, options, renderOptionContent, renderValue, placeholder, disabled, accessibilityLabel } = props;
   const [open, setOpen] = useState(false);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -58,7 +62,7 @@ export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
       <Popover open={open && !disabled} onOpenChange={setOpen} side="bottom" align="start" inheritTriggerWidth>
         <PopoverTrigger>
           <InlineEditView
-            display={selected?.label ?? ""}
+            display={selected ? (renderValue ? renderValue(selected) : (selected.label ?? "")) : ""}
             placeholder={placeholder}
             disabled={disabled}
             active={open && !disabled}

package/src/prompt_field.tsx

@@ -0,0 +1,150 @@
+import { useCallback, useState } from "react";
+import {
+  NativeSyntheticEvent,
+  StyleSheet,
+  TextInput as RNTextInput,
+  TextInputKeyPressEventData,
+  View,
+} from "react-native";
+import { colors, solid, tint } from "./colors";
+import { Icon } from "./icon";
+import { IconButton } from "./icon_button";
+import { ActivityIndicator } from "./activity_indicator";
+import { ACTIVE_RING } from "./control_surface";
+import { getInputTextStyle, fontFamilyRegular } from "./text_utils";
+
+export interface PromptFieldProps {
+  value: string;
+  onChangeText: (value: string) => void;
+  /** Fired on Enter (without Shift) or the send button. Receives the trimmed
+   *  text; never fires empty or while busy. */
+  onSubmit: (value: string) => void;
+  placeholder?: string;
+  /** The agent is working — the field locks and the send slot shows a spinner.
+   *  This is the imperative command surface: one prompt does work, you watch it
+   *  stream (see `AgentRun`), you don't chat. */
+  busy?: boolean;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  accessibilityLabel?: string;
+  /** When set, a paperclip appears at the left of the footer — the composer can
+   *  attach files (e.g. the photo that starts a run). The host opens the picker. */
+  onAttach?: () => void;
+}
+
+/**
+ * The natural-language command surface for an AI app — a prompt box that
+ * triggers agent work, NOT a chat composer. Enter sends (Shift+Enter for a
+ * newline); while the agent runs, the field locks and the send slot spins. The
+ * violet sparkle marks it as the AI input. Pair with `AgentRun` (the streamed
+ * work it kicks off) and a session history of the outputs it produces.
+ */
+export function PromptField(props: PromptFieldProps) {
+  const { value, onChangeText, onSubmit, placeholder, busy, disabled, autoFocus, accessibilityLabel, onAttach } = props;
+  const [focused, setFocused] = useState(false);
+
+  const canSubmit = value.trim().length > 0 && !busy && !disabled;
+
+  const submit = useCallback(() => {
+    if (value.trim().length === 0 || busy || disabled) return;
+    onSubmit(value.trim());
+  }, [value, busy, disabled, onSubmit]);
+
+  // Web: Enter sends, Shift+Enter inserts a newline. RN's key event wraps the
+  // DOM event, so shiftKey/preventDefault are read defensively off nativeEvent.
+  const onKeyPress = useCallback(
+    (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+      const ne = e.nativeEvent as unknown as { key: string; shiftKey?: boolean };
+      if (ne.key === "Enter" && !ne.shiftKey) {
+        (e as unknown as { preventDefault?: () => void }).preventDefault?.();
+        submit();
+      }
+    },
+    [submit],
+  );
+
+  return (
+    <View
+      style={[
+        styles.box,
+        focused ? { borderColor: colors.zinc[900], boxShadow: ACTIVE_RING } : null,
+        disabled ? { backgroundColor: colors.zinc[50] } : null,
+      ]}
+    >
+      <View style={styles.inputRow}>
+        <View style={styles.glyph}>
+          <Icon name="sparkles" size={14} color={solid("violet")} />
+        </View>
+        <RNTextInput
+          accessibilityLabel={accessibilityLabel ?? placeholder}
+          style={[styles.input, getInputTextStyle()]}
+          value={value}
+          onChangeText={onChangeText}
+          onKeyPress={onKeyPress}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          placeholder={placeholder}
+          placeholderTextColor={colors.zinc[400]}
+          editable={!busy && !disabled}
+          autoFocus={autoFocus}
+          multiline
+          submitBehavior="newline"
+        />
+      </View>
+      <View style={styles.footer}>
+        {onAttach ? (
+          <IconButton icon="paperclip" color="none" size="sm" accessibilityLabel="Attach files" onPress={onAttach} disabled={busy || disabled} />
+        ) : null}
+        <View style={{ flex: 1 }} />
+        {busy ? (
+          <View style={styles.sendSlot}>
+            <ActivityIndicator size={18} color={solid("violet")} />
+          </View>
+        ) : (
+          <IconButton
+            icon="arrow-up"
+            color="primary"
+            accessibilityLabel="Send"
+            onPress={submit}
+            disabled={!canSubmit}
+          />
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: 14,
+    backgroundColor: colors.white,
+    paddingHorizontal: 12,
+    paddingTop: 10,
+    paddingBottom: 8,
+    gap: 6,
+  },
+  inputRow: { flexDirection: "row", gap: 8, alignItems: "flex-start" },
+  glyph: {
+    width: 24,
+    height: 24,
+    borderRadius: 7,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: tint("violet", 0.1),
+    marginTop: 2,
+  },
+  input: {
+    flex: 1,
+    minHeight: 48,
+    maxHeight: 160,
+    paddingTop: 4,
+    paddingBottom: 0,
+    fontFamily: fontFamilyRegular,
+    // RN-Web focus outline is handled by the box ring, not the raw input.
+    outlineStyle: "none",
+  } as object,
+  footer: { flexDirection: "row", alignItems: "center" },
+  sendSlot: { width: 28, height: 28, alignItems: "center", justifyContent: "center" },
+});