@lotics/ui 46.2.0 → 46.8.0

package/src/overlay_layer.ts

@@ -0,0 +1,65 @@
+/**
+ * THE PAINT ORDER OF EVERYTHING THE KIT PUTS AT THE TOP OF THE DOCUMENT.
+ *
+ * Every overlay in the kit (`Dialog`, `Drawer`, `Modal`, `FileGalleryModal`) is
+ * a react-native `Modal`, and on web that mounts a bare `<div>` on
+ * `document.body`, at the END of it, and removes it again when it unmounts. The
+ * layer inside sits at one fixed z-index, the same one for every overlay, so two
+ * open overlays tie and the tie is broken by DOM order.
+ *
+ * So the rule is one line of composition, not a mechanism: **the react-native
+ * `Modal` element is rendered only while the overlay is OPEN**. Its body-level
+ * div is then appended when it opens and removed when it closes, DOM order is
+ * open order, and paint order follows for free — a drawer opened from a dialog
+ * covers the dialog, a dialog opened from a drawer covers the drawer, and
+ * neither composition has to be picked in advance.
+ *
+ * Mounting the `Modal` while CLOSED is what breaks this, and it breaks it
+ * silently: `ModalPortal` appends its div on FIRST RENDER and never re-orders
+ * it, so an always-mounted dialog claims its slot on the app's first paint and a
+ * drawer opened later lands after it and covers it. The dialog then renders
+ * perfectly — centred, readable, correctly announced — and every control of it
+ * under the drawer panel is dead, because `elementFromPoint` there answers the
+ * drawer. Nothing is lost by not mounting it: react-native-web renders a closed
+ * `Modal`'s children as `null` anyway, so the subtree is already unmounted; only
+ * the empty portal div was being held.
+ *
+ * The rungs BESIDE the overlays are what needs naming, and they are a PUBLISHED
+ * CONTRACT — anything outside the kit that must clear a Lotics overlay reads one
+ * from here rather than picking a literal:
+ *
+ *   9999    every overlay, and `Popover`                (`OVERLAY_Z`)
+ *   10000   `Tooltip`, `Alert`                          (`OVERLAY_Z_ABOVE`)
+ *   10001   a transient notification / toast            (`NOTIFICATION_Z`)
+ *   10002   the skip link                               (`SKIP_LINK_Z`)
+ */
+
+/**
+ * Where every overlay sits — react-native-web's own number for a `Modal`, and
+ * the one `Popover` writes into its panel.
+ *
+ * They all share it on purpose. A popover is not an RN `Modal`: it portals into
+ * the nearest `PortalHost`, so a popover opened INSIDE an overlay is already
+ * inside that overlay's stacking context, and a page-level one is a child of the
+ * app root — which every modal's body-level div follows. One number plus DOM
+ * order therefore says the same thing for a popover as for a modal: whatever was
+ * opened last is on top.
+ */
+export const OVERLAY_Z = 9999;
+
+/**
+ * ABOVE EVERY OVERLAY — a tooltip and an alert are ABOUT the surface under them,
+ * so neither can ever be covered by it.
+ */
+export const OVERLAY_Z_ABOVE = OVERLAY_Z + 1;
+
+/**
+ * A transient notification (a toast) reporting the outcome of an action — over
+ * the alert on the rung below, because the action that raised it is often the
+ * one that alert confirmed, and a report nobody can read is not a report.
+ */
+export const NOTIFICATION_Z = OVERLAY_Z_ABOVE + 1;
+
+/** The skip link outranks everything: it is the first thing a keyboard reaches.
+ *  It shared a rung with the toast until this table gave each one a name. */
+export const SKIP_LINK_Z = NOTIFICATION_Z + 1;

package/src/page_content.tsx

@@ -1,7 +1,6 @@
 import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
 import { colors } from "@lotics/ui/colors";
-import { Spacer } from "@lotics/ui/spacer";
+import { PageHeader } from "@lotics/ui/page_header";
 import { ReactNode } from "react";
 import { useContainerSize } from "@lotics/ui/size_boundary";
 import { pagePad } from "@lotics/ui/spacing";
@@ -81,27 +80,14 @@ export function PageContent(props: PageContentProps) {
             paddingHorizontal: pad,
           }}
         >
-          <View
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "space-between",
-            }}
-          >
-            {!!title && (
-              <Text size="xxl" weight="semibold">
-                {title}
-              </Text>
-            )}
-            {titleRight && <View>{titleRight}</View>}
-          </View>
-          {!!description && (
-            <>
-              {title && <Spacer size={8} />}
-              <Text color="zinc-500">{description}</Text>
-            </>
+          {/* The title band IS a `PageHeader` — the same optional xxl title, the
+              same right-hand slot, the same zinc-500 description, so it is that
+              component and not a second copy of it. Written out here it drifted
+              immediately: two spellings of one row law and two rhythms around
+              it, with `titleRight` and `actions` naming the same slot. */}
+          {(!!title || !!description || !!titleRight) && (
+            <PageHeader title={title} description={description} actions={titleRight} />
           )}
-          {(title || description) && <Spacer size={24} />}
           <View style={{ flex: 1 }}>{children}</View>
         </View>
       </ScrollView>

package/src/page_header.tsx

@@ -1,9 +1,12 @@
 import { View } from "react-native";
 import { Text } from "@lotics/ui/text";
+import { Spacer } from "@lotics/ui/spacer";
 import { ReactNode } from "react";
 
 interface PageHeaderProps {
-  title: string;
+  /** The page's name. Optional only so the SHELL can delegate to this component
+   *  for a band that is description-only; a page header normally has one. */
+  title?: string;
   description?: string | null;
   /** The nav row ABOVE the title — breadcrumbs, a back control, row-level status. */
   left?: ReactNode;
@@ -60,7 +63,6 @@ export function PageHeader(props: PageHeaderProps) {
       style={{
         flexDirection: "row",
         alignItems: "center",
-        justifyContent: "space-between",
         flexWrap: "wrap",
         gap: 12,
       }}
@@ -74,9 +76,11 @@ export function PageHeader(props: PageHeaderProps) {
           minWidth: 0,
         }}
       >
-        <Text size="xxl" weight="semibold" style={{ flexShrink: 1, minWidth: 0 }}>
-          {title}
-        </Text>
+        {!!title && (
+          <Text size="xxl" weight="semibold" style={{ flexShrink: 1, minWidth: 0 }}>
+            {title}
+          </Text>
+        )}
         {/* Never shrinks: the title is what gives way, and a control squeezed
             below its own icon is not a smaller control, it is a broken one. */}
         {trailing !== undefined && <View style={{ flexShrink: 0 }}>{trailing}</View>}
@@ -84,8 +88,14 @@ export function PageHeader(props: PageHeaderProps) {
       {/* Wrapped so which side gives way is STATED rather than left to whatever
           the caller happened to pass. A bare `{actions}` inherited its own
           shrink behaviour, so the row's bargain held or broke depending on the
-          CTA — and a bargain that depends on the other party is not one. */}
-      {actions !== undefined && <View style={{ flexShrink: 0 }}>{actions}</View>}
+          CTA — and a bargain that depends on the other party is not one.
+          `marginLeft: auto` rather than the row's `justifyContent`, because
+          justification is applied PER LINE: once the row wraps, the second line
+          holds only the actions and `space-between` packs that one item at the
+          START, dropping the CTA to the left edge under the title on exactly the
+          narrow frame the wrap exists for. An auto margin right-aligns it on the
+          shared line and on a line of its own alike. */}
+      {actions !== undefined && <View style={{ flexShrink: 0, marginLeft: "auto" }}>{actions}</View>}
     </View>
   );
 
@@ -93,9 +103,45 @@ export function PageHeader(props: PageHeaderProps) {
     <View style={{ paddingBottom: 16 }}>
       {hasNav ? (
         <>
-          <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", height: 64, paddingBottom: 16 }}>
-            {left}
-            {right}
+          {/* The SAME three facts as the title row, for the same reason — this
+              row is a pair of intrinsically-sized children too, and a
+              breadcrumb trail is exactly the kind of thing that outgrows a
+              narrow frame. `minHeight` rather than `height`: a fixed height
+              cannot absorb a wrap, so the row that most needs to grow was the
+              one forbidden to. */}
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              flexWrap: "wrap",
+              gap: 12,
+              minHeight: 64,
+              paddingBottom: 16,
+            }}
+          >
+            {/* `flexDirection: "row"` is not decoration: these wrappers RE-PARENT
+                what used to be a direct child of the row, and a react-native
+                `View` defaults to `column`. Both props are documented as taking
+                a nav row's worth of content — "breadcrumbs, a back control,
+                row-level status" — so a fragment of several nodes is the shape
+                they invite, and without the axis restated it lays out
+                top-to-bottom. A wrapper added to state a shrink rule must not
+                also silently state a direction. */}
+            <View style={{ flexDirection: "row", alignItems: "center", flexShrink: 1, minWidth: 0 }}>
+              {left}
+            </View>
+            {right !== undefined && (
+              <View
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  flexShrink: 0,
+                  marginLeft: "auto",
+                }}
+              >
+                {right}
+              </View>
+            )}
           </View>
           {titleRow}
         </>
@@ -103,7 +149,10 @@ export function PageHeader(props: PageHeaderProps) {
         titleRow
       )}
       {!!description && (
-        <Text color="zinc-500">{description}</Text>
+        <>
+          {!!title && <Spacer size={8} />}
+          <Text color="zinc-500">{description}</Text>
+        </>
       )}
     </View>
   );

package/src/popover.tsx

@@ -23,6 +23,8 @@ import {
 } from "./popover_layers";
 import { PopoverNavContext, type PopoverNavContextValue } from "./popover_nav";
 import { useLoticsLocale } from "./locale";
+import { OVERLAY_Z } from "./overlay_layer";
+import { useScrollSeam } from "./use_scroll_seam";
 import { HeadingAltitudeContext } from "./heading_altitude";
 
 export type PopoverSide = "top" | "right" | "bottom" | "left";
@@ -269,6 +271,22 @@ export function PopoverContent(props: PopoverContentProps) {
   // inside it must not dismiss this popover. See popover_layers.ts.
   const modalsAtOpenRef = useRef<ReadonlySet<Element> | null>(null);
 
+  // THE SEAM EVERY SCROLLER THAT SWAPS ITS BODY IN PLACE TAKES.
+  //
+  // A routed popover is one: `PopoverScreen` renders `null` for every route but
+  // the active one, and the screens are children of THIS scroller — so
+  // navigating from a long root list to a sub-screen leaves the container at the
+  // list's offset and opens the sub-screen part-way down itself, its
+  // `PopoverNavHeader` and back chevron scrolled off the top. Same failure as a
+  // master-detail drawer's, in the kit's own navigation primitive.
+  //
+  // The route IS the content's identity, so it is read here rather than asked
+  // for: a popover with no sub-screens sits on the root route forever, its key
+  // never changes, and the seam is inert — which is exactly the opt-out
+  // `use_scroll_seam` defines.
+  const currentRoute = useContext(PopoverNavContext)?.currentRoute;
+  const bodySeam = useScrollSeam(currentRoute);
+
   const handleClose = useCallback(() => {
     if (!open) return;
     onOpenChange(false);
@@ -603,9 +621,6 @@ export function PopoverContent(props: PopoverContentProps) {
   if (!open) return null;
 
   const nestingLevel = getNestingLevel();
-  const baseZIndex = 9999;
-  const overlayZIndex = baseZIndex + nestingLevel * 2;
-  const contentZIndex = baseZIndex + nestingLevel * 2 + 1;
 
   return (
     // A popover is dialog-scale — a few hundred px with its own chrome — so a
@@ -630,7 +645,7 @@ export function PopoverContent(props: PopoverContentProps) {
               backgroundColor: "rgba(0, 0, 0, 0.5)",
               opacity: isBottomSheetShown ? 1 : 0,
               transition: "opacity 0.3s ease",
-              zIndex: overlayZIndex,
+              zIndex: OVERLAY_Z,
               pointerEvents: "auto",
             }}
             onClick={handleOverlayClick}
@@ -656,7 +671,15 @@ export function PopoverContent(props: PopoverContentProps) {
             backgroundColor: colors.background,
             boxShadow: colors.shadow,
             boxSizing: "border-box",
-            zIndex: contentZIndex,
+            // The kit's ONE overlay rung (`overlay_layer.ts`), shared with every
+            // react-native `Modal` — DOM order settles the tie, and DOM order is
+            // open order for all of them. A nested popover portals into the same
+            // host AFTER its parent; a page-level one is inside the app root,
+            // which every modal's body-level div follows; and one opened INSIDE
+            // an overlay portals into that overlay's own host. The scrim and the
+            // panel share the rung too: siblings in one container, panel written
+            // second.
+            zIndex: OVERLAY_Z,
             transition: small ? "transform 0.3s ease" : undefined,
             ...(small
               ? {
@@ -752,6 +775,7 @@ export function PopoverContent(props: PopoverContentProps) {
             // Horizontal only: the vertical padding is the gap to the header and
             // footer, which is a gap the reader wants.
             <ScrollView
+              {...bodySeam}
               style={[SCROLL_BODY, style]}
               contentContainerStyle={[SCROLL_BODY_CONTENT, contentContainerStyle]}
             >

package/src/reference_field.tsx

@@ -113,15 +113,15 @@ export interface ReferenceFieldProps {
   onOpen?: () => void;
   openLabel?: string;
   /**
-   * Point this field at a DIFFERENT record. REQUIRED.
+   * Point this field at a DIFFERENT record.
    *
    * Unsets the reference so the call site's picker returns, and the caller
    * should hand that picker focus: the press said "wrong one", so the next move
    * is choosing the right one and the correction should cost one gesture.
    */
-  onChange: () => void;
+  onChange?: () => void;
   /**
-   * Leave the reference EMPTY — the plain detach. REQUIRED.
+   * Leave the reference EMPTY — the plain detach.
    *
    * The SAME write as `onChange`; they differ only in FOLLOW-THROUGH, and
    * nothing focuses after this one — auto-opening a picker would argue with the
@@ -131,14 +131,21 @@ export interface ReferenceFieldProps {
    * either steals the caret from someone who wanted an empty field or sends
    * someone who wanted a swap hunting for the input.
    *
-   * BOTH are required, including on a reference the record cannot do without.
-   * Hiding Clear there enforces nothing — Change, then decline to pick, lands on
-   * the same empty state — so it only removes the direct route to a place the
-   * reader can already reach, and makes the footer's shape vary for no gain.
-   * Whether empty is VALID is the row's business (its `warning`, its
-   * validation), never the peek's.
+   * They come as a PAIR — both, or neither. Supplying one alone enforces
+   * nothing: Change, then decline to pick, lands on the same empty state Clear
+   * reaches, so hiding Clear only removes the direct route to a place the reader
+   * can already get to, and makes the footer's shape vary for no gain. Whether
+   * empty is VALID is the row's business (its `warning`, its validation), never
+   * the peek's.
+   *
+   * **Omitting BOTH is different, and it is the read-only reference.** On a
+   * record that is closed — departed, posted, archived — nothing about the link
+   * may change, and a Change button that renders and then declines to act is the
+   * same broken promise as a disabled field still wearing its chevron. Without
+   * them the peek keeps its facts and its Open and simply carries no link verbs,
+   * which is what a reference you can read but not re-point looks like.
    */
-  onClear: () => void;
+  onClear?: () => void;
   /**
    * Commit the draft. Receives ONLY the facts whose value CHANGED, keyed by
    * `name` — never a full snapshot, so a lock or a `before_update` hook sees the
@@ -163,6 +170,10 @@ export function ReferenceField(props: ReferenceFieldProps) {
   const [error, setError] = useState<string | null>(null);
   const editing = draft !== null;
   const editable = onSave != null && facts.some((f) => f.name != null);
+  /** Chân trang chỉ có lý do tồn tại khi nó chở một động từ. Không có gì để
+   *  đổi, để bỏ, để sửa hay để mở thì cái peek chỉ còn là các dữ kiện — và một
+   *  đường kẻ dưới chúng chỉ nói rằng có thêm thứ gì đó, mà không có. */
+  const coVerb = editing || onChange != null || onClear != null || editable || onOpen != null;
 
   const openDraft = () => {
     const seed: Record<string, string> = {};
@@ -239,6 +250,12 @@ export function ReferenceField(props: ReferenceFieldProps) {
       <InlineEditView
         anchorRef={anchor}
         accessibilityLabel={accessibilityLabel}
+        /* Nothing here can be changed — no re-point, no detach, no fact edit —
+           so the field stops advertising one and rests like the read-only values
+           beside it. The peek still opens: reading who a closed record points at
+           is ordinary. Derived rather than a prop, so a caller cannot hand out
+           an editable surface over verbs it never passed. */
+        inert={onChange == null && onClear == null && onSave == null}
         onPress={() => setPeekOpen(true)}
         active={peekOpen}
         /* THE MARKER — what says this value is a RECORD and not typed text.
@@ -395,6 +412,7 @@ export function ReferenceField(props: ReferenceFieldProps) {
             record being edited, one navigates off it — so offering either here
             would be offering to lose the typing. Cancel and Save are the only
             two exits, which is also what the pinned popover promised. */}
+        {coVerb ? (
         <PopoverFooter align={editing ? "end" : "space-between"}>
           {editing ? (
             <>
@@ -415,16 +433,18 @@ export function ReferenceField(props: ReferenceFieldProps) {
             </>
           ) : (
             <>
-              {/* LEFT acts on the LINK — which record this points at. Both are
-                  unconditional: the peek always offers "point it elsewhere" and
-                  "leave it empty", so its footer has ONE shape everywhere. */}
+              {/* LEFT acts on the LINK — which record this points at. The two
+                  travel together, so the footer has ONE shape wherever the link
+                  can be re-pointed, and no left group at all where it cannot. */}
               <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                {onChange ? (
                 <Button
                   title={t.change}
                   color="secondary"
                   accessibilityLabel={`${t.change} — ${name}`}
                   onPress={() => { setPeekOpen(false); onChange(); }}
                 />
+                ) : null}
                 {/* Same resting surface as `change` beside it. It had NO
                     color — which renders transparent, borderless and
                     undecorated, i.e. the hover-only affordance composition.md
@@ -433,12 +453,14 @@ export function ReferenceField(props: ReferenceFieldProps) {
                     before they read any label. Being the least-reached verb is
                     said by PLACEMENT — second in the left group, far from the
                     primary — not by drawing nothing. */}
+                {onClear ? (
                 <Button
                   title={t.clear}
                   color="secondary"
                   accessibilityLabel={`${t.clear} — ${name}`}
                   onPress={() => { setPeekOpen(false); onClear(); }}
                 />
+                ) : null}
               </View>
               {/* RIGHT acts on the RECORD the link points at. Edit takes the ONE
                   filled-dark rung because it is the only verb here that leads to
@@ -459,6 +481,7 @@ export function ReferenceField(props: ReferenceFieldProps) {
             </>
           )}
         </PopoverFooter>
+        ) : null}
       </PopoverContent>
     </Popover>
   );

package/src/skip_link.tsx

@@ -1,5 +1,6 @@
 import { Platform } from "react-native";
 import { colors } from "./colors";
+import { SKIP_LINK_Z } from "./overlay_layer";
 
 export interface SkipLinkProps {
   /** DOM id of the main region to jump to, e.g. `"main-content"`. */
@@ -29,7 +30,7 @@ export function SkipLink(props: SkipLinkProps) {
         color: colors.white,
         textDecoration: "none",
         borderRadius: 4,
-        zIndex: 10001,
+        zIndex: SKIP_LINK_Z,
         transform: "translateY(-200%)",
         transition: "transform 0.15s ease",
       }}

package/src/stacked_bar_chart.tsx

@@ -1,10 +1,11 @@
-import { useMemo } from "react";
+import { useMemo, type ReactNode } from "react";
 import { StyleSheet, View } from "react-native";
 import { colors } from "./colors";
 import { LegendItem } from "./legend_item";
 import { useLoticsLocale } from "./locale";
 import { SPACE } from "./spacing";
 import { Text } from "./text";
+import { TYPE_LEADING_TIGHT_DESKTOP, TYPE_LEADING_TIGHT_MOBILE } from "./type_ramp";
 import type { TextColor } from "./text_utils";
 
 export interface StackedBarSeries {
@@ -17,6 +18,20 @@ export interface StackedBarRow {
   key: string;
   /** The entity this row is about — a campaign, a depot, a month. */
   label: string;
+  /**
+   * That entity's own mark, before its name — a `BrandMark`, an `Avatar`, a
+   * status dot. A chart and a table over the SAME entities inside one card have
+   * to draw them the same way; without a slot the chart can only say the name in
+   * text, and one value ends up with two renderings a few hundred pixels apart.
+   *
+   * A slot rather than a widened `label`, following `Table`/`FileRow`: `label`
+   * is also this row's accessible name and the target of the two-line clamp, and
+   * a `ReactNode` there would lose both.
+   *
+   * The row's SERIES colours belong to the measure, so unlike a legend row this
+   * one carries no identity of its own until you give it one.
+   */
+  leading?: ReactNode;
   /** A neutral qualifier beside the label ("Đang chạy", "12 đơn"). */
   meta?: string;
   /** Per-series magnitudes, keyed by `StackedBarSeries.key`. Negatives are dropped. */
@@ -110,6 +125,9 @@ export function StackedBarChart(props: StackedBarChartProps) {
                   that also has to fit a status and a figure spends a narrow
                   container's width truncating exactly that. */}
               <View style={styles.head}>
+                {row.leading !== undefined ? (
+                  <View style={styles.leading}>{row.leading}</View>
+                ) : null}
                 <View style={styles.headText}>
                   <Text size="sm" weight="medium" numberOfLines={2} leading="tight">
                     {row.label}
@@ -181,6 +199,18 @@ const styles = StyleSheet.create({
     minWidth: 0,
     gap: 1,
   },
+  // The mark centres on the LABEL'S OWN LINE BOX, not on the head — a row that
+  // also carries `meta` is two lines tall, and centring on the head would drift
+  // the mark down between them for that row only. Giving the slot the line box's
+  // height and centring inside it lands any mark on the first line whatever the
+  // mark's size, so a dot and a 24px avatar both sit right without either being
+  // measured. `sm` is the same box at both breakpoints; the max is what keeps
+  // that from being an assumption.
+  leading: {
+    height: Math.max(TYPE_LEADING_TIGHT_MOBILE.sm, TYPE_LEADING_TIGHT_DESKTOP.sm),
+    justifyContent: "center",
+    flexShrink: 0,
+  },
   // The track is the SHARED ruler; the fill is this row's share of it, and the
   // segments split the fill. Three boxes, because collapsing the middle one is
   // exactly how a stacked bar loses its scale.

package/src/table.tsx

@@ -331,7 +331,12 @@ export function TableGroup(props: TableGroupProps) {
   return (
     <View>
       <View style={styles.groupHeading}>
-        {color ? <View style={[styles.groupDot, { backgroundColor: solid(color) }]} /> : null}
+        {/* Ô này giữ chỗ kể cả khi băng không có màu: bỏ hẳn nó đi thì nhãn của
+            băng trung tính bắt đầu sớm hơn nhãn băng có màu đúng một chấm cộng
+            khoảng cách, và hai băng nằm ngay cạnh nhau trong cùng một bảng. */}
+        <View
+          style={[styles.groupDot, color ? { backgroundColor: solid(color) } : { opacity: 0 }]}
+        />
         <Text size="sm" weight="semibold">
           {label}
         </Text>

package/src/tabs.tsx

@@ -77,7 +77,7 @@ export function Tabs<T extends string>(props: TabsProps<T>) {
 
   return (
     <View
-      style={{ flexDirection: "row", gap: 4 }}
+      style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 4, rowGap: 4 }}
       accessibilityRole="tablist"
       accessibilityLabel={accessibilityLabel}
     >

package/src/text.tsx

@@ -162,6 +162,21 @@ export function Text(props: TextProps) {
         decoration && styles[decoration],
         tabular && styles.tabular,
         transform && styles[transform],
+        // A CLAMP THAT CANNOT SHRINK CANNOT CLAMP. `numberOfLines` says "cut this
+        // to fit", and on a flex row neither platform lets it: on web a clamped
+        // Text is `white-space: nowrap`, so its min-content width is the WHOLE
+        // string and `min-width: auto` floors it there; on native a `Text` is
+        // `flexShrink: 0` (unlike the web, where 1 is the CSS default), so it
+        // holds its full width outright. Either way two labelled values on one
+        // row lay out at intrinsic width and run off the frame — measured at
+        // x=790 in a 390px frame, with no page scroll to reach it.
+        //
+        // Both halves are needed because each fixes one platform, and both are
+        // NO-OPS unless the row actually overflows: flex-shrink only acts on
+        // negative free space. It sits before the caller's `style`, so a value
+        // that must never give way still says so — `flexShrink: 0` on the site
+        // that means it, which is how a figure keeps winning over its label.
+        numberOfLines != null && styles.clamped,
         style,
       ]}
       numberOfLines={numberOfLines}
@@ -259,6 +274,12 @@ const styles = StyleSheet.create({
     fontVariant: ["tabular-nums"],
   },
 
+  /** The pair a `numberOfLines` clamp needs to mean anything on a flex row. */
+  clamped: {
+    minWidth: 0,
+    flexShrink: 1,
+  },
+
   // Text transform styles
   uppercase: {
     textTransform: "uppercase",

package/src/tooltip.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { OVERLAY_Z_ABOVE } from "./overlay_layer";
 import { colors } from "./colors";
 import { Text } from "./text";
 
@@ -51,7 +52,7 @@ export function TooltipProvider({ children }: { children: React.ReactNode }) {
     container.style.width = "100%";
     container.style.height = "100%";
     container.style.pointerEvents = "none";
-    container.style.zIndex = "10000";
+    container.style.zIndex = String(OVERLAY_Z_ABOVE);
     document.body.appendChild(container);
 
     setPortalContainer(container);