@tastic/hud 0.19.0 → 0.21.0

package/dist/index.mjs

@@ -19,7 +19,7 @@ import {
   UpdateDialog,
   getStaggeredWordDuration,
   useCompactDialog
-} from "./chunk-HGJKNLMD.mjs";
+} from "./chunk-UOA35OWJ.mjs";
 import {
   COMPACT_DIALOG_HEIGHT,
   DialogHeader,
@@ -683,7 +683,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 +721,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 +804,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 +863,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 +881,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,
@@ -911,6 +919,7 @@ export {
   getCpuDifficultyPopoverId,
   getInlineColorPickerContentSize,
   getLabeledDropdownContentHeight,
+  getProfilePopoverId,
   getStaggeredWordDuration,
   isCompactDialogHeight,
   loadSkiaWeb,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.19.0",
+  "version": "0.21.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.12.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

@@ -1,4 +1,4 @@
-import { useAutoPaperTheme } from '@rific/auto-paper'
+import { getBlendedColor, useAutoPaperTheme } from '@rific/auto-paper'
 import type { AchievementCatalogRow } from '@tastic/achievements'
 import { Fragment } from 'react'
 import { StyleSheet } from 'react-native'
@@ -36,9 +36,16 @@ interface Props {
 // AchievementRow's own "badge color is a rendering decision" doc comment - @tastic/achievements'
 // (pending) getAchievementCatalogRows deliberately leaves tierColor unresolved-to-badgeColor for
 // the same reason.
+//
+// The check mark and progress bar (AchievementRow's checkColor) are the tier color in dark mode, and
+// the tier color mixed half with black in light mode. Raw gold (#FFD54F) and silver (#C0C0C8) are
+// 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) {
   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))
 
   return (
     <Fragment>
@@ -46,7 +53,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={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} />
       ))}
     </Fragment>
   )

package/src/AchievementRow.tsx

@@ -21,10 +21,10 @@ interface Props {
   // timestamp - this component has no opinion on date formatting or streak conventions, which vary
   // per app (see LightCycles' own calendar-day-difference convention in its achievements.tsx).
   unlockedLabel?: string
-  // Color for the unlocked check-circle icon/badge glyph - typically the same tier color passed to
-  // badgeColor, kept as its own prop rather than reused internally so a caller can special-case it
-  // independently if its own tier scheme ever needs to (matching LightCycles' own call site, which
-  // does pass the identical value to both today).
+  // Color for the unlocked check-circle icon and the locked progress bar - defaults to badgeColor.
+  // Its own prop so a caller can tune it apart from the badge: AchievementCatalogSection passes the
+  // tier color darkened in light mode, where raw gold and silver barely show on white, while the badge
+  // keeps the true tier color behind its black glyph.
   checkColor?: string
   // Only rendered while locked (unlockedLabel is undefined) - 0..1.
   progress?: number

package/src/BaseSettingsDialog.tsx

@@ -400,7 +400,9 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
           </View>
         </Dialog>
         <ConfirmDialog visible={!!updateManifest} title='Update Available' message={updateManifestDate ? `Released ${updateManifestDate.toLocaleDateString()} at ${updateManifestDate.toLocaleTimeString()}` : ''} confirmLabel='Restart' cancelLabel='Later' icon='update' rotation={0} onConfirm={() => respondToUpdateConfirm(true)} onCancel={() => respondToUpdateConfirm(false)} />
-        <ConfirmDialog visible={!!infoMessage} title={infoMessage?.title ?? ''} message={infoMessage?.message ?? ''} confirmLabel='OK' icon='information-outline' rotation={0} onConfirm={() => setInfoMessage(null)} />
+        {/* onCancel with no cancelLabel adds no button: it's only so Android back dismisses the
+            message the way OK does (ConfirmDialog consumes back either way). */}
+        <ConfirmDialog visible={!!infoMessage} title={infoMessage?.title ?? ''} message={infoMessage?.message ?? ''} confirmLabel='OK' icon='information-outline' rotation={0} onConfirm={() => setInfoMessage(null)} onCancel={() => setInfoMessage(null)} />
       </RotatedFrame>
     </Portal>
   )

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 { ScrollView, StyleSheet, View } from 'react-native'
+import { type Insets, StyleSheet, View } from 'react-native'
 import { Text } from 'react-native-paper'
 
 import { ConfirmDialog } from './ConfirmDialog'
@@ -30,6 +30,14 @@ interface Props {
   // caller that wants something else entirely.
   titleVariant?: MD3TextVariant
   onBack: () => void
+  // The header arrow's accessibility label, default 'Back' (same name and default as
+  // CornerActionButtons' own backLabel). Without one, VoiceOver and TalkBack announce only "button".
+  backLabel?: string
+  // Opt-in extra touch area on the header arrow, forwarded as its IconButton's own hitSlop, exactly
+  // like CornerActionButtons' hitSlop: the target is the 40pt box, so 4 makes it 48pt, and nothing
+  // visible moves. Needs @rific/feedback-press 0.13.0 or later (ignored on older versions, and on
+  // web). Omitted means no slop, as before.
+  hitSlop?: number | Insets
   insets: { top: number; left: number; bottom: number; right: number }
   // Optional, and always passed as a pair - a caller with nothing resettable (or that deliberately
   // doesn't want a reset action on this screen) omits both rather than one alone. Confirmation copy
@@ -70,7 +78,7 @@ interface Props {
 // convention. `children` is the seam for whatever isn't shared: this component has no opinion on
 // what a "stat" is or how achievements are catalogued - see StatRow/StatSection/AchievementRow for
 // the smaller presentational pieces built to go inside it.
-export function BaseStatsScreen({ rotation: rotationOverride, title = 'Achievements', titleVariant = 'headlineSmall', onBack, insets, onReset, resetLabel = 'Reset All Stats', resetConfirmTitle = 'Reset Everything?', resetConfirmBody = 'This permanently erases all stats and achievements. This cannot be undone.', fg: fgOverride, bg: bgOverride, children }: Props) {
+export function BaseStatsScreen({ rotation: rotationOverride, title = 'Achievements', titleVariant = 'headlineSmall', onBack, backLabel = 'Back', hitSlop, insets, onReset, resetLabel = 'Reset All Stats', resetConfirmTitle = 'Reset Everything?', resetConfirmBody = 'This permanently erases all stats and achievements. This cannot be undone.', fg: fgOverride, bg: bgOverride, children }: Props) {
   const { dark, colors } = useAutoPaperTheme()
   const ambientRotation = useRotation()
   const rotation = rotationOverride ?? ambientRotation
@@ -87,13 +95,15 @@ export function BaseStatsScreen({ rotation: rotationOverride, title = 'Achieveme
   return (
     <View style={[styles.container, { backgroundColor: bg }]}>
       <View style={[styles.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }]}>
-        <IconButton icon='arrow-left' iconColor={fg} size={24} onPress={onBack} />
+        <IconButton icon='arrow-left' iconColor={fg} size={24} hitSlop={hitSlop} onPress={onBack} accessibilityLabel={backLabel} />
         <Text variant={titleVariant} style={[styles.title, { color: fg }]}>
           {title}
         </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 && (
@@ -101,7 +111,7 @@ export function BaseStatsScreen({ rotation: rotationOverride, title = 'Achieveme
             {resetLabel}
           </Button>
         )}
-      </ScrollView>
+      </FadingScrollView>
 
       <ConfirmDialog
         visible={confirmResetVisible}
@@ -139,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.

package/src/ConfirmDialog.tsx

@@ -1,8 +1,8 @@
 import { useAutoPaperTheme } from '@rific/auto-paper'
 import { Button } from '@rific/feedback-press'
 import { toRotationStyle, type ViewRotation } from '@tastic/core'
-import { type ReactNode } from 'react'
-import { StyleSheet, View } from 'react-native'
+import { type ReactNode, useEffect, useRef } from 'react'
+import { BackHandler, StyleSheet, View } from 'react-native'
 import { Portal, Text } from 'react-native-paper'
 
 import { DialogHeader } from './DialogHeader'
@@ -43,6 +43,29 @@ export function ConfirmDialog({ visible, title, message, confirmLabel, cancelLab
   const { colors } = useAutoPaperTheme()
   const { fg } = useOverlayCardColors()
   const { compact, onLayout } = useCompactDialog(rotation)
+
+  // Android's back means Cancel while the dialog is up. It's a Portal over a View, not a Modal, so
+  // nothing else catches the press: it would fall through to whatever is underneath (the router, or a
+  // screen's own back listener) and close that screen with the dialog still up. RN calls the newest
+  // listener first, and this one is added when the dialog opens. Always consumed, even with no
+  // onCancel: a dialog with only a confirm button has to be answered, not backed out from under.
+  //
+  // onCancel goes through a ref (kept current after every commit, the useQuitConfirmation idiom) so the
+  // listener is added once per opening. Callers pass a new arrow each render, and re-adding the
+  // listener on each would move it to the top of the stack, ahead of anything opened above it since.
+  const onCancelRef = useRef(onCancel)
+  useEffect(() => {
+    onCancelRef.current = onCancel
+  })
+  useEffect(() => {
+    if (!visible) return
+    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+      onCancelRef.current?.()
+      return true
+    })
+    return () => subscription.remove()
+  }, [visible])
+
   if (!visible) return null
 
   const accent = destructive ? colors.danger : colors.primary