@lotics/ui 44.5.0 → 44.7.0

package/AGENTS.md

@@ -75,6 +75,11 @@ CURRENT major only — upgrading an app across majors is `MIGRATION.md`.
   `DetailRow` — the three annotation slots carry the three urgency levels exactly. A binary
   `error={overdue ? … }` is the tell: it makes a date due tomorrow read like one due in three
   months. → [catalog.md §Dates & times](./docs/catalog.md).
+- **A third-party channel takes `BrandMark`, our own glyphs take `Icon`.** `@lotics/ui/brand_mark`
+  draws Facebook / Zalo / LinkedIn / Google Meet as solid single-colour silhouettes — a reader
+  scanning a feed recognises the logo before the word. The names are an allowlist, so a channel
+  with no mark (a phone call, an event, a website) fails to typecheck and falls back to `Icon`
+  instead of borrowing another company's logo. → [catalog.md §Text & formatting](./docs/catalog.md).
 - **The kit's fonts/colors/icons ARE the design system** — never a custom font, icon set, or
   hand-picked palette shade; color is `solid`/`tint`/`ramp` with ONE accent per screen.
 - **Hand-typed type is off-system — and it always lands too small.** Every run of language is
@@ -84,6 +89,12 @@ CURRENT major only — upgrading an app across majors is `MIGRATION.md`.
   the only way to get the letter-spacing curve and Inter's `cv11 ss01 ss03` alternates, the
   "designed" tells you cannot type by hand. **Grep the diff: `fontSize:` / `lineHeight:` /
   `letterSpacing:` outside `src/` is a bug.** → [composition.md §Typography](./docs/composition.md).
+- **A label is an `Eyebrow` or a `GroupLead`, and the difference is WHAT IT LABELS.** A value
+  gets `<Eyebrow>` (`xs` muted medium, dense surfaces, never uppercase); a BLOCK someone acts on
+  gets `<GroupLead>` (`sm` medium, page ink). Neither takes `size`/`weight`/`transform` — the
+  omitted props are the rule. Hand-writing the `Text` yourself is how an act-on-it title ends up
+  whispering at 12px, which is also where stacked diacritics crowd. →
+  [composition.md §Eyebrow vs group lead](./docs/composition.md).
 - **Pure primitives only** — no i18n, analytics, or domain types in `src/` (pass `labels`,
   callbacks); Lotics-coupled UI belongs in `@lotics/ui-internal`.
 - **A button never contains a control** — a row that presses open AND carries its own controls

package/docs/catalog.md

@@ -430,6 +430,22 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   numbers), `weight`, `color`, alignment, tabular numerals. **`leading="tight"`** sets the line
   box for a STACKED PAIR rather than for prose — a subject over its supporting line, a value over
   its annotation; see composition.md, which also covers the `gap` that goes with it.
+- **`eyebrow`** — `Eyebrow`: the small quiet label above or beside a VALUE (`xs` muted medium) —
+  a metric caption, a field name in a cell, an artifact tag. Takes `color` (for a VERDICT word
+  like "Mismatch") and `align`, and deliberately takes no `size`, `weight` or `transform`:
+  all-caps is banned and a bigger eyebrow is a different rung. Calibrated for DENSE surfaces.
+- **`group_lead`** — `GroupLead`: the label that titles a BLOCK (`sm` medium in the page's ink,
+  `size="md"` for a major sub-part) — "Delivery" over an address stack, "Next action" over the
+  paragraph someone acts on. No `weight`: semibold is the heading rung, so reach for
+  `SubsectionHeading` instead. Pick between this and `Eyebrow` by what is LABELLED — a block or a
+  value; composition.md § Eyebrow vs group lead has the table.
+- **`brand_mark`** — `BrandMark`: an OUTSIDE brand's mark, naming the channel a touchpoint
+  happened on — `facebook`, `zalo`, `linkedin`, `google-meet`. Solid single-colour silhouettes in
+  each brand's own hex, not the full-colour logos: a byline draws these at 14–20px and a
+  five-colour logo turns to mud there. `size` (default 16) and `muted` (draw in the text colour).
+  The name list is an ALLOWLIST — a channel with no mark will not typecheck, so the call site
+  falls back to a generic `Icon` rather than rendering the wrong company's logo. Not for the app's
+  own glyphs; that is `icon`.
 - **`markdown`** — `Markdown`: the single canonical markdown renderer for chat, apps, and
   `AgentRun`; rich GFM markdown on web with copyable tables, plain-text on
   native; takes a markdown `children` string. **`variant`** decides whose type

package/docs/composition.md

@@ -134,7 +134,12 @@ restyle a heading level per-page.
   hand-roll `Text weight="semibold"` group leads inside a section, and never promote a subsection
   to its own section-level heading just to separate it.
 - **Eyebrow vs group lead — a label is one or the other, and the difference is what it
-  LABELS.** Both are hand-written `Text`; picking by feel is how a title ends up whispering.
+  LABELS.** Each is a COMPONENT — `@lotics/ui/eyebrow` and `@lotics/ui/group_lead` — so the call
+  site DECLARES which one it is rather than re-deriving a rung from feel, which is how a title
+  ends up whispering. They were hand-written `Text` and this section told you to keep it that
+  way; a shipped app then labelled three act-on-it blocks at the eyebrow's `xs` muted, which is
+  the failure the prose could not prevent. Neither takes a `size`, `weight` or `transform`: the
+  props a component omits are the rule it enforces.
 
   | | Eyebrow | Group lead |
   |---|---|---|
@@ -148,14 +153,18 @@ restyle a heading level per-page.
   an afterthought: there are no siblings for it to be quiet among. A label that titles a block
   someone must ACT on is a group lead, and `sm medium` is its floor.
 
-- **Eyebrow** — `<Text size="xs" color="muted" weight="medium">`, **sentence case, NEVER
-  `transform="uppercase"`**: a small quiet label above or beside a VALUE — an artifact tag
-  ("Proposed", "Question", "Suggested edit"), a field name, a metric caption, a minor one-line
-  label. **All-caps is banned** — it reads as shouting, and reflexively uppercasing every little
-  label is the #1 thing that makes a surface feel templated. Sentence case + medium weight, full
-  stop. (A COLORED status word — a verdict like "Mismatch" / "Resolved" — keeps the same xs/medium
-  shape with a status `color`, still not uppercase.) This applies to every hand-written label;
-  don't reach for a wrapper component either — just write the `Text`.
+- **Eyebrow** — `<Eyebrow>` (`xs` muted medium), **sentence case, NEVER uppercase**: a small
+  quiet label above or beside a VALUE — an artifact tag ("Proposed", "Question", "Suggested
+  edit"), a field name, a metric caption, a minor one-line label. **All-caps is banned** — it
+  reads as shouting, and reflexively uppercasing every little label is the #1 thing that makes a
+  surface feel templated. There is no `transform` prop to reach for. (A COLORED status word — a
+  verdict like "Mismatch" / "Resolved" — keeps the rung and the weight and takes a status
+  `color`; colour here is what the word MEANS, never emphasis.)
+- **Group lead** — `<GroupLead>` (`sm` medium in the page's own ink, `size="md"` where the block
+  is a major sub-part). The label over a BLOCK: "Deciding factor" over the fact it names,
+  "Delivery" over an address stack, "Next action" over the paragraph someone acts on. No
+  `weight` prop — semibold is the heading rung, and a group lead reaching for it is a heading
+  wearing the wrong name. Reach for `SubsectionHeading` instead.
 - **Gate header** — a `Dialog` uses `DialogHeaderTitle`; a popover form uses
   `Text size="sm" weight="semibold"` + an optional xs muted subtitle.
 

package/docs/reviewing.md

@@ -236,6 +236,13 @@ A resting register is the cheapest thing to screenshot and the least likely to h
   (a feed, a thread) above a bounded one buries it, and the burial deepens with use.
 - **Press every control** and look at the state you land in. Commonest miss: a value rendering as
   a coloured chip in a register and as bare grey text in its own EDITOR.
+- **TAB through it, then diff what a keyboard reaches against what LOOKS pressable.** A pointer
+  finds anything with an `onPress`; a keyboard finds only what carries a role and a tab stop, and
+  the two lists come apart silently — the screen looks identical either way, and the author
+  testing with a mouse never learns. The reliable producer is styled text: underline, a hover
+  wash, a "verb" colour applied to a plain container, which reads as a control to the eye while
+  announcing as prose. Anything the eye calls a control and the tab order omits is unreachable,
+  not merely awkward. Count both lists; a difference is the finding.
 - **Diff a promoted field against where it came from.** Promoting means MOVING; a copy left behind
   gives one field two editors.
 - **Read every string in its SETTLED state**, not the streaming one.
@@ -473,6 +480,36 @@ receives `mouseenter`, because the pointer is already stationary over it — so
 dies at the moment of the swap and reads as a flash. Keep one node across the swap rather than
 restoring the state by hand.
 
+### Reachability — what the eye calls a control against what the tab order holds
+
+Two lists off one render. The first is what a keyboard can operate; the second is everything that
+LOOKS operable — styled text is the producer, so underline is the cheapest thing to sweep for.
+
+```js
+() => {
+  const root = document.querySelector('[role="dialog"]') ?? document.body;
+  const operable = [...root.querySelectorAll(
+    'a[href], button, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"]), input, select, textarea',
+  )];
+  const looksPressable = [...root.querySelectorAll("*")].filter((e) => {
+    if (e.children.length || !(e.textContent || "").trim()) return false;
+    const cs = getComputedStyle(e);
+    return cs.textDecorationLine.includes("underline") || cs.cursor === "pointer";
+  });
+  const unreachable = looksPressable.filter((e) => !e.closest(
+    'a[href], button, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])',
+  ));
+  return {
+    operable: operable.length,
+    unreachable: unreachable.map((e) => (e.textContent || "").trim().slice(0, 40)),
+  };
+}
+```
+
+`unreachable` must come back empty. A name in it is a control only a pointer can reach — and the
+count beside it is the other half of the reading: a whole pane offering two or three tab stops is
+usually not a minimal screen, it is a screen whose verbs are all prose.
+
 Driving the kit's own anatomies — a `PressDoor` row, a portalled overlay, a custom pointer drag —
 has three gotchas of its own: [testing.md](./testing.md).
 

package/examples/tpl_record.tsx

@@ -1,6 +1,8 @@
 import { Fragment, useEffect, useRef, useState, type ReactNode, useMemo } from "react";
 import { Pressable, ScrollView, View } from "react-native";
 import { Text } from "@lotics/ui/text";
+import { GroupLead } from "@lotics/ui/group_lead";
+import { BrandMark, type BrandName } from "@lotics/ui/brand_mark";
 import { colors, solid, withAlpha } from "@lotics/ui/colors";
 import { DRAWER_GUTTER } from "@lotics/ui/drawer";
 import { Button } from "@lotics/ui/button";
@@ -409,6 +411,14 @@ interface ActivityEntry {
   gist?: string;
   /** The medium as a person would say it, not an enum: "Zalo", "Google Meet". */
   over: string;
+  /**
+   * The channel's own mark, where the channel is an outside brand we can name.
+   * `kind` says WHAT happened and picks the fallback glyph; this says WHERE, and
+   * a reader scanning a feed recognises the logo before they read the word.
+   * Omit it for a phone call, an in-person event, a plain note — those have no
+   * brand, and the kind glyph is the honest mark for them.
+   */
+  brand?: BrandName;
   when: string;
   /** An unanswered outreach is a real state and reads differently from a reply. */
   awaiting?: boolean;
@@ -540,9 +550,25 @@ const ACTIVITY: ActivityEntry[] = [
     kind: "video",
     gist: "Demo — the reconciliation step is what sold it; pricing still open",
     over: "Google Meet",
+    brand: "google-meet",
     when: "Today, 10:15",
     media: { src: "/sample-video.webm", label: "Demo recording" },
     transcript: TRANSCRIPT,
+    // THE ENTRY THAT CARRIES EVERYTHING — a recording, its transcript, a machine
+    // reading of it, AND the files that changed hands. Four blocks, and the only
+    // thing keeping them one entry rather than a pile is that every file on the
+    // stack is drawn at the SAME size by the SAME component.
+    //
+    // `FileThumbnailGrid` has two sizing modes and the DEFAULT is not the small
+    // one: omit `itemSize` and it switches to FILL, deriving columns so the row
+    // spans the container — two files in a 500px column become two 250px tiles.
+    // Put that beside a sibling block at `THUMBNAIL_SIZE` (96) and the same file
+    // set reads as two unrelated things. Every file surface in this template and
+    // in chat passes `itemSize={THUMBNAIL_SIZE}` for exactly that reason.
+    files: [
+      { id: "q1", filename: "quote-2026-0418.pdf", mimeType: "application/pdf", url: "#" },
+      { id: "q2", filename: "rate-card.xlsx", mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", url: "#" },
+    ],
     // NO human note on this entry, deliberately. It carried "the person who
     // maintains it was not in the room" — which the summary's own Risk line says
     // better, and which the participants line was gesturing at too: one fact,
@@ -602,6 +628,7 @@ const ACTIVITY: ActivityEntry[] = [
     kind: "message",
     gist: "Asked in the forwarders' group who handles Japan customs paperwork",
     over: "Facebook Group",
+    brand: "facebook",
     when: "10 Aug, 21:30",
     files: [
       { id: "s1", filename: "post.png", mimeType: "image/png", url: img("Post", "#3f3f46") },
@@ -719,7 +746,11 @@ function ActivityEntryRow({
           backgroundColor: withAlpha(accent, 0.1),
         }}
       >
-        <Icon name={ACTIVITY_ICON[a.kind]} size={16} color={accent} />
+        {a.brand ? (
+          <BrandMark name={a.brand} size={16} />
+        ) : (
+          <Icon name={ACTIVITY_ICON[a.kind]} size={16} color={accent} />
+        )}
       </View>
 
       <View style={{ flex: 1, gap: 8 }}>
@@ -930,7 +961,7 @@ function ActivityEntryRow({
         // above. Provenance is weighted by consequence: name the source where it
         // is NOT on screen.
         <Inset>
-          <Text size="xs" color="muted" weight="medium">AI summary</Text>
+          <GroupLead>AI summary</GroupLead>
           <Markdown variant="embedded">{a.bodyByAi}</Markdown>
         </Inset>
       ) : null}
@@ -3173,18 +3204,35 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
                   shape every comment UI converges on: a metadata header, the prose
                   under it, the row's actions at the TOP RIGHT beside the text they
                   act on, and heavy artifacts behind their own disclosure. */}
-              <View style={{ gap: 20 }}>
-                {(showAllActivity ? activity : activity.slice(0, ACTIVITY_FOLD)).map((a) => (
-                  <ActivityEntryRow
-                    key={a.key}
-                    a={a}
-                    onEdit={(patch) =>
-                      setActivity((prev) =>
-                        prev.map((e) => (e.key === a.key ? { ...e, ...patch } : e)),
-                      )
-                    }
-                    onDelete={() => setActivity((prev) => prev.filter((e) => e.key !== a.key))}
-                  />
+              {/* SPACE AND A RULE, because an entry here is not a row.
+                  Between entries the beat is 32; INSIDE one the blocks sit at 8.
+                  Space alone was 20 against 8 — only 2.5x — and it was the same
+                  20 whether the neighbour was 110px or 756px, so the separation
+                  never scaled with the thing it separated. An entry carrying a
+                  recording, a transcript, a summary and its files runs close to a
+                  screenful, and past a screenful a gap reads as one more gap: the
+                  reader cannot tell "next touchpoint" from "next block of this
+                  one". That is the same LENGTH discriminator `SubsectionStack`
+                  takes `divided` for, and it is why the hairline is allowed here
+                  even though rules otherwise belong to the section altitude.
+                  Beating an 8px inner gap on space alone would need ~48, which
+                  then sets the one-line entries adrift. */}
+              <View style={{ gap: 32 }}>
+                {(showAllActivity ? activity : activity.slice(0, ACTIVITY_FOLD)).map((a, i, shown) => (
+                  <View key={a.key} style={{ gap: 32 }}>
+                    <ActivityEntryRow
+                      a={a}
+                      onEdit={(patch) =>
+                        setActivity((prev) =>
+                          prev.map((e) => (e.key === a.key ? { ...e, ...patch } : e)),
+                        )
+                      }
+                      onDelete={() => setActivity((prev) => prev.filter((e) => e.key !== a.key))}
+                    />
+                    {/* Not after the last: a trailing rule reads as the start of
+                        whatever comes next, and what comes next is the fold. */}
+                    {i < shown.length - 1 ? <Divider /> : null}
+                  </View>
                 ))}
               </View>
               {/* The tail FOLDS rather than paging. A record's feed is read

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "44.5.0",
+  "version": "44.7.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -103,6 +103,8 @@
     "./select": "./src/select.tsx",
     "./option_list": "./src/option_list.tsx",
     "./text": "./src/text.tsx",
+    "./eyebrow": "./src/eyebrow.tsx",
+    "./group_lead": "./src/group_lead.tsx",
     "./activity_indicator": "./src/activity_indicator.tsx",
     "./agent_run": "./src/agent_run.tsx",
     "./agent_progress": "./src/agent_progress.tsx",
@@ -130,6 +132,7 @@
     "./choice_list": "./src/choice_list.tsx",
     "./sources": "./src/sources.tsx",
     "./icon": "./src/icon.tsx",
+    "./brand_mark": "./src/brand_mark.tsx",
     "./dynamic_icon": {
       "react-native": "./src/dynamic_icon.tsx",
       "default": "./src/dynamic_icon.web.tsx"

package/src/brand_mark.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+
+/**
+ * The channels we can name. Anything NOT on this list has no brand mark and
+ * takes a generic `Icon` — a phone call, an in-person event, a website, an
+ * email that is not tied to one provider. Inventing a mark for those is how a
+ * byline ends up claiming a channel the record does not carry.
+ */
+export type BrandName = "facebook" | "zalo" | "linkedin" | "google-meet";
+
+interface Mark {
+  /** The brand's own colour. A mark drawn in anything else is not the mark. */
+  color: string;
+  path: string;
+}
+
+/**
+ * SOLID SINGLE-COLOUR MARKS, not the full-colour logos.
+ *
+ * A byline draws these at 14–20px, and a five-colour Gmail envelope or a
+ * four-colour Meet camera turns to mud at that size — the shape stops being
+ * recognisable, which is the entire job. One silhouette in the brand's colour
+ * survives the size and reads at a glance in a list.
+ *
+ * Path data is Simple Icons (CC0), so the geometry carries no licence of its
+ * own; the marks themselves stay the trademarks of their owners and are used
+ * here only to NAME the channel a touchpoint happened on.
+ */
+const MARKS: Record<BrandName, Mark> = {
+  facebook: {
+    color: "#0866FF",
+    path: "M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z",
+  },
+  zalo: {
+    color: "#0068FF",
+    path: "M12.49 10.2722v-.4496h1.3467v6.3218h-.7704a.576.576 0 01-.5763-.5729l-.0006.0005a3.273 3.273 0 01-1.9372.6321c-1.8138 0-3.2844-1.4697-3.2844-3.2823 0-1.8125 1.4706-3.2822 3.2844-3.2822a3.273 3.273 0 011.9372.6321l.0006.0005zM6.9188 7.7896v.205c0 .3823-.051.6944-.2995 1.0605l-.03.0343c-.0542.0615-.1815.206-.2421.2843L2.024 14.8h4.8948v.7682a.5764.5764 0 01-.5767.5761H0v-.3622c0-.4436.1102-.6414.2495-.8476L4.8582 9.23H.1922V7.7896h6.7266zm8.5513 8.3548a.4805.4805 0 01-.4803-.4798v-7.875h1.4416v8.3548H15.47zM20.6934 9.6C22.52 9.6 24 11.0807 24 12.9044c0 1.8252-1.4801 3.306-3.3066 3.306-1.8264 0-3.3066-1.4808-3.3066-3.306 0-1.8237 1.4802-3.3044 3.3066-3.3044zm-10.1412 5.253c1.0675 0 1.9324-.8645 1.9324-1.9312 0-1.065-.865-1.9295-1.9324-1.9295s-1.9324.8644-1.9324 1.9295c0 1.0667.865 1.9312 1.9324 1.9312zm10.1412-.0033c1.0737 0 1.945-.8707 1.945-1.9453 0-1.073-.8713-1.9436-1.945-1.9436-1.0753 0-1.945.8706-1.945 1.9436 0 1.0746.8697 1.9453 1.945 1.9453z",
+  },
+  linkedin: {
+    color: "#0A66C2",
+    path: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
+  },
+  "google-meet": {
+    color: "#00897B",
+    path: "M5.53 2.13 0 7.75h5.53zm.398 0v5.62h7.608v3.65l5.47-4.45c-.014-1.22.031-2.25-.025-3.46-.148-1.09-1.287-1.47-2.236-1.36zM23.1 4.32c-.802.295-1.358.995-2.047 1.49-2.506 2.05-4.982 4.12-7.468 6.19 3.025 2.59 6.04 5.18 9.065 7.76 1.218.671 1.428-.814 1.328-1.64v-13a.828.828 0 0 0-.877-.825zM.038 8.15v7.7h5.53v-7.7zm13.577 8.1H6.008v5.62c3.864-.006 7.737.011 11.58-.009 1.02-.07 1.618-1.12 1.468-2.07v-2.51l-5.47-4.68v3.65zm-13.577 0c.02 1.44-.041 2.88.033 4.31.162.948 1.158 1.43 2.047 1.31h3.464v-5.62z",
+  },
+};
+
+export interface BrandMarkProps {
+  name: BrandName;
+  /** Edge length in px. Defaults to 16 — the size that sits on a byline line. */
+  size?: number;
+  /**
+   * Draw in the current text colour instead of the brand's. For a surface where
+   * a run of coloured marks would compete with the content beside them.
+   */
+  muted?: boolean;
+  testID?: string;
+}
+
+/**
+ * A third-party channel's mark — the logo that says WHERE a touchpoint
+ * happened, at a glance, in a list of them.
+ *
+ * Not a general icon: `Icon` owns the curated glyph set and everything drawn in
+ * the app's own language. This is the narrow set of OUTSIDE brands we identify,
+ * and it is deliberately an allowlist — a name that is not in `MARKS` will not
+ * typecheck, so a channel with no mark falls back to a generic icon at the call
+ * site rather than silently rendering the wrong company's logo.
+ */
+export function BrandMark(props: BrandMarkProps) {
+  const { name, size = 16, muted, testID } = props;
+  const mark = MARKS[name];
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" testID={testID}>
+      <Path d={mark.path} fill={muted ? "currentColor" : mark.color} />
+    </Svg>
+  );
+}

package/src/clarify.tsx

@@ -1,5 +1,6 @@
 import { View } from "react-native";
 import { Text } from "./text";
+import { Eyebrow } from "./eyebrow";
 import { ChoiceList } from "./choice_list";
 
 export interface ClarifyOption {
@@ -44,9 +45,9 @@ export function Clarify(props: ClarifyProps) {
           text, which sits on the `ChoiceList` rows' 8px inset (CONTROL_RADIUS grid). */}
       <View style={{ gap: 4 }}>
         {props.eyebrow ? (
-          <Text size="xs" color="muted" weight="medium">
+          <Eyebrow>
             {props.eyebrow}
-          </Text>
+          </Eyebrow>
         ) : null}
         <Text size="sm" weight="medium">
           {props.question}

package/src/eyebrow.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Text } from "./text";
+import type { TextColor } from "./text_utils";
+
+export interface EyebrowProps {
+  children?: React.ReactNode;
+  /**
+   * A VERDICT carries its judgement in ink — "Mismatch" in danger, "Resolved" in
+   * success — and keeps the rung and the weight. Everything else stays muted:
+   * colour here is what the word MEANS, never emphasis.
+   */
+  color?: TextColor;
+  /** Alignment is layout, not rung — a right-aligned eyebrow is still an eyebrow. */
+  align?: "left" | "center" | "right";
+  numberOfLines?: number;
+  testID?: string;
+}
+
+/**
+ * A small quiet label above or beside a VALUE — a metric's caption, a field name
+ * in a cell, an artifact tag ("Proposed", "Question"). `xs` muted medium.
+ *
+ * Calibrated for DENSE surfaces, where a 12px label sits among dozens of
+ * siblings and quiet is the point. A label that titles a BLOCK is a
+ * `GroupLead` instead, and picking by feel is how a title ends up whispering —
+ * which is why these are two components rather than two ways of writing `Text`.
+ *
+ * There is no `transform` prop, and that is the enforcement: all-caps reads as
+ * shouting, and reflexively uppercasing every little label is the single thing
+ * that makes a surface feel templated. Sentence case, always.
+ *
+ * There is no `weight` or `size` either. A bigger or heavier eyebrow is a
+ * different rung with a different name.
+ */
+export function Eyebrow(props: EyebrowProps) {
+  const { children, color = "muted", align, numberOfLines, testID } = props;
+  return (
+    <Text size="xs" color={color} weight="medium" align={align} numberOfLines={numberOfLines} testID={testID}>
+      {children}
+    </Text>
+  );
+}

package/src/funnel.tsx

@@ -2,6 +2,7 @@ import { type ReactNode } from "react";
 import { View, StyleSheet } from "react-native";
 import { colors } from "./colors";
 import { Text } from "./text";
+import { Eyebrow } from "./eyebrow";
 import { PressableHighlight } from "./pressable_highlight";
 
 export interface FunnelStage {
@@ -104,9 +105,9 @@ export function Funnel(props: FunnelProps) {
   };
 
   const titleNode = title ? (
-    <Text size="xs" color="muted" weight="medium">
+    <Eyebrow>
       {title}
-    </Text>
+    </Eyebrow>
   ) : null;
 
   if (orientation === "vertical") {

package/src/group_lead.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Text } from "./text";
+
+export interface GroupLeadProps {
+  children?: React.ReactNode;
+  /**
+   * `sm` (the floor) or `md` where the block is a major sub-part. Nothing
+   * larger: past `md` the label stops titling a group and starts competing with
+   * the section heading above it.
+   */
+  size?: "sm" | "md";
+  numberOfLines?: number;
+  testID?: string;
+}
+
+/**
+ * The label that titles a BLOCK — a titled sub-part of a section. "Deciding
+ * factor" over the fact it names, "Delivery" over an address stack, "Next
+ * action" over the paragraph someone has to act on. `sm`–`md` medium, in the
+ * page's own ink.
+ *
+ * NOT an `Eyebrow`: that rung labels a VALUE and is calibrated for dense
+ * surfaces where quiet is the point. A block someone must act on has no
+ * siblings to be quiet among, so `xs` muted reads as an afterthought — and at
+ * 12px stacked diacritics crowd, which makes it worse in Vietnamese than the
+ * English it was measured in.
+ *
+ * There is no `weight` prop. Semibold is the heading rung; a group lead that
+ * reaches for it is a heading wearing the wrong name, and the fix is a real
+ * `SubsectionHeading` rather than a bolder label.
+ */
+export function GroupLead(props: GroupLeadProps) {
+  const { children, size = "sm", numberOfLines, testID } = props;
+  return (
+    <Text size={size} weight="medium" numberOfLines={numberOfLines} testID={testID}>
+      {children}
+    </Text>
+  );
+}

package/src/kpi_card.tsx

@@ -1,5 +1,6 @@
 import { View, StyleSheet, type ViewStyle, type StyleProp } from "react-native";
 import { Text } from "./text";
+import { Eyebrow } from "./eyebrow";
 import { Metric, type MetricFormat, type MetricSize, type MetricTone } from "./metric";
 import { TrendChip } from "./trend_chip";
 import { InfoPopover } from "./info_popover";
@@ -57,9 +58,9 @@ export function KPICard(props: KPICardProps) {
   return (
     <View style={[styles.container, style]}>
       <View style={styles.labelRow}>
-        <Text size="xs" color="muted" weight="medium">
+        <Eyebrow>
           {label}
-        </Text>
+        </Eyebrow>
         {info ? <InfoPopover text={info} accessibilityLabel={pack.infoPopover.about(label)} /> : null}
       </View>
       <View style={styles.valueRow}>

package/src/locale.tsx

@@ -83,6 +83,12 @@ export interface LoticsLocale {
    *  a phase's rows. The kit owns the wording so one app does not say "Show" while
    *  the next says "Expand" for the same gesture. */
   checklist: { expand: string; collapse: string };
+  /** `TextDisclosure` supplies the VERB so one app cannot say "Show" where the
+   *  next says "View" for the same gesture — the same reason `checklist` above
+   *  owns its pair. It takes the revealed thing as a noun and builds the phrase,
+   *  because word order is not shared: English puts the verb first, and a
+   *  language that does not would otherwise be stuck with a prefix. */
+  textDisclosure: { show: (label: string) => string; hide: (label: string) => string };
   sectionHeading: { info: string };
   /** `ErrorState`'s retry button. The kit owns the wording so "try again" is
    *  phrased identically everywhere instead of hand-written per app. */
@@ -288,6 +294,7 @@ export const en: LoticsLocale = {
   ledger: { rowDetails: (label) => `${label} details` },
   stepper: { complete: "Complete step", progress: "Progress" },
   checklist: { expand: "Show", collapse: "Hide" },
+  textDisclosure: { show: (label) => `Show ${label}`, hide: (label) => `Hide ${label}` },
   sectionHeading: { info: "About this data" },
   errorState: { retry: "Try again" },
   chip: { remove: "Remove" },
@@ -466,6 +473,7 @@ export const vi: LoticsLocale = {
   ledger: { rowDetails: (label) => `Chi tiết ${label}` },
   stepper: { complete: "Hoàn thành bước", progress: "Tiến trình" },
   checklist: { expand: "Mở", collapse: "Thu gọn" },
+  textDisclosure: { show: (label) => `Xem ${label}`, hide: (label) => `Ẩn ${label}` },
   sectionHeading: { info: "Giải thích dữ liệu" },
   errorState: { retry: "Thử lại" },
   chip: { remove: "Xóa" },

package/src/progress_bar.tsx

@@ -1,5 +1,6 @@
 import { View, StyleSheet, type ViewStyle } from "react-native";
 import { Text } from "./text";
+import { Eyebrow } from "./eyebrow";
 import { colors } from "./colors";
 import { useLocaleTag } from "./locale";
 
@@ -112,9 +113,9 @@ export function ProgressBar(props: ProgressBarProps) {
       {title || caption ? (
         <View style={styles.header}>
           {title ? (
-            <Text size="xs" color="muted" weight="medium">
+            <Eyebrow>
               {title}
-            </Text>
+            </Eyebrow>
           ) : null}
           <View style={styles.spacer} />
           {caption ? (

package/src/record_summary.tsx

@@ -1,6 +1,7 @@
 import { type ReactNode } from "react";
 import { StyleSheet, View } from "react-native";
 import { Text } from "./text";
+import { Eyebrow } from "./eyebrow";
 
 export interface RecordSummaryMetric {
   /** Caption above the number ("Outstanding", "Total value"). */
@@ -75,9 +76,9 @@ export function RecordSummary(props: RecordSummaryProps) {
         </View>
         {metric ? (
           <View style={styles.metric}>
-            <Text size="xs" color="muted" weight="medium" align="right">
+            <Eyebrow align="right">
               {metric.label}
-            </Text>
+            </Eyebrow>
             {typeof metric.value === "string" ? (
               <Text size="lg" weight="semibold" tabular align="right" color={metric.tone === "default" ? undefined : metric.tone}>
                 {metric.value}

package/src/sources.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet, View } from "react-native";
 import { colors, solid, tint, type ColorName } from "./colors";
 import { Text } from "./text";
+import { Eyebrow } from "./eyebrow";
 import { Icon, type IconName } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
 import { useLoticsLocale } from "./locale";
@@ -49,9 +50,9 @@ export function Sources(props: SourcesProps) {
   return (
     <View style={{ gap: 8 }}>
       {props.label === null ? null : (
-        <Text size="xs" color="muted" weight="medium">
+        <Eyebrow>
           {props.label ?? locale.sources.heading}
-        </Text>
+        </Eyebrow>
       )}
       <View style={styles.row}>
         {props.sources.map((s) =>

package/src/stacked_progress_bar.tsx

@@ -1,6 +1,7 @@
 import { View, StyleSheet } from "react-native";
 import { colors } from "./colors";
 import { Text } from "./text";
+import { Eyebrow } from "./eyebrow";
 
 interface Segment {
   /** Identifier for the segment — used as a React key. */
@@ -61,9 +62,9 @@ export function StackedProgressBar(props: StackedProgressBarProps) {
     <View style={styles.container}>
       <View style={styles.header}>
         {title ? (
-          <Text size="xs" color="muted" weight="medium">
+          <Eyebrow>
             {title}
-          </Text>
+          </Eyebrow>
         ) : null}
         <View style={styles.spacer} />
         {caption ? (

package/src/step_progress.tsx

@@ -1,6 +1,7 @@
 import { View, type ViewStyle } from "react-native";
 import { colors } from "./colors";
 import { Text } from "./text";
+import { Eyebrow } from "./eyebrow";
 import { useTooltip } from "./tooltip";
 
 export interface StepProgressProps {
@@ -97,9 +98,9 @@ export function StepProgress(props: StepProgressProps) {
     return (
       <View style={{ gap: 6, flex: 1 }}>
         <View style={{ flexDirection: "row", alignItems: "baseline", gap: 12 }}>
-          <Text size="xs" color="muted" weight="medium">
+          <Eyebrow>
             {title}
-          </Text>
+          </Eyebrow>
           <View style={{ flex: 1 }} />
           {caption ? (
             <Text size="xs" color={captionColor} weight={captionTone === "danger" ? "medium" : "regular"} tabular>

package/src/text_disclosure.tsx

@@ -1,5 +1,6 @@
 import { Pressable } from "react-native";
 import { TextLink } from "./text_link";
+import { useLoticsLocale } from "./locale";
 import type { TextSize } from "./text";
 
 export interface TextDisclosureProps {
@@ -52,6 +53,7 @@ export interface TextDisclosureProps {
  */
 export function TextDisclosure(props: TextDisclosureProps) {
   const { expanded, onToggle, label, size = "sm", accessibilityLabel, testID } = props;
+  const locale = useLoticsLocale();
   return (
     <Pressable
       onPress={() => onToggle(!expanded)}
@@ -63,7 +65,7 @@ export function TextDisclosure(props: TextDisclosureProps) {
       testID={testID}
     >
       <TextLink size={size} color="muted">
-        {expanded ? `Hide ${label}` : `Show ${label}`}
+        {expanded ? locale.textDisclosure.hide(label) : locale.textDisclosure.show(label)}
       </TextLink>
     </Pressable>
   );

package/src/text_input_field.tsx

@@ -9,7 +9,7 @@ import { colors } from "./colors";
 import { CONTROL_RADIUS, FOCUS_RING, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
 import { useFocusRing, composeHandler } from "./use_focus_ring";
 import { useHover } from "./use_hover";
-import { Ref, useCallback, useState } from "react";
+import { Ref, useCallback, useEffect, useState } from "react";
 import { Icon, IconName } from "./icon";
 import { IconButton } from "./icon_button";
 import { ShortcutBadge } from "./shortcut_badge";
@@ -111,13 +111,27 @@ export function TextInputField(props: TextInputFieldProps) {
     minLines: numberOfLines ?? 1,
   });
 
+  // A VALUE THAT ARRIVES FROM OUTSIDE HAS TO BE MEASURED TOO. `measure` runs on
+  // `onChangeText`, which only fires for what the USER types — so a field whose
+  // value is replaced by a refetch, a workflow, an agent or a form reset kept
+  // the height it was measured at, and any extra lines fell outside the box.
+  // Typing one character into it snapped it to the right height, which is the
+  // tell: the measurement was never wrong, it was never taken.
+  useEffect(() => {
+    if (autoGrow) autoGrowResult.measure();
+  }, [value, autoGrow, autoGrowResult.measure]);
+
   // `containerHeight` is the CONTENT's height, and the box is `border-box`, so
   // growing to fit it means adding the padding AND the border. Adding only the
-  // padding left an auto-grown field 2px short of its own text — with
-  // `overflow: hidden` on the non-scrolling path, the last line was silently
-  // clipped by exactly the border. The same trap `CONTROL_TEXT_INSET` documents
-  // on the horizontal axis: read the padding, forget the border, land 1px per
-  // side wrong.
+  // padding leaves an auto-grown field 2px short of its own text. The same trap
+  // `CONTROL_TEXT_INSET` documents on the horizontal axis: read the padding,
+  // forget the border, land 1px per side wrong.
+  //
+  // The box does NOT hide its overflow. It used to on the non-scrolling path,
+  // which meant every way the height could come out wrong ate text with no
+  // scrollbar to say so — the failure was invisible in exactly the case that
+  // matters, a long value. A correct height overflows by nothing, so hiding it
+  // buys nothing and can only conceal the next measurement bug.
   const height = autoGrow
     ? Math.max(minHeight ?? 40, autoGrowResult.containerHeight + INPUT_PADDING_Y * 2 + INPUT_BORDER_WIDTH * 2)
     : minHeight;
@@ -184,7 +198,6 @@ export function TextInputField(props: TextInputFieldProps) {
           CONTROL_TRANSITION,
           getInputTextStyle(),
           height ? { height } : undefined,
-          autoGrow && !autoGrowResult.scrollEnabled && { overflow: "hidden" as const },
           !editable && styles.disabled,
           icon && styles.withIcon,
           showClear && styles.withClear,

package/src/use_auto_grow_height.ts

@@ -45,6 +45,7 @@ export function useAutoGrowHeight(options: UseAutoGrowHeightOptions = {}): UseAu
   const maxHeight = maxLines ? maxLines * lineHeight : undefined;
   const [containerHeight, setContainerHeight] = useState(minHeight);
   const elementRef = useRef<HTMLTextAreaElement | null>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
 
   const clamp = useCallback(
     (height: number) => {
@@ -58,10 +59,27 @@ export function useAutoGrowHeight(options: UseAutoGrowHeightOptions = {}): UseAu
     (node: TextInput | null) => {
       if (Platform.OS !== "web") return;
       const el = node as unknown as HTMLTextAreaElement | null;
+      observerRef.current?.disconnect();
+      observerRef.current = null;
       elementRef.current = el;
       if (!el) return;
       const measured = measureScrollHeight(el);
       if (measured !== null) setContainerHeight(clamp(measured));
+
+      // HOW MANY LINES THE VALUE TAKES IS A FUNCTION OF THE WIDTH, so the height
+      // measured at mount is only right until the box changes width — a drawer
+      // opening, a pane resizing, a column re-flowing, the window itself. Mount
+      // is also the WORST moment to measure: a field inside a flex row is often
+      // laid out wider than its final width for a frame, which measures fewer
+      // lines than the value really takes and leaves the box short of its own
+      // text. Without this the first correct width never reaches the hook.
+      if (typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(() => {
+        const next = measureScrollHeight(el);
+        if (next !== null) setContainerHeight(clamp(next));
+      });
+      observer.observe(el);
+      observerRef.current = observer;
     },
     [clamp],
   );