@tastic/hud 0.19.0 → 0.20.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,21 +723,21 @@ 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: [
@@ -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-DK3HOZC5.mjs";
 import {
   COMPACT_DIALOG_HEIGHT,
   DialogHeader,

package/dist/{chunk-HGJKNLMD.mjs → chunk-DK3HOZC5.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;
@@ -532,7 +546,7 @@ import { useState as useState4 } from "react";
 import { ScrollView, 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,7 +556,7 @@ 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: [
@@ -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.js

@@ -38,22 +38,22 @@ __export(TriggerGauge_exports, {
 function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, dashWidth, startDeg = DEFAULT_START_DEG, endDeg = startDeg }) {
   const totalDurationMs = MOUNT_DURATION_MS + Math.max(0, segments - 1) * MOUNT_STAGGER_MS;
   const mountProgress = (0, import_react_native_reanimated.useSharedValue)(0);
-  (0, import_react8.useLayoutEffect)(() => {
+  (0, import_react9.useLayoutEffect)(() => {
     mountProgress.value = (0, import_react_native_reanimated.withTiming)(1, { duration: totalDurationMs, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.cubic) });
   }, []);
   const rawSweepDeg = ((endDeg - startDeg) % 360 + 360) % 360;
   const totalSweepDeg = rawSweepDeg === 0 ? 360 : rawSweepDeg;
   const step = segments > 0 ? totalSweepDeg / segments : 0;
-  const centerDeg = (0, import_react8.useCallback)((i) => startDeg + (i + 0.5) * step, [startDeg, step]);
+  const centerDeg = (0, import_react9.useCallback)((i) => startDeg + (i + 0.5) * step, [startDeg, step]);
   const singleSelect = litIndices.length === 1;
   const angleDeg = (0, import_react_native_reanimated.useSharedValue)(centerDeg(litIndices[0] ?? 0));
   const litIndicesKey = [...litIndices].sort((a, b) => a - b).join(",");
-  const [transitionFrom, setTransitionFrom] = (0, import_react8.useState)(litIndices);
+  const [transitionFrom, setTransitionFrom] = (0, import_react9.useState)(litIndices);
   const transitionFromKey = [...transitionFrom].sort((a, b) => a - b).join(",");
-  const lastKeyRef = (0, import_react8.useRef)(litIndicesKey);
-  const lastIndicesRef = (0, import_react8.useRef)(litIndices);
+  const lastKeyRef = (0, import_react9.useRef)(litIndicesKey);
+  const lastIndicesRef = (0, import_react9.useRef)(litIndices);
   const selectionProgress = (0, import_react_native_reanimated.useSharedValue)(1);
-  (0, import_react8.useLayoutEffect)(() => {
+  (0, import_react9.useLayoutEffect)(() => {
     if (litIndicesKey !== lastKeyRef.current) {
       if (singleSelect && lastIndicesRef.current.length === 1) {
         angleDeg.value = (0, import_react_native_reanimated.withTiming)(centerDeg(litIndices[0]), { duration: SELECTION_TRANSITION_DURATION_MS, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.cubic) });
@@ -135,13 +135,13 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_skia.Path, { path: litPath, style: "stroke", strokeWidth: LIT_THICKNESS, strokeCap: "round", color: accentColor, opacity: 1 })
   ] }) });
 }
-var import_react_native_skia, import_core7, import_react8, import_react_native17, import_react_native_reanimated, import_jsx_runtime16, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles14;
+var import_react_native_skia, import_core7, import_react9, import_react_native17, import_react_native_reanimated, import_jsx_runtime16, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles14;
 var init_TriggerGauge = __esm({
   "src/TriggerGauge.tsx"() {
     "use strict";
     import_react_native_skia = require("@shopify/react-native-skia");
     import_core7 = require("@tastic/core");
-    import_react8 = require("react");
+    import_react9 = require("react");
     import_react_native17 = require("react-native");
     import_react_native_reanimated = require("react-native-reanimated");
     import_jsx_runtime16 = require("react/jsx-runtime");
@@ -301,9 +301,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({
@@ -427,7 +428,7 @@ var import_auto_paper9 = 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_native13 = require("react-native");
 var import_react_native_paper9 = require("react-native-paper");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
@@ -436,6 +437,7 @@ var import_react_native_safe_area_context2 = require("react-native-safe-area-con
 var import_auto_paper8 = 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_native11 = require("react-native");
 var import_react_native_paper7 = require("react-native-paper");
 
@@ -589,6 +591,18 @@ function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onC
   const { colors } = (0, import_auto_paper8.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_native11.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;
@@ -625,7 +639,7 @@ var styles8 = import_react_native11.StyleSheet.create({
 
 // src/RotatedFrame.tsx
 var import_core3 = require("@tastic/core");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_native12 = require("react-native");
 var import_react_native_paper8 = require("react-native-paper");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
@@ -636,7 +650,7 @@ function RotatedFrame({ children, rotation: rotationOverride, rotatedSafeArea =
   const window = (0, import_react_native12.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_runtime10.jsx)(import_react_native12.View, { style: [styles9.column, cappedWidth !== void 0 && { maxWidth: cappedWidth }], pointerEvents: passThrough ? "box-none" : void 0, children });
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core3.FakeLandscapeView, { rotation, passThrough, style: styles9.root, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_safe_area_context.SafeAreaInsetsContext.Provider, { value: insets, children: portalHost ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Portal.Host, { children: column }) : column }) });
@@ -654,18 +668,18 @@ var styles9 = import_react_native12.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;
@@ -690,11 +704,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_paper9.useThemeSettings)();
   const expoBlur = (0, import_auto_paper9.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,
@@ -704,7 +718,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_native13.Platform.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
@@ -822,7 +836,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native13.View, { style: [overlayActionStyles.actions, styles10.footer], children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press2.Button, { mode: "contained", onPress: onDismiss, style: overlayActionStyles.actionButtonSingle, buttonColor: colors.primary, textColor: colors.onPrimary, children: "Done" }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)(ConfirmDialog, { visible: !!infoMessage, title: infoMessage?.title ?? "", message: infoMessage?.message ?? "", confirmLabel: "OK", icon: "information-outline", rotation: 0, onConfirm: () => setInfoMessage(null) })
+    /* @__PURE__ */ (0, import_jsx_runtime11.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;
@@ -913,21 +927,21 @@ var styles10 = import_react_native13.StyleSheet.create({
 var import_auto_paper10 = 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_native14 = require("react-native");
 var import_react_native_paper10 = require("react-native-paper");
 var import_jsx_runtime12 = 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_paper10.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_runtime12.jsxs)(import_react_native14.View, { style: [styles11.container, { backgroundColor: bg }], children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native14.View, { style: [styles11.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: onBack }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_paper10.Text, { variant: titleVariant, style: [styles11.title, { color: fg }], children: title })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native14.ScrollView, { style: styles11.scrollView, contentContainerStyle: [styles11.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
@@ -1086,11 +1100,11 @@ var styles13 = import_react_native16.StyleSheet.create({
 });
 
 // src/SkiaGate.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function SkiaGate({ getComponent, componentProps, fallback = null }) {
-  const [Component, setComponent] = (0, import_react7.useState)(null);
-  (0, import_react7.useEffect)(() => {
+  const [Component, setComponent] = (0, import_react8.useState)(null);
+  (0, import_react8.useEffect)(() => {
     let cancelled = false;
     getComponent().then((mod) => {
       if (!cancelled) setComponent(() => mod.default);
@@ -1111,7 +1125,7 @@ function TriggerGaugeHost(props) {
 }
 
 // src/useAutoAlign.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_native18 = require("react-native");
 var EDGE_MARGIN = 12;
 function rotateRect(x, y, width, height, rotation, windowWidth, windowHeight) {
@@ -1124,18 +1138,18 @@ function rotateRect(x, y, width, height, rotation, windowWidth, windowHeight) {
   return { x: cx + newDx - newWidth / 2, y: cy + newDy - newHeight / 2, width: newWidth, height: newHeight };
 }
 function useAutoAlign(open, contentWidth, contentHeight, rotation = 0) {
-  const triggerRef = (0, import_react9.useRef)(null);
+  const triggerRef = (0, import_react10.useRef)(null);
   const { width: windowWidth, height: windowHeight } = (0, import_react_native18.useWindowDimensions)();
-  const [align, setAlign] = (0, import_react9.useState)("center");
-  const [verticalAlign, setVerticalAlign] = (0, import_react9.useState)("below");
-  const [maxHeight, setMaxHeight] = (0, import_react9.useState)(contentHeight);
-  const [measured, setMeasured] = (0, import_react9.useState)(false);
-  const [prevOpen, setPrevOpen] = (0, import_react9.useState)(open);
+  const [align, setAlign] = (0, import_react10.useState)("center");
+  const [verticalAlign, setVerticalAlign] = (0, import_react10.useState)("below");
+  const [maxHeight, setMaxHeight] = (0, import_react10.useState)(contentHeight);
+  const [measured, setMeasured] = (0, import_react10.useState)(false);
+  const [prevOpen, setPrevOpen] = (0, import_react10.useState)(open);
   if (open !== prevOpen) {
     setPrevOpen(open);
     if (open) setMeasured(false);
   }
-  const measure = (0, import_react9.useCallback)(() => {
+  const measure = (0, import_react10.useCallback)(() => {
     triggerRef.current?.measureInWindow((rawX, rawY, rawWidth, rawHeight) => {
       const { x, y, width: triggerWidth, height: triggerHeight } = rotateRect(rawX, rawY, rawWidth, rawHeight, rotation, windowWidth, windowHeight);
       const centerX = x + triggerWidth / 2;
@@ -1152,7 +1166,7 @@ function useAutoAlign(open, contentWidth, contentHeight, rotation = 0) {
       setMeasured(true);
     });
   }, [contentWidth, contentHeight, windowWidth, windowHeight, rotation]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (open) measure();
   }, [open, measure]);
   return { align, maxHeight, measured, triggerRef, verticalAlign };
@@ -1681,13 +1695,13 @@ var styles20 = import_react_native25.StyleSheet.create({
 });
 
 // src/usePopoverHost.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 function usePopoverHost() {
-  const [openId, setOpenId] = (0, import_react10.useState)(null);
-  const toggle = (0, import_react10.useCallback)((id) => {
+  const [openId, setOpenId] = (0, import_react11.useState)(null);
+  const toggle = (0, import_react11.useCallback)((id) => {
     setOpenId((prev) => prev === id ? null : id);
   }, []);
-  const close = (0, import_react10.useCallback)(() => setOpenId(null), []);
+  const close = (0, import_react11.useCallback)(() => setOpenId(null), []);
   return { openId, toggle, close };
 }
 
@@ -1786,7 +1800,7 @@ var styles22 = import_react_native28.StyleSheet.create({
 });
 
 // src/StaggeredWord.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_native29 = require("react-native");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime28 = require("react/jsx-runtime");
@@ -1797,7 +1811,7 @@ function getStaggeredWordDuration(letterCount) {
 }
 function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }) {
   const progress = (0, import_react_native_reanimated2.useSharedValue)(reducedMotion ? 1 : 0);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (reducedMotion) return;
     progress.value = (0, import_react_native_reanimated2.withDelay)(index * STAGGER_MS, (0, import_react_native_reanimated2.withTiming)(1, { duration: LETTER_DURATION_MS, easing: import_react_native_reanimated2.Easing.out(import_react_native_reanimated2.Easing.back(1.5)) }));
   }, [reducedMotion]);
@@ -1827,28 +1841,28 @@ function UpdateDialog({ rotation = 0, autoCheck = true, autoPrompt = true, onErr
 }
 
 // src/useQuitConfirmation.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useQuitConfirmation(hasProgress, onConfirmedBack) {
-  const [confirmVisible, setConfirmVisible] = (0, import_react12.useState)(false);
-  const hasProgressRef = (0, import_react12.useRef)(hasProgress);
-  (0, import_react12.useEffect)(() => {
+  const [confirmVisible, setConfirmVisible] = (0, import_react13.useState)(false);
+  const hasProgressRef = (0, import_react13.useRef)(hasProgress);
+  (0, import_react13.useEffect)(() => {
     hasProgressRef.current = hasProgress;
   });
-  const onConfirmedBackRef = (0, import_react12.useRef)(onConfirmedBack);
-  (0, import_react12.useEffect)(() => {
+  const onConfirmedBackRef = (0, import_react13.useRef)(onConfirmedBack);
+  (0, import_react13.useEffect)(() => {
     onConfirmedBackRef.current = onConfirmedBack;
   });
-  const requestBack = (0, import_react12.useCallback)(() => {
+  const requestBack = (0, import_react13.useCallback)(() => {
     if (hasProgressRef.current()) setConfirmVisible(true);
     else onConfirmedBackRef.current();
   }, []);
-  const cancelBack = (0, import_react12.useCallback)(() => setConfirmVisible(false), []);
+  const cancelBack = (0, import_react13.useCallback)(() => setConfirmVisible(false), []);
   return { confirmVisible, requestBack, cancelBack };
 }
 
 // src/useZoneClampedAlign.ts
 var import_split_screen = require("@tastic/split-screen");
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_react_native30 = require("react-native");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 var EDGE_MARGIN2 = 12;
@@ -1858,13 +1872,13 @@ function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
   const { height: windowHeight } = (0, import_react_native30.useWindowDimensions)();
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   const shouldMeasure = open && auto.measured && zone !== null;
-  const [ownBounds, setOwnBounds] = (0, import_react13.useState)(null);
-  const [prevShouldMeasure, setPrevShouldMeasure] = (0, import_react13.useState)(shouldMeasure);
+  const [ownBounds, setOwnBounds] = (0, import_react14.useState)(null);
+  const [prevShouldMeasure, setPrevShouldMeasure] = (0, import_react14.useState)(shouldMeasure);
   if (shouldMeasure !== prevShouldMeasure) {
     setPrevShouldMeasure(shouldMeasure);
     setOwnBounds(null);
   }
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!shouldMeasure) return;
     auto.triggerRef.current?.measureInWindow((_x, y, _width, height) => {
       const belowShared = zone.zoneSide === "belowShared";

package/dist/index.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.19.0",
+  "version": "0.20.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",
@@ -94,7 +94,7 @@
     "@shopify/react-native-skia": "^2.6.2",
     "@tastic/achievements": "^0.6.0",
     "@tastic/core": "^0.14.0",
-    "@tastic/profile": "^0.12.0",
+    "@tastic/profile": "^0.13.0",
     "@tastic/split-screen": "^0.5.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",

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

@@ -2,7 +2,7 @@ import { 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, ScrollView, 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,7 +95,7 @@ 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>

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