@lotics/ui 43.4.0 → 43.6.0

package/src/table.tsx

@@ -10,13 +10,12 @@ import {
 } from "react";
 import { StyleSheet, View, type ViewStyle } from "react-native";
 import { Text } from "./text";
-import { colors } from "./colors";
+import { colors, solid, type ColorName } from "./colors";
 import { PressableRow } from "./pressable_row";
 import { PressDoor } from "./press_door";
-import { Divider } from "./divider";
 import { DetailRow } from "./detail_row";
 import { SortHeader, type SortState, type SortHeaderLabels } from "./sort_header";
-import { COLUMN_GAP, ROW_GUTTER, computeTableFit, type TableFit, type TableFitColumn } from "./table_fit";
+import { COLUMN_GAP, ROW_GUTTER, ROW_HEIGHT, computeTableFit, type TableFit, type TableFitColumn } from "./table_fit";
 import { ROW_WASH_BLEED } from "./control_surface";
 
 /**
@@ -26,7 +25,7 @@ import { ROW_WASH_BLEED } from "./control_surface";
  * layer in `table_fit.ts` that decides which columns survive a narrow container.
  */
 export interface TableColumn extends TableFitColumn {
-  /** Header label (uppercase eyebrow). Omit for a control column (a trailing ⋯).
+  /** Header label — sentence case, at the BODY size. Omit for a control column.
    *  In stacked mode it renders as the eyebrow over the cell's value. */
   label?: string;
   /** Flex grow when no `width` (default 1). */
@@ -37,6 +36,27 @@ export interface TableColumn extends TableFitColumn {
 }
 
 
+/**
+ * WHAT SEPARATES ONE ROW FROM THE NEXT: nothing. A register's rows are separated
+ * by their own height and a small gap, and the only mark a row makes is the
+ * rounded wash it paints when you point at it.
+ *
+ * There is no hairline and no prop asking for one. A rule between two rows
+ * divides LIKE FROM LIKE, which whitespace already says — the register's one
+ * line is the band capping the columns, which divides chrome from content and is
+ * the thing whitespace cannot say. Drawing both makes them compete, and a grid of
+ * equal lines is most of what "it looks like a spreadsheet" means.
+ *
+ * The wash does the work the rule did, and it already has the shape for it:
+ * `PressableRow` bleeds its hover/selected ground past the content and rounds it,
+ * so a register reads as a stack of cards without any card component existing.
+ *
+ * DENSITY, when a surface genuinely needs it, is `TableRow`'s `minHeight` — one
+ * number, not a mode. What no caller can ask for is the rules back. A table of
+ * VALUES rather than of objects is a different component: `Matrix` for a numeric
+ * grid (a statement, a pivot, a rollup), `DataGrid` for a compact one.
+ */
+
 interface TableCtx {
   columns: TableColumn[];
   leading: number;
@@ -211,6 +231,15 @@ export function Table(props: TableProps) {
             </View>
           ) : null
         ) : (
+          /* THE HEADER RULE STAYS IN BOTH RHYTHMS — it is the one line that
+              survives `airy`, and it survives because of WHAT it separates rather
+              than how important it is. A rule between two rows divides like from
+              like, and space says that just as well. This rule divides CHROME
+              from CONTENT — a band of labels from the records they name — and
+              those are different kinds of thing, so the boundary earns a mark
+              that whitespace cannot supply. Dropping it was tried and the column
+              band floated: with nothing under them the labels read as a first
+              row rather than as the header of the rest. */
           <View style={[styles.headerBand, headerFill ? styles.headerBandFilled : null]}>
             {/* The TOTAL heads the column of positions — the one number that
                 answers "how many" without the reader scrolling to the last row. */}
@@ -221,7 +250,18 @@ export function Table(props: TableProps) {
                   col.sortable && onSort ? (
                     <SortHeader label={col.label} sortKey={col.key} sort={sort ?? null} onSort={onSort} align={col.align} labels={sortLabels} />
                   ) : (
-                    <Text size="xs" color="muted" transform="uppercase" numberOfLines={1}>
+                    /* A column header is CHROME: `sm` (the body rung, so it is
+                       legible), `medium` (a weight below the values it heads),
+                       `muted` (a step back in ink), and SENTENCE CASE. It was
+                       `xs` semibold uppercase — two sizes below the values, in
+                       the weight the heading ramp reserves for `#`/`##`/`###`,
+                       and all-caps, which the eyebrow rule bans outright as the
+                       loudest templated tell there is. Making a label smaller
+                       and fainter to make it recede trades legibility for quiet
+                       and produces the complaint it was meant to fix. `SortHeader`
+                       and `DataGrid` carry the same treatment; this is where the
+                       reason lives. */
+                    <Text size="sm" color="muted" weight="medium" numberOfLines={1}>
                       {col.label}
                     </Text>
                   )
@@ -232,18 +272,84 @@ export function Table(props: TableProps) {
           </View>
         )}
         <View style={styles.body}>
-          {rows.map((row, i) => (
-            <View key={i}>
-              {i > 0 ? <Divider /> : null}
-              {row}
-            </View>
-          ))}
+          {rows.map((row, i) => {
+            return (
+              <View key={i}>{row}</View>
+            );
+          })}
         </View>
       </View>
     </TableContext.Provider>
   );
 }
 
+
+export interface TableGroupProps {
+  /** What this band of rows has in common — an ACTION state, not a category. */
+  label: string;
+  /** How many rows are in it. Shown beside the label; omit only if the band is
+   *  never partial (it almost always is — a filter or a page can cut it). */
+  count?: number;
+  /** A palette family for the band's dot, when the group carries a VALENCE the
+   *  label alone understates (a queue that is overdue). Omit for a neutral band —
+   *  most bands are neutral, and a dot on every one is decoration. */
+  color?: ColorName;
+  /** The `TableRow`s in this band. */
+  children: ReactNode;
+}
+
+/**
+ * A titled BAND of rows inside a `Table` — the difference between a register
+ * that presents records and one that triages them.
+ *
+ * A flat register sorted by a column asks the reader to do the deciding: every
+ * row arrives at equal weight, and "which of these needs me today" is answered by
+ * reading all of them. Grouping moves that decision into the screen. Reach for it
+ * when the rows fall into states that imply DIFFERENT ACTIONS — needs a reply,
+ * gone quiet, closed — and the reader's real question is which pile they are in.
+ *
+ * Do NOT reach for it to group by a category the reader can already see in a
+ * column: that is a sort, and it costs a band of chrome per value while telling
+ * them what the cell beside it says.
+ *
+ * The band separates itself with AIR rather than a rule, because it is the
+ * biggest boundary inside the register and the row hairlines are the smallest —
+ * drawing both as lines makes them compete. The heading also takes no rule
+ * beneath it, which would orphan the title from the rows it opens.
+ *
+ * A group's rows keep their own `ordinal` numbering if they carry one: restart
+ * inside each band, where the reader's question is "which of these" rather than
+ * "which of all".
+ */
+export function TableGroup(props: TableGroupProps) {
+  const { label, count, color, children } = props;
+  const rows = Children.toArray(children).filter(isValidElement);
+  // A band separates its OWN rows the same way the table does. This rendered
+  // hairlines unconditionally, so an airy register lost its rules between bands
+  // and kept them inside — the grouping made the register look half-converted,
+  // and the rule that survived was the one with least reason to.
+  return (
+    <View>
+      <View style={styles.groupHeading}>
+        {color ? <View style={[styles.groupDot, { backgroundColor: solid(color) }]} /> : null}
+        <Text size="sm" weight="semibold">
+          {label}
+        </Text>
+        {count != null ? (
+          <Text size="sm" color="zinc-500" tabular>
+            {count}
+          </Text>
+        ) : null}
+      </View>
+      <View style={styles.body}>
+        {rows.map((row, i) => (
+          <View key={i}>{row}</View>
+        ))}
+      </View>
+    </View>
+  );
+}
+
 export type TableRowProps = {
   selected?: boolean;
   /** Part of a multi-select set — a resting blue tint (the open/hover wash overrides it). */
@@ -273,7 +379,19 @@ export type TableRowProps = {
    *  before `trailing`; stacked mode: the content's bottom line, right-aligned — an action
    *  reads at content scale, not as row chrome. Reserve Table `trailing` for it. */
   action?: ReactNode;
-  /** Min row height (register mode; stacked rows size to their content). Default 52. */
+  /**
+   * Min row height — a FLOOR, not a fixed height: a taller cell grows the row,
+   * so a two-line identity cell or a figure with a bar under it needs no
+   * override to fit. (Stacked rows size to their content and ignore this.)
+   *
+   * Defaults to `ROW_HEIGHT` (72), the register's rhythm. **Reach for this only
+   * when a surface genuinely needs more DENSITY than the beat** — and know that
+   * a number written against an older default silently becomes a shrink: an app
+   * carrying `minHeight={64}` from when the default was 52 now pulls that one
+   * register below every other on the screen, and it reads as cramped rather
+   * than as dense. If the reason you overrode it was "the content did not fit",
+   * delete the override.
+   */
   minHeight?: number;
   /**
    * The row's detail, revealed BENEATH it when `expanded` — the alternative to
@@ -330,9 +448,12 @@ export type TableRowProps = {
  * slots, different geometry.
  */
 export function TableRow(props: TableRowProps) {
-  const { onPress, selected, marked, accessibilityLabel, leading, ordinal, trailing, action, minHeight = 52, detail, expanded, children } = props;
+  const { onPress, selected, marked, accessibilityLabel, leading, ordinal, trailing, action, minHeight, detail, expanded, children } = props;
   const ctx = useContext(TableContext);
   if (!ctx) throw new Error("TableRow must be used within a Table");
+  // Read AFTER the context check so an airy register does not need every row to
+  // repeat its height — the rhythm is a property of the table, not of each row.
+  const rowMinHeight = minHeight ?? ROW_HEIGHT;
   const showDetail = detail != null && expanded === true;
 
   const cells = (Children.toArray(children).filter(isValidElement) as ReactElement<TableCellProps>[])
@@ -347,7 +468,7 @@ export function TableRow(props: TableRowProps) {
 
   // ONE style for the column row, shared by the pressable and read-only paths
   // below, which render near-identical Views.
-  const cellsStyle = [styles.cells, { minHeight }];
+  const cellsStyle = [styles.cells, { minHeight: rowMinHeight }];
 
   const body = ctx.stacked ? (
     <View style={styles.stackedBody}>
@@ -513,9 +634,30 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderColor: colors.border,
   },
-  // Rows are Divider-separated — the hairline between rows is the separation.
+  // A small gap, not a large one. The row's own height carries the airiness; the
+  // gap only has to stop two washes touching when the pointer moves between
+  // them, which at 4px it does while still reading as one list rather than as
+  // detached cards.
   body: {
-    gap: 0,
+    gap: 4,
+  },
+  // Air, not a rule. A band boundary is the LARGEST break inside a register and
+  // the row hairlines are the smallest; drawing both as lines makes the two
+  // compete and the grouping stops reading. The first band's heading sits under
+  // the column band's own hairline, so it takes less top space than the ones
+  // that follow — handled by the heading's own padding rather than by the caller.
+  groupHeading: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingTop: 26,
+    paddingBottom: 10,
+    paddingHorizontal: ROW_GUTTER,
+  },
+  groupDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 999,
   },
   row: {
     gap: COLUMN_GAP,

package/src/table_fit.ts

@@ -30,6 +30,18 @@ export interface TableFitColumn {
 /** Gap between the header band's / a row's children — `table.tsx` styles consume
  *  this, so the fit math and the rendered geometry can't drift. */
 export const COLUMN_GAP = 14;
+/**
+ * A register row's height. Tall enough that a two-line identity cell (a name over
+ * its supporting values) sits in it without crowding, and tall enough that the
+ * hover wash reads as a surface rather than a stripe — which is what has to carry
+ * the separation now that no hairline does.
+ *
+ * A caller that genuinely needs density overrides it per row (`TableRow`'s
+ * `minHeight`). That is one number, not a mode: what no caller can ask for is the
+ * row rules back, because a table of VALUES rather than of objects is a different
+ * component (`Matrix`, `DataGrid`).
+ */
+export const ROW_HEIGHT = 72;
 /**
  * The register's CONTENT gutter — zero, because the washed row bleeds instead.
  *

package/src/tabs.tsx

@@ -120,8 +120,20 @@ function TabButton<T extends string>(props: TabButtonProps<T>) {
     <PressableHighlight
       focusRing
       ref={ref}      style={{
+        // WHERE YOU ARE, painted in the INK THAT ACTS — `colors.primary`, which
+        // defaults to near-black. A tab rail is the only thing on a screen that
+        // answers "which section am I in", and a neutral grey underline would be
+        // indistinguishable from a divider, so it has to be a token.
+        //
+        // Not `accent`: on an unthemed screen the accent's blue would be the only
+        // blue anywhere — a single-member hue from a family used nowhere else,
+        // which is the definition of a library default nobody chose, and it sat
+        // three pixels from a near-black CTA and near-black checkboxes. `primary`
+        // is already the mark the kit spends on "this is on" (a checkbox's fill, a
+        // switch's track, a picked option's tick); an active tab is the same claim
+        // at page scale, so it reads as one product rather than two brands.
         borderBottomWidth: 3,
-        borderBottomColor: selected ? colors.zinc["700"] : "transparent",
+        borderBottomColor: selected ? colors.primary : "transparent",
         backgroundColor: "transparent",
         paddingBottom: 4,
       }}

package/src/text.css

@@ -1,8 +1,39 @@
 /*
- * Letter-spacing curve: positive at small sizes (improves legibility for
- * Vietnamese diacritics + Inter's `1`/`l`/`i` at 12px), neutral at body,
- * negative at display. The single biggest "designed" tell on web type —
- * Radix, Linear, Geist all use this curve.
+ * TWO CURVES, ONE CONTRACT — leading and tracking, shared with `.ui-markdown`
+ * and the multiline inputs (`INPUT_LINE_HEIGHT_DESKTOP`). Change any one of the
+ * three alone and the seam re-opens.
+ *
+ * LEADING: the body rungs carry PROSE leading — 14px/24px, ratio 1.71, exactly
+ * what `.ui-markdown` uses. They were 1.43, four pixels tighter per line than the
+ * same 14px text rendered as markdown, so a typed note and a rendered one sat at
+ * different rhythms on one surface and the typed one read cramped. The ladder
+ * tightens as it rises, which is the convention and what markdown already did:
+ * large type needs proportionally less leading, so the display rungs keep their
+ * near-1.2 ratios and only the rungs carrying running text move.
+ *
+ * The cost is real and deliberate: line-height sets the BOX height of even a
+ * single line, so every label, value and control gained ~4px of line box.
+ * Density is what was traded for the rhythm.
+ *
+ * TRACKING: NEGATIVE throughout, steepening as the type grows.
+ *
+ * The body rung is ANCHORED on -0.028em — the -0.4px this product already set on
+ * `.ui-markdown` and on six inputs, expressed as an em so it scales. That value
+ * is the product's own, arrived at by reading it in Vietnamese every day, and it
+ * is what the rest of the ramp is derived FROM rather than something imported
+ * from another design system. Inter is drawn generously at default tracking, so
+ * untracked body reads loose beside it.
+ *
+ * Larger type takes proportionally more negative tracking, which is why the curve
+ * steepens: what looks right at 14px looks slack at 32px.
+ *
+ * `xs` is the one rung held back (-0.02em, not the full body value). 12px is
+ * where Vietnamese stacked diacritics (ự, ộ, ế, ệ) and Inter's `1`/`l`/`i` come
+ * closest to colliding, and tightening is the direction that makes both worse.
+ *
+ * `.ui-markdown` and the inputs (`INPUT_LETTER_SPACING`) mirror the body rung
+ * exactly. All three are ONE contract on both axes — leading above, tracking here
+ * — and a value moved on one surface alone is the seam re-opening.
  *
  * Inter stylistic alternates: `cv11` (single-storey `a`), `ss01` (alternate
  * `1`), `ss03` (alternate `g`) — disambiguates similar glyphs without
@@ -14,58 +45,59 @@
 
 [data-text-size="xs"] {
   font-size: 12px;
-  line-height: 16px;
-  letter-spacing: 0.01em;
+  line-height: 18px;
+  letter-spacing: 0em;
 }
 [data-text-size="sm"] {
   font-size: 14px;
-  line-height: 20px;
-  letter-spacing: 0.0025em;
+  line-height: 24px;
+  letter-spacing: -0.006em;
 }
 [data-text-size="md"] {
   font-size: 16px;
-  line-height: 22px;
+  line-height: 26px;
+  letter-spacing: -0.011em;
 }
 [data-text-size="lg"] {
   font-size: 18px;
-  line-height: 24px;
-  letter-spacing: -0.005em;
+  line-height: 28px;
+  letter-spacing: -0.014em;
 }
 /* Display ramp — the heading ladder: xl = `##` (section), xxl = `#`
    (page/record title), xxxl = hero numbers. */
 [data-text-size="xl"] {
   font-size: 22px;
   line-height: 28px;
-  letter-spacing: -0.01em;
+  letter-spacing: -0.018em;
 }
 [data-text-size="xxl"] {
   font-size: 28px;
   line-height: 34px;
-  letter-spacing: -0.015em;
+  letter-spacing: -0.021em;
 }
 [data-text-size="xxxl"] {
   font-size: 32px;
   line-height: 38px;
-  letter-spacing: -0.02em;
+  letter-spacing: -0.022em;
 }
 
 /* Refer to `use_screen_size` for breakpoints */
 @media screen and (min-width: 768px) {
   [data-text-size="xs"] {
     font-size: 12px;
-    line-height: 16px;
+    line-height: 18px;
   }
   [data-text-size="sm"] {
     font-size: 14px;
-    line-height: 20px;
+    line-height: 24px;
   }
   [data-text-size="md"] {
     font-size: 16px;
-    line-height: 24px;
+    line-height: 26px;
   }
   [data-text-size="lg"] {
     font-size: 20px;
-    line-height: 28px;
+    line-height: 30px;
   }
   [data-text-size="xl"] {
     font-size: 24px;

package/src/text.tsx

@@ -1,7 +1,8 @@
 import "./text.css";
 import React from "react";
-import { Platform, Text as RNText, TextProps as RNTextProps, StyleSheet } from "react-native";
+import { Platform, Text as RNText, TextProps as RNTextProps, StyleSheet, type TextStyle } from "react-native";
 import { fontFamilyDisplay } from "./display_font";
+import { TYPE_RAMP_MOBILE, trackingPx, type TypeRungName } from "./type_ramp";
 import {
   fontFamilyMedium,
   fontFamilyRegular,
@@ -61,7 +62,11 @@ export interface TextProps {
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
-export type TextSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+/**
+ * The rungs of the ramp — the set is the ramp's own keys rather than a literal
+ * union repeated here, so a rung cannot exist in one and not the other.
+ */
+export type TextSize = TypeRungName;
 type TextAlign = "left" | "right" | "center";
 type TextDecorationLine = "underline" | "lineThrough" | "underline lineThrough";
 type TextWeight = "regular" | "medium" | "semibold";
@@ -116,8 +121,12 @@ export function Text(props: TextProps) {
       {...webProps}
       style={[
         { color: getTextColor(color) },
-        styles.text,
-        Platform.OS !== "web" && styles[size],
+        // Web takes size, leading AND tracking from `text.css` via the
+        // `data-text-size` attribute set above; native takes all three here. Nothing
+        // sets tracking for both — a flat value applied on both platforms used
+        // to, which on web was dead weight the cascade overrode and on native
+        // was the reason the curve never reached the mobile app.
+        Platform.OS !== "web" && sizeStyles[size],
         styles[weight],
         // AFTER the weight, because the weight ladder sets a family too — each
         // rung is a distinct Inter family, not a `font-weight` — so the display
@@ -153,43 +162,31 @@ const selectStyles = StyleSheet.create({
   none: { userSelect: "none" },
 });
 
-const styles = StyleSheet.create({
-  text: {
-    letterSpacing: -0.4,
-  },
-
-  // Text size styles
-  xs: {
-    fontSize: 12,
-    lineHeight: 20,
-  },
-  sm: {
-    fontSize: 14,
-    lineHeight: 24,
-  },
-  md: {
-    fontSize: 16,
-    lineHeight: 24,
-  },
-  lg: {
-    fontSize: 18,
-    lineHeight: 30,
-  },
-  // Display ramp — the heading ladder: xl = `##` (section), xxl = `#`
-  // (page/record title), xxxl = hero numbers.
-  xl: {
-    fontSize: 22,
-    lineHeight: 28,
-  },
-  xxl: {
-    fontSize: 28,
-    lineHeight: 34,
-  },
-  xxxl: {
-    fontSize: 32,
-    lineHeight: 38,
-  },
+/**
+ * The native ramp, DERIVED from `type_ramp.ts` rather than written out again.
+ * It was a second hand-maintained table and had drifted from the web one on the
+ * leading of three rungs and the tracking of all seven — the flat `-0.4` it
+ * applied at every size was the whole of native's tracking, so the curve simply
+ * did not exist there. Deriving it means there is no longer a second table to
+ * drift.
+ *
+ * Native takes the MOBILE rung because a phone is a phone; the web ramp grows
+ * its display sizes above 768px and native has no equivalent breakpoint.
+ */
+const sizeStyles = StyleSheet.create(
+  Object.fromEntries(
+    (Object.keys(TYPE_RAMP_MOBILE) as TypeRungName[]).map((rung) => [
+      rung,
+      {
+        fontSize: TYPE_RAMP_MOBILE[rung].size,
+        lineHeight: TYPE_RAMP_MOBILE[rung].leading,
+        letterSpacing: trackingPx(rung, TYPE_RAMP_MOBILE[rung].size),
+      },
+    ]),
+  ) as Record<TypeRungName, TextStyle>,
+);
 
+const styles = StyleSheet.create({
   // Text alignment styles
   left: {
     textAlign: "left",

package/src/text_input_field.tsx

@@ -13,7 +13,7 @@ import { Ref, useCallback, useState } from "react";
 import { Icon, IconName } from "./icon";
 import { IconButton } from "./icon_button";
 import { ShortcutBadge } from "./shortcut_badge";
-import { fontFamilyRegular, getInputTextStyle, getMultilineInputHeight } from "./text_utils";
+import { fontFamilyRegular, getInputTextStyle, getMultilineInputHeight, INPUT_LETTER_SPACING } from "./text_utils";
 import { useScreenSize } from "./use_screen_size";
 import { useAutoGrowHeight } from "./use_auto_grow_height";
 import { useFormField } from "./form_field";
@@ -250,7 +250,7 @@ const styles = StyleSheet.create({
     paddingVertical: INPUT_PADDING_Y,
     paddingHorizontal: 8,
     fontFamily: fontFamilyRegular,
-    letterSpacing: -0.4,
+    letterSpacing: INPUT_LETTER_SPACING,
   },
   // The HOST paints the surface AND owns the text inset. Height and vertical
   // padding stay (they hold the field's size); the horizontal padding goes,

package/src/text_utils.ts

@@ -1,6 +1,7 @@
 import { Platform, TextStyle } from "react-native";
 import { colors } from "./colors";
 import { multilineInputHeight } from "./input_metrics";
+import { TYPE_RAMP_DESKTOP, TYPE_RAMP_MOBILE } from "./type_ramp";
 
 export type TextColor =
   | "default"
@@ -51,10 +52,44 @@ export function getTextColor(color?: TextColor): string {
 // Re-exported here so every existing consumer keeps one import.
 export { fontFamilyRegular, fontFamilyMedium, fontFamilySemiBold } from "./font_family";
 
-/** Line height for mobile web (prevents Safari iOS auto-zoom) */
-export const INPUT_LINE_HEIGHT_MOBILE = 24;
-/** Line height for desktop web and native */
-export const INPUT_LINE_HEIGHT_DESKTOP = 20;
+/**
+ * Tracking for input text — the `sm` rung of Inter's curve (`TYPE_TRACKING.sm`,
+ * -0.006em) as px, because React Native's `letterSpacing` has no em unit.
+ *
+ * Six inputs each hard-coded their own value before this; there is one of it now,
+ * next to the line height, because they are the same contract — an input is
+ * running text and sits at the body rhythm on both axes.
+ *
+ * NOT derived, deliberately, unlike the line heights beside it. An input is 14px
+ * on desktop and 16px on mobile, so no single px value is the em at both sizes —
+ * computing one from a rung would pick a size and call the result exact. Written
+ * out, it stays honestly an approximation: right at 14px, a hair light at 16px.
+ * `type_ramp.test.ts` pins it to within a hundredth of the `sm` rung so it cannot
+ * drift away from the curve it belongs to; the exact form (an `em` string through
+ * RN's style types) is not portable.
+ */
+export const INPUT_LETTER_SPACING = -0.08;
+
+/**
+ * Line height for mobile web — the input is 16px there (to defeat iOS-Safari
+ * focus-zoom), so it takes the `md` rung's leading. DERIVED, because an input is
+ * running text and sits at the `Text` rhythm by definition rather than by
+ * coincidence.
+ *
+ * `--input-line-height` in `index.css` is a second copy of this that cannot be
+ * avoided — the variable is what actually RENDERS, this constant is what the
+ * auto-grow and compact-input math MEASURES with — so `type_ramp.test.ts` asserts
+ * the two agree. Disagreeing, they give a field a box computed for a rhythm it
+ * does not render.
+ */
+export const INPUT_LINE_HEIGHT_MOBILE = TYPE_RAMP_MOBILE.md.leading;
+/**
+ * Line height for desktop web and native — 14px text, so the `sm` rung: PROSE
+ * leading, the same 24px `Text` and `.ui-markdown` use. A note typed into a field
+ * and the same note rendered as markdown have to sit at one rhythm; at 20 the
+ * typed version was four pixels tighter per line.
+ */
+export const INPUT_LINE_HEIGHT_DESKTOP = TYPE_RAMP_DESKTOP.sm.leading;
 
 /**
  * Input text style for HTML elements on web using CSS variables.
@@ -99,8 +134,13 @@ export const inputTextStyleRN = inputTextStyleWeb as unknown as TextStyle;
  * Native doesn't have Safari iOS auto-zoom issue, so we use 14px.
  */
 const inputTextStyleNative: TextStyle = {
-  fontSize: 14,
-  lineHeight: 20,
+  fontSize: TYPE_RAMP_DESKTOP.sm.size,
+  lineHeight: INPUT_LINE_HEIGHT_DESKTOP,
+  // Native was the one input surface carrying NO tracking at all, so a value
+  // typed on a phone sat looser than the same value rendered as `Text` a row
+  // above it — the only place in the product where an input and a label
+  // disagreed on the axis rather than on the amount.
+  letterSpacing: INPUT_LETTER_SPACING,
   // Same ink as the web contract above — an input's text is body ink, not black.
   color: getTextColor(),
 };

package/src/theme.ts

@@ -0,0 +1,13 @@
+import { type LoticsTheme } from "./theme_vars";
+
+export { THEME_VARS, deriveAccentWash, type LoticsTheme } from "./theme_vars";
+
+/**
+ * The NATIVE half — a no-op, and honestly so.
+ *
+ * There are no CSS custom properties off the web, and `colors.ts` is a literal
+ * table rather than a set of `var()` reads, so there is nothing a theme could
+ * change. Accepting the call and doing nothing keeps ONE call site compiling on
+ * both platforms; pretending to theme would be worse than not offering it.
+ */
+export function applyLoticsTheme(_theme: LoticsTheme): void {}