@lotics/ui 41.1.0 → 41.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "41.1.0",
+  "version": "41.4.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -109,6 +109,7 @@
       "react-native": "./src/markdown.tsx",
       "default": "./src/markdown.web.tsx"
     },
+    "./markdown_types": "./src/markdown_types.ts",
     "./markdown.css": "./src/markdown.css",
     "./confidence": "./src/confidence.tsx",
     "./finding": "./src/finding.tsx",
@@ -194,6 +195,7 @@
     "./counter": "./src/counter.tsx",
     "./link": "./src/link.tsx",
     "./reference_field": "./src/reference_field.tsx",
+    "./text_disclosure": "./src/text_disclosure.tsx",
     "./text_link": "./src/text_link.tsx",
     "./sort_header": "./src/sort_header.tsx",
     "./skeleton": "./src/skeleton.tsx",

package/src/inline_text_input.tsx

@@ -25,8 +25,37 @@ export interface InlineTextInputProps {
    * a payment term, an address, a clause. Default 1 (the single-line field).
    * Above 1 the field is that many lines tall and wraps, in both states. Enter
    * then inserts a newline; the field commits on blur (or the ✓ in "buttons").
+   *
+   * With `autoGrow` this becomes the MINIMUM rather than the whole budget.
    */
   numberOfLines?: number;
+  /**
+   * Grow to fit the value instead of clipping it at `numberOfLines`.
+   *
+   * A fixed budget is right for a value with a KNOWN shape — a two-line address,
+   * a payment term — where reserving the space keeps the page still. It is wrong
+   * for open prose, and it fails in the worst way: the field renders a box the
+   * value does not fit, with no ellipsis, no scrollbar and no scroll, so the
+   * reader is given no evidence that anything is missing. Measured on a record
+   * note, 285 characters drew 76px of a 116px value — two lines gone, silently.
+   *
+   * Growing costs nothing this control was protecting: the field is ONE input in
+   * both states, so a grown box is the same height resting and editing, and
+   * nothing moves on focus. It grows as you type, which is the same promise the
+   * value's own wrapping already makes.
+   *
+   * Reach for it wherever the length is the AUTHOR's choice rather than the
+   * field's. Keep the fixed budget in the two cases it is still right:
+   *
+   * - **A value that can be arbitrarily long.** Growth has no ceiling — measured,
+   *   406 characters is already 238px — so a field that may hold a document wants
+   *   the reserve, and a length that overflows it is the signal that the value
+   *   belongs somewhere else.
+   * - **A GRID cell** (`variant="bare"` in a `DataGrid`). A cell that varies with
+   *   its data breaks the row rhythm the grid promises — see the register laws in
+   *   composition.md. Grow on a record surface, reserve in a table.
+   */
+  autoGrow?: boolean;
   accessibilityLabel?: string;
   /** Verbs on the field's surface — an `InlineButton` Copy on a reference a reader
    *  quotes elsewhere. See `InlineEditView.actions`: rendered in BOTH modes so the
@@ -46,8 +75,9 @@ export interface InlineTextInputProps {
  * implementation detail.
  */
 export function InlineTextInput(props: InlineTextInputProps) {
-  const { value, onSave, placeholder, controls = "blur", disabled, struck, accessibilityLabel , variant, actions, numberOfLines } = props;
-  const multiline = (numberOfLines ?? 1) > 1;
+  const { value, onSave, placeholder, controls = "blur", disabled, struck, accessibilityLabel , variant, actions, numberOfLines, autoGrow } = props;
+  // Growing implies wrapping: a field that grows on one line has nowhere to go.
+  const multiline = (numberOfLines ?? 1) > 1 || autoGrow === true;
   const edit = useInlineEdit<string>({ value, onSave });
 
   const onKeyPress = useCallback(
@@ -128,6 +158,7 @@ export function InlineTextInput(props: InlineTextInputProps) {
         onKeyPress={onKeyPress}
         multiline={multiline}
         numberOfLines={numberOfLines}
+        autoGrow={autoGrow}
         placeholder={placeholder}
         accessibilityLabel={accessibilityLabel}
         // `disabled`, NOT `editable`: TextInputField derives editability as

package/src/markdown.css

@@ -60,6 +60,49 @@
   margin: 0;
 }
 
+/*
+ * EMBEDDED — markdown that is a VALUE on someone else's page, not the page.
+ *
+ * The scale above is a document's: `h1` is 24/600, which is exactly a
+ * `SectionHeadingTitle`. That is right when the markdown IS the surface (a
+ * knowledge doc, a terms page) and wrong the moment it is a field on a record,
+ * because the author of the text is then not the author of the page — and
+ * increasingly is not a person at all. A model asked for a call summary writes
+ * `##` headings and liberal `**bold**`, and the page hands them a rung one step
+ * under its own section headings: measured on a real interaction log, a machine
+ * summary inside a feed row drew 18px/600 headings over 44 medium-weight runs,
+ * so the least-trustworthy content on the screen was also the loudest.
+ *
+ * Embedded, every heading collapses to ONE treatment at the body's own size,
+ * one weight step above `strong`. A heading is still legible as a heading —
+ * it owns its line and carries the space around it, which is SHAPE rather than
+ * scale — and it can no longer outrank the surface it was dropped into.
+ */
+.ui-markdown-embedded h1,
+.ui-markdown-embedded h2,
+.ui-markdown-embedded h3,
+.ui-markdown-embedded h4,
+.ui-markdown-embedded h5,
+.ui-markdown-embedded h6 {
+  font-family: Inter_600SemiBold, "apple-system", "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  padding-top: 8px;
+  padding-bottom: 2px;
+}
+
+/* A value never opens with a gap its container did not ask for. */
+.ui-markdown-embedded > :first-child {
+  padding-top: 0;
+}
+
+.ui-markdown-embedded > :last-child {
+  padding-bottom: 0;
+}
+
 /* Block elements */
 
 .ui-markdown p {

package/src/markdown.tsx

@@ -1,5 +1,6 @@
 import { View } from "react-native";
 import { Text } from "./text";
+import type { MarkdownProps } from "./markdown_types";
 
 /**
  * Native fallback. The rich renderer (`markdown.web.tsx`) is react-markdown over
@@ -7,11 +8,16 @@ import { Text } from "./text";
  * native, so this renders the source as plain text. Rich markdown shows on web
  * (custom-code apps + the frontend on web), which is where it's used; the web
  * variant is picked via the conditional `exports` in package.json.
+ *
+ * `variant` is accepted and ignored: plain text has one scale, so there is no
+ * heading to demote. The props type is NOT re-exported — import it from
+ * `@lotics/ui/markdown_types`, the same way `MediaPlayerProps` is reached.
  */
-export function Markdown({ children }: { children: string }) {
+export function Markdown({ children }: MarkdownProps) {
   return (
     <View>
       <Text size="sm">{children}</Text>
     </View>
   );
 }
+

package/src/markdown.web.tsx

@@ -5,12 +5,17 @@ import ReactMarkdown from "react-markdown";
 import { remarkGfmSafe } from "./remark_gfm_safe";
 import { Icon } from "./icon";
 import { colors } from "./colors";
+import type { MarkdownProps } from "./markdown_types";
 
-export function Markdown({ children }: { children: string }) {
+export function Markdown({ children, variant = "document" }: MarkdownProps) {
+  const embedded = variant === "embedded";
   return (
     <View>
-      <div className="ui-markdown">
-        <ReactMarkdown remarkPlugins={[remarkGfmSafe]} components={markdownComponents}>
+      <div className={embedded ? "ui-markdown ui-markdown-embedded" : "ui-markdown"}>
+        <ReactMarkdown
+          remarkPlugins={[remarkGfmSafe]}
+          components={embedded ? embeddedComponents : markdownComponents}
+        >
           {children}
         </ReactMarkdown>
       </div>
@@ -18,10 +23,61 @@ export function Markdown({ children }: { children: string }) {
   );
 }
 
+
 const markdownComponents = {
   table: CopyableTable,
 };
 
+/**
+ * EMBEDDED MARKDOWN IS DEMOTED IN THE OUTLINE, not only on the type ladder.
+ *
+ * Sizing the headings down fixes what a screen SHOWS and nothing about what it
+ * ANNOUNCES: an `h2` the author of the text happened to write is still an `h2`,
+ * so it lands in heading navigation as a PEER of the page's own sections.
+ * Measured on a record surface, the outline read
+ *
+ *   Activity · "Tóm tắt cuộc họp (AI) — …" · "Bài học …" · Details · Next action
+ *
+ * — a model's call-summary title sitting between two real sections, from inside
+ * one row of a feed that can hold twenty more. No visual probe finds this, and
+ * fixing the size is what makes it invisible: the defect stops looking wrong at
+ * the exact moment it stops being measurable.
+ *
+ * The page's sections are `h2` (`SectionHeading`), and embedded markdown is a
+ * VALUE inside one — inside a row, usually — so it starts at `h4`: deep enough
+ * that it can never be a section's peer, shallow enough to keep its own
+ * hierarchy. It stays a heading rather than becoming a `<div>`, because a long
+ * summary genuinely has parts and a reader navigating INSIDE it should still
+ * find them.
+ */
+const EMBEDDED_HEADING_LEVEL: Record<string, "h4" | "h5" | "h6"> = {
+  h1: "h4",
+  h2: "h5",
+  h3: "h6",
+  h4: "h6",
+  h5: "h6",
+  h6: "h6",
+};
+
+type HeadingProps = React.ComponentPropsWithoutRef<"h4"> & { node?: unknown };
+
+function embeddedHeading(from: keyof typeof EMBEDDED_HEADING_LEVEL) {
+  const Tag = EMBEDDED_HEADING_LEVEL[from];
+  return function EmbeddedHeading({ node: _node, children, ...rest }: HeadingProps) {
+    return <Tag {...rest}>{children}</Tag>;
+  };
+}
+
+const embeddedComponents = {
+  ...markdownComponents,
+  h1: embeddedHeading("h1"),
+  h2: embeddedHeading("h2"),
+  h3: embeddedHeading("h3"),
+  h4: embeddedHeading("h4"),
+  h5: embeddedHeading("h5"),
+  h6: embeddedHeading("h6"),
+};
+
 function CopyableTable(props: React.ComponentPropsWithoutRef<"table"> & { node?: unknown }) {
   const { node: _node, children, ...rest } = props;
   const tableRef = useRef<HTMLTableElement>(null);

package/src/markdown_types.ts

@@ -0,0 +1,21 @@
+export interface MarkdownProps {
+  children: string;
+  /**
+   * Whose type ladder the headings belong to.
+   *
+   * **`"document"` (default)** — the markdown IS the surface: a knowledge doc, a
+   * terms page, a rendered artifact. Its `h1` is the page's `h1`.
+   *
+   * **`"embedded"`** — the markdown is a VALUE on a page someone else designed:
+   * a field on a record, a summary in a feed row, a note in a drawer. Every
+   * heading collapses to the body's own size so it cannot outrank the section
+   * that contains it.
+   *
+   * **Reach for `"embedded"` whenever the text was not written by whoever built
+   * the screen** — and that is now the common case, because the writer is
+   * routinely a model. A model asked for a summary emits `##` headings and heavy
+   * `**bold**` with no idea what surrounds them, so document scale puts the
+   * least-trustworthy content on the screen at the loudest rung on it.
+   */
+  variant?: "document" | "embedded";
+}

package/src/member_chip.tsx

@@ -36,15 +36,25 @@ interface MemberChipProps {
  */
 export function MemberChip({ name, image, secondary, size = "md", style }: MemberChipProps) {
   const displayName = name?.trim() || "Unknown";
+  // THE TEXT FOLLOWS THE RUNG. `size` used to scale the avatar alone, so a chip
+  // asked for the dense rung got a 24px avatar beside a 14px name — half-dense,
+  // and the mismatch surfaces wherever the chip sits INSIDE a sentence: a 12px
+  // "Logged by" running straight into a 14px name reads as two type systems
+  // meeting mid-phrase, and their line boxes (16 against 20) then refuse to
+  // share a baseline under any `alignItems: "center"`.
+  //
+  // Only `sm` steps down, because only `sm` claims to be dense; every larger
+  // rung keeps the body size, where a person's name belongs.
+  const textSize = size === "sm" ? "xs" : "sm";
   return (
     <View style={[styles.row, style]}>
       <Avatar size={size} name={displayName} source={image ? { uri: image } : undefined} />
       <View style={styles.text}>
-        <Text userSelect="none" numberOfLines={1}>
+        <Text userSelect="none" size={textSize} numberOfLines={1}>
           {displayName}
         </Text>
         {secondary ? (
-          <Text userSelect="none" size="sm" color="zinc-500" numberOfLines={1}>
+          <Text userSelect="none" size={textSize} color="zinc-500" numberOfLines={1}>
             {secondary}
           </Text>
         ) : null}

package/src/text_disclosure.tsx

@@ -0,0 +1,70 @@
+import { Pressable } from "react-native";
+import { TextLink } from "./text_link";
+import type { TextSize } from "./text";
+
+export interface TextDisclosureProps {
+  /** Open state — controlled, because the content it reveals is the caller's. */
+  expanded: boolean;
+  onToggle: (expanded: boolean) => void;
+  /** What is behind it, as a noun: "transcript", "3 earlier replies". The verb
+   *  is supplied — a caller writing its own "Show …" ends up with two vocabularies
+   *  for one control the first time somebody writes "View". */
+  label: string;
+  /** Matches the prose it sits in. Default "sm". */
+  size?: TextSize;
+  /** Announced name, when `label` alone is ambiguous on a page with several. */
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+/**
+ * An in-prose DISCLOSURE: muted underlined text that reveals adjacent content in
+ * place — a transcript under its player, a long value under its summary.
+ *
+ * The counterpart to {@link TextLink}, and the pair is the point: underlined text
+ * either GOES somewhere or REVEALS something, and the INK says which.
+ *
+ *   blue + `role="link"` (`Link`)   → leaves this surface
+ *   muted underline (this)          → reveals more of it, right here
+ *
+ * Both answer "show me more"; only one takes the reader away, which is the single
+ * question the affordance exists to answer. Anything that MUTATES — saves, sends,
+ * deletes, opens an overlay — carries a control surface instead (`Button` in
+ * chrome, `InlineButton` on a field). See composition.md §"Commit & feedback surfaces".
+ *
+ * **Why this is a component rather than three lines at each call site.** It
+ * carries a contract, and every part of it is a thing a hand-roll gets wrong:
+ *
+ * - **`role="button"`, never `role="link"`.** The obvious reach is `Link`, which
+ *   announces a destination — so a screen-reader user is told they are leaving a
+ *   page that is about to unfold under them.
+ * - **Muted, never blue.** Blue is the promise of a trip. One caller passing the
+ *   navigation ink is all it takes for underline to stop meaning anything.
+ * - **Reveal only.** The exception to "underline navigates" is this narrow, and a
+ *   named component is what keeps it narrow — the next author reaching for quiet
+ *   text to hang a DELETE on finds a name that does not fit.
+ *
+ * **What it is not.** Not `Accordion`: that is a list-row disclosure with a header
+ * and a chevron, right for a run of expandable rows and heavy furniture for a verb
+ * inside one. Not `Button color="muted"`: measured, that is transparent,
+ * borderless and undecorated at rest, so its affordance arrives only on hover —
+ * invisible to keyboard and touch, and against a text column it reads as a label.
+ */
+export function TextDisclosure(props: TextDisclosureProps) {
+  const { expanded, onToggle, label, size = "sm", accessibilityLabel, testID } = props;
+  return (
+    <Pressable
+      onPress={() => onToggle(!expanded)}
+      accessibilityRole="button"
+      // The STATE, announced. Without it a screen reader hears the same words
+      // whichever way the disclosure is sitting.
+      aria-expanded={expanded}
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+    >
+      <TextLink size={size} color="muted">
+        {expanded ? `Hide ${label}` : `Show ${label}`}
+      </TextLink>
+    </Pressable>
+  );
+}

package/src/text_link.tsx

@@ -26,9 +26,19 @@ export interface TextLinkProps extends TextProps {
  * The act mode briefly became its own surface-less component and is now gone
  * entirely: it made underline mean two things separable only by ink, and it competed
  * with the `Button` colour ladder for the job `muted` already does. **Underlined text
- * is the NAVIGATION affordance; anything that acts carries a control surface** —
- * `Button` in chrome, `InlineButton` on a field. A quiet verb that cannot sit against
- * a text column belongs in chrome, not in a rung of its own.
+ * GOES somewhere or REVEALS something; anything that MUTATES carries a control
+ * surface** — `Button` in chrome, `InlineButton` on a field.
+ *
+ * The reveal half is the one narrow exception, and this component is how you build
+ * it: an in-prose DISCLOSURE (a transcript under its player, a long value under its
+ * summary) wrapped in your own `Pressable`, `color="muted"` so it never wears the
+ * navigation blue. It exists because the rule used to end "a quiet verb that cannot
+ * sit against a text column belongs in chrome" — and a disclosure cannot go to
+ * chrome, it belongs to the thing above it. The two controls that fit chrome both
+ * fail here: a `muted` Button is transparent and undecorated at rest (a hover-only
+ * affordance), and an `Accordion` is a list row nested inside a list row. The INK is
+ * what keeps underline unambiguous — blue leaves, muted stays. See composition.md
+ * §"Commit & feedback surfaces".
  */
 export function TextLink(props: TextLinkProps) {
   const { icon, href, children, color, style, ...textProps } = props;