@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-JLC6PM5S.js → chunk-WAIJCD2V.js}

@@ -1,13 +1,15 @@
-import { Sheet } from './chunk-QYPE5JX3.js';
-import { NumberRoll } from './chunk-T5LTPKX6.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { NumberRoll } from './chunk-IMMALLRU.js';
 import { expandedProps } from './chunk-W23G6JLF.js';
-import { Button } from './chunk-E2E3I5W2.js';
+import { useInputPlatform } from './chunk-KXLDK6HB.js';
+import { fieldSurfaceFill } from './chunk-43K3BLXV.js';
 import { haptics } from './chunk-NY2U3PBI.js';
 import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { View, Text, Pressable, ScrollView, Animated, StyleSheet } from 'react-native';
+import { View, Text, Pressable, ActivityIndicator, ScrollView, Animated } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -31,7 +33,7 @@ function OptionTint({
     run.start();
     return () => run.stop();
   }, [on, level, t, theme]);
-  return /* @__PURE__ */ jsx(Animated.View, { pointerEvents: "none", style: [StyleSheet.absoluteFill, style, { opacity: t }] });
+  return /* @__PURE__ */ jsx(Animated.View, { pointerEvents: "none", style: [style, { opacity: t }], children: /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.md, color: theme.color.accent }) });
 }
 var DEFAULT_LABELS = {
   hour: "Hour",
@@ -40,7 +42,10 @@ var DEFAULT_LABELS = {
   am: "AM",
   pm: "PM",
   done: "Done",
-  period: "AM/PM"
+  period: "AM/PM",
+  clear: "Clear",
+  validating: "Validating",
+  valid: "Valid"
 };
 var pad = (n) => String(n).padStart(2, "0");
 var toSeconds = (v) => v.hour * 3600 + v.minute * 60 + (v.second ?? 0);
@@ -73,7 +78,13 @@ function TimeField({
   invalid = false,
   disabled = false,
   readOnly = false,
-  size = "md",
+  success = false,
+  loading = false,
+  leading,
+  trailing,
+  size = "lg",
+  surface = "filled",
+  clearable = false,
   labels: labelsProp,
   accessibilityLabel,
   motion = "full"
@@ -84,7 +95,9 @@ function TimeField({
   const locale = localeProp ?? contextLocale;
   const hourCycle = hourCycleProp ?? localeHourCycle(locale);
   const theme = useLoamTheme("time-field");
-  const hasError = invalid || Boolean(error);
+  const isLoading = loading && !disabled;
+  const hasError = !isLoading && (invalid || Boolean(error));
+  const valid = !isLoading && !hasError && success;
   const message = error ?? description;
   const needMinute = granularity !== "hour";
   const needSecond = granularity === "second";
@@ -135,15 +148,19 @@ function TimeField({
       ].filter((n) => n !== null).map(pad).join(":");
     }
   }, [current, locale, hourCycle, needMinute, needSecond]);
+  const os = useInputPlatform();
   const { styles } = useStyles(sheet, {
+    os,
     size,
     disabled,
     placeholder: readout === null,
     invalid: hasError
   });
   const iconSize = theme.ctl.icon[size];
+  const valueFont = size === "lg" ? { fontSize: theme.fontSize[os === "ios" ? 17 : 16] } : null;
   const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
   const interactive = !disabled && !readOnly;
+  const showClear = clearable && Boolean(current) && interactive;
   const pm = draft.hour >= 12;
   const hourItems = Array.from({ length: 24 }, (_, h) => h).filter(
     (h) => hourCycle === 12 ? h >= (pm ? 12 : 0) && h < (pm ? 24 : 12) : true
@@ -170,7 +187,7 @@ function TimeField({
       ],
       children: [
         /* @__PURE__ */ jsx(OptionTint, { on: selected, level, style: styles.optionSelected }),
-        /* @__PURE__ */ jsx(Text, { style: [styles.optionLabel, selected ? styles.optionLabelSelected : null], children: text })
+        /* @__PURE__ */ jsx(Text, { style: styles.optionLabel, children: text })
       ]
     },
     key
@@ -181,39 +198,88 @@ function TimeField({
   ] });
   return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
     label ? /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) : null,
-    /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: accessibilityLabel ?? label ?? readout ?? placeholder,
-        accessibilityValue: readout ? { text: readout } : void 0,
-        accessibilityState: { disabled, expanded: open },
-        ...expandedProps(open),
-        disabled,
-        onPress: interactive ? openSheet : void 0,
-        hitSlop: { top: slopY, bottom: slopY },
-        style: styles.trigger,
-        children: [
-          readout && current ? (
-            // The trigger already carries the readout as its label and value, so
-            // the roll is decorative.
-            /* @__PURE__ */ jsx(View, { style: styles.readout, children: /* @__PURE__ */ jsx(
-              NumberRoll,
+    /* @__PURE__ */ jsxs(View, { style: styles.triggerWrap, children: [
+      /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: accessibilityLabel ?? label ?? readout ?? placeholder,
+          accessibilityValue: readout ? { text: readout } : void 0,
+          accessibilityState: { disabled, expanded: open },
+          ...expandedProps(open),
+          "aria-busy": isLoading || void 0,
+          disabled,
+          onPress: interactive ? openSheet : void 0,
+          hitSlop: { top: slopY, bottom: slopY },
+          style: [
+            styles.trigger,
+            { backgroundColor: fieldSurfaceFill(theme, surface) },
+            isLoading ? { borderColor: theme.focus.ringColor, backgroundColor: theme.color.surface } : null
+          ],
+          children: [
+            leading != null ? /* @__PURE__ */ jsx(View, { testID: "time-field-leading", style: styles.leading, children: leading }) : null,
+            readout && current ? (
+              // The trigger already carries the readout as its label and value, so
+              // the roll is decorative.
+              /* @__PURE__ */ jsx(View, { style: styles.readout, children: /* @__PURE__ */ jsx(
+                NumberRoll,
+                {
+                  decorative: true,
+                  motion: level,
+                  value: current.hour * 1e4 + current.minute * 100 + (current.second ?? 0),
+                  formatValue: () => readout,
+                  textStyle: [styles.value, valueFont, styles.rollText]
+                }
+              ) })
+            ) : /* @__PURE__ */ jsx(Text, { style: [styles.value, valueFont], numberOfLines: 1, children: readout ?? placeholder }),
+            showClear ? (
+              // Holds the clear button's place; the button itself sits outside the
+              // trigger so two buttons are never nested.
+              /* @__PURE__ */ jsx(View, { style: { width: iconSize, height: iconSize } })
+            ) : null,
+            isLoading ? /* @__PURE__ */ jsx(
+              ActivityIndicator,
               {
-                decorative: true,
-                motion: level,
-                value: current.hour * 1e4 + current.minute * 100 + (current.second ?? 0),
-                formatValue: () => readout,
-                textStyle: [styles.value, styles.rollText]
+                testID: "time-field-spinner",
+                size: "small",
+                color: theme.color.accent,
+                accessibilityLabel: labels.validating
               }
-            ) })
-          ) : /* @__PURE__ */ jsx(Text, { style: styles.value, numberOfLines: 1, children: readout ?? placeholder }),
-          /* @__PURE__ */ jsx(Icon, { name: "clock", size: iconSize, color: theme.color.text3 })
-        ]
-      }
-    ),
+            ) : valid ? /* @__PURE__ */ jsx(
+              View,
+              {
+                testID: "time-field-status-icon",
+                accessibilityRole: "image",
+                accessibilityLabel: labels.valid,
+                children: /* @__PURE__ */ jsx(Icon, { name: "check-circle", size: iconSize, color: theme.color.good })
+              }
+            ) : trailing != null ? /* @__PURE__ */ jsx(View, { testID: "time-field-trailing", style: { minWidth: iconSize, minHeight: iconSize }, children: trailing }) : /* @__PURE__ */ jsx(Icon, { name: "clock", size: iconSize, color: theme.color.text3 })
+          ]
+        }
+      ),
+      showClear ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          testID: "time-field-clear",
+          style: [
+            styles.clear,
+            {
+              right: theme.borderWidth.thick + theme.ctl.px[size] + theme.ctl.gap[size] + iconSize
+            }
+          ],
+          accessibilityRole: "button",
+          accessibilityLabel: labels.clear,
+          onPress: () => {
+            if (value === void 0) setInner(null);
+            onValueChange?.(null);
+          },
+          hitSlop: Math.max(0, (theme.tapMin - iconSize) / 2),
+          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize, color: theme.color.text3 })
+        }
+      ) : null
+    ] }),
     message ? /* @__PURE__ */ jsxs(View, { style: styles.messageRow, children: [
-      hasError ? /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.sm, color: theme.color.danger }) : null,
+      hasError ? /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.sm, color: theme.color.dangerOnSoft }) : null,
       /* @__PURE__ */ jsx(Text, { style: hasError ? styles.messageError : styles.message, children: message })
     ] }) : null,
     /* @__PURE__ */ jsx(
@@ -291,12 +357,18 @@ function TimeField({
   ] });
 }
 var sheet = createStyleSheet((theme) => ({
+  leading: { alignItems: "center", justifyContent: "center" },
   root: { gap: theme.space.s1 },
+  // R11: 13 / 600 on iOS, 14 / 500 on Android, in `text` — as Input's label.
   label: {
     fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[14],
-    fontWeight: theme.fontWeight.semibold,
-    color: theme.color.text
+    color: theme.color.text,
+    variants: {
+      os: {
+        ios: { fontSize: theme.fontSize[13], fontWeight: theme.fontWeight.semibold },
+        android: { fontSize: theme.fontSize[14], fontWeight: theme.fontWeight.medium }
+      }
+    }
   },
   trigger: {
     flexDirection: "row",
@@ -330,7 +402,8 @@ var sheet = createStyleSheet((theme) => ({
         }
       },
       invalid: {
-        true: { backgroundColor: theme.color.dangerSoft, borderColor: theme.color.danger },
+        // R7: a danger edge on the normal fill; the icon and message carry it.
+        true: { backgroundColor: theme.color.surface2, borderColor: theme.color.danger },
         false: { backgroundColor: theme.color.surface2, borderColor: theme.color.borderStrong }
       },
       disabled: {
@@ -342,6 +415,8 @@ var sheet = createStyleSheet((theme) => ({
   value: {
     flex: 1,
     fontFamily: theme.font.sans,
+    // Tabular figures, so the readout does not jitter as the time changes.
+    fontVariant: ["tabular-nums"],
     variants: {
       size: {
         xs: { fontSize: theme.fontSize[14] },
@@ -356,13 +431,15 @@ var sheet = createStyleSheet((theme) => ({
     }
   },
   readout: { flex: 1, flexDirection: "row" },
+  triggerWrap: { position: "relative" },
+  clear: { position: "absolute", top: 0, bottom: 0, justifyContent: "center" },
   rollText: { flex: 0 },
   messageRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s1 },
   message: { fontFamily: theme.font.sans, fontSize: theme.fontSize[12], color: theme.color.text3 },
   messageError: {
     fontFamily: theme.font.sans,
     fontSize: theme.fontSize[12],
-    color: theme.color.danger
+    color: theme.color.dangerOnSoft
   },
   columns: { flexDirection: "row", gap: theme.space.s2 },
   column: { flex: 1, gap: theme.space.s1 },
@@ -384,22 +461,19 @@ var sheet = createStyleSheet((theme) => ({
     borderColor: "transparent"
   },
   optionSelected: {
-    borderRadius: theme.radius.md,
-    borderWidth: theme.borderWidth.base,
-    backgroundColor: theme.color.accentSoft,
-    borderColor: theme.edge.accent
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    end: theme.space.s3,
+    justifyContent: "center"
   },
   optionOff: { opacity: theme.state.disabledOpacity },
-  optionPressed: { backgroundColor: theme.color.surface2 },
+  optionPressed: { backgroundColor: theme.state.hover },
   optionLabel: {
     fontFamily: theme.font.sans,
     fontSize: theme.fontSize[16],
     color: theme.color.text2
   },
-  optionLabelSelected: {
-    fontWeight: theme.fontWeight.semibold,
-    color: theme.color.accentOnSoft
-  },
   footer: { paddingHorizontal: theme.space.s3, paddingTop: theme.space.s2 }
 }));
 

package/dist/chunk-WFMQ3WKM.js

@@ -0,0 +1,378 @@
+import { ExpandingSearchField } from './chunk-6KSUS7DF.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { Pressable, View, Animated, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function NavHeaderAction({
+  icon,
+  accessibilityLabel,
+  onPress,
+  disabled = false,
+  platform
+}) {
+  const theme = useLoamTheme("nav-header");
+  const { styles } = useStyles(sheet, { align: "left", large: false });
+  const android = isAndroidIdiom(theme, platform);
+  const color = disabled ? theme.color.text3 : android ? theme.color.text2 : theme.color.accentStrong;
+  const hit = android ? Math.max(theme.hit.lg, 48) : theme.tapMin;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityState: { disabled },
+      disabled,
+      onPress: disabled ? void 0 : onPress,
+      android_ripple: android ? { color: theme.state.pressed, borderless: true, radius: hit / 2 } : void 0,
+      style: ({ pressed }) => [
+        styles.action,
+        { width: hit, height: hit },
+        // iOS bar buttons dim on press; Android ripples.
+        pressed && !disabled && !android ? { opacity: theme.state.pressedOpacity } : null
+      ],
+      children: /* @__PURE__ */ jsx(Icon, { name: icon, size: android ? theme.icon.lg : theme.icon.md, color })
+    }
+  );
+}
+function BackLink({
+  title,
+  accessibilityLabel,
+  onPress
+}) {
+  const theme = useLoamTheme("nav-header");
+  const { styles } = useStyles(sheet, { align: "left", large: false });
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel,
+      onPress,
+      hitSlop: 8,
+      style: ({ pressed }) => [
+        styles.backLink,
+        pressed ? { opacity: theme.state.pressedOpacity } : null
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: theme.icon.lg, color: theme.color.accentStrong }),
+        /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.backText, children: title })
+      ]
+    }
+  );
+}
+var DEFAULT_LABELS = {
+  back: "Back"
+};
+var STRETCH = 1.06;
+var SHRINK = 0.9;
+function NavHeader({
+  title,
+  subtitle,
+  leading,
+  backTitle,
+  leadingLabel,
+  onLeadingPress,
+  leadingSlot,
+  trailing,
+  align: alignProp,
+  large = false,
+  density = "standard",
+  scrolled: scrolledProp,
+  platform,
+  showSearch: showSearchProp = false,
+  searchPlaceholder,
+  labels: labelsProp,
+  searchRecents = [],
+  searchValue,
+  onSearchChangeText,
+  onSearchCancel,
+  searchSlot,
+  scrollY
+}) {
+  const labels = useLabels("navHeader", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("nav-header");
+  const android = isAndroidIdiom(theme, platform);
+  const align = alignProp ?? (android ? "left" : "center");
+  const compact = density === "compact";
+  const { styles } = useStyles(sheet, { align, large });
+  const [scrolledFromY, setScrolledFromY] = React.useState(false);
+  React.useEffect(() => {
+    if (!scrollY) return;
+    const id = scrollY.addListener(({ value }) => setScrolledFromY(value > 0));
+    return () => scrollY.removeListener(id);
+  }, [scrollY]);
+  const scrolled = scrolledProp ?? scrolledFromY;
+  const leadingIcon = android && leading === "chevron-left" ? "arrow-left" : leading;
+  const showSearch = showSearchProp || searchSlot != null;
+  const collapsing = large && scrollY != null;
+  const [span, setSpan] = React.useState(theme.space[48]);
+  const largeStyle = collapsing ? {
+    opacity: scrollY.interpolate({
+      inputRange: [0, span * 0.6],
+      outputRange: [1, 0],
+      extrapolate: "clamp"
+    }),
+    transform: [
+      {
+        scale: scrollY.interpolate({
+          inputRange: [-span, 0, span],
+          outputRange: [STRETCH, 1, SHRINK],
+          extrapolate: "clamp"
+        })
+      }
+    ],
+    transformOrigin: "left center"
+  } : null;
+  const inlineStyle = collapsing ? {
+    opacity: scrollY.interpolate({
+      inputRange: [span * 0.5, span],
+      outputRange: [0, 1],
+      extrapolate: "clamp"
+    })
+  } : null;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "header",
+      style: [
+        styles.container,
+        android ? { backgroundColor: scrolled ? theme.color.surface2 : theme.color.surface } : { borderBottomColor: scrolled ? theme.color.border : "transparent" }
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: [
+              styles.bar,
+              android && styles.barAndroid,
+              compact && android && { height: theme.layout.appbarH - theme.space.s2 },
+              compact && { gap: theme.space.s1 }
+            ],
+            children: [
+              /* @__PURE__ */ jsx(View, { style: styles.leftSide, children: leadingSlot != null ? leadingSlot : !android && backTitle && leading ? /* @__PURE__ */ jsx(
+                BackLink,
+                {
+                  title: backTitle,
+                  accessibilityLabel: leadingLabel ?? labels.back,
+                  onPress: onLeadingPress
+                }
+              ) : leadingIcon ? /* @__PURE__ */ jsx(
+                NavHeaderAction,
+                {
+                  icon: leadingIcon,
+                  accessibilityLabel: leadingLabel ?? labels.back,
+                  onPress: onLeadingPress,
+                  ...platform ? { platform } : null
+                }
+              ) : null }),
+              /* @__PURE__ */ jsx(View, { style: styles.titleWrap, children: collapsing ? /* @__PURE__ */ jsx(
+                Animated.Text,
+                {
+                  numberOfLines: 1,
+                  style: [styles.title, android && styles.titleAndroid, inlineStyle],
+                  "aria-hidden": true,
+                  accessibilityElementsHidden: true,
+                  importantForAccessibility: "no-hide-descendants",
+                  children: title
+                }
+              ) : large ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.title, android && styles.titleAndroid], children: title }),
+                subtitle ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.subtitle, children: subtitle }) : null
+              ] }) }),
+              /* @__PURE__ */ jsx(View, { style: styles.rightSide, children: trailing })
+            ]
+          }
+        ),
+        large ? /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: [
+              styles.largeBlock,
+              compact && { paddingTop: 0, paddingBottom: theme.space.s2, gap: 0 }
+            ],
+            onLayout: (e) => setSpan(Math.max(1, e.nativeEvent.layout.height)),
+            children: [
+              /* @__PURE__ */ jsx(
+                Animated.Text,
+                {
+                  numberOfLines: 1,
+                  style: [styles.largeTitle, android && styles.largeTitleAndroid, largeStyle],
+                  children: title
+                }
+              ),
+              subtitle ? /* @__PURE__ */ jsx(Text, { style: styles.largeSubtitle, children: subtitle }) : null
+            ]
+          }
+        ) : null,
+        showSearch ? /* @__PURE__ */ jsx(View, { style: styles.searchRow, children: searchSlot != null ? searchSlot : /* @__PURE__ */ jsx(
+          ExpandingSearchField,
+          {
+            placeholder: searchPlaceholder,
+            recents: searchRecents,
+            value: searchValue,
+            onChangeText: onSearchChangeText,
+            onCancel: onSearchCancel
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  // No edge at rest: iOS shows the hairline, Android the surface-2 tint, only
+  // once content scrolls under the bar.
+  container: {
+    backgroundColor: theme.color.surface,
+    borderBottomWidth: theme.borderWidth.hair,
+    borderBottomColor: "transparent"
+  },
+  // `layout.appbarH` is the one metric that branches on platform: 44 on iOS
+  // (UINavigationBar), 64 on Android (Material top app bar). It replaces a flat
+  // 56px that was wrong on both.
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: theme.layout.appbarH,
+    paddingHorizontal: theme.space.s2,
+    gap: theme.space.s2
+  },
+  // Android: 4 to the 48 icon buttons, which carry their own inset.
+  barAndroid: {
+    paddingHorizontal: theme.space[4],
+    gap: theme.space[4]
+  },
+  leftSide: {
+    alignItems: "flex-start",
+    justifyContent: "center",
+    variants: {
+      // Centered titles need matching gutters on both sides, or the title is
+      // only centred within whatever the actions left over.
+      align: { left: {}, center: { minWidth: theme.tapMin } },
+      large: { true: {}, false: {} }
+    }
+  },
+  rightSide: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: theme.space.s1,
+    variants: {
+      align: { left: {}, center: { minWidth: theme.tapMin } },
+      large: { true: {}, false: {} }
+    }
+  },
+  titleWrap: {
+    flex: 1,
+    justifyContent: "center",
+    variants: {
+      align: { left: { alignItems: "flex-start" }, center: { alignItems: "center" } },
+      large: { true: {}, false: {} }
+    }
+  },
+  // `type.headline` (17/22/600) is the nav-bar title role on both ramps (HIG
+  // headline / M3 title), is what `NavStack`'s own `NavBar` already uses
+  // for the same element, and is what the design reference draws (16/700). The
+  // deprecated `fontSize[20]` (20) it replaced was the web h3, and left no room
+  // for a subtitle inside the 44dp row.
+  title: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    letterSpacing: theme.type.headline.letterSpacing,
+    color: theme.color.text,
+    variants: {
+      align: { left: { textAlign: "left" }, center: { textAlign: "center" } },
+      large: { true: {}, false: {} }
+    }
+  },
+  // M3 top app bar title: 22 / 28 / 400 at the start.
+  titleAndroid: {
+    fontSize: theme.fontSize[22],
+    lineHeight: theme.space[28],
+    fontWeight: theme.fontWeight.regular,
+    letterSpacing: 0
+  },
+  backLink: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: theme.tapMin,
+    maxWidth: theme.space[128] ?? 128
+  },
+  backText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    fontWeight: theme.fontWeight.regular,
+    color: theme.color.accentStrong
+  },
+  // A subtitle has to fit *under* the title inside the same bar row, so it is a
+  // footnote, not `fontSize[14]`: 13/18 plus 22 for the title is 40 of the 44.
+  subtitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing,
+    color: theme.color.text2,
+    variants: {
+      align: { left: { textAlign: "left" }, center: { textAlign: "center" } },
+      large: { true: {}, false: {} }
+    }
+  },
+  largeBlock: {
+    paddingHorizontal: theme.space.s4,
+    paddingTop: theme.space.s2,
+    paddingBottom: theme.space.s4,
+    gap: theme.space.s1
+  },
+  // The integrated search row sits under the bar: reference `padding:0 12px 12px`
+  // (buildAppBar search size), mapped to the space scale (16 horizontal / 12
+  // bottom is close enough on the 4px grid; the field owns its own height).
+  searchRow: {
+    paddingHorizontal: theme.space.s4,
+    paddingBottom: theme.space.s3
+  },
+  // 34 is the intended iOS large title and is unchanged; it just moves from the
+  // deprecated size-only ramp (`fontSize[36]`) to the semantic role that
+  // owns that size, which also brings the 41 line box with it. Without an
+  // explicit `lineHeight` a 34px display-face line was laid out on `normal`.
+  // R14: the OS face, iOS large title 34 / 700.
+  largeTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.largeTitle.fontSize,
+    lineHeight: theme.type.largeTitle.lineHeight,
+    letterSpacing: theme.type.largeTitle.letterSpacing,
+    color: theme.color.text
+  },
+  // The Android medium top app bar: 28 / 36 / 400.
+  largeTitleAndroid: {
+    fontSize: theme.fontSize[28],
+    lineHeight: theme.space[36],
+    fontWeight: theme.fontWeight.regular,
+    letterSpacing: 0
+  },
+  // `type.callout` is 16 — the same size `fontSize[16]` resolved to, on the
+  // semantic ramp and with a line box.
+  largeSubtitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.callout.fontSize,
+    lineHeight: theme.type.callout.lineHeight,
+    letterSpacing: theme.type.callout.letterSpacing,
+    color: theme.color.text2
+  },
+  // A bar button is a touch target before it is a glyph: `tapMin` (44), not the
+  // 40 it used to hardcode.
+  action: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+}));
+
+export { NavHeader, NavHeaderAction };