@eifi1/ui-kit 0.31.1 → 0.32.1

package/src/components/user-avatar.tsx

@@ -25,7 +25,7 @@ export function avatarInitials(name?: string | null, email?: string | null): str
 }
 
 const AVATAR_SIZES = {
-  sm: "size-7 text-[11px]",
+  sm: "size-7 text-caption",
   md: "size-8 text-xs",
   lg: "size-12 text-base",
 } as const;

package/src/components/wizard-stepper.tsx

@@ -13,7 +13,11 @@ export function WizardStepper({
 }) {
   const currentIndex = steps.findIndex((s) => s.key === current);
   return (
-    <ol className="flex items-center gap-1 text-xs" aria-label={ariaLabel}>
+    // `flex-wrap`: the steps flow onto a second line rather than past the screen
+    // (0.32.1, the 360 px Extra-large sweep; docs/text-size-harmonization.md §4).
+    // "Upload — Map columns — Confirm" ran 22 px past a 360 px phone at Extra large.
+    // Where the steps fit, they stay one row.
+    <ol className="flex flex-wrap items-center gap-1 text-xs" aria-label={ariaLabel}>
       {steps.map((step, i) => (
         <li key={step.key} className="flex items-center gap-1">
           {i > 0 && <span className="w-4 border-t border-[var(--border)]" />}

package/src/demo/demo-banner.tsx

@@ -139,6 +139,11 @@ export function DemoBanner({
             size="2xs"
             variant="ghost"
             label={labels.details}
+            // The icon alone at every text size (docs/text-size-harmonization.md §10.8):
+            // a strip's one disclosure chevron beside its two links, whose state the
+            // chevron and `aria-expanded` say; "Details" as text at Large would push the
+            // links onto another line of a strip that is meant to stay one.
+            labelVisible={false}
             aria-expanded={!collapsed}
             onClick={toggle}
           >

package/src/feedback/feedback-dialog.tsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
 import type { ReactNode } from "react";
-import { Button, Input, PHONE_QUERY, Select, Textarea } from "../components/ui";
+import { Button, Input, Select, Textarea } from "../components/ui";
 import type { ButtonSize, ButtonVariant } from "../components/ui";
 import { Modal } from "../components/modal";
 import { isApplePlatform } from "../hooks/use-hotkey";
-import { useMediaQuery } from "../hooks/use-media-query";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { useKitLabels } from "../i18n/kit-labels";
 import {
   DEFAULT_ATTACHMENT_ACCEPT,
@@ -262,7 +262,7 @@ export function FeedbackDialog(props: FeedbackDialogProps) {
   // `attachments="multiple"` only: the capture, apart from the picked/pasted files.
   const [screenshot, setScreenshot] = useState<File | null>(null);
   const [files, setFiles] = useState<File[]>([]);
-  const isMobile = useMediaQuery(PHONE_QUERY, false);
+  const isMobile = usePhoneLayout();
   const labels = useKitLabels("feedbackDialog", DEFAULT_FEEDBACK_DIALOG_LABELS, labelsProp);
   const attachmentText = useKitLabels("feedbackAttachment", DEFAULT_FEEDBACK_ATTACHMENT_LABELS, labelsProp);
   // Under `multiple` the heading is `attachmentList` — a screenshot AND photos — which

package/src/feedback/feedback-inbox.tsx

@@ -313,7 +313,7 @@ export function FeedbackCategoryBadge({
     <span
       className={cn(
         "inline-flex items-center gap-1 rounded font-medium",
-        compact ? "px-1.5 py-0.5 text-[11px]" : "px-2 py-0.5 text-xs",
+        compact ? "px-1.5 py-0.5 text-caption" : "px-2 py-0.5 text-xs",
         meta.badgeBg,
         meta.badgeText,
         className,
@@ -346,7 +346,7 @@ export function FeedbackStatusBadge({
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1 whitespace-nowrap rounded px-1.5 py-0.5 text-[11px] font-medium",
+        "inline-flex items-center gap-1 whitespace-nowrap rounded px-1.5 py-0.5 text-caption font-medium",
         meta.activeBg,
         meta.activeText,
         className,

package/src/feedback/feedback-thread.tsx

@@ -265,7 +265,7 @@ export function FeedbackThread({
               className="flex flex-wrap items-baseline justify-center gap-x-2 px-4 text-center text-xs text-[var(--text-muted)]"
             >
               <span>{message.body}</span>
-              {time && <span className="text-[11px]">{time}</span>}
+              {time && <span className="text-caption">{time}</span>}
             </li>,
           );
           return rows;
@@ -286,14 +286,14 @@ export function FeedbackThread({
                   : "rounded-es-sm bg-[var(--bg-surface-2)]",
               )}
             >
-              <header className="mb-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-[var(--text-muted)]">
+              <header className="mb-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-caption text-[var(--text-muted)]">
                 {author != null && (
                   <span data-private={priv} className="font-medium text-[var(--text-secondary)]">
                     {author}
                   </span>
                 )}
                 {message.staff && (
-                  <span className="rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 text-[10px] font-medium uppercase tracking-wide text-[var(--text-secondary)]">
+                  <span className="rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 text-micro font-medium uppercase tracking-wide text-[var(--text-secondary)]">
                     {labels.staff}
                   </span>
                 )}

package/src/hooks/use-anchored-panel.ts

@@ -1,6 +1,7 @@
 import { useLayoutEffect, useState } from "react";
 import type { RefObject } from "react";
 import { useAnchoredRect, type AnchorRect } from "./use-anchored-rect";
+import { useTextSize } from "../theme/text-size";
 
 /**
  * Vertical placement for a portalled, `position: fixed` panel anchored to a trigger.
@@ -22,6 +23,51 @@ export interface ViewportBox {
   height: number;
 }
 
+/**
+ * Whether the page is pinch-zoomed (docs/text-size-harmonization.md §10.2). A zoom
+ * shrinks `visualViewport.height` exactly like an on-screen keyboard does, so every
+ * reader below must tell the two apart — and while zoomed, the answer is "no keyboard":
+ * following a zoomed viewport would drag a pinned row on every pan, magnified, and the
+ * browser already scrolls a focused field into view. The epsilon absorbs a scale of
+ * 1.0000001 that some engines report at rest.
+ */
+function isZoomed(vv: VisualViewport): boolean {
+  return vv.scale > 1.001;
+}
+
+/** Below this the "keyboard" is rounding noise or a browser UI strip — `innerHeight` and
+ *  `visualViewport.height` routinely disagree by a pixel or two — and nothing should move
+ *  (keksdose's `MIN_KEYBOARD_PX`). */
+const MIN_KEYBOARD_PX = 100;
+
+export interface KeyboardInsetOptions {
+  /** The smallest inset that counts as a keyboard. Default 100 px. */
+  minimum?: number;
+}
+
+/**
+ * How many CSS px at the bottom of the LAYOUT viewport the on-screen keyboard covers, now
+ * — the one guarded reader (§10.2), so the apps' copies go (keksdose's
+ * `use-keyboard-inset.ts`):
+ *
+ * - 0 while the page is pinch-zoomed (`visualViewport.scale > 1`), where a smaller visual
+ *   viewport is the zoom, not a keyboard;
+ * - 0 below `minimum` (100 px), which is noise;
+ * - 0 without `visualViewport` (SSR, jsdom, an old browser) and under
+ *   `interactive-widget=resizes-content`, where `bottom: 0` already lands above the
+ *   keyboard.
+ *
+ * Read it on `visualViewport`'s `resize` and `scroll` events (window `resize` as the
+ * fallback); a bottom-anchored control lifts itself by the result.
+ */
+export function readKeyboardInset({ minimum = MIN_KEYBOARD_PX }: KeyboardInsetOptions = {}): number {
+  if (typeof window === "undefined") return 0;
+  const vv = window.visualViewport;
+  if (!vv || isZoomed(vv)) return 0;
+  const inset = Math.round(window.innerHeight - vv.height - vv.offsetTop);
+  return inset >= minimum ? inset : 0;
+}
+
 function readViewport(): ViewportBox {
   if (typeof window === "undefined") return { top: 0, height: 0 };
   const vv = window.visualViewport;
@@ -35,9 +81,12 @@ export interface AnchoredPanelOptions {
   gap?: number;
   /** Space kept clear at the viewport edges. */
   margin?: number;
-  /** The height the panel would like, when there is room. */
+  /** The height the panel would like, when there is room. In px at Normal text size:
+   *  {@link useAnchoredPanel} multiplies it by the size's scale, since what a panel
+   *  holds is rows of text (0.32, docs/text-size-harmonization.md §3.2). */
   preferredHeight?: number;
-  /** Below this, the space under the trigger counts as unusable and a flip is considered. */
+  /** Below this, the space under the trigger counts as unusable and a flip is considered.
+   *  In px at Normal, scaled likewise. */
   minHeight?: number;
 }
 
@@ -118,6 +167,12 @@ export function anchoredPanelPlacement(
  * older browsers) or no keyboard taking a bite out of it. A caller then keeps its
  * static layout, which is right at every width where this does not apply — and is why
  * the desktop and the test suite see exactly the markup they saw before.
+ *
+ * Also `null` while the page is pinch-zoomed (0.32, §10.2), with the guard
+ * {@link readKeyboardInset} uses. A zoom shrinks the visual viewport like a keyboard,
+ * and following it gave PickerSheet the zoomed region's top and height but the page's
+ * full width — its close button sat off screen (kastlan, Kurvenschmiede). Zoomed, the
+ * sheet keeps its static full-screen box, which the reader can pan to like the page.
  */
 export function useVisualViewport(active: boolean): ViewportBox | null {
   const [box, setBox] = useState<ViewportBox | null>(null);
@@ -130,7 +185,9 @@ export function useVisualViewport(active: boolean): ViewportBox | null {
       // device-pixel-ratio that is not an integer (his phone reports 1.25), so a
       // strict comparison would report a "keyboard" of 0.4px on every phone and pin
       // a height where none was needed.
-      setBox(vv && vv.height < window.innerHeight - 1 ? { top: vv.offsetTop, height: vv.height } : null);
+      setBox(
+        vv && !isZoomed(vv) && vv.height < window.innerHeight - 1 ? { top: vv.offsetTop, height: vv.height } : null,
+      );
     };
     update();
     const vv = window.visualViewport;
@@ -154,6 +211,11 @@ export function useAnchoredPanel<T extends HTMLElement>(
 ): AnchoredPanel {
   const rect = useAnchoredRect(ref, open);
   const [viewport, setViewport] = useState<ViewportBox>(readViewport);
+  // A panel of rows wants room for the same number of rows at every text size; the gap
+  // and the edge margin are not text and stay px.
+  const { scale } = useTextSize();
+  const preferredHeight = (options.preferredHeight ?? 320) * scale;
+  const minHeight = (options.minHeight ?? 160) * scale;
 
   useLayoutEffect(() => {
     if (!open) return;
@@ -174,7 +236,7 @@ export function useAnchoredPanel<T extends HTMLElement>(
   }, [open]);
 
   if (!rect) {
-    return { rect: null, top: 0, maxHeight: options.preferredHeight ?? 320, above: false };
+    return { rect: null, top: 0, maxHeight: preferredHeight, above: false };
   }
-  return { rect, ...anchoredPanelPlacement(rect, viewport, options) };
+  return { rect, ...anchoredPanelPlacement(rect, viewport, { ...options, preferredHeight, minHeight }) };
 }

package/src/hooks/use-breakpoint.ts

@@ -0,0 +1,132 @@
+import { useMediaQuery } from "./use-media-query";
+import { useTextSize } from "../theme/text-size";
+
+/**
+ * Breakpoints that follow the text size, in JS (docs/text-size-harmonization.md §3.3,
+ * §10.4).
+ *
+ * A media query's rem resolves against the browser's default font size, not `<html>`'s,
+ * so Tailwind's `md:` would stay at 48rem when the root grows. tokens.css therefore
+ * redefines every breakpoint variant per text size — `md:` is 48rem at Normal, 60rem at
+ * Large, 72rem at Extra large — and these hooks ask the same question with the same
+ * numbers, so the CSS and the JS answer always agree: AppShell's `md:hidden` and its
+ * `isMdUp`, DataTable's cards and its full-screen dialog, an app's sticky footer
+ * (keksdose's must be the SAME `usePhoneLayout()` the dialog uses, §10.4).
+ *
+ * Width queries only. Pointer and display-mode queries stay `useMediaQuery` (§10.4).
+ */
+
+/** The breakpoints at Normal, in rem: Tailwind's five, and `3xl` (keksdose's
+ *  `min-[2400px]`, §10.4). tokens.css multiplies each by the text size. */
+export const BREAKPOINT_REM = { sm: 40, md: 48, lg: 64, xl: 80, "2xl": 96, "3xl": 150 } as const;
+
+export type Breakpoint = keyof typeof BREAKPOINT_REM;
+
+/** A breakpoint variant, spelled as in a class: `"md"` is `md:` (at least md), `"max-md"`
+ *  is `max-md:` (below md). */
+export type BreakpointVariant = Breakpoint | `max-${Breakpoint}`;
+
+/**
+ * The browser's own default font size in px — what a media query's rem means (the
+ * initial `font-size: medium`, never `<html>`'s). 16 unless the person changed it, and 16
+ * outside a browser. Read once: changing it takes a browser setting, after which the
+ * page is reloaded in practice.
+ */
+let browserRemPx: number | null = null;
+function readBrowserRemPx(): number {
+  if (browserRemPx !== null) return browserRemPx;
+  // Outside a browser (SSR): 16, uncached, so the client's first real read still counts.
+  if (typeof document === "undefined" || !document.body) return 16;
+  const probe = document.createElement("div");
+  probe.style.cssText = "position:absolute;visibility:hidden;font-size:medium";
+  document.body.appendChild(probe);
+  const px = Number.parseFloat(getComputedStyle(probe).fontSize);
+  probe.remove();
+  // jsdom computes no font size ("medium" or nothing): the default it stands for.
+  browserRemPx = px > 0 ? px : 16;
+  return browserRemPx;
+}
+
+/**
+ * How many CSS px one `rem` is at `scale` (`TEXT_SCALE` of the size in force): the
+ * browser's own default font size times the text size — what `<html>`'s computed font
+ * size is, by tokens.css. For the few lengths JS has to do arithmetic with: a popover's
+ * width against the viewport edge, a chart constant (§3.1, §3.2). 16 × `scale` outside a
+ * browser and in jsdom, which computes no default font size.
+ */
+export function remPx(scale = 1): number {
+  return readBrowserRemPx() * scale;
+}
+
+/** {@link remPx} at the text size in force, re-rendering when it changes. */
+export function useRemPx(): number {
+  const { scale } = useTextSize();
+  return remPx(scale);
+}
+
+/** A length in rem as the kit spells one in JS — `"18rem"` — where a prop also takes px
+ *  as a plain number. */
+export type RemLength = `${number}rem`;
+
+/**
+ * A `number | RemLength` in CSS px now: a number is px as given, `"18rem"` is 18 ×
+ * `rootRemPx` (see {@link remPx}). `undefined` stays `undefined`.
+ */
+export function lengthPx(length: number | RemLength, rootRemPx: number): number;
+export function lengthPx(length: number | RemLength | undefined, rootRemPx: number): number | undefined;
+export function lengthPx(length: number | RemLength | undefined, rootRemPx: number): number | undefined {
+  if (length === undefined) return undefined;
+  return typeof length === "number" ? length : Number.parseFloat(length) * rootRemPx;
+}
+
+/**
+ * The media query a breakpoint variant means at `scale` (`TEXT_SCALE` of the size in
+ * force). `"md"` → `(min-width: 768px)` at Normal, `(min-width: 960px)` at Large;
+ * `"max-md"` → `(width < 768px)` at Normal. In px, scaled by the browser's own default
+ * font size as well, so a person who set 20 px in the browser gets 960 px for `md` at
+ * Normal — as the CSS does.
+ *
+ * `max-*` is written in range syntax, `(width < N)`, against the same `N` its `min-*`
+ * twin starts at, so the two are exact complements at EVERY width: exactly one of
+ * `md` and `max-md` matches, as with tokens.css's `width >= 48rem` / `width < 48rem`
+ * (and Tailwind's own `max-*`). Until 0.32.1 it was `(max-width: 767px)`, which left a
+ * gap: on a fractional viewport width (767.5 px under zoom or at some Android
+ * device-pixel ratios) neither query matched, so DataTable, asking `!md`, said phone
+ * while `usePhoneLayout()`, asking `max-md`, said not (0.32.1, keksdose's 0.32 report;
+ * docs/text-size-harmonization.md §3.3: "the CSS and JS answers always agree").
+ *
+ * Range syntax in media queries is Chrome / Edge 104, Firefox 63, Safari 16.4. That is
+ * inside the floor the kit already sets: tokens.css's breakpoint variants are written in
+ * it, and Tailwind v4 itself needs Safari 16.4, Chrome 111 and Firefox 128.
+ *
+ * A test's `matchMedia` stub that keyed on the old string (`"max-width: 767px"`, the
+ * deprecated `PHONE_QUERY`) has to answer `(width < 768px)` now. `min-*` is unchanged,
+ * character for character.
+ */
+export function breakpointQuery(variant: BreakpointVariant, scale = 1, remPx: number = readBrowserRemPx()): string {
+  const max = variant.startsWith("max-");
+  const name = (max ? variant.slice(4) : variant) as Breakpoint;
+  const px = Math.round(BREAKPOINT_REM[name] * remPx * scale);
+  return max ? `(width < ${px}px)` : `(min-width: ${px}px)`;
+}
+
+/**
+ * Whether the viewport matches a breakpoint variant at the text size in force — the JS
+ * twin of the class: `useBreakpoint("md")` is true exactly where `md:` applies,
+ * `useBreakpoint("max-sm")` where `max-sm:` does. `fallback` answers where there is no
+ * `matchMedia` (SSR, jsdom).
+ */
+export function useBreakpoint(variant: BreakpointVariant, fallback = false): boolean {
+  const { scale } = useTextSize();
+  return useMediaQuery(breakpointQuery(variant, scale), fallback);
+}
+
+/**
+ * The phone layout: below `md` at the text size in force — `max-md:` in CSS. The single
+ * answer for "is this the phone layout" (§10.4): the kit's own sheets and cards use it,
+ * and an app's phone checks must too, so a tablet at 150 % gets every phone treatment
+ * at once or none of them. Replaces `useMediaQuery(PHONE_QUERY)`.
+ */
+export function usePhoneLayout(fallback = false): boolean {
+  return useBreakpoint("max-md", fallback);
+}

package/src/hooks/use-large-text.ts

@@ -0,0 +1,41 @@
+import { useTextSize } from "../theme/text-size";
+import { useMediaQuery } from "./use-media-query";
+
+/**
+ * The two questions the kit's 0.32 behaviours ask (docs/text-size-harmonization.md §4,
+ * §10.7–10.9), answered in one place so every part draws the line where the others do.
+ *
+ * Prefer CSS where it can: a class that differs at Large is a `large:` variant
+ * (tokens.css), and a layout switch is a breakpoint, which already scales. These hooks
+ * are for what CSS cannot decide — whether a tooltip is rendered at all, whether a label
+ * becomes text, whether a row's actions collapse into a menu.
+ */
+
+/** Large or Extra large is in force (`<html data-text-size>`) — the JS twin of the
+ *  `large:` variant. */
+export function useLargeText(): boolean {
+  return useTextSize().size !== "normal";
+}
+
+/**
+ * The primary pointer is a finger (`pointer: coarse`): a hover never happens, so a
+ * tooltip opens only on the taps that do nothing else. A pointer query, so it stays
+ * `useMediaQuery` (§10.4). `false` without `matchMedia` (SSR, jsdom).
+ */
+export function useCoarsePointer(): boolean {
+  return useMediaQuery("(pointer: coarse)", false);
+}
+
+/**
+ * Whether a fact may NOT live only in a tooltip here (§4 "No fact only in a tooltip"):
+ * at Large and Extra large, where the reader is the one who asked for bigger type, and
+ * on a touch screen at every size, where a tooltip cannot be hovered open. Where this
+ * is true the kit draws the fact in the layout — a `disabledReason` as a line under its
+ * control, a FieldHint as the field's caption, a StatTile hint as text — and keeps the
+ * bubble only where there is no room (a top bar, a dense row's inline actions).
+ */
+export function useInlineFacts(): boolean {
+  const large = useLargeText();
+  const coarse = useCoarsePointer();
+  return large || coarse;
+}

package/src/hooks/use-windowed-rows.ts

@@ -1,27 +1,104 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { RefObject } from "react";
+import { useTextSize } from "../theme/text-size";
 
 /** Rows kept mounted beyond each edge, so a flick-scroll has something to show
  *  before the next render lands. */
 const OVERSCAN = 6;
 
+/** The attribute a measured row carries so {@link WindowedRows.measureRef} knows which
+ *  row it is looking at: `data-row-index={index}`. */
+export const WINDOWED_ROW_INDEX = "data-row-index";
+
 /** What {@link useWindowedRows} answers: render rows `first` up to (not including)
  *  `last`, inside a scroll body `totalHeight` pixels tall. */
 export interface WindowedRows {
   first: number;
   last: number;
   totalHeight: number;
+  /**
+   * The top of row `index`, in px from the top of the list: the rows above it at their
+   * MEASURED heights where they have been rendered, at {@link estimate} where not.
+   * Position each row at this (`style={{ top: offsetOf(index) }}`) rather than at
+   * `index × rowHeight`, which is right only while every row is the estimate.
+   */
+  offsetOf: (index: number) => number;
+  /** The height of row `index`: measured, else {@link estimate}. */
+  heightOf: (index: number) => number;
+  /**
+   * The height assumed for a row not measured yet: `rowHeight × scale`, the text
+   * size's factor (`useTextSize`). Give a row this as its `minHeight`, not its
+   * `height`: a row that wraps must be allowed to grow, and is then measured.
+   */
+  estimate: number;
+  /**
+   * Put on every rendered row, with `data-row-index={index}` beside it: the row is
+   * observed while it is mounted, and its height replaces the estimate. Stable for the
+   * life of the list. A row without it keeps the estimate, which is the pre-0.32
+   * fixed-height list exactly.
+   */
+  measureRef: (element: HTMLElement | null) => (() => void) | undefined;
+}
+
+type Heights = ReadonlyMap<number, number>;
+const NO_HEIGHTS: Heights = new Map();
+
+/** The box height of an observed row: the border box where the browser reports one,
+ *  else its laid-out rectangle. `0` means "not laid out" (hidden, jsdom) and is ignored. */
+function rowHeightOf(entry: ResizeObserverEntry): number {
+  const box = entry.borderBoxSize?.[0];
+  if (box && box.blockSize > 0) return box.blockSize;
+  return entry.target.getBoundingClientRect().height;
+}
+
+/** The row index an element was given with {@link WINDOWED_ROW_INDEX}, or `null`. */
+function indexOf(element: Element): number | null {
+  const raw = element.getAttribute(WINDOWED_ROW_INDEX);
+  if (raw === null) return null;
+  const index = Number(raw);
+  return Number.isInteger(index) && index >= 0 ? index : null;
+}
+
+/** The last index `i` with `offsets[i] <= y` (0 when none): the row whose box holds `y`. */
+function rowAt(offsets: Float64Array, count: number, y: number): number {
+  let lo = 0;
+  let hi = count;
+  while (lo < hi) {
+    const mid = (lo + hi + 1) >> 1;
+    if (offsets[mid] <= y) lo = mid;
+    else hi = mid - 1;
+  }
+  return Math.min(lo, Math.max(0, count - 1));
 }
 
 /**
- * Which rows of a fixed-height list are worth rendering.
+ * Which rows of a long list are worth rendering — and, since 0.32, where each one goes.
  *
- * Hand-rolled rather than pulled from a virtualization library, for two reasons. With
- * a fixed row height the whole problem is two divisions — a library earns its keep on
- * measured, variable-height rows, and there are none here. And the obvious library for
- * it (`@tanstack/react-virtual`) returns functions that cannot be memoized safely, so
- * the React Compiler skips optimising any component that calls it: a list that exists
- * to stay fast would opt out of the consumer's main source of speed.
+ * Hand-rolled rather than pulled from a virtualization library: the obvious one
+ * (`@tanstack/react-virtual`) returns functions that cannot be memoized safely, so the
+ * React Compiler skips optimising any component that calls it — a list that exists to
+ * stay fast would opt out of the consumer's main source of speed.
+ *
+ * **Measured rows (docs/text-size-harmonization.md §10.9).** Until 0.32 every row was
+ * `rowHeight` px and the window was two divisions. "Nothing truncates" at Large and
+ * Extra large needs rows that grow with their text — Kurvenschmiede's segment list
+ * wraps a long name at 150 %, and a fixed 68 px row cut it off. So the rows are
+ * measured: put {@link WindowedRows.measureRef} and `data-row-index` on each rendered
+ * row, and one `ResizeObserver` watches every row while it is mounted (one observer for
+ * all of them, which the browser batches into one callback per frame). A measured
+ * height replaces the estimate; a row never rendered keeps `rowHeight × scale`, the
+ * text size's factor, so the scroll body is about right before anything is measured
+ * and exactly right for everything that has been. Offsets are a prefix sum over both,
+ * rebuilt only when a height changes — scrolling is a binary search.
+ *
+ * Measurements are dropped when the text size changes (every row is a different height
+ * then, and the rendered ones measure again at once) and ignored past `count` (a row
+ * removed at the end). Removing a row in the MIDDLE shifts the indices below it; they
+ * keep the old row's height until they are rendered again, which costs a few pixels of
+ * scrollbar, never a row out of place on screen.
+ *
+ * Without a `ResizeObserver` (jsdom, an old webview) the estimate holds for every row,
+ * which is the fixed-height list of before.
  *
  * `scrollRef` is the element that scrolls. The rows are assumed to start at its top;
  * a sticky header above them costs a row or two of the overscan, not correctness.
@@ -35,8 +112,21 @@ export function useWindowedRows(
   rowHeight: number,
   scrollRef: RefObject<HTMLElement | null>,
 ): WindowedRows {
+  const { scale } = useTextSize();
+  const estimate = rowHeight * scale;
   const [scrollTop, setScrollTop] = useState(0);
   const [viewport, setViewport] = useState(0);
+  // The heights are keyed to the scale they were measured at: a text size switch makes
+  // every one of them stale at once, and the derivation below drops them on read.
+  const [measured, setMeasured] = useState<{ scale: number; heights: Heights }>({ scale, heights: NO_HEIGHTS });
+  const heights = measured.scale === scale ? measured.heights : NO_HEIGHTS;
+  // The observer's callback runs outside render and needs the scale in force then. A
+  // LAYOUT effect: the rows' new heights after a size switch are reported before the
+  // browser paints, which can be before a passive effect has run.
+  const scaleRef = useRef(scale);
+  useLayoutEffect(() => {
+    scaleRef.current = scale;
+  }, [scale]);
 
   useEffect(() => {
     const element = scrollRef.current;
@@ -59,11 +149,77 @@ export function useWindowedRows(
     };
   }, [scrollRef]);
 
-  const first = Math.max(0, Math.floor(scrollTop / rowHeight) - OVERSCAN);
+  // ONE observer for every row, made on the first row that asks for it.
+  const rowObserver = useRef<ResizeObserver | null>(null);
+  useEffect(
+    () => () => {
+      rowObserver.current?.disconnect();
+      rowObserver.current = null;
+    },
+    [],
+  );
+
+  const measureRef = useCallback((element: HTMLElement | null) => {
+    if (!element || typeof ResizeObserver === "undefined") return undefined;
+    if (!rowObserver.current) {
+      rowObserver.current = new ResizeObserver((entries) => {
+        const updates: [number, number][] = [];
+        for (const entry of entries) {
+          const index = indexOf(entry.target);
+          const height = rowHeightOf(entry);
+          if (index !== null && height > 0) updates.push([index, height]);
+        }
+        if (!updates.length) return;
+        const at = scaleRef.current;
+        setMeasured((previous) => {
+          const base = previous.scale === at ? previous.heights : NO_HEIGHTS;
+          // Unchanged heights are the common case (a row re-observed after a re-render):
+          // the same map back means no render.
+          if (updates.every(([index, height]) => base.get(index) === height)) {
+            return previous.scale === at ? previous : { scale: at, heights: base };
+          }
+          const next = new Map(base);
+          for (const [index, height] of updates) next.set(index, height);
+          return { scale: at, heights: next };
+        });
+      });
+    }
+    const observer = rowObserver.current;
+    observer.observe(element);
+    // React 19 calls this when the row unmounts (or the ref moves to another element).
+    return () => observer.unobserve(element);
+  }, []);
+
+  // The prefix sum: offsets[i] is the top of row i, offsets[count] the whole height.
+  // Skipped while nothing is measured, when the arithmetic is exact without it.
+  const offsets = useMemo(() => {
+    if (heights.size === 0) return null;
+    const table = new Float64Array(count + 1);
+    for (let index = 0; index < count; index += 1) {
+      table[index + 1] = table[index] + (heights.get(index) ?? estimate);
+    }
+    return table;
+  }, [count, estimate, heights]);
+
+  const offsetOf = useCallback(
+    (index: number) => (offsets ? offsets[Math.max(0, Math.min(index, count))] : index * estimate),
+    [offsets, count, estimate],
+  );
+  const heightOf = useCallback((index: number) => heights.get(index) ?? estimate, [heights, estimate]);
+
   // A viewport of 0 is the first render, before the pane has been laid out (and every
   // render under jsdom). Rendering nothing then would leave the list blank until
   // something scrolled it, so fall back to a screenful.
-  const visible = Math.ceil((viewport || 600) / rowHeight) + OVERSCAN * 2;
-  const last = Math.min(count, first + visible);
-  return { first, last, totalHeight: count * rowHeight };
+  const room = viewport || 600;
+  let first: number;
+  let last: number;
+  if (offsets) {
+    first = Math.max(0, rowAt(offsets, count, scrollTop) - OVERSCAN);
+    last = Math.min(count, rowAt(offsets, count, scrollTop + room) + 1 + OVERSCAN);
+  } else {
+    first = Math.max(0, Math.floor(scrollTop / estimate) - OVERSCAN);
+    last = Math.min(count, first + Math.ceil(room / estimate) + OVERSCAN * 2);
+  }
+  const totalHeight = offsets ? offsets[count] : count * estimate;
+  return { first, last, totalHeight, offsetOf, heightOf, estimate, measureRef };
 }

package/src/i18n/defaults.ts

@@ -84,6 +84,10 @@ import { DEFAULT_INVITATIONS_LABELS } from "../admin/invitations-panel";
 import { DEFAULT_SETTINGS_LABELS } from "../settings/settings-labels";
 import { DEFAULT_LANDING_LABELS } from "../landing/landing-labels";
 import { DEFAULT_DEMO_LABELS } from "../demo/demo-labels";
+import { DEFAULT_BILLING_LABELS } from "../billing/billing-labels";
+import { DEFAULT_APPEARANCE_LABELS } from "../components/appearance-labels";
+import { DEFAULT_ROW_ACTIONS_LABELS } from "../components/row-actions";
+import { DEFAULT_APP_SHELL_MORE_LABELS } from "../shell/app-shell";
 import { DEFAULT_ACCOUNT_STATE_LABELS } from "../components/account-chips";
 import { DEFAULT_SHARE_CARD_LABELS } from "../components/share-card";
 import { DEFAULT_REAUTH_DIALOG_LABELS } from "../components/reauth-dialog";
@@ -214,6 +218,10 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   settings: DEFAULT_SETTINGS_LABELS,
   landing: DEFAULT_LANDING_LABELS,
   demo: DEFAULT_DEMO_LABELS,
+  billing: DEFAULT_BILLING_LABELS,
+  appearance: DEFAULT_APPEARANCE_LABELS,
+  rowActions: DEFAULT_ROW_ACTIONS_LABELS,
+  appShellMore: DEFAULT_APP_SHELL_MORE_LABELS,
   characterCount: DEFAULT_CHARACTER_COUNT_LABELS,
   countrySelect: DEFAULT_COUNTRY_SELECT_LABELS,
   inlineEdit: DEFAULT_INLINE_EDIT_LABELS,