@tastic/hud 0.19.0 → 0.21.0

package/README.md

@@ -75,7 +75,10 @@ corner of the screen.
   settings sheet, an achievements/stats screen, and a plain confirm-or-cancel dialog, each factored
   out after being independently copied into several games. See Rotation below for how each of these
   (plus `SectionedDropdown`/`InlineColorPicker`) handles rotating inside a `@tastic/split-screen`
-  zone.
+  zone. `BaseStatsScreen`'s header arrow is labeled 'Back' for screen readers (`backLabel` to change
+  it) and takes the same opt-in `hitSlop` as `CornerActionButtons`. On Android, back while a
+  `ConfirmDialog` is open calls its `onCancel` and goes no further (with no `onCancel`, it does
+  nothing), so it never reaches the screen underneath.
 - **`OverlayCard`** / **`OverlayBackdrop`** / **`useOverlayCardColors`** - the card and dim behind
   `ConfirmDialog` and the how-to-play guide, in the app's own theme colors and blurred when the
   player's Blur setting allows it. See Overlay cards below.
@@ -470,7 +473,9 @@ row. Returns a `Fragment`, not a `View`: every call site renders the heading and
 siblings inside `BaseStatsScreen`'s own gap-spaced `ScrollView` content, and a wrapping container
 here would double up that spacing. Resolves each row's locked-vs-unlocked `badgeColor` itself
 (`row.tierColor` once `row.unlockedAt` is set, else the locked color) rather than upstream, since
-`getAchievementCatalogRows` deliberately leaves that choice to whatever renders the rows.
+`getAchievementCatalogRows` deliberately leaves that choice to whatever renders the rows. In light
+mode the check mark and progress bar are the tier color mixed half with black, since raw gold and
+silver barely show on a white screen; the badge keeps the true tier color.
 
 ```ts
 interface AchievementCatalogSectionProps {

package/dist/chrome/index.d.mts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { AchievementCatalogRow } from '@tastic/achievements';
 import { ViewRotation } from '@tastic/core';
-import { StyleProp, ViewStyle, Insets, LayoutChangeEvent, TextStyle } from 'react-native';
+import { Insets, StyleProp, ViewStyle, LayoutChangeEvent, TextStyle } from 'react-native';
 
 interface Props$7 {
     rows: AchievementCatalogRow[];
@@ -65,6 +65,8 @@ interface Props$4 {
     title?: string;
     titleVariant?: MD3TextVariant;
     onBack: () => void;
+    backLabel?: string;
+    hitSlop?: number | Insets;
     insets: {
         top: number;
         left: number;
@@ -79,7 +81,7 @@ interface Props$4 {
     bg?: string;
     children: ReactNode;
 }
-declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, children }: Props$4): react.JSX.Element;
+declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVariant, onBack, backLabel, hitSlop, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, children }: Props$4): react.JSX.Element;
 
 interface ConfirmDialogProps {
     visible: boolean;

package/dist/chrome/index.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { AchievementCatalogRow } from '@tastic/achievements';
 import { ViewRotation } from '@tastic/core';
-import { StyleProp, ViewStyle, Insets, LayoutChangeEvent, TextStyle } from 'react-native';
+import { Insets, StyleProp, ViewStyle, LayoutChangeEvent, TextStyle } from 'react-native';
 
 interface Props$7 {
     rows: AchievementCatalogRow[];
@@ -65,6 +65,8 @@ interface Props$4 {
     title?: string;
     titleVariant?: MD3TextVariant;
     onBack: () => void;
+    backLabel?: string;
+    hitSlop?: number | Insets;
     insets: {
         top: number;
         left: number;
@@ -79,7 +81,7 @@ interface Props$4 {
     bg?: string;
     children: ReactNode;
 }
-declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, children }: Props$4): react.JSX.Element;
+declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVariant, onBack, backLabel, hitSlop, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, children }: Props$4): react.JSX.Element;
 
 interface ConfirmDialogProps {
     visible: boolean;

package/dist/chrome/index.js

@@ -141,9 +141,10 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 function AchievementCatalogSection({ rows, label = "ALL ACHIEVEMENTS", fg, fgMuted: fgMutedOverride }) {
   const { dark } = (0, import_auto_paper2.useAutoPaperTheme)();
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  const tierAccent = (tierColor) => dark ? tierColor : (0, import_auto_paper2.getBlendedColor)("#000000", tierColor, 0.5);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "labelMedium", style: [styles2.label, { color: fgMuted, fontFamily: MONO_FONT }], children: label }),
-    rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AchievementRow, { icon: row.icon, title: row.title, description: row.description, badgeColor: row.unlockedAt !== void 0 ? row.tierColor : LOCKED_BADGE_COLOR, checkColor: row.tierColor, unlockedLabel: row.unlockedLabel, progress: row.progress, deviceMarker: row.deviceMarker, fg, fgMuted: fgMutedOverride }, row.id))
+    rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AchievementRow, { icon: row.icon, title: row.title, description: row.description, badgeColor: row.unlockedAt !== void 0 ? row.tierColor : LOCKED_BADGE_COLOR, checkColor: tierAccent(row.tierColor), unlockedLabel: row.unlockedLabel, progress: row.progress, deviceMarker: row.deviceMarker, fg, fgMuted: fgMutedOverride }, row.id))
   ] });
 }
 var styles2 = import_react_native3.StyleSheet.create({
@@ -223,7 +224,7 @@ var import_auto_paper8 = require("@rific/auto-paper");
 var import_feedback_press2 = require("@rific/feedback-press");
 var import_updater = require("@rific/updater");
 var import_core4 = require("@tastic/core");
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_native12 = require("react-native");
 var import_react_native_paper8 = require("react-native-paper");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
@@ -232,6 +233,7 @@ var import_react_native_safe_area_context2 = require("react-native-safe-area-con
 var import_auto_paper7 = require("@rific/auto-paper");
 var import_feedback_press = require("@rific/feedback-press");
 var import_core2 = require("@tastic/core");
+var import_react3 = require("react");
 var import_react_native10 = require("react-native");
 var import_react_native_paper6 = require("react-native-paper");
 
@@ -385,6 +387,18 @@ function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onC
   const { colors } = (0, import_auto_paper7.useAutoPaperTheme)();
   const { fg } = useOverlayCardColors();
   const { compact, onLayout } = useCompactDialog(rotation);
+  const onCancelRef = (0, import_react3.useRef)(onCancel);
+  (0, import_react3.useEffect)(() => {
+    onCancelRef.current = onCancel;
+  });
+  (0, import_react3.useEffect)(() => {
+    if (!visible) return;
+    const subscription = import_react_native10.BackHandler.addEventListener("hardwareBackPress", () => {
+      onCancelRef.current?.();
+      return true;
+    });
+    return () => subscription.remove();
+  }, [visible]);
   if (!visible) return null;
   const accent = destructive ? colors.danger : colors.primary;
   const onAccent = destructive ? colors.onDanger : colors.onPrimary;
@@ -421,7 +435,7 @@ var styles7 = import_react_native10.StyleSheet.create({
 
 // src/RotatedFrame.tsx
 var import_core3 = require("@tastic/core");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_native11 = require("react-native");
 var import_react_native_paper7 = require("react-native-paper");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
@@ -432,7 +446,7 @@ function RotatedFrame({ children, rotation: rotationOverride, rotatedSafeArea =
   const window = (0, import_react_native11.useWindowDimensions)();
   const { width, height } = (0, import_core3.rotateDimensions)(window.width, window.height, rotation);
   const rawInsets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
-  const insets = (0, import_react3.useMemo)(() => rotatedSafeArea ? (0, import_core3.rotateInsets)(rawInsets, rotation) : rawInsets, [rotatedSafeArea, rawInsets, rotation]);
+  const insets = (0, import_react4.useMemo)(() => rotatedSafeArea ? (0, import_core3.rotateInsets)(rawInsets, rotation) : rawInsets, [rotatedSafeArea, rawInsets, rotation]);
   const cappedWidth = maxContentWidth !== void 0 && width > height ? maxContentWidth : void 0;
   const column = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native11.View, { style: [styles8.column, cappedWidth !== void 0 && { maxWidth: cappedWidth }], pointerEvents: passThrough ? "box-none" : void 0, children });
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.FakeLandscapeView, { rotation, passThrough, style: styles8.root, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_safe_area_context.SafeAreaInsetsContext.Provider, { value: insets, children: portalHost ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper7.Portal.Host, { children: column }) : column }) });
@@ -450,18 +464,18 @@ var styles8 = import_react_native11.StyleSheet.create({
 });
 
 // src/useUpdateConfirmBridge.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useUpdateConfirmBridge() {
-  const [manifest, setManifest] = (0, import_react4.useState)(null);
-  const resolveRef = (0, import_react4.useRef)(null);
-  const onConfirm = (0, import_react4.useCallback)(
+  const [manifest, setManifest] = (0, import_react5.useState)(null);
+  const resolveRef = (0, import_react5.useRef)(null);
+  const onConfirm = (0, import_react5.useCallback)(
     (next) => new Promise((resolve) => {
       resolveRef.current = resolve;
       setManifest(next);
     }),
     []
   );
-  const respond = (0, import_react4.useCallback)((confirmed) => {
+  const respond = (0, import_react5.useCallback)((confirmed) => {
     setManifest(null);
     resolveRef.current?.(confirmed);
     resolveRef.current = null;
@@ -486,11 +500,11 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   const isTouchPrimary = (0, import_core4.useIsTouchPrimaryDevice)();
   const { settings: hapticSettings, set: setHapticSettings } = (0, import_feedback_press2.useHapticSettings)();
   const { settings: soundSettings, set: setSoundSettings } = (0, import_feedback_press2.useSoundSettings)();
-  const sound = (0, import_react5.useContext)(import_feedback_press2.SoundContext);
+  const sound = (0, import_react6.useContext)(import_feedback_press2.SoundContext);
   const { forceShort: forceHapticFeedback } = (0, import_feedback_press2.useVibration)();
   const { settings: themeSettings, set: setThemeSettings } = (0, import_auto_paper8.useThemeSettings)();
   const expoBlur = (0, import_auto_paper8.useBlurModule)();
-  const [infoMessage, setInfoMessage] = (0, import_react5.useState)(null);
+  const [infoMessage, setInfoMessage] = (0, import_react6.useState)(null);
   const { manifest: updateManifest, onConfirm: onUpdateConfirm, respond: respondToUpdateConfirm } = useUpdateConfirmBridge();
   const { check, checking, updateReady } = (0, import_updater.useUpdater)({
     autoCheck: false,
@@ -500,7 +514,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
     onInfo: (title, message) => setInfoMessage({ title, message })
   });
   const updateManifestDate = updateManifest ? new Date(updateManifest.createdAt) : null;
-  const [opened, setOpened] = (0, import_react5.useState)(visible);
+  const [opened, setOpened] = (0, import_react6.useState)(visible);
   if (visible && !opened) setOpened(true);
   const showLockOrientation = isTouchPrimary && lockOrientation !== void 0 && onLockOrientationChange !== void 0;
   const showEdgeGuard = import_react_native12.Platform.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
@@ -618,7 +632,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [overlayActionStyles.actions, styles9.footer], children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press2.Button, { mode: "contained", onPress: onDismiss, style: overlayActionStyles.actionButtonSingle, buttonColor: colors.primary, textColor: colors.onPrimary, children: "Done" }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ConfirmDialog, { visible: !!infoMessage, title: infoMessage?.title ?? "", message: infoMessage?.message ?? "", confirmLabel: "OK", icon: "information-outline", rotation: 0, onConfirm: () => setInfoMessage(null) })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ConfirmDialog, { visible: !!infoMessage, title: infoMessage?.title ?? "", message: infoMessage?.message ?? "", confirmLabel: "OK", icon: "information-outline", rotation: 0, onConfirm: () => setInfoMessage(null), onCancel: () => setInfoMessage(null) })
   ] }) });
 }
 var SHEET_GUTTER = 24;
@@ -709,24 +723,24 @@ var styles9 = import_react_native12.StyleSheet.create({
 var import_auto_paper9 = require("@rific/auto-paper");
 var import_feedback_press3 = require("@rific/feedback-press");
 var import_core5 = require("@tastic/core");
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_native13 = require("react-native");
 var import_react_native_paper9 = require("react-native-paper");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-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 }) {
+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 }) {
   const { dark, colors } = (0, import_auto_paper9.useAutoPaperTheme)();
   const ambientRotation = (0, import_core5.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
-  const [confirmResetVisible, setConfirmResetVisible] = (0, import_react6.useState)(false);
+  const [confirmResetVisible, setConfirmResetVisible] = (0, import_react7.useState)(false);
   const showReset = !!onReset;
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: [styles10.container, { backgroundColor: bg }], children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: [styles10.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: onBack }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper9.Text, { variant: titleVariant, style: [styles10.title, { color: fg }], children: title })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.ScrollView, { style: styles10.scrollView, contentContainerStyle: [styles10.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_auto_paper9.FadingScrollView, { style: styles10.scrollView, contentContainerStyle: [styles10.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
       children,
       showReset && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.Button, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles10.resetButton, children: resetLabel })
     ] }),
@@ -767,7 +781,7 @@ var styles10 = import_react_native13.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.
@@ -824,7 +838,7 @@ var styles12 = import_react_native15.StyleSheet.create({
 });
 
 // src/StaggeredWord.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_native16 = require("react-native");
 var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -835,7 +849,7 @@ function getStaggeredWordDuration(letterCount) {
 }
 function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }) {
   const progress = (0, import_react_native_reanimated.useSharedValue)(reducedMotion ? 1 : 0);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (reducedMotion) return;
     progress.value = (0, import_react_native_reanimated.withDelay)(index * STAGGER_MS, (0, import_react_native_reanimated.withTiming)(1, { duration: LETTER_DURATION_MS, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.back(1.5)) }));
   }, [reducedMotion]);

package/dist/chrome/index.mjs

@@ -16,7 +16,7 @@ import {
   UpdateDialog,
   getStaggeredWordDuration,
   useCompactDialog
-} from "../chunk-HGJKNLMD.mjs";
+} from "../chunk-UOA35OWJ.mjs";
 import {
   COMPACT_DIALOG_HEIGHT,
   DialogHeader,

package/dist/{chunk-HGJKNLMD.mjs → chunk-UOA35OWJ.mjs}

@@ -81,7 +81,7 @@ import { Platform } from "react-native";
 var MONO_FONT = Platform.select({ ios: "Menlo", android: "monospace", default: "monospace" });
 
 // src/AchievementCatalogSection.tsx
-import { useAutoPaperTheme as useAutoPaperTheme2 } from "@rific/auto-paper";
+import { getBlendedColor, useAutoPaperTheme as useAutoPaperTheme2 } from "@rific/auto-paper";
 import { Fragment } from "react";
 import { StyleSheet as StyleSheet2 } from "react-native";
 import { Text as Text2 } from "react-native-paper";
@@ -89,9 +89,10 @@ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function AchievementCatalogSection({ rows, label = "ALL ACHIEVEMENTS", fg, fgMuted: fgMutedOverride }) {
   const { dark } = useAutoPaperTheme2();
   const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  const tierAccent = (tierColor) => dark ? tierColor : getBlendedColor("#000000", tierColor, 0.5);
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx2(Text2, { variant: "labelMedium", style: [styles2.label, { color: fgMuted, fontFamily: MONO_FONT }], children: label }),
-    rows.map((row) => /* @__PURE__ */ jsx2(AchievementRow, { icon: row.icon, title: row.title, description: row.description, badgeColor: row.unlockedAt !== void 0 ? row.tierColor : LOCKED_BADGE_COLOR, checkColor: row.tierColor, unlockedLabel: row.unlockedLabel, progress: row.progress, deviceMarker: row.deviceMarker, fg, fgMuted: fgMutedOverride }, row.id))
+    rows.map((row) => /* @__PURE__ */ jsx2(AchievementRow, { icon: row.icon, title: row.title, description: row.description, badgeColor: row.unlockedAt !== void 0 ? row.tierColor : LOCKED_BADGE_COLOR, checkColor: tierAccent(row.tierColor), unlockedLabel: row.unlockedLabel, progress: row.progress, deviceMarker: row.deviceMarker, fg, fgMuted: fgMutedOverride }, row.id))
   ] });
 }
 var styles2 = StyleSheet2.create({
@@ -187,13 +188,26 @@ function useCompactDialog(rotation = 0) {
 import { useAutoPaperTheme as useAutoPaperTheme5 } from "@rific/auto-paper";
 import { Button } from "@rific/feedback-press";
 import { toRotationStyle } from "@tastic/core";
-import { StyleSheet as StyleSheet5, View as View4 } from "react-native";
+import { useEffect, useRef } from "react";
+import { BackHandler, StyleSheet as StyleSheet5, View as View4 } from "react-native";
 import { Portal, Text as Text5 } from "react-native-paper";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
   const { colors } = useAutoPaperTheme5();
   const { fg } = useOverlayCardColors();
   const { compact, onLayout } = useCompactDialog(rotation);
+  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;
   const onAccent = destructive ? colors.onDanger : colors.onPrimary;
@@ -269,10 +283,10 @@ import { Icon as Icon2, Portal as Portal3, Text as Text6 } from "react-native-pa
 import { useSafeAreaInsets as useSafeAreaInsets2 } from "react-native-safe-area-context";
 
 // src/useUpdateConfirmBridge.ts
-import { useCallback as useCallback2, useRef, useState as useState2 } from "react";
+import { useCallback as useCallback2, useRef as useRef2, useState as useState2 } from "react";
 function useUpdateConfirmBridge() {
   const [manifest, setManifest] = useState2(null);
-  const resolveRef = useRef(null);
+  const resolveRef = useRef2(null);
   const onConfirm = useCallback2(
     (next) => new Promise((resolve) => {
       resolveRef.current = resolve;
@@ -437,7 +451,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
       /* @__PURE__ */ jsx8(View6, { style: [overlayActionStyles.actions, styles7.footer], children: /* @__PURE__ */ jsx8(Button2, { mode: "contained", onPress: onDismiss, style: overlayActionStyles.actionButtonSingle, buttonColor: colors.primary, textColor: colors.onPrimary, children: "Done" }) })
     ] }),
     /* @__PURE__ */ jsx8(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) }),
-    /* @__PURE__ */ jsx8(ConfirmDialog, { visible: !!infoMessage, title: infoMessage?.title ?? "", message: infoMessage?.message ?? "", confirmLabel: "OK", icon: "information-outline", rotation: 0, onConfirm: () => setInfoMessage(null) })
+    /* @__PURE__ */ jsx8(ConfirmDialog, { visible: !!infoMessage, title: infoMessage?.title ?? "", message: infoMessage?.message ?? "", confirmLabel: "OK", icon: "information-outline", rotation: 0, onConfirm: () => setInfoMessage(null), onCancel: () => setInfoMessage(null) })
   ] }) });
 }
 var SHEET_GUTTER = 24;
@@ -525,14 +539,14 @@ var styles7 = StyleSheet7.create({
 });
 
 // src/BaseStatsScreen.tsx
-import { useAutoPaperTheme as useAutoPaperTheme7 } from "@rific/auto-paper";
+import { FadingScrollView as FadingScrollView2, useAutoPaperTheme as useAutoPaperTheme7 } from "@rific/auto-paper";
 import { Button as Button3, IconButton } from "@rific/feedback-press";
 import { useRotation as useRotation3 } from "@tastic/core";
 import { useState as useState4 } from "react";
-import { ScrollView, StyleSheet as StyleSheet8, View as View7 } from "react-native";
+import { StyleSheet as StyleSheet8, View as View7 } from "react-native";
 import { Text as Text7 } from "react-native-paper";
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-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 }) {
+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 }) {
   const { dark, colors } = useAutoPaperTheme7();
   const ambientRotation = useRotation3();
   const rotation = rotationOverride ?? ambientRotation;
@@ -542,10 +556,10 @@ function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", t
   const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
   return /* @__PURE__ */ jsxs8(View7, { style: [styles8.container, { backgroundColor: bg }], children: [
     /* @__PURE__ */ jsxs8(View7, { style: [styles8.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
-      /* @__PURE__ */ jsx9(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: onBack }),
+      /* @__PURE__ */ jsx9(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
       /* @__PURE__ */ jsx9(Text7, { variant: titleVariant, style: [styles8.title, { color: fg }], children: title })
     ] }),
-    /* @__PURE__ */ jsxs8(ScrollView, { style: styles8.scrollView, contentContainerStyle: [styles8.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+    /* @__PURE__ */ jsxs8(FadingScrollView2, { style: styles8.scrollView, contentContainerStyle: [styles8.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
       children,
       showReset && /* @__PURE__ */ jsx9(Button3, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles8.resetButton, children: resetLabel })
     ] }),
@@ -586,7 +600,7 @@ var styles8 = StyleSheet8.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.
@@ -643,7 +657,7 @@ var styles10 = StyleSheet10.create({
 });
 
 // src/StaggeredWord.tsx
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 import { StyleSheet as StyleSheet11, View as View9 } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming } from "react-native-reanimated";
 import { jsx as jsx12 } from "react/jsx-runtime";
@@ -654,7 +668,7 @@ function getStaggeredWordDuration(letterCount) {
 }
 function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }) {
   const progress = useSharedValue(reducedMotion ? 1 : 0);
-  useEffect(() => {
+  useEffect2(() => {
     if (reducedMotion) return;
     progress.value = withDelay(index * STAGGER_MS, withTiming(1, { duration: LETTER_DURATION_MS, easing: Easing.out(Easing.back(1.5)) }));
   }, [reducedMotion]);

package/dist/index.d.mts

@@ -178,6 +178,7 @@ declare function LabeledDropdown<T extends string>({ id, host, options, value, o
 declare function loadSkiaWeb(): Promise<void>;
 
 declare function getColorPopoverId(idPrefix: string): string;
+declare function getProfilePopoverId(idPrefix: string): string;
 declare function getCpuDifficultyPopoverId(idPrefix: string): string;
 interface PlayerSetupPanelProps<C extends string = string> {
     idPrefix: string;
@@ -189,6 +190,8 @@ interface PlayerSetupPanelProps<C extends string = string> {
     swatches: SeedColor[];
     takenColor?: string;
     allowSwapTaken?: boolean;
+    colorCaption?: string;
+    showColor?: boolean;
     colorAlignOverride?: AlignResult;
     colorRotation?: PopoverRotation;
     isHuman: boolean;
@@ -207,11 +210,10 @@ interface PlayerSetupPanelProps<C extends string = string> {
     cpuDifficulty?: C;
     cpuDifficultyOptions?: LabeledDropdownOption<C>[];
     onCpuDifficultyChange?: (value: C) => void;
-    cpuDifficultyAlignOverride?: AlignResult;
     humanIcon?: string;
     cpuIcon?: string;
 }
-declare function PlayerSetupPanel<C extends string = string>({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, cpuDifficultyAlignOverride, humanIcon, cpuIcon }: PlayerSetupPanelProps<C>): react.JSX.Element;
+declare function PlayerSetupPanel<C extends string = string>({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorCaption, showColor, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, humanIcon, cpuIcon }: PlayerSetupPanelProps<C>): react.JSX.Element;
 
 interface Props$3 {
     visible: boolean;
@@ -277,4 +279,4 @@ declare function useQuitConfirmation(hasProgress: () => boolean, onConfirmedBack
 
 declare function useZoneClampedAlign(open: boolean, contentWidth: number, contentHeight: number, rotation?: PopoverRotation): ReturnType<typeof useAutoAlign>;
 
-export { AchievementUnlockList, type AchievementUnlockOwner, type AlignResult, ControlSchemePicker, type ControlSchemePickerProps, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, PlayerSetupPanel, type PlayerSetupPanelProps, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, type QuitConfirmation, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, TriggerGaugeHost, type TriggerGaugeProps, type UnlockedAchievement, getColorPopoverId, getCpuDifficultyPopoverId, getInlineColorPickerContentSize, getLabeledDropdownContentHeight, loadSkiaWeb, useAutoAlign, usePopoverHost, useQuitConfirmation, useZoneClampedAlign };
+export { AchievementUnlockList, type AchievementUnlockOwner, type AlignResult, ControlSchemePicker, type ControlSchemePickerProps, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, PlayerSetupPanel, type PlayerSetupPanelProps, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, type QuitConfirmation, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, TriggerGaugeHost, type TriggerGaugeProps, type UnlockedAchievement, getColorPopoverId, getCpuDifficultyPopoverId, getInlineColorPickerContentSize, getLabeledDropdownContentHeight, getProfilePopoverId, loadSkiaWeb, useAutoAlign, usePopoverHost, useQuitConfirmation, useZoneClampedAlign };

package/dist/index.d.ts

@@ -178,6 +178,7 @@ declare function LabeledDropdown<T extends string>({ id, host, options, value, o
 declare function loadSkiaWeb(): Promise<void>;
 
 declare function getColorPopoverId(idPrefix: string): string;
+declare function getProfilePopoverId(idPrefix: string): string;
 declare function getCpuDifficultyPopoverId(idPrefix: string): string;
 interface PlayerSetupPanelProps<C extends string = string> {
     idPrefix: string;
@@ -189,6 +190,8 @@ interface PlayerSetupPanelProps<C extends string = string> {
     swatches: SeedColor[];
     takenColor?: string;
     allowSwapTaken?: boolean;
+    colorCaption?: string;
+    showColor?: boolean;
     colorAlignOverride?: AlignResult;
     colorRotation?: PopoverRotation;
     isHuman: boolean;
@@ -207,11 +210,10 @@ interface PlayerSetupPanelProps<C extends string = string> {
     cpuDifficulty?: C;
     cpuDifficultyOptions?: LabeledDropdownOption<C>[];
     onCpuDifficultyChange?: (value: C) => void;
-    cpuDifficultyAlignOverride?: AlignResult;
     humanIcon?: string;
     cpuIcon?: string;
 }
-declare function PlayerSetupPanel<C extends string = string>({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, cpuDifficultyAlignOverride, humanIcon, cpuIcon }: PlayerSetupPanelProps<C>): react.JSX.Element;
+declare function PlayerSetupPanel<C extends string = string>({ idPrefix, host, label, labelFontFamily, color, onColorChange, swatches, takenColor, allowSwapTaken, colorCaption, showColor, colorAlignOverride, colorRotation, isHuman, secondPicker, secondPickerId, ready, onToggleReady, dark, showReadyButton, profiles, selectedProfileId, takenProfileId, guestLabel, onProfileSelect, onManageProfiles, cpuDifficulty, cpuDifficultyOptions, onCpuDifficultyChange, humanIcon, cpuIcon }: PlayerSetupPanelProps<C>): react.JSX.Element;
 
 interface Props$3 {
     visible: boolean;
@@ -277,4 +279,4 @@ declare function useQuitConfirmation(hasProgress: () => boolean, onConfirmedBack
 
 declare function useZoneClampedAlign(open: boolean, contentWidth: number, contentHeight: number, rotation?: PopoverRotation): ReturnType<typeof useAutoAlign>;
 
-export { AchievementUnlockList, type AchievementUnlockOwner, type AlignResult, ControlSchemePicker, type ControlSchemePickerProps, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, PlayerSetupPanel, type PlayerSetupPanelProps, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, type QuitConfirmation, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, TriggerGaugeHost, type TriggerGaugeProps, type UnlockedAchievement, getColorPopoverId, getCpuDifficultyPopoverId, getInlineColorPickerContentSize, getLabeledDropdownContentHeight, loadSkiaWeb, useAutoAlign, usePopoverHost, useQuitConfirmation, useZoneClampedAlign };
+export { AchievementUnlockList, type AchievementUnlockOwner, type AlignResult, ControlSchemePicker, type ControlSchemePickerProps, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, PlayerSetupPanel, type PlayerSetupPanelProps, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, type QuitConfirmation, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, TriggerGaugeHost, type TriggerGaugeProps, type UnlockedAchievement, getColorPopoverId, getCpuDifficultyPopoverId, getInlineColorPickerContentSize, getLabeledDropdownContentHeight, getProfilePopoverId, loadSkiaWeb, useAutoAlign, usePopoverHost, useQuitConfirmation, useZoneClampedAlign };