@momo-kits/foundation 0.169.7-beta.3 → 0.169.7-beta.4

package/Application/BottomTab/DuoBarCompression.tsx

@@ -28,9 +28,9 @@ type DuoBarCompression = {
 
 // space kept between the top and the bottom groups (HIG Vertical controls)
 const GROUP_GAP = Spacing.M;
-const BACK_SLOT_HEIGHT = DuoMetrics.controlSize + Spacing.M;
 // Back, then the right toolkit: help + home capsule
-const DEFAULT_TOOLBAR_HEIGHT = BACK_SLOT_HEIGHT + 2 * DuoMetrics.itemPitch;
+const DEFAULT_TOOLBAR_HEIGHT =
+  DuoMetrics.controlSize + Spacing.M + 2 * DuoMetrics.itemPitch;
 // Back, then the single button the toolbar folds into
 const COMPRESSED_TOOLBAR_HEIGHT = 2 * DuoMetrics.controlSize + Spacing.M;
 
@@ -39,12 +39,16 @@ const NO_COMPRESSION: DuoBarCompression = {
   tabBarCompressed: false,
 };
 
-const DuoBarCompressionContext = createContext(NO_COMPRESSION);
+const DuoBarCompressionContext =
+  createContext<DuoBarCompression>(NO_COMPRESSION);
 
 /**
- * Keeps the Duo side bar's toolbar and tab bar clear of each other (HIG Vertical controls):
- * both stay whole if they fit, else one is compressed and tapping it swaps them, else both
- * rest compressed and tapping one opens it until a tab is picked.
+ * keeps the side bar's toolbar and tab bar clear of each other (HIG, Designing for
+ * iPhone Duo: Vertical controls):
+ * - both fit: both stay whole
+ * - one fits whole beside the other compressed: one is compressed, tapping it swaps them
+ * - otherwise both rest compressed; tapping one opens it for a moment (the rail closes
+ *   again once a tab is picked)
  */
 const DuoBarCompressionProvider: React.FC<{
   behavior?: DuoBarCompressionBehavior;
@@ -67,16 +71,18 @@ const DuoBarCompressionProvider: React.FC<{
     }
     const room = height - sideBar.bottom - sideBar.top - GROUP_GAP;
     const tabBar = getRailHeight(tabCount, hasQr);
-    const qrHeight = TabBarMetrics.railCtaGap + TabBarMetrics.railCtaHeight;
-    const compressedTabBar = DuoMetrics.controlSize + (hasQr ? qrHeight : 0);
+    const compressedTabBar =
+      DuoMetrics.controlSize +
+      (hasQr ? TabBarMetrics.railCtaGap + TabBarMetrics.railCtaHeight : 0);
     const fits = (toolbar: number, tabs: number) => toolbar + tabs <= room;
 
     if (fits(toolbarHeight, tabBar)) {
       return { ...NO_COMPRESSION, setToolbarHeight };
     }
-    const canCompressToolbar = fits(COMPRESSED_TOOLBAR_HEIGHT, tabBar);
-    const canCompressTabBar = fits(toolbarHeight, compressedTabBar);
-    if (canCompressToolbar && canCompressTabBar) {
+    const canSwap =
+      fits(COMPRESSED_TOOLBAR_HEIGHT, tabBar) &&
+      fits(toolbarHeight, compressedTabBar);
+    if (canSwap) {
       return {
         toolbarCompressed: expanded === 'tabBar',
         tabBarCompressed: expanded === 'toolbar',
@@ -91,7 +97,8 @@ const DuoBarCompressionProvider: React.FC<{
       expandTabBar: () => setOpened('tabBar'),
       setToolbarHeight,
     };
-    // An opened rail shows even if only the group gap is short; picking a tab closes it.
+    // an opened rail always shows, even when only the gap between the groups is short:
+    // it closes again once a tab is picked
     if (opened === 'tabBar') {
       return {
         ...open,
@@ -115,7 +122,6 @@ const DuoBarCompressionProvider: React.FC<{
   );
 };
 
-/** Compression state of the Duo side bars; no compression outside the provider. */
 const useDuoBarCompression = () => useContext(DuoBarCompressionContext);
 
 export { DuoBarCompressionProvider, useDuoBarCompression };

package/Application/BottomTab/DuoRailTabBar.tsx

@@ -13,6 +13,7 @@ import { TabItemContent } from './CustomBottomTabItem';
 import { CurvedContainer } from './CurvedContainer';
 import { TabBarMetrics } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
+import { FixedScaleText } from './TabBarIcon';
 import { usePressLift } from './usePressLift';
 import { ActiveIndicator } from './ActiveIndicator';
 import {
@@ -23,7 +24,7 @@ import {
 import type { DuoTabBarProps } from './DuoTabBar';
 
 /**
- * Center action icon: an icon name drawn at the CTA size, or a custom node.
+ * Center action icon: an icon name drawn at the CTA size, or a custom node
  */
 const CtaIcon: React.FC<{ icon: FloatingButtonProps['icon'] }> = ({ icon }) => {
   if (typeof icon === 'string') {
@@ -39,7 +40,7 @@ const CtaIcon: React.FC<{ icon: FloatingButtonProps['icon'] }> = ({ icon }) => {
 };
 
 /**
- * Vertical container (.Nav/Duo/Item column) with the sliding active indicator.
+ * vertical container (.Nav/Duo/Item column) with the sliding active indicator
  */
 const Rail: React.FC<{
   items: TabItem[];
@@ -75,6 +76,7 @@ const Rail: React.FC<{
       >
         <TabItemContent
           vertical
+          fixedFontScale
           label={item.label}
           focused={item.focused}
           icon={item.icon}
@@ -88,7 +90,7 @@ const Rail: React.FC<{
 );
 
 /**
- * Center action of the rail: a round button with its label, under the container.
+ * center action of the rail: round button with its label, under the container
  */
 const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
   floatingButton,
@@ -114,13 +116,15 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
         <CtaIcon icon={floatingButton.icon} />
       </Animated.View>
       <View style={styles.railCtaLabel}>
-        <Text
-          numberOfLines={1}
-          typography={'label_xs_medium'}
-          color={theme.colors.text.secondary}
-        >
-          {floatingButton.label}
-        </Text>
+        <FixedScaleText>
+          <Text
+            numberOfLines={1}
+            typography={'label_xs_medium'}
+            color={theme.colors.text.secondary}
+          >
+            {floatingButton.label}
+          </Text>
+        </FixedScaleText>
         {floatingButton.labelContent && (
           <View pointerEvents={'none'} style={styles.railCtaLabelOverlay}>
             {floatingButton.labelContent}
@@ -132,14 +136,14 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
 };
 
 /**
- * Vertical bar anchored to the bottom of the Duo side bar, center action below it. When the
- * side bar is short it can shrink to one button showing the current tab (HIG "Tab bar
- * compressed"); tapping it expands the rail and compresses the toolbar.
+ * vertical bar anchored to the bottom of the Duo side bar, center action below it.
+ * When the side bar is short, it can shrink to one button showing the current tab
+ * (HIG "Tab bar compressed"); tapping it expands the rail and compresses the toolbar
  */
 const DuoRailTabBar: React.FC<DuoTabBarProps> = props => {
   const { sideBar } = useScreenLayout();
-  const compression = useDuoBarCompression();
-  const { tabBarCompressed, expandTabBar, onTabSelected } = compression;
+  const { tabBarCompressed, expandTabBar, onTabSelected } =
+    useDuoBarCompression();
   const compactLift = usePressLift();
   const { state, floatingButton, activeTintColor, inactiveTintColor } = props;
   const items = getTabItems(props);
@@ -149,7 +153,8 @@ const DuoRailTabBar: React.FC<DuoTabBarProps> = props => {
     return null;
   }
 
-  // Lines up with the side bar header buttons: a 48 lane kept 12 from the inner edge.
+  // the rail lines up with the header buttons in the side bar: centered on a 48 lane kept 12
+  // from the strip's inner edge
   const columnStyle = [
     styles.railColumn,
     {
@@ -159,10 +164,9 @@ const DuoRailTabBar: React.FC<DuoTabBarProps> = props => {
     },
     sideBar.edge === 'right' ? styles.railColumnRight : styles.railColumnLeft,
   ];
-  let cta: React.ReactNode;
-  if (floatingButton) {
-    cta = <RailCenterAction floatingButton={floatingButton} />;
-  }
+  const cta = floatingButton && (
+    <RailCenterAction floatingButton={floatingButton} />
+  );
 
   if (!tabBarCompressed) {
     return (

package/Application/BottomTab/DuoTabBar.tsx

@@ -16,8 +16,8 @@ type DuoTabBarProps = BottomTabBarProps & {
 };
 
 /**
- * Space tab content leaves under the floating horizontal tab bar (phone and unfolded Duo);
- * 0 when the Duo rail sits in the side bar.
+ * space tab content leaves under the floating horizontal tab bar (phone and unfolded Duo);
+ * 0 when the Duo rail sits in the side bar
  */
 const useDuoTabBarInset = () => {
   const { isIPhoneDuo, sideBar, insets } = useScreenLayout();
@@ -28,7 +28,7 @@ const useDuoTabBarInset = () => {
 };
 
 /**
- * Horizontal navigation bar of the unfolded display: 65% of the short side, centered.
+ * horizontal navigation bar of the unfolded display: 65% of the short side, centered
  */
 const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
   const { insets } = useScreenLayout();
@@ -44,6 +44,7 @@ const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
       ]}
     >
       <HorizontalTabBar
+        fixedFontScale
         items={getTabItems(props)}
         width={getHorizontalBarWidth(width, height, insets.left, insets.right)}
         floatingButton={floatingButton}
@@ -55,14 +56,15 @@ const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
 };
 
 /**
- * iPhone Duo tab bar: the rail in the side bar, or the horizontal bar when unfolded portrait.
+ * iPhone Duo tab bar: rail in the side bar, or the horizontal bar when unfolded portrait
  */
 const DuoTabBar: React.FC<DuoTabBarProps> = props => {
   const { sideBar } = useScreenLayout();
-  if (sideBar) {
-    return <DuoRailTabBar {...props} />;
-  }
-  return <DuoFloatingTabBar {...props} />;
+  return sideBar ? (
+    <DuoRailTabBar {...props} />
+  ) : (
+    <DuoFloatingTabBar {...props} />
+  );
 };
 
 export type { DuoTabBarProps };

package/Application/BottomTab/TabBarIcon.tsx

@@ -7,10 +7,9 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { Colors, Spacing } from '../../Consts';
-import { ApplicationContext } from '../../Context';
+import { ApplicationContext, MiniAppContext } from '../../Context';
 import { BadgeDot } from '../../Badge';
 import { Text } from '../../Text';
-import ScaleSizeProvider from '../ScaleSizeProvider';
 import { TabBarMetrics, TabBarMotion } from './metrics';
 
 type Props = {
@@ -29,8 +28,7 @@ type Props = {
 };
 
 /**
- * Badge value of a tab: undefined hides it, '' is a dot (also 0 when `showDot`), numbers
- * cap at 99+.
+ * badge value shown on a tab: undefined hides it, '' is a dot, numbers cap at 99+
  */
 export const getTabBadge = (
   badgeLabel?: string | number,
@@ -54,8 +52,27 @@ export const getTabBadge = (
 };
 
 /**
- * Label badge of a tab: numbers use the error color, text the warning color (Figma Badge
- * round numeric / text). The text keeps its design size to fit the 16 height.
+ * text at its design size: like the system tab bar it doesn't grow with the OS font scale or
+ * the wide Duo displays, which Text otherwise scales up to 5pt
+ */
+export const FixedScaleText: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const context = useContext<any>(MiniAppContext);
+  return (
+    <MiniAppContext.Provider
+      value={{
+        ...context,
+        fontScale: { useOSScaleRate: false, userScaleRate: 1 },
+      }}
+    >
+      {children}
+    </MiniAppContext.Provider>
+  );
+};
+
+/**
+ * numbers use the error color, text the warning color (Figma Badge round numeric / text)
  */
 const TabBadge: React.FC<{ label: string; vertical?: boolean }> = ({
   label,
@@ -63,21 +80,19 @@ const TabBadge: React.FC<{ label: string; vertical?: boolean }> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
   const isNumber = /^\d+\+?$/.test(label);
-  let backgroundColor = theme.colors.warning.primary;
-  if (isNumber) {
-    backgroundColor = theme.colors.error.primary;
-  }
   const badge = (
     <View
       style={[
         styles.badge,
         {
-          backgroundColor,
+          backgroundColor: isNumber
+            ? theme.colors.error.primary
+            : theme.colors.warning.primary,
           borderColor: theme.colors.background.surface,
         },
       ]}
     >
-      <ScaleSizeProvider scaleSizeMaxRate={1}>
+      <FixedScaleText>
         <Text
           numberOfLines={1}
           typography={'action_xxs_bold'}
@@ -85,7 +100,7 @@ const TabBadge: React.FC<{ label: string; vertical?: boolean }> = ({
         >
           {label}
         </Text>
-      </ScaleSizeProvider>
+      </FixedScaleText>
     </View>
   );
   if (vertical) {
@@ -95,8 +110,7 @@ const TabBadge: React.FC<{ label: string; vertical?: boolean }> = ({
 };
 
 /**
- * Tab icon (24) with its badge; active and inactive icons are stacked and cross-fade on
- * focus.
+ * 24 icon; active and inactive icons are stacked and cross-faded on focus
  */
 export function TabBarIcon({
   focused,

package/Application/BottomTab/TabScreen.tsx

@@ -29,7 +29,8 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
 
   const screenName = screen?.name || screen?.type?.name || 'Invalid';
   const { isBackgroundToForeground } = useAppState();
-  // Pad clear of the floating bar unless a Screen inside claims the inset to scroll under it.
+  // the floating tab bar covers the bottom of the tab: pad the content unless a Screen in it
+  // keeps clear of the bar itself (scroll content running under the bar)
   const { inset: tabBarInset } = useContext(BottomTabInsetContext);
   const [insetClaimed, setInsetClaimed] = useState(false);
   const tabInsetValue = useMemo(
@@ -53,6 +54,9 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
         ...data,
       });
 
+      /**
+       * debug toast
+       */
       navigator?.maxApi?.showToastDebug?.({
         appId: context.appId,
         message: `${screenName} screen_navigated`,

package/Application/BottomTab/index.tsx

@@ -1,5 +1,4 @@
 import {
-  BottomTabBarProps,
   BottomTabNavigationOptions,
   createBottomTabNavigator,
 } from '@react-navigation/bottom-tabs';
@@ -14,7 +13,6 @@ import {
 } from 'react-native';
 import { Icon } from '../../Icon';
 import { BottomTabProps } from '../types';
-import ScaleSizeProvider from '../ScaleSizeProvider';
 import BottomTabBar, { hasCenterAction } from './BottomTabBar';
 import { TabBarMetrics } from './metrics';
 import { getTabBadge } from './TabBarIcon';
@@ -25,8 +23,6 @@ import TabScreen from './TabScreen';
 import { ApplicationContext } from '../../Context';
 import { useScreenLayout } from '../../Layout';
 
-type SceneInterpolator = BottomTabNavigationOptions['sceneStyleInterpolator'];
-
 const Tab = createBottomTabNavigator();
 
 // the tab screens slide in index order over 280ms, CSS `ease`
@@ -36,11 +32,12 @@ const TAB_SWITCH_SPEC = {
 };
 
 /**
- * Tab slide interpolator. Scene progress is -1 for tabs before the active one and 1 for
- * tabs after it, so they wait a full width off screen on their side.
+ * scene progress is -1 for tabs before the active one, 1 for tabs after it: they wait a full
+ * width off screen on their side
  */
-const getTabSlide = (width: number): SceneInterpolator => {
-  return ({ current }) => ({
+const getTabSlide =
+  (width: number): BottomTabNavigationOptions['sceneStyleInterpolator'] =>
+  ({ current }) => ({
     sceneStyle: {
       transform: [
         {
@@ -52,7 +49,6 @@ const getTabSlide = (width: number): SceneInterpolator => {
       ],
     },
   });
-};
 
 /**
  * App tab navigator: the floating bar on phones, the rail or floating bar on
@@ -71,11 +67,11 @@ const BottomTab: React.FC<BottomTabProps> = ({
   const { isIPhoneDuo } = useScreenLayout();
   const { width: windowWidth } = useWindowDimensions();
   const barInset = useDuoTabBarInset();
-  // The center action's button rises above the bar; tab content leaves room for it too.
-  let tabBarInset = barInset;
-  if (barInset && hasCenterAction(floatingButton, tabs.length)) {
-    tabBarInset = barInset + TabBarMetrics.ctaLift;
-  }
+  // the center action's button rises above the bar, tab content leaves room for it too
+  const tabBarInset =
+    barInset && hasCenterAction(floatingButton, tabs.length)
+      ? barInset + TabBarMetrics.ctaLift
+      : barInset;
   const initialIndex = tabs.findIndex(i => i.name === initialRouteName);
   const activeIndex = React.useRef(initialIndex > 0 ? initialIndex : 0);
 
@@ -87,15 +83,15 @@ const BottomTab: React.FC<BottomTabProps> = ({
     });
   }, [navigation]);
 
-  // Focus, not mount/onFocus: popping back from a pushed screen only refocuses BottomTab.
+  // Focus, not mount: pushing a screen from a tab leaves BottomTab mounted but blurred, and
+  // onFocus only fires on tab changes.
   useFocusEffect(
     React.useCallback(() => {
       NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack?.(
         activeIndex.current !== 0,
       );
-      return () => {
+      return () =>
         NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack?.(false);
-      };
     }, []),
   );
 
@@ -132,21 +128,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
     },
   };
 
-  // One cap for the whole bar (labels, CTA, custom content) so it fits the fixed bar and notch.
-  const renderTabBar = (props: BottomTabBarProps) => {
-    const TabBar = isIPhoneDuo ? DuoTabBar : BottomTabBar;
-    return (
-      <ScaleSizeProvider scaleSizeMaxRate={TabBarMetrics.labelMaxScale}>
-        <TabBar
-          {...props}
-          floatingButton={floatingButton}
-          inactiveTintColor={theme.colors.text.secondary}
-          activeTintColor={theme.colors.primary}
-        />
-      </ScaleSizeProvider>
-    );
-  };
-
   return (
     <DuoBarCompressionProvider
       behavior={compressionBehavior}
@@ -164,7 +145,23 @@ const BottomTab: React.FC<BottomTabProps> = ({
             transitionSpec: TAB_SWITCH_SPEC,
             sceneStyleInterpolator: getTabSlide(windowWidth),
           }}
-          tabBar={renderTabBar}
+          tabBar={props =>
+            isIPhoneDuo ? (
+              <DuoTabBar
+                {...props}
+                floatingButton={floatingButton}
+                inactiveTintColor={theme.colors.text.secondary}
+                activeTintColor={theme.colors.primary}
+              />
+            ) : (
+              <BottomTabBar
+                {...props}
+                floatingButton={floatingButton}
+                inactiveTintColor={theme.colors.text.secondary}
+                activeTintColor={theme.colors.primary}
+              />
+            )
+          }
           initialRouteName={initialRouteName}
         >
           {tabs.map((item, index) => (

package/Application/BottomTab/metrics.ts

@@ -3,9 +3,10 @@ import { Easing } from 'react-native-reanimated';
 import { Colors, Radius, Spacing } from '../../Consts';
 
 /**
- * Navigation bar measurements (Figma "Specs Navigation", DS-984), in sync with momo-native-kits
- * `TabBarMetrics`: the horizontal floating bar (center action in a notch) and the vertical
- * iPhone Duo rail (center action under the container).
+ * Navigation bar measurements (Figma "Specs Navigation", DS-984), kept in sync with
+ * momo-native-kits `TabBarMetrics`
+ * - horizontal: floating container with items split evenly, center action in a notch
+ * - vertical: iPhone Duo rail, center action under the container
  */
 const TabBarMetrics = {
   height: 68,
@@ -19,15 +20,17 @@ const TabBarMetrics = {
   indicatorPaddingHorizontal: Spacing.M,
   indicatorRadius: Radius.XL,
   indicatorHeight: 32,
-  labelMaxScale: 1.2,
-  labelHeight: 18,
-  railLabelHeight: 14,
+  // home indicator / gesture bar area under the container
   systemIndicatorHeight: 24,
+  // unfolded foldables (short side from 600, the smallest in the spec) use 65% of the short
+  // side, centered; phones and folded outer displays fill the window
   foldableMinShortSide: 600,
   foldableWidthRatio: 0.65,
   ctaSlotWidth: 92,
   ctaSize: 48,
+  // the icon sits 10 inside the 48 button (prototype .cta: 28 icon), 12 inside the 52 rail one
   ctaIconSize: 28,
+  // the button rises 22 above the container top edge
   ctaLift: 22,
   ctaLabelGap: Spacing.M,
   ctaLabelHeight: 18,
@@ -48,9 +51,10 @@ const TabBarMetrics = {
 };
 
 /**
- * Navigation bar motion (MoMo Navigation Prototype): the active indicator slides to the
- * selected item with a little overshoot, icon and label tints cross-fade, and the center
- * action shrinks while pressed.
+ * motion of the navigation bar (MoMo Navigation Prototype):
+ * - one active indicator slides to the selected item, overshooting a little
+ * - icons cross-fade and the label color follows
+ * - the center action shrinks while pressed
  */
 const TabBarMotion = {
   indicator: { duration: 550, easing: Easing.bezier(0.34, 1.4, 0.5, 1) },
@@ -81,7 +85,7 @@ const CTA_SHADOW: BoxShadowValue[] = [
 ];
 
 /**
- * Inner light and tint of the active indicator: white 12% from below, primary 12% from above.
+ * inner light and tint of the active indicator: white 12% from below, primary 12% from above
  */
 const getIndicatorShadow = (primary: string): BoxShadowValue[] => [
   {
@@ -95,9 +99,9 @@ const getIndicatorShadow = (primary: string): BoxShadowValue[] => [
 ];
 
 /**
- * Notch dipped into the container top edge under the center action (Figma "Backgroud" path):
+ * notch dipped into the container top edge under the center action (Figma "Backgroud" path):
  * starts NOTCH_HALF_WIDTH left of the center, then cubic segments as [control1, control2, end],
- * each point [dx from the center, dy below the top edge].
+ * each point [dx from the center, dy below the top edge]
  */
 const NOTCH_HALF_WIDTH = 50.758;
 const NOTCH_CURVES: [number, number][][] = [
@@ -124,8 +128,8 @@ const NOTCH_CURVES: [number, number][][] = [
 ];
 
 /**
- * Width of the horizontal bar: 65% of the short side on an unfolded foldable, otherwise the
- * window minus the side safe areas and margins.
+ * width of the horizontal bar: 65% of the short side on an unfolded foldable, otherwise the
+ * window minus the side safe areas and margins
  */
 const getHorizontalBarWidth = (
   width: number,
@@ -141,16 +145,12 @@ const getHorizontalBarWidth = (
 };
 
 /**
- * Height of the vertical rail container, plus the center action under it.
+ * height of the vertical rail container, plus the center action under it
  */
-const getRailHeight = (tabCount: number, hasCta: boolean) => {
-  const itemsHeight = tabCount * TabBarMetrics.railItemHeight;
-  let ctaHeight = 0;
-  if (hasCta) {
-    ctaHeight = TabBarMetrics.railCtaGap + TabBarMetrics.railCtaHeight;
-  }
-  return itemsHeight + TabBarMetrics.railPaddingBottom + ctaHeight;
-};
+const getRailHeight = (tabCount: number, hasCta: boolean) =>
+  tabCount * TabBarMetrics.railItemHeight +
+  TabBarMetrics.railPaddingBottom +
+  (hasCta ? TabBarMetrics.railCtaGap + TabBarMetrics.railCtaHeight : 0);
 
 export {
   TabBarMetrics,

package/Application/BottomTab/tabItems.ts

@@ -2,7 +2,7 @@ import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import { CommonActions, Route } from '@react-navigation/native';
 
 /**
- * Navigation items of the tab bar, with the press handlers of the system tab bar.
+ * navigation items of the tab bar, with the press handlers of the system tab bar
  */
 const getTabItems = ({ state, descriptors, navigation }: BottomTabBarProps) => {
   return state.routes.map((route: Route<string>, index: number) => {

package/Application/BottomTab/usePressLift.ts

@@ -6,11 +6,11 @@ import {
 } from 'react-native-reanimated';
 
 const SPRING = { damping: 18, stiffness: 220, mass: 0.8 };
+// the button grows by a tenth while held
 const PRESSED_SCALE = 1.1;
 
 /**
- * Press lift for a single button (e.g. the compressed rail): it scales up while held,
- * unless the OS asks for reduced motion.
+ * lift for a single button, e.g. the compressed rail
  */
 const usePressLift = () => {
   const reduceMotion = useReducedMotion();

package/Application/Components/BackgroundImageView.tsx

@@ -17,10 +17,6 @@ type BackgroundImageViewProps = {
   animatedValue: SharedValue<number>;
 };
 
-/**
- * Header surface (shadow or divider) and image, fading in over the first 52pt of
- * scroll. iOS keeps the surface out of the clipped view so its shadow isn't cut.
- */
 const BackgroundImageView: FC<BackgroundImageViewProps> = ({
   useShadowHeader = true,
   headerBackground = null,

package/Application/Components/DuoGlassBackground.tsx

@@ -30,7 +30,6 @@ const DuoGlassBackground: React.FC<{
   const { headerHeight } = useScreenLayout();
   const sharedValue = useNormalizedSharedValue(animatedValue);
   const fadeStart = Math.max(bannerBottom - headerHeight, 0);
-  const translucentColor = theme.colors.background.surface + TRANSLUCENT_ALPHA;
 
   const fadeStyle = useAnimatedStyle(() => ({
     opacity: interpolate(
@@ -48,7 +47,8 @@ const DuoGlassBackground: React.FC<{
           StyleSheet.absoluteFill,
           styles.translucentBar,
           {
-            backgroundColor: translucentColor,
+            backgroundColor:
+              theme.colors.background.surface + TRANSLUCENT_ALPHA,
             borderBottomColor: theme.colors.border.default,
           },
           fadeStyle,
@@ -59,9 +59,8 @@ const DuoGlassBackground: React.FC<{
 };
 
 /**
- * Header gradient (and theme image) drawn under the content, fading out on scroll:
- * header-high, or 52pt taller and collapsing when `extended`. `followScroll`
- * scrolls it away with the content instead of fading it.
+ * pink header gradient drawn under the content, fading out on scroll as main's extended
+ * header does: header-high for default headers, 52 taller (collapsing) for extended
  */
 const DuoScrollGradient: React.FC<{
   animatedValue?: AnimatedCompatValue;

package/Application/Components/HeaderAnimated.tsx

@@ -19,10 +19,6 @@ const ASPECT_RATIOS: Record<
   '1/1': 1 / 1,
 };
 
-/**
- * Parallax header image (or `children`): stretches when pulled down and fades out
- * as the content scrolls up.
- */
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,

package/Application/Components/HeaderBackground.tsx

@@ -9,10 +9,6 @@ import { Image } from '../../Image';
 import BackgroundImageView from './BackgroundImageView';
 import { useNormalizedSharedValue } from '../hooks';
 
-/**
- * Header background: surface and image that fade in on scroll, with an optional
- * gradient (custom or theme) on top. Outlined when `showBaseLineDebug` is on.
- */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue,
   useGradient = true,