@tastic/hud 0.20.0 → 0.22.0

package/dist/index.mjs

@@ -17,9 +17,11 @@ import {
   StatRow,
   StatSection,
   UpdateDialog,
+  WELL_SHADOW,
   getStaggeredWordDuration,
-  useCompactDialog
-} from "./chunk-DK3HOZC5.mjs";
+  useCompactDialog,
+  useWellColors
+} from "./chunk-N7A7W72S.mjs";
 import {
   COMPACT_DIALOG_HEIGHT,
   DialogHeader,
@@ -683,7 +685,7 @@ function loadSkiaWeb() {
 }
 
 // src/PlayerSetupPanel.tsx
-import { ProfilePicker } from "@tastic/profile";
+import { getOptionPickerContentSize, getProfilePickerContentSize, OptionPicker, ProfilePicker } from "@tastic/profile";
 import { StyleSheet as StyleSheet8, View as View8 } from "react-native";
 import { Text as Text6 } from "react-native-paper";
 
@@ -721,26 +723,73 @@ function usePopoverHost() {
   return { openId, toggle, close };
 }
 
+// src/useZoneClampedAlign.ts
+import { useZoneBounds } from "@tastic/split-screen";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useWindowDimensions as useWindowDimensions3 } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+var EDGE_MARGIN2 = 12;
+function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
+  const auto = useAutoAlign(open, contentWidth, contentHeight, rotation);
+  const zone = useZoneBounds();
+  const { height: windowHeight } = useWindowDimensions3();
+  const insets = useSafeAreaInsets();
+  const shouldMeasure = open && auto.measured && zone !== null;
+  const [ownBounds, setOwnBounds] = useState3(null);
+  const [prevShouldMeasure, setPrevShouldMeasure] = useState3(shouldMeasure);
+  if (shouldMeasure !== prevShouldMeasure) {
+    setPrevShouldMeasure(shouldMeasure);
+    setOwnBounds(null);
+  }
+  useEffect2(() => {
+    if (!shouldMeasure) return;
+    auto.triggerRef.current?.measureInWindow((_x, y, _width, height) => {
+      const belowShared = zone.zoneSide === "belowShared";
+      const awayRoom = belowShared ? windowHeight - insets.bottom - (y + height) - EDGE_MARGIN2 : y - insets.top - EDGE_MARGIN2;
+      const towardRoom = belowShared ? y - zone.sharedEdgeY - EDGE_MARGIN2 : zone.sharedEdgeY - (y + height) - EDGE_MARGIN2;
+      const useToward = contentHeight > awayRoom && towardRoom > awayRoom;
+      let awaySide = belowShared ? "below" : "above";
+      let towardSide = belowShared ? "above" : "below";
+      if (zone.rotated) {
+        awaySide = awaySide === "above" ? "below" : "above";
+        towardSide = towardSide === "above" ? "below" : "above";
+      }
+      setOwnBounds({ maxHeight: Math.max(useToward ? towardRoom : awayRoom, 0), verticalAlign: useToward ? towardSide : awaySide });
+    });
+  }, [shouldMeasure, zone, auto.triggerRef, contentHeight, windowHeight, insets.top, insets.bottom]);
+  if (!zone) return auto;
+  if (!ownBounds) return { ...auto, measured: false };
+  return { ...auto, maxHeight: ownBounds.maxHeight, measured: auto.measured, verticalAlign: ownBounds.verticalAlign };
+}
+
 // src/PlayerSetupPanel.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function getColorPopoverId(idPrefix) {
   return `${idPrefix}-color`;
 }
+function getProfilePopoverId(idPrefix) {
+  return `${idPrefix}-profile`;
+}
 function getCpuDifficultyPopoverId(idPrefix) {
   return `${idPrefix}-difficulty`;
 }
-function PlayerSetupPanel({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton = true, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, cpuDifficultyAlignOverride, humanIcon = "face-man", cpuIcon = "robot" }) {
+function PlayerSetupPanel({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorCaption, showColor = true, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton = true, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, humanIcon = "face-man", cpuIcon = "robot" }) {
   const ownHost = usePopoverHost();
   const popover = host ?? ownHost;
   const ownPopoverOpen = popover.openId?.startsWith(`${idPrefix}-`) ?? false;
   const pickerRowPopoverOpen = popover.openId === getColorPopoverId(idPrefix) || secondPickerId !== void 0 && popover.openId === secondPickerId;
   const showProfilePicker = isHuman && profiles !== void 0 && !!onProfileSelect;
   const showCpuDifficulty = !isHuman && cpuDifficulty !== void 0 && cpuDifficultyOptions !== void 0 && !!onCpuDifficultyChange;
+  const seatButton = showProfilePicker || showCpuDifficulty;
   const selectedProfile = profiles?.find((p) => p.id === selectedProfileId) ?? null;
+  const colorSection = showColor ? { value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, caption: showProfilePicker && selectedProfile ? colorCaption : void 0 } : void 0;
+  const seatPickerId = showProfilePicker ? getProfilePopoverId(idPrefix) : getCpuDifficultyPopoverId(idPrefix);
+  const seatPickerSize = showProfilePicker ? getProfilePickerContentSize(profiles.length, !!onManageProfiles, colorSection) : getOptionPickerContentSize(cpuDifficultyOptions?.length ?? 0, colorSection);
+  const seatPickerAlign = useZoneClampedAlign(seatButton && popover.openId === seatPickerId, seatPickerSize.width, seatPickerSize.height);
   return /* @__PURE__ */ jsxs7(View8, { style: [styles8.panel, ownPopoverOpen && styles8.panelOpen], children: [
-    showProfilePicker ? /* @__PURE__ */ jsx10(ProfilePicker, { idPrefix, host: popover, profiles, selectedId: selectedProfileId ?? null, takenId: takenProfileId, color, dark, guestLabel: guestLabel ?? "GUEST", onSelect: (profile) => onProfileSelect?.(profile), onManage: onManageProfiles }) : showCpuDifficulty ? /* @__PURE__ */ jsx10(LabeledDropdown, { id: getCpuDifficultyPopoverId(idPrefix), host: popover, options: cpuDifficultyOptions, value: cpuDifficulty, onChange: onCpuDifficultyChange, color, dark, alignOverride: cpuDifficultyAlignOverride }) : label && /* @__PURE__ */ jsx10(Text6, { variant: "labelSmall", style: { color, fontFamily: labelFontFamily }, children: label }),
-    /* @__PURE__ */ jsxs7(View8, { style: [styles8.pickerRow, pickerRowPopoverOpen && styles8.pickerRowOpen], children: [
-      /* @__PURE__ */ jsx10(InlineColorPicker, { id: getColorPopoverId(idPrefix), host: popover, value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, alignOverride: colorAlignOverride, rotation: colorRotation, dark, tag: isHuman ? selectedProfile?.tag : void 0, icon: isHuman ? humanIcon : cpuIcon }),
+    showProfilePicker ? /* @__PURE__ */ jsx10(ProfilePicker, { idPrefix, host: popover, profiles, selectedId: selectedProfileId ?? null, takenId: takenProfileId, color, dark, guestLabel: guestLabel ?? "GUEST", onSelect: (profile) => onProfileSelect?.(profile), onManage: onManageProfiles, colorSection, alignOverride: seatPickerAlign }) : showCpuDifficulty ? /* @__PURE__ */ jsx10(OptionPicker, { id: getCpuDifficultyPopoverId(idPrefix), host: popover, options: cpuDifficultyOptions, value: cpuDifficulty, onChange: onCpuDifficultyChange, color, dark, icon: cpuIcon, colorSection, alignOverride: seatPickerAlign }) : label && /* @__PURE__ */ jsx10(Text6, { variant: "labelSmall", style: { color, fontFamily: labelFontFamily }, children: label }),
+    (!seatButton || secondPicker) && /* @__PURE__ */ jsxs7(View8, { style: [styles8.pickerRow, pickerRowPopoverOpen && styles8.pickerRowOpen], children: [
+      !seatButton && /* @__PURE__ */ jsx10(InlineColorPicker, { id: getColorPopoverId(idPrefix), host: popover, value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, alignOverride: colorAlignOverride, rotation: colorRotation, dark, tag: isHuman ? selectedProfile?.tag : void 0, icon: isHuman ? humanIcon : cpuIcon }),
       secondPicker
     ] }),
     isHuman && showReadyButton && onToggleReady && /* @__PURE__ */ jsx10(ReadyButton, { color, ready: ready ?? false, onToggleReady })
@@ -757,9 +806,9 @@ var styles8 = StyleSheet8.create({
   panelOpen: {
     zIndex: 100
   },
-  // Same gap as `panel`'s own vertical rhythm, reused horizontally - the color picker and (when
-  // present) secondPicker sit side by side within this row instead of stacked in the panel's own
-  // column.
+  // Same gap as `panel`'s own vertical rhythm, reused horizontally - the fallback color swatch and
+  // (when present) secondPicker sit side by side within this row instead of stacked in the panel's
+  // own column.
   pickerRow: {
     alignItems: "center",
     flexDirection: "row",
@@ -816,15 +865,15 @@ var styles9 = StyleSheet10.create({
 });
 
 // src/useQuitConfirmation.ts
-import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
 function useQuitConfirmation(hasProgress, onConfirmedBack) {
-  const [confirmVisible, setConfirmVisible] = useState3(false);
+  const [confirmVisible, setConfirmVisible] = useState4(false);
   const hasProgressRef = useRef2(hasProgress);
-  useEffect2(() => {
+  useEffect3(() => {
     hasProgressRef.current = hasProgress;
   });
   const onConfirmedBackRef = useRef2(onConfirmedBack);
-  useEffect2(() => {
+  useEffect3(() => {
     onConfirmedBackRef.current = onConfirmedBack;
   });
   const requestBack = useCallback3(() => {
@@ -834,45 +883,6 @@ function useQuitConfirmation(hasProgress, onConfirmedBack) {
   const cancelBack = useCallback3(() => setConfirmVisible(false), []);
   return { confirmVisible, requestBack, cancelBack };
 }
-
-// src/useZoneClampedAlign.ts
-import { useZoneBounds } from "@tastic/split-screen";
-import { useEffect as useEffect3, useState as useState4 } from "react";
-import { useWindowDimensions as useWindowDimensions3 } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-var EDGE_MARGIN2 = 12;
-function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
-  const auto = useAutoAlign(open, contentWidth, contentHeight, rotation);
-  const zone = useZoneBounds();
-  const { height: windowHeight } = useWindowDimensions3();
-  const insets = useSafeAreaInsets();
-  const shouldMeasure = open && auto.measured && zone !== null;
-  const [ownBounds, setOwnBounds] = useState4(null);
-  const [prevShouldMeasure, setPrevShouldMeasure] = useState4(shouldMeasure);
-  if (shouldMeasure !== prevShouldMeasure) {
-    setPrevShouldMeasure(shouldMeasure);
-    setOwnBounds(null);
-  }
-  useEffect3(() => {
-    if (!shouldMeasure) return;
-    auto.triggerRef.current?.measureInWindow((_x, y, _width, height) => {
-      const belowShared = zone.zoneSide === "belowShared";
-      const awayRoom = belowShared ? windowHeight - insets.bottom - (y + height) - EDGE_MARGIN2 : y - insets.top - EDGE_MARGIN2;
-      const towardRoom = belowShared ? y - zone.sharedEdgeY - EDGE_MARGIN2 : zone.sharedEdgeY - (y + height) - EDGE_MARGIN2;
-      const useToward = contentHeight > awayRoom && towardRoom > awayRoom;
-      let awaySide = belowShared ? "below" : "above";
-      let towardSide = belowShared ? "above" : "below";
-      if (zone.rotated) {
-        awaySide = awaySide === "above" ? "below" : "above";
-        towardSide = towardSide === "above" ? "below" : "above";
-      }
-      setOwnBounds({ maxHeight: Math.max(useToward ? towardRoom : awayRoom, 0), verticalAlign: useToward ? towardSide : awaySide });
-    });
-  }, [shouldMeasure, zone, auto.triggerRef, contentHeight, windowHeight, insets.top, insets.bottom]);
-  if (!zone) return auto;
-  if (!ownBounds) return { ...auto, measured: false };
-  return { ...auto, maxHeight: ownBounds.maxHeight, measured: auto.measured, verticalAlign: ownBounds.verticalAlign };
-}
 export {
   AchievementCatalogSection,
   AchievementRow,
@@ -907,10 +917,12 @@ export {
   StatSection,
   TriggerGaugeHost,
   UpdateDialog,
+  WELL_SHADOW,
   getColorPopoverId,
   getCpuDifficultyPopoverId,
   getInlineColorPickerContentSize,
   getLabeledDropdownContentHeight,
+  getProfilePopoverId,
   getStaggeredWordDuration,
   isCompactDialogHeight,
   loadSkiaWeb,
@@ -921,5 +933,6 @@ export {
   useOverlayCardColors,
   usePopoverHost,
   useQuitConfirmation,
+  useWellColors,
   useZoneClampedAlign
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "Visual component kit for local-multiplayer React Native games: inline (non-modal) popovers, dropdowns, color pickers, gauges, ready buttons, and dialogs, built to stay scoped to one player's own zone on a shared screen",
   "keywords": [
     "react-native",
@@ -85,16 +85,16 @@
   "prettier": "@infinitetoken/eslint-config/prettier",
   "devDependencies": {
     "@infinitetoken/eslint-config": "^0.2.0",
-    "@infinitetoken/jest-config": "^0.4.0",
-    "@infinitetoken/tsconfig": "^0.5.0",
-    "@rific/auto-paper": "^0.13.2",
+    "@infinitetoken/jest-config": "^0.5.2",
+    "@infinitetoken/tsconfig": "^0.6.0",
+    "@rific/auto-paper": "^0.13.3",
     "@rific/core": "^0.3.1",
     "@rific/feedback-press": "^0.13.0",
     "@rific/updater": "^0.7.1",
-    "@shopify/react-native-skia": "^2.6.2",
+    "@shopify/react-native-skia": "^2.14.0",
     "@tastic/achievements": "^0.6.0",
     "@tastic/core": "^0.14.0",
-    "@tastic/profile": "^0.13.0",
+    "@tastic/profile": "^0.15.0",
     "@tastic/split-screen": "^0.5.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
@@ -108,10 +108,10 @@
     "prettier": "^3.8.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-native": "^0.86.3",
+    "react-native": "^0.88.0",
     "react-native-paper": "^5.15.2",
-    "react-native-reanimated": "^4.5.1",
-    "react-native-safe-area-context": "^5.10.0",
+    "react-native-reanimated": "^4.7.1",
+    "react-native-safe-area-context": "^5.10.1",
     "tsup": "^8.0.0",
     "typescript": "^6.0.3"
   },
@@ -122,7 +122,7 @@
     "@shopify/react-native-skia": ">=2.6.0",
     "@tastic/achievements": ">=0.2.0",
     "@tastic/core": ">=0.12.0",
-    "@tastic/profile": ">=0.4.0",
+    "@tastic/profile": ">=0.15.0",
     "@tastic/split-screen": ">=0.5.0",
     "react": ">=19.0.0",
     "react-native": ">=0.76.0",

package/src/AchievementCatalogSection.tsx

@@ -15,12 +15,13 @@ import { MONO_FONT } from './fonts'
 interface Props {
   rows: AchievementCatalogRow[]
   label?: string
-  // Independently optional overrides for this section's own heading/row colors - default to the
-  // same useAutoPaperTheme()-derived formula as AchievementRow/StatSection/StatRow/BaseStatsScreen
-  // (see BaseStatsScreen's own doc for why) when omitted, so every existing caller renders
-  // identically to before. Passed straight through to each <AchievementRow>.
+  // Independently optional overrides for the heading's and rows' colors. fg and sectionBg go to each
+  // <AchievementRow> (whose own defaults are the well's, see wellSurface.ts). fgMuted goes to the heading and
+  // the rows; omitted, the heading (drawn on the screen, not on a well) keeps its own screen-derived default
+  // and the rows theirs.
   fg?: string
   fgMuted?: string
+  sectionBg?: string
 }
 
 // The "ALL ACHIEVEMENTS" heading + one <AchievementRow> per row - extracted verbatim from every
@@ -42,7 +43,7 @@ interface Props {
 // about 1.4:1 and 1.8:1 against the light screen's white, so a bar or check in either barely shows;
 // mixed, they're about 5:1 and 6:1 (bronze goes from about 3:1 to 9:1). The badge keeps the true tier
 // color: its glyph is black, which reads on all three.
-export function AchievementCatalogSection({ rows, label = 'ALL ACHIEVEMENTS', fg, fgMuted: fgMutedOverride }: Props) {
+export function AchievementCatalogSection({ rows, label = 'ALL ACHIEVEMENTS', fg, fgMuted: fgMutedOverride, sectionBg }: Props) {
   const { dark } = useAutoPaperTheme()
   const fgMuted = fgMutedOverride ?? (dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)')
   const tierAccent = (tierColor: string) => (dark ? tierColor : getBlendedColor('#000000', tierColor, 0.5))
@@ -53,7 +54,7 @@ export function AchievementCatalogSection({ rows, label = 'ALL ACHIEVEMENTS', fg
         {label}
       </Text>
       {rows.map((row) => (
-        <AchievementRow key={row.id} icon={row.icon} title={row.title} description={row.description} badgeColor={row.unlockedAt !== undefined ? row.tierColor : LOCKED_BADGE_COLOR} checkColor={tierAccent(row.tierColor)} unlockedLabel={row.unlockedLabel} progress={row.progress} deviceMarker={row.deviceMarker} fg={fg} fgMuted={fgMutedOverride} />
+        <AchievementRow key={row.id} icon={row.icon} title={row.title} description={row.description} badgeColor={row.unlockedAt !== undefined ? row.tierColor : LOCKED_BADGE_COLOR} checkColor={tierAccent(row.tierColor)} unlockedLabel={row.unlockedLabel} progress={row.progress} deviceMarker={row.deviceMarker} fg={fg} fgMuted={fgMutedOverride} sectionBg={sectionBg} />
       ))}
     </Fragment>
   )

package/src/AchievementRow.tsx

@@ -1,7 +1,8 @@
-import { useAutoPaperTheme } from '@rific/auto-paper'
 import { StyleSheet, View } from 'react-native'
 import { Icon, ProgressBar, Text } from 'react-native-paper'
 
+import { useWellColors, WELL_SHADOW } from './wellSurface'
+
 // A neutral gray for a locked badge's own background - exported so a caller computing its own
 // badge color (unlocked ? tierColor : LOCKED_BADGE_COLOR, matching LightCycles' own achievements.tsx)
 // doesn't need to invent or duplicate this exact tone.
@@ -32,10 +33,9 @@ interface Props {
   // from a specific profile's own tab - optional since only an app with per-profile stat views has
   // this concept at all.
   deviceMarker?: boolean
-  // Independently optional overrides for this row's own text/background colors - each defaults to
-  // the same dark-mode-derived formula as StatRow/StatSection/BaseStatsScreen (see that component's
-  // own doc for why) when omitted, so every existing caller renders identically to before. A caller
-  // with its own app-wide chrome palette passes whichever of the three it needs.
+  // Independently optional overrides for this row's own text/background colors - each defaults to the well's
+  // (wellSurface.ts: the theme's surface and its onSurface/onSurfaceVariant text), like StatSection/StatRow. A
+  // caller with its own app-wide chrome palette passes whichever of the three it needs.
   fg?: string
   fgMuted?: string
   sectionBg?: string
@@ -44,16 +44,15 @@ interface Props {
 // One row per achievement - a tier-colored (or locked-gray) badge, title/description, an optional
 // progress bar while locked, and either an unlocked check-mark+label or a lock icon. Extracted
 // verbatim from LightCycles' own achievements.tsx, where this exact row shape backed its entire
-// "ALL ACHIEVEMENTS" list. fg/fgMuted/its own section background default to the same
-// useAutoPaperTheme()-derived formula as StatRow/StatSection/BaseStatsScreen (see BaseStatsScreen's
-// own doc for why), each independently overridable via the matching prop for a caller with its own
-// chrome palette. Has no opinion on what an achievement actually IS (id, unlock predicate, catalog)
+// "ALL ACHIEVEMENTS" list. Each row is its own well (wellSurface.ts: the theme's surface on MD3's level-1 shadow);
+// fg/fgMuted/its own background default to the well's colors, each independently overridable via the matching
+// prop for a caller with its own chrome palette. Has no opinion on what an achievement actually IS (id, unlock predicate, catalog)
 // - that stays entirely app-local; this is purely the presentational row.
 export function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props) {
-  const { dark } = useAutoPaperTheme()
-  const fg = fgOverride ?? (dark ? '#FFFFFF' : '#000000')
-  const fgMuted = fgMutedOverride ?? (dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)')
-  const sectionBg = sectionBgOverride ?? (dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)')
+  const well = useWellColors()
+  const fg = fgOverride ?? well.fg
+  const fgMuted = fgMutedOverride ?? well.fgMuted
+  const sectionBg = sectionBgOverride ?? well.bg
   const unlocked = unlockedLabel !== undefined
 
   return (
@@ -116,6 +115,7 @@ const styles = StyleSheet.create({
   row: {
     alignItems: 'center',
     borderRadius: 12,
+    boxShadow: WELL_SHADOW,
     flexDirection: 'row',
     gap: 12,
     padding: 12

package/src/ActivityStatSection.tsx

@@ -9,6 +9,11 @@ interface ActivityStats {
 
 interface Props {
   stats: ActivityStats
+  // Optional overrides for the section's and its rows' colors, passed straight through to StatSection and each
+  // StatRow (whose own defaults are the well's, see wellSurface.ts) - for a caller with its own chrome palette.
+  fg?: string
+  fgMuted?: string
+  sectionBg?: string
 }
 
 // The "ACTIVITY" StatSection (Days Played / Day Streak / Best Day Streak) - extracted verbatim
@@ -18,12 +23,12 @@ interface Props {
 // currentDayStreak/bestDayStreak) rather than importing DayStreakState itself, so this component
 // has no dependency on @tastic/achievements at all: any caller's own stats/statsView object that
 // happens to carry these three fields already satisfies it structurally.
-export function ActivityStatSection({ stats }: Props) {
+export function ActivityStatSection({ stats, fg, fgMuted, sectionBg }: Props) {
   return (
-    <StatSection label='ACTIVITY'>
-      <StatRow label='Days Played' value={String(stats.distinctDaysPlayed)} />
-      <StatRow label='Day Streak' value={String(stats.currentDayStreak)} />
-      <StatRow label='Best Day Streak' value={String(stats.bestDayStreak)} />
+    <StatSection label='ACTIVITY' fg={fg} sectionBg={sectionBg}>
+      <StatRow label='Days Played' value={String(stats.distinctDaysPlayed)} fg={fg} fgMuted={fgMuted} />
+      <StatRow label='Day Streak' value={String(stats.currentDayStreak)} fg={fg} fgMuted={fgMuted} />
+      <StatRow label='Best Day Streak' value={String(stats.bestDayStreak)} fg={fg} fgMuted={fgMuted} />
     </StatSection>
   )
 }

package/src/BaseStatsScreen.tsx

@@ -1,8 +1,8 @@
-import { useAutoPaperTheme } from '@rific/auto-paper'
+import { FadingScrollView, useAutoPaperTheme } from '@rific/auto-paper'
 import { Button, IconButton } from '@rific/feedback-press'
 import { useRotation, type ViewRotation } from '@tastic/core'
 import { ReactNode, useState } from 'react'
-import { type Insets, ScrollView, StyleSheet, View } from 'react-native'
+import { type Insets, StyleSheet, View } from 'react-native'
 import { Text } from 'react-native-paper'
 
 import { ConfirmDialog } from './ConfirmDialog'
@@ -101,7 +101,9 @@ export function BaseStatsScreen({ rotation: rotationOverride, title = 'Achieveme
         </Text>
       </View>
 
-      <ScrollView style={styles.scrollView} contentContainerStyle={[styles.content, { paddingBottom: 32 + insets.bottom }]} showsVerticalScrollIndicator={false}>
+      {/* Fades out at an edge while there is more past it, the same cue as the Settings sheet's rows and the
+      Profiles screen's (Jay, 2026-10-16: every scrolling screen alike). */}
+      <FadingScrollView style={styles.scrollView} contentContainerStyle={[styles.content, { paddingBottom: 32 + insets.bottom }]} showsVerticalScrollIndicator={false}>
         {children}
 
         {showReset && (
@@ -109,7 +111,7 @@ export function BaseStatsScreen({ rotation: rotationOverride, title = 'Achieveme
             {resetLabel}
           </Button>
         )}
-      </ScrollView>
+      </FadingScrollView>
 
       <ConfirmDialog
         visible={confirmResetVisible}
@@ -147,7 +149,7 @@ const styles = StyleSheet.create({
   resetButton: {
     marginTop: 16
   },
-  // Bounds the ScrollView to the space `container`'s flex:1 actually gives it - without this, a
+  // Bounds the scroller (FadingScrollView puts it on its outer box) to the space `container`'s flex:1 actually gives it - without this, a
   // ScrollView with only a contentContainerStyle isn't reliably height-constrained on native (it
   // can render at its full unclipped content height instead of the screen's), which leaves the
   // header's back button touch target unreliable underneath it.