@lotics/ui 11.8.10 → 12.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "11.8.10",
+  "version": "12.0.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/back_button.tsx

@@ -1,15 +1,16 @@
 import { IconButton } from "./icon_button";
-import { Pressable, View } from "react-native";
+import { View } from "react-native";
 import { Icon } from "./icon";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { PressableHighlight } from "./pressable_highlight";
 import { useLoticsLocale } from "./locale";
 
 interface BackButtonProps {
   onPress: () => void;
-  /** Names where back GOES ("Orders", "Danh sách"). Renders beside the glyph as
-   *  part of the SAME control — a label you can't press is a lie. Omit for the
-   *  bare glyph. */
+  /** Names where back GOES ("Orders", "Danh sách"). Renders beside the circular
+   *  glyph as part of the SAME control — a label you can't press is a lie. Omit
+   *  for the bare glyph. */
   label?: string;
   /** Accessible name. Defaults to `label`, else the locale's `nav.back`
    *  ("Back" / "Quay lại"). */
@@ -19,46 +20,38 @@ interface BackButtonProps {
 export function BackButton(props: BackButtonProps) {
   const locale = useLoticsLocale();
   const { onPress, label, accessibilityLabel = label ?? locale.nav.back } = props;
-  // Bare glyph — the circular icon IS the control.
+  // Bare — the circular glyph IS the control.
   if (label === undefined) {
     return (
-      <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-        <IconButton
-          icon="chevron-left"
-          size="lg"
-          color="secondary"
-          accessibilityLabel={accessibilityLabel}
-          onPress={onPress}
-          style={{ alignSelf: "flex-start" }}
-        />
-      </View>
+      <IconButton
+        icon="chevron-left"
+        size="lg"
+        color="secondary"
+        accessibilityLabel={accessibilityLabel}
+        onPress={onPress}
+        style={{ alignSelf: "flex-start" }}
+      />
     );
   }
-  // Labelled — ONE pressable over glyph + label, so the words are a target too
-  // (an IconButton beside a Text would be a control next to unclickable prose).
+  // Labelled — the SAME circular glyph, the destination named beside it, ONE
+  // pressable pill over both (words you can't press are a lie). The disc
+  // mirrors IconButton lg/secondary (40px, zinc-100, 20px zinc-900 glyph); the
+  // pill takes PressableHighlight's default hover/press wash + focus ring.
   return (
-    <Pressable
+    <PressableHighlight
+      focusRing
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
+      userSelect="none"
       onPress={onPress}
-      style={({ pressed, hovered }) => [
-        {
-          flexDirection: "row",
-          alignItems: "center",
-          gap: 6,
-          alignSelf: "flex-start",
-          paddingVertical: 6,
-          paddingLeft: 6,
-          paddingRight: 10,
-          borderRadius: 8,
-        },
-        (hovered || pressed) && { backgroundColor: colors.zinc[100] },
-      ]}
+      style={{ flexDirection: "row", alignItems: "center", gap: 8, alignSelf: "flex-start", borderRadius: 999, paddingRight: 14 }}
     >
-      <Icon name="chevron-left" size={16} color={colors.zinc[500]} />
+      <View style={{ width: 40, height: 40, borderRadius: 999, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" }}>
+        <Icon name="chevron-left" size={20} color={colors.zinc[900]} />
+      </View>
       <Text size="sm" weight="medium" color="muted" numberOfLines={1}>
         {label}
       </Text>
-    </Pressable>
+    </PressableHighlight>
   );
 }

package/src/checklist.tsx

@@ -3,11 +3,13 @@ import { StyleSheet, View } from "react-native";
 import { ActionMenu, type ActionMenuItem } from "./action_menu";
 
 // The record-scoped CHECKLIST — the compound that owns the list's GEOMETRY
-// (row height, ring/title alignment, one trailing column width) while the
-// CONTENT stays composed: a `CheckCircle` (live or read-only) in `control`,
-// a struck `InlineTextInput` or plain `Text` as the title, an
-// `InlineMemberSelect` or nothing in `trailing`, and `menu` for the row's
-// ⋯ options (Delete lives BEHIND the menu — indirection that prevents
+// (row height, control/title alignment, the meta/expansion indent, one
+// trailing column width) while the CONTENT stays composed: tasks (a
+// `CheckCircle` in `control`, a struck `InlineTextInput` title) and PICKER
+// rows (a `CheckboxInput` in `control` — set `controlWidth={24}` — with a
+// readiness `meta` line and a fill editor in `expansion`) are the same
+// anatomy. `menu` carries the row's ⋯ options (Delete lives BEHIND the menu
+// — indirection that prevents
 // accidental destructive taps). Suggested tasks are NOT rows: offer the record
 // type's commons as `SuggestionChip`s under the list (tap = materialize,
 // ✕ = dismiss) — a pill can't be mistaken for a task. `CaptureRow` closes the
@@ -27,21 +29,26 @@ import { ActionMenu, type ActionMenuItem } from "./action_menu";
 
 interface ChecklistContextValue {
   trailingWidth?: number;
+  controlWidth: number;
 }
 
-const ChecklistContext = createContext<ChecklistContextValue>({});
+const ChecklistContext = createContext<ChecklistContextValue>({ controlWidth: 20 });
 
 export interface ChecklistProps {
   /** Fixed width of every row's trailing cell (an assignee select) — set it
    *  once so the column lines up; omit when rows carry no trailing. */
   trailingWidth?: number;
+  /** Width of every row's leading control — `CheckCircle` 20 (the default),
+   *  `CheckboxInput` 24. The `meta`/`expansion` indent derives from it, so
+   *  the second line always sits on the title's text edge. */
+  controlWidth?: number;
   children: ReactNode;
 }
 
 export function Checklist(props: ChecklistProps) {
-  const { trailingWidth, children } = props;
+  const { trailingWidth, controlWidth = 20, children } = props;
   return (
-    <ChecklistContext.Provider value={{ trailingWidth }}>
+    <ChecklistContext.Provider value={{ trailingWidth, controlWidth }}>
       <View style={styles.list}>{children}</View>
     </ChecklistContext.Provider>
   );
@@ -58,6 +65,10 @@ interface ChecklistRowBaseProps {
    *  carrier"). The ⋯ column aligns only when every row in the list carries
    *  a menu — keep its presence uniform per list. */
   menu?: { items: ActionMenuItem[]; accessibilityLabel: string };
+  /** A BLOCK slot under the row (below `meta`), indented to the title's text
+   *  edge — a transient inline fill editor, a drill-down. Render it only
+   *  while open; the list's geometry (the indent) is owned here. */
+  expansion?: ReactNode;
 }
 
 /** `trailing` (wide surfaces) and `meta` (narrow) are exclusive by type. */
@@ -77,11 +88,14 @@ export type ChecklistRowProps = ChecklistRowBaseProps &
       }
   );
 
-/** One task line: control · title (flex) · the aligned trailing cell · ⋯,
- *  with an optional indented `meta` line below for narrow surfaces. */
+/** One checklist line: control · title (flex) · the aligned trailing cell · ⋯,
+ *  with an optional indented `meta` line below for narrow surfaces and an
+ *  optional `expansion` block under that (both sit on the title's text edge). */
 export function ChecklistRow(props: ChecklistRowProps) {
-  const { control, children, trailing, menu, meta } = props;
-  const { trailingWidth } = useContext(ChecklistContext);
+  const { control, children, trailing, menu, meta, expansion } = props;
+  const { trailingWidth, controlWidth } = useContext(ChecklistContext);
+  // Indent past the control + the row gap so meta/expansion align with the title.
+  const indent = controlWidth + 12;
   return (
     <View>
       <View style={styles.row}>
@@ -90,7 +104,8 @@ export function ChecklistRow(props: ChecklistRowProps) {
         {trailing != null ? <View style={trailingWidth != null ? { width: trailingWidth } : null}>{trailing}</View> : null}
         {menu != null ? <ActionMenu items={menu.items} accessibilityLabel={menu.accessibilityLabel} /> : null}
       </View>
-      {meta != null ? <View style={styles.meta}>{meta}</View> : null}
+      {meta != null ? <View style={[styles.meta, { paddingLeft: indent }]}>{meta}</View> : null}
+      {expansion != null ? <View style={[styles.expansion, { paddingLeft: indent }]}>{expansion}</View> : null}
     </View>
   );
 }
@@ -99,6 +114,6 @@ const styles = StyleSheet.create({
   list: { gap: 4 },
   row: { flexDirection: "row", alignItems: "center", gap: 12, minHeight: 32 },
   title: { flex: 1 },
-  // Indent past the ring (20) + the row gap (12) so meta aligns with the title.
-  meta: { paddingLeft: 32, paddingBottom: 4, flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 2 },
+  meta: { paddingBottom: 4, flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 2 },
+  expansion: { paddingTop: 2, paddingBottom: 6 },
 });

package/src/comments_thread.tsx

@@ -273,8 +273,9 @@ function CommentRow(props: CommentRowProps) {
 
 /**
  * The comment list — one author/avatar/timestamp/content/files row per comment,
- * oldest first, with an author-only edit/delete menu. Pair it with a composer
- * (`CommentComposer`, or a richer consumer-owned one) for the full thread.
+ * oldest first, with an author-only edit/delete menu. Pair it with THE kit
+ * `Composer` for the full thread (attach = `actionsButton` + `files` slots) —
+ * never a bespoke comment box.
  */
 export function CommentList(props: CommentListProps) {
   const labels = { ...DEFAULT_LABELS, ...props.labels };
@@ -316,63 +317,3 @@ export function CommentList(props: CommentListProps) {
   );
 }
 
-export interface CommentComposerProps {
-  /** Submit a new comment. Cleared on success; left intact on throw so the draft survives. */
-  onSubmit: (content: string) => void | Promise<void>;
-  placeholder: string;
-  sendLabel: string;
-  /** Disable input + send (e.g. comments unavailable for an anonymous viewer). */
-  disabled?: boolean;
-  /** Extra controls left of the send button — e.g. an attach-file button. */
-  actions?: ReactNode;
-}
-
-/**
- * A minimal text comment composer for consumers without a richer one of their
- * own (the product uses its file-capable chat composer instead). Multiline
- * input + a send button; attachments are opt-in via the `actions` slot.
- */
-export function CommentComposer(props: CommentComposerProps) {
-  const { onSubmit, placeholder, sendLabel, disabled, actions } = props;
-  const [content, setContent] = useState("");
-  const [sending, setSending] = useState(false);
-
-  const send = async () => {
-    const text = content.trim();
-    if (!text || sending || disabled) return;
-    setSending(true);
-    try {
-      await onSubmit(text);
-      setContent("");
-    } catch {
-      // Keep the draft so the user can retry; the data layer surfaces the
-      // failure (the optimistic comment rolls back). Don't propagate.
-    } finally {
-      setSending(false);
-    }
-  };
-
-  return (
-    <View>
-      <TextInputField
-        value={content}
-        onChangeText={setContent}
-        placeholder={placeholder}
-        editable={!disabled}
-        multiline
-        numberOfLines={2}
-      />
-      <Spacer size={8} />
-      <View style={{ flexDirection: "row", gap: 8, justifyContent: "flex-end", alignItems: "center" }}>
-        {actions}
-        <Button
-          title={sendLabel}
-          color="primary"
-          disabled={disabled || !content.trim() || sending}
-          loading={sending}
-          onPress={send}
-        />
-      </View>
-    </View>
-  );
-}

package/src/detail_row.tsx

@@ -1,8 +1,7 @@
 import { createContext, ReactNode, useContext, useState } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { INLINE_CONTROL_HEIGHT } from "./inline_edit";
-import { InfoPopover } from "./info_popover";
-import { useLoticsLocale } from "./locale";
+import { getInputLineHeight } from "./text_utils";
 import { Text } from "./text";
 
 interface DetailTableColumns {
@@ -105,11 +104,25 @@ export interface DetailRowProps {
   labelSize?: "xs" | "sm";
   /** Min row height. Default 28 (or the `DetailTable`'s `minHeight`). */
   minHeight?: number;
-  /** An ⓘ popover hugging the label — a short "what this field means" gloss,
-   *  the row-label member of the one `info` vocabulary
-   *  (`CardHeaderTitle` / `SectionHeadingTitle` / `SubsectionHeadingTitle`).
-   *  Pass `undefined` to hide the ⓘ (a caller can gate it on its own state). */
-  info?: string;
+  /** PERSISTENT guidance — what to enter, or the rule that applies ("Printed
+   *  on every document"). Renders under the VALUE (the label column has no
+   *  room for prose); stacked mode mirrors `FormField` (label · description ·
+   *  control). Always visible — field annotations are EXPLICIT, never a
+   *  hidden ⓘ gloss. Invalid STATE → `error` or a co-located `Callout`. Same
+   *  name, same meaning as `FormField.description`. */
+  description?: string;
+  /** Field-level failure, under the value in danger ink with `FormField`'s
+   *  alert semantics (announced on appearance). For CONSUMER-validated state —
+   *  the `Inline*` editors already render their own transient save errors;
+   *  don't wire both to the same failure. */
+  error?: string;
+  /** The value renders as FLAT text (an `InlineStatic`, a plain `Text`) rather
+   *  than a control-height chip. Annotations then tuck up by the control
+   *  band's slack, so the perceived gap under the TEXT equals the gap under a
+   *  chip — without it, the band's invisible bottom half reads as a hole
+   *  between a static value and its description. Row height and label
+   *  centering are unchanged. */
+  flat?: boolean;
 }
 
 /**
@@ -123,21 +136,42 @@ export interface DetailRowProps {
  */
 export function DetailRow(props: DetailRowProps) {
   const table = useContext(DetailTableContext);
-  const { label, children, trailing, labelSize = "sm", info } = props;
+  const { label, children, trailing, labelSize = "sm", description, error, flat } = props;
   const labelWidth = props.labelWidth ?? table?.labelWidth;
   const minHeight = props.minHeight ?? table?.minHeight ?? 28;
   const form = labelWidth != null;
-  const words = useLoticsLocale();
-  // The ⓘ hugs the label text (flexShrink keeps long labels from pushing it
-  // out of the cell) — the label cell keeps its exact width either way.
-  const infoLabel = (cellStyle: StyleProp<ViewStyle>) => (
-    <View style={[styles.labelWithInfo, cellStyle]}>
-      <Text size={labelSize} color="muted" numberOfLines={1} style={styles.labelShrink}>
+  // Annotations (description / error) live UNDER THE VALUE — the row grows,
+  // so the label + trailing center against the CONTROL LINE, not the block.
+  const annotated = description != null || error != null;
+  // A FLAT value (no painted chip) centers its text in the control band,
+  // leaving invisible slack below it — tuck the annotations up by that slack
+  // so the perceived gap matches a chip row's. Horizontal mode only (stacked
+  // mode has no band; it mirrors FormField's order).
+  const flatTuck = flat && annotated ? -Math.max(0, Math.round((minHeight - getInputLineHeight(false)) / 2)) : 0;
+  const labelCell = (cellStyle: StyleProp<ViewStyle>) => (
+    <View style={[styles.labelCell, { minHeight }, cellStyle]}>
+      <Text size={labelSize} color="muted" numberOfLines={1}>
         {label}
       </Text>
-      <InfoPopover text={info ?? ""} accessibilityLabel={words.sectionHeading.info} />
     </View>
   );
+  // Error first (adjacent to the control that failed, FormField's alert
+  // semantics), then the guidance. Indented to the inline chip's OWN text
+  // inset (paddingHorizontal 8), so annotations align with the value's text.
+  const annotations = annotated ? (
+    <>
+      {error != null ? (
+        <Text size="xs" color="danger" accessibilityRole="alert" aria-live="polite" style={styles.annotation}>
+          {error}
+        </Text>
+      ) : null}
+      {description != null ? (
+        <Text size="xs" color="muted" style={styles.annotation}>
+          {description}
+        </Text>
+      ) : null}
+    </>
+  ) : null;
   if (table?.stacked) {
     // Stacked mode wears the FORM grammar: the label renders exactly like a
     // `FormField` label (medium, default ink), so a narrow record surface
@@ -146,47 +180,54 @@ export function DetailRow(props: DetailRowProps) {
     // inline editor self-persists — only the look converges.
     return (
       <View style={styles.stackedRow}>
-        {info != null ? (
-          <View style={styles.labelWithInfo}>
-            <Text weight="medium" numberOfLines={1} style={styles.labelShrink}>
-              {label}
-            </Text>
-            <InfoPopover text={info} accessibilityLabel={words.sectionHeading.info} />
-          </View>
-        ) : (
-          <Text weight="medium" numberOfLines={1}>
-            {label}
-          </Text>
-        )}
+        <Text weight="medium" numberOfLines={1}>
+          {label}
+        </Text>
+        {/* stacked wears the FORM grammar exactly: label · description ·
+            control · error (the `FormField` order) */}
+        {description != null ? <Text color="muted">{description}</Text> : null}
         <View style={[styles.stackedValueRow, { minHeight }]}>
           <View style={styles.value}>{children}</View>
           {trailing != null ? trailing : null}
         </View>
+        {error != null ? (
+          <Text size="xs" color="danger" accessibilityRole="alert" aria-live="polite">
+            {error}
+          </Text>
+        ) : null}
       </View>
     );
   }
+  // ONE alignment law for every row: the row TOP-ALIGNS and each cell (label ·
+  // control · trailing) centers within the first CONTROL LINE (`minHeight`) —
+  // a tall value block (a multi-control stack, annotations) never drags the
+  // label or trailing toward the block's center.
   return (
     <View style={[styles.row, { minHeight }]}>
-      {info != null ? (
-        infoLabel(form ? { width: labelWidth } : styles.flexLabel)
+      {labelCell(form ? { width: labelWidth } : styles.flexLabel)}
+      {form ? (
+        <View style={[styles.value, annotated && styles.valueStack]}>
+          <View style={[styles.controlLine, { minHeight }]}>{children}</View>
+          {flatTuck !== 0 && annotations != null ? <View style={{ marginTop: flatTuck }}>{annotations}</View> : annotations}
+        </View>
       ) : (
-        <Text size={labelSize} color="muted" style={form ? { width: labelWidth } : styles.flexLabel}>
-          {label}
-        </Text>
+        <View style={annotated ? styles.valueStack : undefined}>
+          <View style={[styles.controlLine, { minHeight }]}>{children}</View>
+          {flatTuck !== 0 && annotations != null ? <View style={{ marginTop: flatTuck }}>{annotations}</View> : annotations}
+        </View>
       )}
-      {form ? <View style={styles.value}>{children}</View> : children}
       {table?.trailingWidth != null ? (
-        <View style={[styles.trailingCell, { width: table.trailingWidth }]}>{trailing}</View>
+        <View style={[styles.trailingCell, { width: table.trailingWidth, minHeight }]}>{trailing}</View>
       ) : trailing != null ? (
-        trailing
+        <View style={[styles.trailingCell, { minHeight }]}>{trailing}</View>
       ) : null}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  // 6px between rows — the zinc-50 editor chips need visible separation.
-  table: { gap: 6 },
+  // 8px between rows — the zinc-50 editor chips need visible separation.
+  table: { gap: 8 },
   // Stacked (narrow) mode: label-over-value blocks need more air between rows.
   tableStacked: { gap: 14 },
   unmeasured: { opacity: 0 },
@@ -198,12 +239,17 @@ const styles = StyleSheet.create({
   },
   row: {
     flexDirection: "row",
-    alignItems: "center",
+    alignItems: "flex-start",
     gap: 12,
   },
   flexLabel: { flex: 1 },
-  labelWithInfo: { flexDirection: "row", alignItems: "center", gap: 4 },
-  labelShrink: { flexShrink: 1 },
+  labelCell: { justifyContent: "center" },
+  // The first line of the value cell — the control centers in it exactly like
+  // the label and trailing cells do.
+  controlLine: { justifyContent: "center" },
+  valueStack: { gap: 2 },
+  // Aligns annotation text with the inline chip's text (its 8px inset).
+  annotation: { paddingLeft: 8 },
   // Form mode (labelWidth set): the value column FILLS the row so every inline
   // editor spans the SAME width — and none jumps wider when it swaps to the
   // (flex:1) edit control. A stretch column, so an InlineEditView / InlineStatic

package/src/inline_edit.tsx

@@ -334,6 +334,11 @@ const styles = StyleSheet.create({
     borderColor: "transparent",
     backgroundColor: colors.zinc[50],
     paddingHorizontal: 8,
+    // Vertical padding matters only when the display content is TALLER than
+    // one line (a rich select showing title + description at rest): minHeight
+    // still governs single-line rows, so those render pixel-identical, while
+    // multi-line content gets breathing room instead of touching the edges.
+    paddingVertical: 6,
     flexDirection: "row",
     alignItems: "center",
     gap: 6,

package/src/inline_select.tsx

@@ -10,7 +10,7 @@ import { ActivityIndicator } from "./activity_indicator";
 import { type InlineEditBackground, InlineEditView } from "./inline_edit";
 import { useLoticsLocale } from "./locale";
 
-export interface InlineSelectProps<T extends string> {
+export interface InlineSelectProps<T extends string, D = unknown> {
   value: T | null;
   onSave: (next: T) => void | Promise<void>;
   /** Unset the field to empty. Provide it to make the value clearable: a compact
@@ -18,15 +18,15 @@ export interface InlineSelectProps<T extends string> {
    *  separate from `onSave` (whose next is a non-null `T`) so an app opts in
    *  without every caller having to handle null. */
   onClear?: () => void | Promise<void>;
-  options: PickerOption<T>[];
+  options: PickerOption<T, D>[];
   /** Custom option content in the dropdown (icon + label, two-line, a badge…).
    *  Omit for a plain label list — both render through the same `OptionList`. */
-  renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
+  renderOptionContent?: (option: PickerOption<T, D>) => 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 `renderOptionContent`
    *  (so the trigger renders like the options), then the plain label, when omitted;
    *  the empty state always shows the placeholder. */
-  renderSelected?: (selected: PickerOption<T>) => React.ReactNode;
+  renderSelected?: (selected: PickerOption<T, D>) => React.ReactNode;
   placeholder?: string;
   disabled?: boolean;
   accessibilityLabel?: string;
@@ -43,7 +43,7 @@ export interface InlineSelectProps<T extends string> {
  * to the view, so the row never changes height. Picking commits; dismissing reverts.
  * Pass `renderOptionContent` for rich options, or omit it for a plain label list.
  */
-export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
+export function InlineSelect<T extends string, D = unknown>(props: InlineSelectProps<T, D>) {
   const { value, onSave, onClear, options, renderOptionContent, renderSelected, placeholder, disabled, accessibilityLabel, searchable = false, background } = props;
   const labels = useLoticsLocale().inline;
   const [open, setOpen] = useState(false);

package/src/radio_picker.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useRef } from "react";
-import { View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { colors } from "./colors";
 import { CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
@@ -148,10 +148,19 @@ function RadioOption<T extends string | number | symbol>(
       >
         {selected && <Icon name="check" size={compact ? 14 : 24} color={getTextColor("inverted")} />}
       </View>
-      <View>
+      {/* The text column is width-CONSTRAINED so a long description WRAPS
+          inside the pressable (unconstrained, its intrinsic width overflows
+          the hover/press surface). Column rows take the full width; compact
+          row chips keep hugging their content. */}
+      <View style={compact ? styles.textCompact : styles.text}>
         <Text size={compact ? "sm" : undefined}>{label}</Text>
         {!!description && <Text color="muted">{description}</Text>}
       </View>
     </PressableHighlight>
   );
 }
+
+const styles = StyleSheet.create({
+  text: { flex: 1, minWidth: 0 },
+  textCompact: { flexShrink: 1, minWidth: 0 },
+});

package/src/section_heading.tsx

@@ -37,11 +37,11 @@ export interface SectionProps {
  *   </Section>
  */
 export function Section(props: SectionProps) {
-  // gap 12 spaces the heading from its body. Space BETWEEN sections belongs to
+  // gap 16 spaces the heading from its body. Space BETWEEN sections belongs to
   // the page column (`SectionStack`, 56 + hairline); a body of `Subsection`
-  // groups divides via a nested `SubsectionStack` (24 + hairline) —
+  // groups divides via a nested `SubsectionStack` (32, space-only) —
   // never a hairline directly under the heading (it belongs to its content).
-  return <View style={[{ gap: 12 }, props.style]}>{props.children}</View>;
+  return <View style={[{ gap: 16 }, props.style]}>{props.children}</View>;
 }
 
 export interface SubsectionProps {

package/src/section_stack.tsx

@@ -49,10 +49,12 @@ export function SectionStack(props: SectionStackProps) {
 export type SubsectionStackProps = StackProps;
 
 /**
- * The divided stack of `Subsection` groups INSIDE a `Section` — the same
- * hairline law one step tighter: a fixed 24px beat. Compose it as the
+ * The stack of `Subsection` groups INSIDE a `Section` — a fixed 32px beat,
+ * SPACE-ONLY: subsection titles carry the grouping; hairlines belong to the
+ * SECTION level (`SectionStack`), one rule per altitude. Compose it as the
  * section's body (after the `SectionHeading`); a section's groups divide
- * without hand-rolled gaps or dividers.
+ * without hand-rolled gaps. `divided` stays an explicit opt-in for a rare
+ * headingless stack that still needs a rule.
  *
  *   <Section>
  *     <SectionHeading><SectionHeadingTitle>Delivery</SectionHeadingTitle></SectionHeading>
@@ -63,5 +65,5 @@ export type SubsectionStackProps = StackProps;
  *   </Section>
  */
 export function SubsectionStack(props: SubsectionStackProps) {
-  return <DividedStack {...props} gap={24} />;
+  return <DividedStack {...props} divided={props.divided ?? false} gap={32} />;
 }

package/src/text_input_field.tsx

@@ -181,6 +181,12 @@ const styles = StyleSheet.create({
     borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
     borderColor: colors.border,
+    // The input surface is WHITE on ANY background — an input is an open well
+    // to type into, and on a tinted panel (an inset fill editor, a toned card)
+    // a transparent input inherits the tint and blends into its surface. Never
+    // rely on the canvas showing through; a consumer wanting another surface
+    // overrides via `style` (it lands after this in the array).
+    backgroundColor: colors.white,
     height: 40,
     paddingVertical: 8,
     paddingHorizontal: 8,