@lotics/ui 44.13.0 → 45.2.0

package/src/inline_markdown.tsx

@@ -0,0 +1,118 @@
+import { useCallback, useRef, useState, type ReactNode } from "react";
+import { View, type LayoutChangeEvent, type NativeSyntheticEvent, type TextInputKeyPressEventData } from "react-native";
+import { InlineEditFrame, useInlineEdit, type InlineEditVariant } from "./inline_edit";
+import { Markdown } from "./markdown";
+import { TextInputField } from "./text_input_field";
+
+export interface InlineMarkdownProps {
+  /** The markdown SOURCE. Rendered at rest, edited raw. */
+  value: string;
+  /** Persist the new source. May be async — the field shows a saving state and
+   *  surfaces a thrown error inline, staying in edit mode so nothing is lost. */
+  onSave: (next: string) => void | Promise<void>;
+  placeholder?: string;
+  disabled?: boolean;
+  /** How much frame shows at rest — see {@link InlineEditVariant}. Default "framed". */
+  variant?: InlineEditVariant;
+  /** The editor's floor, in lines, before the resting height is taken into
+   *  account. Keeps a short or empty value from opening a one-line slot. */
+  minLines?: number;
+  accessibilityLabel?: string;
+}
+
+/** A short prose reserve, so an empty field is still obviously somewhere to write. */
+const DEFAULT_MIN_LINES = 3;
+const APPROX_LINE_HEIGHT = 22;
+
+/**
+ * An inline-editable MARKDOWN value: rendered at rest, raw source while editing.
+ *
+ * This one SWAPS, and it is allowed to for the same reason the number and date
+ * editors do: its resting display and its editor show genuinely different
+ * strings (`**bold**` against **bold**), so the sub-pixel drift that forced
+ * `InlineTextInput` to stay a single element is not perceptible here. That rule
+ * — same string ⇒ one element, different string ⇒ swap — is what decides which
+ * shape a new editor takes, and markdown is the clearest case of the second.
+ *
+ * **The editor never opens SHORTER than the view it replaced.** A swap editor
+ * is supposed to leave the box where it was; for markdown it cannot exactly,
+ * because rendered prose and its source are different lengths by nature. What it
+ * CAN do is refuse to collapse: the resting height is measured and becomes the
+ * input's floor, so pressing a long note opens a long editor. Growing is the
+ * tolerable direction — shrinking pulls the text the reader was just looking at
+ * out from under them, and everything below it jumps up.
+ *
+ * Reach for it wherever a field holds markdown a PERSON wrote. A model's output
+ * is read-only (you re-run it, you do not hand-edit it) and belongs in a plain
+ * `Markdown`.
+ */
+export function InlineMarkdown(props: InlineMarkdownProps) {
+  const { value, onSave, placeholder, disabled, variant, minLines, accessibilityLabel } = props;
+  const edit = useInlineEdit<string>({ value, onSave });
+  const [restingHeight, setRestingHeight] = useState(0);
+  // Not state: it must be current for the render that mounts the input, and a
+  // set during layout would arrive one frame late — as a visible jump.
+  const measured = useRef(0);
+
+  const onViewLayout = useCallback((e: LayoutChangeEvent) => {
+    measured.current = e.nativeEvent.layout.height;
+  }, []);
+
+  const begin = useCallback(() => {
+    setRestingHeight(measured.current);
+    edit.begin();
+  }, [edit]);
+
+  const onKeyPress = useCallback(
+    (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+      // Enter is a PARAGRAPH BREAK here — this is prose, and `numberOfLines > 1`
+      // is what declares that everywhere else in the family. Blur commits.
+      if (e.nativeEvent.key === "Escape") edit.cancel();
+    },
+    [edit],
+  );
+
+  const floor = Math.max((minLines ?? DEFAULT_MIN_LINES) * APPROX_LINE_HEIGHT, restingHeight);
+
+  const display: ReactNode = value === "" ? "" : (
+    <View onLayout={onViewLayout}>
+      <Markdown>{value}</Markdown>
+    </View>
+  );
+
+  return (
+    <InlineEditFrame
+      // Unlike `InlineTextInput`, `editing` here IS the mount: the input exists
+      // only during an edit, which is what makes the rendered view possible.
+      editing={edit.editing}
+      display={display}
+      placeholder={placeholder}
+      onBegin={begin}
+      controls="blur"
+      onCommit={() => void edit.commit()}
+      onCancel={edit.cancel}
+      saving={edit.saving}
+      error={edit.error}
+      disabled={disabled}
+      variant={variant}
+      accessibilityLabel={accessibilityLabel}
+    >
+      <TextInputField
+        value={edit.draft}
+        onChangeText={edit.setDraft}
+        onBlur={() => void edit.commit()}
+        onKeyPress={onKeyPress}
+        multiline
+        // The input ARRIVES with the edit, so it takes the caret on mount. This
+        // is the case `InlineTextInput` cannot serve — it is permanently mounted
+        // and deliberately has no `autoFocus`, so a revealed field there would
+        // cost the reader a second click.
+        autoFocus
+        placeholder={placeholder}
+        accessibilityLabel={accessibilityLabel}
+        disabled={disabled}
+        style={{ minHeight: floor }}
+      />
+    </InlineEditFrame>
+  );
+}

package/src/inline_text_input.tsx

@@ -18,6 +18,23 @@ export interface InlineTextInputProps {
    *  struck while being edited — the field is one element, so a treatment that
    *  dropped on focus would be exactly the jump this control exists to avoid. */
   struck?: boolean;
+  /**
+   * The value is a URL — wear the navigation ink (`TextLink`'s underline +
+   * medium weight + blue).
+   *
+   * A TREATMENT, never a swapped-in `TextLink`, and that is the whole point:
+   * this field is one `<input>` in both states because a resting `Text` and an
+   * `<input>` cannot draw the same string identically (see the note on
+   * `editing` below). A link value's string does NOT change between reading and
+   * typing it — only its ink does — so swapping would reintroduce exactly the
+   * quarter-pixel jump that comment records, for no gain.
+   *
+   * Blue because a URL genuinely navigates, which is the same test `TextLink`
+   * applies to its own `href`. Pressing the field still EDITS: to open the
+   * destination, pass an `Open` `InlineButton` through `actions`, where a verb
+   * about the value belongs.
+   */
+  link?: boolean;
   /** How much frame shows at rest — see {@link InlineEditVariant}. Default "framed". */
   variant?: InlineEditVariant;
   /**
@@ -37,8 +54,8 @@ export interface InlineTextInputProps {
    * 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.
+   * reader is given no evidence that anything is missing — a long note simply
+   * loses its tail.
    *
    * 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
@@ -76,7 +93,7 @@ export interface InlineTextInputProps {
  * implementation detail.
  */
 export function InlineTextInput(props: InlineTextInputProps) {
-  const { value, onSave, placeholder, controls = "blur", disabled, struck, accessibilityLabel , variant, actions, numberOfLines, autoGrow } = props;
+  const { value, onSave, placeholder, controls = "blur", disabled, struck, link, 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;
   // WHAT ENTER MEANS IS DECLARED BY `numberOfLines`, NOT BY WRAPPING. They were
@@ -122,9 +139,8 @@ export function InlineTextInput(props: InlineTextInputProps) {
       // same string identically, and nothing enforces it: the padding drifted
       // (8px), then the transparent border (1px), then the ink (zinc-900 vs the
       // UA's black) — each fixed in turn, each revealing the next. The last one
-      // cannot be fixed at all: measured on an interior 4x crop with no border or
-      // ring in frame, the glyph mass sits 1 DEVICE pixel lower while editing
-      // (row centroid 12.985 -> 13.985, identical ink, identical column
+      // cannot be fixed at all: the glyph mass sits one DEVICE pixel lower while
+      // editing (identical ink, identical column
       // centroid). Both paths compute a 10px text top, so it is not a padding
       // mistake — an `<input>` centres its text by FONT METRICS and a `<div>`
       // positions it by LINE BOX, and the residual is a quarter of a CSS pixel.
@@ -195,7 +211,15 @@ export function InlineTextInput(props: InlineTextInputProps) {
         // its title upright. Anything else the view used to render has to move the
         // same way, or it goes the same way — quietly.
         variant={variant}
-        style={struck ? { textDecorationLine: "line-through" as const, color: colors.zinc[500] } : null}
+        style={
+          struck
+            ? { textDecorationLine: "line-through" as const, color: colors.zinc[500] }
+            : link && value !== ""
+              // `value`, not the draft: an emptied field is not a link, and the
+              // ink would otherwise sit on the placeholder.
+              ? { textDecorationLine: "underline" as const, color: colors.blue[600], fontWeight: "500" as const }
+              : null
+        }
         // With verbs on the field, the FRAME owns the surface and the ring.
         seamless={actions != null}
       />

package/src/ledger.tsx

@@ -257,9 +257,9 @@ export function LedgerRow(props: LedgerRowProps) {
   const rowDetails = useLoticsLocale().ledger.rowDetails;
   const { format, dropMeta } = useLedger();
   // The caption goes entirely rather than shrinking to nothing. Yielding first
-  // (below) is the right ORDER but not a floor: measured at 375, a 30-character
-  // caption still wanted 184px of a ~250px text budget and clipped — and took
-  // the label down with it, ellipsising a 74px identity at 71px. Two separate
+  // (below) is the right ORDER but not a floor: at phone width a long caption
+  // still claims most of the text budget, clips, and takes the label down with
+  // it. Two separate
   // authors had already worked around this by dropping `meta` at small widths
   // in their own apps, which is the component's job.
   const showMeta = meta != null && meta !== "" && !dropMeta;

package/src/markdown.web.tsx

@@ -34,12 +34,9 @@ const markdownComponents = {
  * 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
+ * A model's call-summary title then sits in the heading outline between two of
+ * the page's 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.
  *

package/src/matrix.tsx

@@ -135,7 +135,7 @@ function MatrixHeader({ corner, totalLabel }: MatrixHeaderProps) {
     <View style={styles.headRow}>
       <View style={[styles.rowLabel, { width: rowLabelWidth }]}>
         {typeof corner === "string" ? (
-          <Text size="xs" color="muted" numberOfLines={1}>
+          <Text size="sm" color="muted" weight="medium" numberOfLines={1}>
             {corner}
           </Text>
         ) : (

package/src/modal.tsx

@@ -6,6 +6,7 @@ import { Text } from "@lotics/ui/text";
 import { PortalHost } from "@lotics/ui/portal";
 import { useOverlayScope } from "@lotics/ui/overlay_scope";
 import { useLoticsLocale } from "@lotics/ui/locale";
+import { HeadingAltitudeContext } from "./heading_altitude";
 
 export interface ModalProps {
   open: boolean;
@@ -100,7 +101,15 @@ export interface ModalBodyProps {
  */
 export function ModalBody(props: ModalBodyProps) {
   const { children } = props;
-  return <ScrollView contentContainerStyle={styles.bodyContent}>{children}</ScrollView>;
+  // A takeover is still a panel: `ModalHeader`'s title is `lg`, so a section
+  // heading inside the body takes the ramp's `####` rung. Same rule as the
+  // drawer and the dialog, published from the same kind of region — the one
+  // that owns the surface's padding. See `heading_altitude.ts`.
+  return (
+    <HeadingAltitudeContext.Provider value="panel">
+      <ScrollView contentContainerStyle={styles.bodyContent}>{children}</ScrollView>
+    </HeadingAltitudeContext.Provider>
+  );
 }
 
 export interface ModalFooterProps {

package/src/popover.tsx

@@ -23,6 +23,7 @@ import {
 } from "./popover_layers";
 import { PopoverNavContext, type PopoverNavContextValue } from "./popover_nav";
 import { useLoticsLocale } from "./locale";
+import { HeadingAltitudeContext } from "./heading_altitude";
 
 export type PopoverSide = "top" | "right" | "bottom" | "left";
 export type PopoverAlign = "start" | "center" | "end";
@@ -607,155 +608,163 @@ export function PopoverContent(props: PopoverContentProps) {
   const contentZIndex = baseZIndex + nestingLevel * 2 + 1;
 
   return (
-    <Portal>
-      {/* Modal scrim — ONLY for the bottom-sheet (`small`) mode, which IS modal.
-          The anchored popover is NON-MODAL: no overlay, so the rest of the page
-          stays interactive; outside-dismiss is the click listener above. */}
-      {small && (
+    // A popover is dialog-scale — a few hundred px with its own chrome — so a
+    // heading inside it takes the ramp's `####` rung, exactly as one inside a
+    // dialog does. The provider covers ALL THREE BANDS, not just the scroller:
+    // `PopoverHeader` is a slot the CALLER composes (unlike a Drawer's title,
+    // which is chrome the container renders), and the identity line of a peek
+    // lives there. See `heading_altitude.ts`.
+    <HeadingAltitudeContext.Provider value="panel">
+      <Portal>
+        {/* Modal scrim — ONLY for the bottom-sheet (`small`) mode, which IS modal.
+            The anchored popover is NON-MODAL: no overlay, so the rest of the page
+            stays interactive; outside-dismiss is the click listener above. */}
+        {small && (
+          <div
+            style={{
+              position: "fixed",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              opacity: isBottomSheetShown ? 1 : 0,
+              transition: "opacity 0.3s ease",
+              zIndex: overlayZIndex,
+              pointerEvents: "auto",
+            }}
+            onClick={handleOverlayClick}
+            onMouseDown={(e) => e.stopPropagation()}
+          />
+        )}
+        {/* Popover */}
         <div
+          ref={popoverRef}
+          data-popover="true"
+          data-popover-level={nestingLevel}
+          data-testid={testID}
+          role="dialog"
+          aria-modal={small ? true : undefined}
+          tabIndex={small ? undefined : -1}
           style={{
             position: "fixed",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: "rgba(0, 0, 0, 0.5)",
-            opacity: isBottomSheetShown ? 1 : 0,
-            transition: "opacity 0.3s ease",
-            zIndex: overlayZIndex,
-            pointerEvents: "auto",
-          }}
-          onClick={handleOverlayClick}
-          onMouseDown={(e) => e.stopPropagation()}
-        />
-      )}
-      {/* Popover */}
-      <div
-        ref={popoverRef}
-        data-popover="true"
-        data-popover-level={nestingLevel}
-        data-testid={testID}
-        role="dialog"
-        aria-modal={small ? true : undefined}
-        tabIndex={small ? undefined : -1}
-        style={{
-          position: "fixed",
-          padding: PANEL_INSET,
-          borderTopLeftRadius: 16,
-          borderTopRightRadius: 16,
-          borderBottomLeftRadius: small ? 0 : 16,
-          borderBottomRightRadius: small ? 0 : 16,
-          backgroundColor: colors.background,
-          boxShadow: colors.shadow,
-          boxSizing: "border-box",
-          zIndex: contentZIndex,
-          transition: small ? "transform 0.3s ease" : undefined,
-          ...(small
-            ? {
-                bottom: 0,
-                left: 0,
-                right: 0,
-                maxHeight: "90vh",
-                display: "flex",
-                flexDirection: "column",
-                paddingBottom: 32,
-                transform: isBottomSheetShown ? "translateY(0)" : "translateY(100%)",
-              }
-            : position
+            padding: PANEL_INSET,
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+            borderBottomLeftRadius: small ? 0 : 16,
+            borderBottomRightRadius: small ? 0 : 16,
+            backgroundColor: colors.background,
+            boxShadow: colors.shadow,
+            boxSizing: "border-box",
+            zIndex: contentZIndex,
+            transition: small ? "transform 0.3s ease" : undefined,
+            ...(small
               ? {
-                  top: position.top,
-                  left: position.left,
-                  width: "max-content",
-                  maxWidth: 800,
-                  maxHeight: "80vh",
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  maxHeight: "90vh",
                   display: "flex",
                   flexDirection: "column",
+                  paddingBottom: 32,
+                  transform: isBottomSheetShown ? "translateY(0)" : "translateY(100%)",
                 }
-              : {
-                  top: -9999,
-                  left: -9999,
-                  width: "max-content",
-                  maxWidth: 800,
-                  maxHeight: "80vh",
-                  display: "flex",
-                  flexDirection: "column",
-                }),
-          // INHERIT means inherit — the width, not just a floor under it. The
-          // flag is set only by a popover anchored to a FIELD (Select,
-          // InlineSelect, Combobox), and a field's own width is the right width
-          // for the list of values that field can hold: option text longer than
-          // the field belongs on a second line, not on a wider panel.
-          //
-          // As a floor alone this LOOKED right, because with short options
-          // max-content lands on the trigger width anyway. It broke the moment
-          // an option was a sentence: the panel grew to the `maxWidth: 800` cap
-          // and then slid sideways to stay on screen, so a 371px field opened an
-          // 800px list starting 421px to its left, outside the drawer that owns
-          // the field.
-          //
-          // Floored at MIN_CONTROL_WIDTH so a genuinely narrow trigger — a
-          // a select in a dense grid column — still opens a list
-          // wide enough to read, rather than inheriting a width nothing fits in.
-          ...(inheritTriggerWidth &&
-            !small &&
-            triggerWidth > 0 && {
-              width: Math.max(triggerWidth, MIN_CONTROL_WIDTH),
-              maxWidth: Math.max(triggerWidth, MIN_CONTROL_WIDTH),
-            }),
-          // Last, so it beats the `max-content` every branch above sets.
-          ...(width != null && !small ? { width, maxWidth: width } : null),
-        }}
-        onClick={(e) => e.stopPropagation()}
-        // React synthetic events bubble through portals via the REACT tree, so a
-        // keydown inside this popover — or inside a Modal/Alert opened from it,
-        // which is a React child even though it portals to document.body — would
-        // reach the TRIGGER's ancestors (e.g. a grid cell's Escape-cancels-edit
-        // onKeyDown) and let a lower layer act on a higher layer's keys, on
-        // keydown, before any keyup layering logic runs. Keyboard sibling of the
-        // click curtain above. Keyup deliberately keeps flowing: RN-web Modal
-        // closes on a document-level keyup listener, and this popover's own
-        // Escape handling is a document capture keyup — neither must be starved.
-        onKeyDown={(e) => e.stopPropagation()}
-      >
-        {small && (
-          <View
-            style={{
-              padding: 8,
-              flexDirection: "row",
-              justifyContent: "flex-end",
-            }}
-          >
-            <IconButton icon="x" tooltip={closeLabel} onPress={handleClose} />
-          </View>
-        )}
-        {header}
-        {disableBodyScroll ? (
-          <SizeBoundary style={style}>{bodyChildren}</SizeBoundary>
-        ) : (
-          // FULL-BLEED HORIZONTALLY, then re-inset by the same 12. The panel
-          // pads all four sides, so a scroller sitting inside that padding
-          // clips its content 12px short of the edge and parks the scrollbar
-          // there too — content slides under an invisible margin instead of
-          // under the panel's own edge. Pulling out and padding back keeps the
-          // text on the exact column the header and footer use while giving the
-          // scroll its real edges. `PopoverFooter` already does this dance for
-          // its divider; the body needed it for the same reason.
-          //
-          // Horizontal only: the vertical padding is the gap to the header and
-          // footer, which is a gap the reader wants.
-          <ScrollView
-            style={[SCROLL_BODY, style]}
-            contentContainerStyle={[SCROLL_BODY_CONTENT, contentContainerStyle]}
-          >
-            {/* A popover is a box of its own — a few hundred px — so its contents
-                size to the panel rather than to whatever region it was opened
-                from. Both body paths get it; one of them is not a boundary. */}
-            <SizeBoundary>{bodyChildren}</SizeBoundary>
-          </ScrollView>
-        )}
-        {footer}
-      </div>
-    </Portal>
+              : position
+                ? {
+                    top: position.top,
+                    left: position.left,
+                    width: "max-content",
+                    maxWidth: 800,
+                    maxHeight: "80vh",
+                    display: "flex",
+                    flexDirection: "column",
+                  }
+                : {
+                    top: -9999,
+                    left: -9999,
+                    width: "max-content",
+                    maxWidth: 800,
+                    maxHeight: "80vh",
+                    display: "flex",
+                    flexDirection: "column",
+                  }),
+            // INHERIT means inherit — the width, not just a floor under it. The
+            // flag is set only by a popover anchored to a FIELD (Select,
+            // InlineSelect, Combobox), and a field's own width is the right width
+            // for the list of values that field can hold: option text longer than
+            // the field belongs on a second line, not on a wider panel.
+            //
+            // As a floor alone this LOOKED right, because with short options
+            // max-content lands on the trigger width anyway. It broke the moment
+            // an option was a sentence: the panel grew to the `maxWidth: 800` cap
+            // and then slid sideways to stay on screen, so a 371px field opened an
+            // 800px list starting 421px to its left, outside the drawer that owns
+            // the field.
+            //
+            // Floored at MIN_CONTROL_WIDTH so a genuinely narrow trigger — a
+            // a select in a dense grid column — still opens a list
+            // wide enough to read, rather than inheriting a width nothing fits in.
+            ...(inheritTriggerWidth &&
+              !small &&
+              triggerWidth > 0 && {
+                width: Math.max(triggerWidth, MIN_CONTROL_WIDTH),
+                maxWidth: Math.max(triggerWidth, MIN_CONTROL_WIDTH),
+              }),
+            // Last, so it beats the `max-content` every branch above sets.
+            ...(width != null && !small ? { width, maxWidth: width } : null),
+          }}
+          onClick={(e) => e.stopPropagation()}
+          // React synthetic events bubble through portals via the REACT tree, so a
+          // keydown inside this popover — or inside a Modal/Alert opened from it,
+          // which is a React child even though it portals to document.body — would
+          // reach the TRIGGER's ancestors (e.g. a grid cell's Escape-cancels-edit
+          // onKeyDown) and let a lower layer act on a higher layer's keys, on
+          // keydown, before any keyup layering logic runs. Keyboard sibling of the
+          // click curtain above. Keyup deliberately keeps flowing: RN-web Modal
+          // closes on a document-level keyup listener, and this popover's own
+          // Escape handling is a document capture keyup — neither must be starved.
+          onKeyDown={(e) => e.stopPropagation()}
+        >
+          {small && (
+            <View
+              style={{
+                padding: 8,
+                flexDirection: "row",
+                justifyContent: "flex-end",
+              }}
+            >
+              <IconButton icon="x" tooltip={closeLabel} onPress={handleClose} />
+            </View>
+          )}
+          {header}
+          {disableBodyScroll ? (
+            <SizeBoundary style={style}>{bodyChildren}</SizeBoundary>
+          ) : (
+            // FULL-BLEED HORIZONTALLY, then re-inset by the same 12. The panel
+            // pads all four sides, so a scroller sitting inside that padding
+            // clips its content 12px short of the edge and parks the scrollbar
+            // there too — content slides under an invisible margin instead of
+            // under the panel's own edge. Pulling out and padding back keeps the
+            // text on the exact column the header and footer use while giving the
+            // scroll its real edges. `PopoverFooter` already does this dance for
+            // its divider; the body needed it for the same reason.
+            //
+            // Horizontal only: the vertical padding is the gap to the header and
+            // footer, which is a gap the reader wants.
+            <ScrollView
+              style={[SCROLL_BODY, style]}
+              contentContainerStyle={[SCROLL_BODY_CONTENT, contentContainerStyle]}
+            >
+              {/* A popover is a box of its own — a few hundred px — so its contents
+                  size to the panel rather than to whatever region it was opened
+                  from. Both body paths get it; one of them is not a boundary. */}
+              <SizeBoundary>{bodyChildren}</SizeBoundary>
+            </ScrollView>
+          )}
+          {footer}
+        </div>
+      </Portal>
+    </HeadingAltitudeContext.Provider>
   );
 }
 

package/src/pressable_row.tsx

@@ -8,9 +8,9 @@ export interface PressableRowProps {
   onPress: () => void;
   /** The open/selected record — paints the persistent highlight. */
   selected?: boolean;
-  /** Part of a multi-select set — paints a persistent blue tint, distinct from
-   *  `selected` (the open record). The hover / open / press wash overrides it, so
-   *  it's the resting state of a ticked row in a bulk-select register. */
+  /** Part of a multi-select set — paints the same resting ground `selected` does.
+   *  What tells a ticked row from an open one is the ticked checkbox, which is
+   *  unmissable; the press wash still overrides both. */
   marked?: boolean;
   /**
    * - "register" (THE record-list default): a rounded row whose hover/open/`marked`
@@ -89,18 +89,27 @@ export function PressableRow(props: PressableRowProps) {
           // FOUR states, and they must not collide. Selection and hover painted
           // the SAME wash, which made "the row whose record is open" and "the row
           // the pointer happens to be over" indistinguishable — the register's
-          // one piece of persistent state, erased by a transient one. Hover is
-          // now neutral and lighter, because it answers "you can press this",
-          // while selection carries the brand's WASH because it answers "you are
-          // here" — the state the accent exists for. `pressed` stays neutral and
-          // darkest: a momentary depth cue, not an identity.
-          // `marked` shares the wash rather than keeping its own literal blue-50:
-          // that hex was the same colour the wash now resolves to, minus the
-          // theming, so a branded app painted its ticked rows in a hue it had
-          // replaced everywhere else. What separates a ticked row from an open
-          // one is the ticked checkbox, which is unmissable; two washes for two
-          // orthogonal states could never render anyway on a row that is both.
-          backgroundColor: pressed ? colors.zinc[200] : selected || marked ? colors.accent_wash : hovered ? colors.zinc[50] : undefined,
+          // one piece of persistent state, erased by a transient one.
+          //
+          // ONE NEUTRAL STEP is what separates them: zinc-50 hovered, zinc-100
+          // selected, zinc-200 pressed. The fix was briefly to give selection a
+          // blue ground instead, which read as a brand nobody had chosen on the
+          // busiest surface in the product — and contradicted `accent`'s own rule
+          // that it does not paint interaction chrome, which is exactly what
+          // these four states are.
+          //
+          // THE LITERAL, not `accent_wash`. Reading a selection through the brand
+          // token is how the blue got here in the first place: a themed app would
+          // tint the row, so "selection is neutral" would be true of the kit and
+          // false of every app that set an accent. The token still exists and
+          // still means the brand's tint — it is spent on ATTENTION now (a drop
+          // target lighting up), never on which record is open.
+          //
+          // `marked` shares the ground rather than keeping its own blue-50: what
+          // separates a ticked row from an open one is the ticked checkbox, which
+          // is unmissable, and two grounds for two orthogonal states could never
+          // render anyway on a row that is both.
+          backgroundColor: pressed ? colors.zinc[200] : selected || marked ? colors.zinc[100] : hovered ? colors.zinc[50] : undefined,
         },
         style,
       ]}