@tastic/hud 0.8.1 → 0.8.2

package/dist/index.d.mts

@@ -57,11 +57,9 @@ interface Props$b {
     resetConfirmBody?: string;
     fg?: string;
     bg?: string;
-    cardBg?: string;
-    accentColor?: string;
     children: ReactNode;
 }
-declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, cardBg: cardBgOverride, accentColor: accentColorOverride, children }: Props$b): react.JSX.Element;
+declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, children }: Props$b): react.JSX.Element;
 
 interface ConfirmDialogProps {
     visible: boolean;

package/dist/index.d.ts

@@ -57,11 +57,9 @@ interface Props$b {
     resetConfirmBody?: string;
     fg?: string;
     bg?: string;
-    cardBg?: string;
-    accentColor?: string;
     children: ReactNode;
 }
-declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, cardBg: cardBgOverride, accentColor: accentColorOverride, children }: Props$b): react.JSX.Element;
+declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, children }: Props$b): react.JSX.Element;
 
 interface ConfirmDialogProps {
     visible: boolean;

package/dist/index.js

@@ -459,139 +459,56 @@ var styles2 = import_react_native2.StyleSheet.create({
 });
 
 // src/BaseStatsScreen.tsx
-var import_auto_paper3 = require("@rific/auto-paper");
-var import_feedback_press2 = require("@rific/feedback-press");
+var import_auto_paper4 = require("@rific/auto-paper");
+var import_feedback_press3 = require("@rific/feedback-press");
 var import_core2 = require("@tastic/core");
 var import_react2 = require("react");
+var import_react_native4 = require("react-native");
+var import_react_native_paper4 = require("react-native-paper");
+
+// src/ConfirmDialog.tsx
+var import_auto_paper3 = require("@rific/auto-paper");
+var import_feedback_press2 = require("@rific/feedback-press");
 var import_react_native3 = require("react-native");
 var import_react_native_paper3 = require("react-native-paper");
 var import_jsx_runtime3 = 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, cardBg: cardBgOverride, accentColor: accentColorOverride, children }) {
-  const { dark, colors } = (0, import_auto_paper3.useAutoPaperTheme)();
-  const ambientRotation = (0, import_core2.useRotation)();
-  const rotation = rotationOverride ?? ambientRotation;
-  const [confirmResetVisible, setConfirmResetVisible] = (0, import_react2.useState)(false);
-  const showReset = !!onReset;
-  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
-  const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
-  const cardBg = cardBgOverride ?? (dark ? "#111111" : "#F2F2F2");
-  const cardBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)";
-  const accentColor = accentColorOverride ?? colors.secondary;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: [styles3.container, { backgroundColor: bg }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: [styles3.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: onBack }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: titleVariant, style: [styles3.title, { color: fg }], children: title })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.ScrollView, { style: styles3.scrollView, contentContainerStyle: [styles3.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
-      children,
-      showReset && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.Button, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.secondary, textColor: colors.onSecondary, style: styles3.resetButton, children: resetLabel })
-    ] }),
-    confirmResetVisible && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles3.overlay, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: [styles3.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Icon, { source: "alert-outline", size: 64, color: accentColor }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "headlineLarge", style: [styles3.overlayTitle, { color: accentColor }], children: resetConfirmTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: [styles3.overlayBody, { color: fg }], children: resetConfirmBody }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.Button, { mode: "contained", onPress: () => setConfirmResetVisible(false), style: styles3.overlayButton, children: "Cancel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_feedback_press2.Button,
-        {
-          mode: "contained",
-          onPress: () => {
-            onReset?.();
-            setConfirmResetVisible(false);
-          },
-          style: styles3.overlayButton,
-          buttonColor: colors.secondary,
-          textColor: colors.onSecondary,
-          children: "Reset"
-        }
-      )
-    ] }) }) })
-  ] });
-}
-var styles3 = import_react_native3.StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  content: {
-    gap: 12,
-    paddingHorizontal: 20
-  },
-  header: {
-    alignItems: "center",
-    flexDirection: "row",
-    gap: 4,
-    paddingBottom: 8
-  },
-  // Same overlay shape BaseSettingsDialog's own info overlay uses (backdrop + centered card),
-  // rotated in place the same way rather than via Portal-root transform for the same reason — see
-  // that component's own identical styles for the full rationale.
-  overlay: {
-    alignItems: "center",
-    backgroundColor: "rgba(0,0,0,0.72)",
-    bottom: 0,
-    justifyContent: "center",
-    left: 0,
-    position: "absolute",
-    right: 0,
-    top: 0
-  },
-  overlayBody: { textAlign: "center" },
-  overlayButton: { width: 160 },
-  overlayCard: {
-    alignItems: "center",
-    borderRadius: 20,
-    borderWidth: 1,
-    gap: 16,
-    maxWidth: 360,
-    padding: 32
-  },
-  overlayTitle: { fontWeight: "bold", marginBottom: -8 },
-  resetButton: {
-    marginTop: 16
-  },
-  // Bounds the ScrollView 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.
-  scrollView: {
-    flex: 1
-  },
-  title: {
-    flexShrink: 1,
-    fontWeight: "bold"
-  }
-});
-
-// src/ConfirmDialog.tsx
-var import_auto_paper4 = require("@rific/auto-paper");
-var import_feedback_press3 = require("@rific/feedback-press");
-var import_react_native4 = require("react-native");
-var import_react_native_paper4 = require("react-native-paper");
-var import_jsx_runtime4 = require("react/jsx-runtime");
 function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
-  const { dark, colors } = (0, import_auto_paper4.useAutoPaperTheme)();
+  const { dark, colors } = (0, import_auto_paper3.useAutoPaperTheme)();
   if (!visible) return null;
   const fg = dark ? "#FFFFFF" : "#000000";
   const cardBg = dark ? "#111111" : "#F2F2F2";
   const cardBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)";
   const accent = destructive ? colors.danger : colors.primary;
   const onAccent = destructive ? colors.onDanger : colors.onPrimary;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: styles4.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: [styles4.card, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Icon, { source: icon, size: 64, color: accent }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Text, { variant: "headlineLarge", style: [styles4.title, { color: accent }], children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Text, { variant: "bodyLarge", style: [styles4.body, { color: fg }], children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: styles4.actions, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press3.Button, { mode: "outlined", onPress: onCancel, style: styles4.actionButton, children: cancelLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press3.Button, { mode: "contained", onPress: onConfirm, style: styles4.actionButton, buttonColor: accent, textColor: onAccent, children: confirmLabel })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: styles3.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: [styles3.card, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Icon, { source: icon, size: 64, color: accent }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "headlineLarge", style: [styles3.title, { color: accent }], children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: [styles3.body, { color: fg }], children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles3.actions, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.Button, { mode: "outlined", onPress: onCancel, style: styles3.actionButton, children: cancelLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.Button, { mode: "contained", onPress: onConfirm, style: styles3.actionButton, buttonColor: accent, textColor: onAccent, children: confirmLabel })
     ] })
   ] }) }) });
 }
-var styles4 = import_react_native4.StyleSheet.create({
+var styles3 = import_react_native3.StyleSheet.create({
+  // flexBasis (not flex: 1's own 0%) is each button's real floor: whenever both fit side by side,
+  // flexGrow still splits any leftover width evenly beyond that floor, same visual result as the
+  // old flex: 1 on a roomy screen - but a button can never be squeezed narrower than 128, only
+  // wrap to its own row instead (see actions' flexWrap below). react-native-paper's Button
+  // hardcodes numberOfLines={1} on its label with no override, so a button squeezed under its
+  // label's natural width silently ellipsizes ("Cancel" -> "Can...") instead of wrapping - assumed
+  // fixable by just giving the row more width, until confirmed live that these two-word labels
+  // (Cancel/Reset/New Game) can still lose the truncation fight even with the extra room card's own
+  // width fix below provides, on a narrow enough screen. flexBasis is the real fix: past a certain
+  // width there's no side-by-side arrangement that fits both buttons at their natural label size,
+  // so the layout has to give (stack) rather than the label (truncate).
   actionButton: {
-    flex: 1
+    flexBasis: 128,
+    flexGrow: 1
   },
   actions: {
     flexDirection: "row",
+    flexWrap: "wrap",
     gap: 12,
     width: "100%"
   },
@@ -604,7 +521,12 @@ var styles4 = import_react_native4.StyleSheet.create({
     borderWidth: 1,
     gap: 16,
     maxWidth: 360,
-    padding: 32
+    padding: 32,
+    // Claims its full allowance instead of just maxWidth alone, which only caps how wide the card
+    // is allowed to get - without an explicit width, a flex-centered child sizes to its own content
+    // instead of stretching, so the card (and therefore actions below) can end up narrower than the
+    // screen actually has room for, needlessly forcing the action row to wrap sooner than it has to.
+    width: "100%"
   },
   overlay: {
     alignItems: "center",
@@ -612,11 +534,88 @@ var styles4 = import_react_native4.StyleSheet.create({
     bottom: 0,
     justifyContent: "center",
     left: 0,
+    // Gives the card room to breathe from the screen edges now that it reliably stretches to fill
+    // its full width allowance (see card's own width comment) - without this, width: '100%' would
+    // run the card edge-to-edge on a screen narrower than maxWidth's own 360.
+    paddingHorizontal: 24,
     position: "absolute",
     right: 0,
     top: 0
   },
+  // textAlign is load-bearing, not decorative, once `title` wraps to more than one line - centered
+  // within card's own alignItems: 'center' only centers the Text's block as a whole; each wrapped
+  // line inside that block still defaults to left-aligned without this.
   title: {
+    fontWeight: "bold",
+    textAlign: "center"
+  }
+});
+
+// src/BaseStatsScreen.tsx
+var import_jsx_runtime4 = 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 }) {
+  const { dark, colors } = (0, import_auto_paper4.useAutoPaperTheme)();
+  const ambientRotation = (0, import_core2.useRotation)();
+  const rotation = rotationOverride ?? ambientRotation;
+  const [confirmResetVisible, setConfirmResetVisible] = (0, import_react2.useState)(false);
+  const showReset = !!onReset;
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: [styles4.container, { backgroundColor: bg }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: [styles4.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: onBack }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Text, { variant: titleVariant, style: [styles4.title, { color: fg }], children: title })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.ScrollView, { style: styles4.scrollView, contentContainerStyle: [styles4.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+      children,
+      showReset && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press3.Button, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles4.resetButton, children: resetLabel })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ConfirmDialog,
+      {
+        visible: confirmResetVisible,
+        title: resetConfirmTitle,
+        message: resetConfirmBody,
+        confirmLabel: "Reset",
+        cancelLabel: "Cancel",
+        icon: "alert-outline",
+        destructive: true,
+        rotation,
+        onCancel: () => setConfirmResetVisible(false),
+        onConfirm: () => {
+          onReset?.();
+          setConfirmResetVisible(false);
+        }
+      }
+    )
+  ] });
+}
+var styles4 = import_react_native4.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  content: {
+    gap: 12,
+    paddingHorizontal: 20
+  },
+  header: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 4,
+    paddingBottom: 8
+  },
+  resetButton: {
+    marginTop: 16
+  },
+  // Bounds the ScrollView 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.
+  scrollView: {
+    flex: 1
+  },
+  title: {
+    flexShrink: 1,
     fontWeight: "bold"
   }
 });

package/dist/index.mjs

@@ -275,139 +275,56 @@ var styles2 = StyleSheet2.create({
 });
 
 // src/BaseStatsScreen.tsx
-import { useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
-import { Button as Button2, IconButton } from "@rific/feedback-press";
+import { useAutoPaperTheme as useAutoPaperTheme4 } from "@rific/auto-paper";
+import { Button as Button3, IconButton } from "@rific/feedback-press";
 import { useRotation as useRotation2 } from "@tastic/core";
 import { useState as useState2 } from "react";
-import { ScrollView as ScrollView2, StyleSheet as StyleSheet3, View as View3 } from "react-native";
-import { Icon as Icon3, Portal as Portal2, Text as Text3 } from "react-native-paper";
-import { jsx as jsx3, jsxs as jsxs3 } 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, cardBg: cardBgOverride, accentColor: accentColorOverride, children }) {
-  const { dark, colors } = useAutoPaperTheme3();
-  const ambientRotation = useRotation2();
-  const rotation = rotationOverride ?? ambientRotation;
-  const [confirmResetVisible, setConfirmResetVisible] = useState2(false);
-  const showReset = !!onReset;
-  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
-  const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
-  const cardBg = cardBgOverride ?? (dark ? "#111111" : "#F2F2F2");
-  const cardBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)";
-  const accentColor = accentColorOverride ?? colors.secondary;
-  return /* @__PURE__ */ jsxs3(View3, { style: [styles3.container, { backgroundColor: bg }], children: [
-    /* @__PURE__ */ jsxs3(View3, { style: [styles3.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
-      /* @__PURE__ */ jsx3(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: onBack }),
-      /* @__PURE__ */ jsx3(Text3, { variant: titleVariant, style: [styles3.title, { color: fg }], children: title })
-    ] }),
-    /* @__PURE__ */ jsxs3(ScrollView2, { style: styles3.scrollView, contentContainerStyle: [styles3.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
-      children,
-      showReset && /* @__PURE__ */ jsx3(Button2, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.secondary, textColor: colors.onSecondary, style: styles3.resetButton, children: resetLabel })
-    ] }),
-    confirmResetVisible && /* @__PURE__ */ jsx3(Portal2, { children: /* @__PURE__ */ jsx3(View3, { style: [styles3.overlay, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: /* @__PURE__ */ jsxs3(View3, { style: [styles3.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }], children: [
-      /* @__PURE__ */ jsx3(Icon3, { source: "alert-outline", size: 64, color: accentColor }),
-      /* @__PURE__ */ jsx3(Text3, { variant: "headlineLarge", style: [styles3.overlayTitle, { color: accentColor }], children: resetConfirmTitle }),
-      /* @__PURE__ */ jsx3(Text3, { variant: "bodyLarge", style: [styles3.overlayBody, { color: fg }], children: resetConfirmBody }),
-      /* @__PURE__ */ jsx3(Button2, { mode: "contained", onPress: () => setConfirmResetVisible(false), style: styles3.overlayButton, children: "Cancel" }),
-      /* @__PURE__ */ jsx3(
-        Button2,
-        {
-          mode: "contained",
-          onPress: () => {
-            onReset?.();
-            setConfirmResetVisible(false);
-          },
-          style: styles3.overlayButton,
-          buttonColor: colors.secondary,
-          textColor: colors.onSecondary,
-          children: "Reset"
-        }
-      )
-    ] }) }) })
-  ] });
-}
-var styles3 = StyleSheet3.create({
-  container: {
-    flex: 1
-  },
-  content: {
-    gap: 12,
-    paddingHorizontal: 20
-  },
-  header: {
-    alignItems: "center",
-    flexDirection: "row",
-    gap: 4,
-    paddingBottom: 8
-  },
-  // Same overlay shape BaseSettingsDialog's own info overlay uses (backdrop + centered card),
-  // rotated in place the same way rather than via Portal-root transform for the same reason — see
-  // that component's own identical styles for the full rationale.
-  overlay: {
-    alignItems: "center",
-    backgroundColor: "rgba(0,0,0,0.72)",
-    bottom: 0,
-    justifyContent: "center",
-    left: 0,
-    position: "absolute",
-    right: 0,
-    top: 0
-  },
-  overlayBody: { textAlign: "center" },
-  overlayButton: { width: 160 },
-  overlayCard: {
-    alignItems: "center",
-    borderRadius: 20,
-    borderWidth: 1,
-    gap: 16,
-    maxWidth: 360,
-    padding: 32
-  },
-  overlayTitle: { fontWeight: "bold", marginBottom: -8 },
-  resetButton: {
-    marginTop: 16
-  },
-  // Bounds the ScrollView 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.
-  scrollView: {
-    flex: 1
-  },
-  title: {
-    flexShrink: 1,
-    fontWeight: "bold"
-  }
-});
+import { ScrollView as ScrollView2, StyleSheet as StyleSheet4, View as View4 } from "react-native";
+import { Text as Text4 } from "react-native-paper";
 
 // src/ConfirmDialog.tsx
-import { useAutoPaperTheme as useAutoPaperTheme4 } from "@rific/auto-paper";
-import { Button as Button3 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet4, View as View4 } from "react-native";
-import { Icon as Icon4, Portal as Portal3, Text as Text4 } from "react-native-paper";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
+import { Button as Button2 } from "@rific/feedback-press";
+import { StyleSheet as StyleSheet3, View as View3 } from "react-native";
+import { Icon as Icon3, Portal as Portal2, Text as Text3 } from "react-native-paper";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
-  const { dark, colors } = useAutoPaperTheme4();
+  const { dark, colors } = useAutoPaperTheme3();
   if (!visible) return null;
   const fg = dark ? "#FFFFFF" : "#000000";
   const cardBg = dark ? "#111111" : "#F2F2F2";
   const cardBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)";
   const accent = destructive ? colors.danger : colors.primary;
   const onAccent = destructive ? colors.onDanger : colors.onPrimary;
-  return /* @__PURE__ */ jsx4(Portal3, { children: /* @__PURE__ */ jsx4(View4, { style: styles4.overlay, children: /* @__PURE__ */ jsxs4(View4, { style: [styles4.card, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
-    /* @__PURE__ */ jsx4(Icon4, { source: icon, size: 64, color: accent }),
-    /* @__PURE__ */ jsx4(Text4, { variant: "headlineLarge", style: [styles4.title, { color: accent }], children: title }),
-    /* @__PURE__ */ jsx4(Text4, { variant: "bodyLarge", style: [styles4.body, { color: fg }], children: message }),
-    /* @__PURE__ */ jsxs4(View4, { style: styles4.actions, children: [
-      /* @__PURE__ */ jsx4(Button3, { mode: "outlined", onPress: onCancel, style: styles4.actionButton, children: cancelLabel }),
-      /* @__PURE__ */ jsx4(Button3, { mode: "contained", onPress: onConfirm, style: styles4.actionButton, buttonColor: accent, textColor: onAccent, children: confirmLabel })
+  return /* @__PURE__ */ jsx3(Portal2, { children: /* @__PURE__ */ jsx3(View3, { style: styles3.overlay, children: /* @__PURE__ */ jsxs3(View3, { style: [styles3.card, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
+    /* @__PURE__ */ jsx3(Icon3, { source: icon, size: 64, color: accent }),
+    /* @__PURE__ */ jsx3(Text3, { variant: "headlineLarge", style: [styles3.title, { color: accent }], children: title }),
+    /* @__PURE__ */ jsx3(Text3, { variant: "bodyLarge", style: [styles3.body, { color: fg }], children: message }),
+    /* @__PURE__ */ jsxs3(View3, { style: styles3.actions, children: [
+      /* @__PURE__ */ jsx3(Button2, { mode: "outlined", onPress: onCancel, style: styles3.actionButton, children: cancelLabel }),
+      /* @__PURE__ */ jsx3(Button2, { mode: "contained", onPress: onConfirm, style: styles3.actionButton, buttonColor: accent, textColor: onAccent, children: confirmLabel })
     ] })
   ] }) }) });
 }
-var styles4 = StyleSheet4.create({
+var styles3 = StyleSheet3.create({
+  // flexBasis (not flex: 1's own 0%) is each button's real floor: whenever both fit side by side,
+  // flexGrow still splits any leftover width evenly beyond that floor, same visual result as the
+  // old flex: 1 on a roomy screen - but a button can never be squeezed narrower than 128, only
+  // wrap to its own row instead (see actions' flexWrap below). react-native-paper's Button
+  // hardcodes numberOfLines={1} on its label with no override, so a button squeezed under its
+  // label's natural width silently ellipsizes ("Cancel" -> "Can...") instead of wrapping - assumed
+  // fixable by just giving the row more width, until confirmed live that these two-word labels
+  // (Cancel/Reset/New Game) can still lose the truncation fight even with the extra room card's own
+  // width fix below provides, on a narrow enough screen. flexBasis is the real fix: past a certain
+  // width there's no side-by-side arrangement that fits both buttons at their natural label size,
+  // so the layout has to give (stack) rather than the label (truncate).
   actionButton: {
-    flex: 1
+    flexBasis: 128,
+    flexGrow: 1
   },
   actions: {
     flexDirection: "row",
+    flexWrap: "wrap",
     gap: 12,
     width: "100%"
   },
@@ -420,7 +337,12 @@ var styles4 = StyleSheet4.create({
     borderWidth: 1,
     gap: 16,
     maxWidth: 360,
-    padding: 32
+    padding: 32,
+    // Claims its full allowance instead of just maxWidth alone, which only caps how wide the card
+    // is allowed to get - without an explicit width, a flex-centered child sizes to its own content
+    // instead of stretching, so the card (and therefore actions below) can end up narrower than the
+    // screen actually has room for, needlessly forcing the action row to wrap sooner than it has to.
+    width: "100%"
   },
   overlay: {
     alignItems: "center",
@@ -428,11 +350,88 @@ var styles4 = StyleSheet4.create({
     bottom: 0,
     justifyContent: "center",
     left: 0,
+    // Gives the card room to breathe from the screen edges now that it reliably stretches to fill
+    // its full width allowance (see card's own width comment) - without this, width: '100%' would
+    // run the card edge-to-edge on a screen narrower than maxWidth's own 360.
+    paddingHorizontal: 24,
     position: "absolute",
     right: 0,
     top: 0
   },
+  // textAlign is load-bearing, not decorative, once `title` wraps to more than one line - centered
+  // within card's own alignItems: 'center' only centers the Text's block as a whole; each wrapped
+  // line inside that block still defaults to left-aligned without this.
   title: {
+    fontWeight: "bold",
+    textAlign: "center"
+  }
+});
+
+// src/BaseStatsScreen.tsx
+import { jsx as jsx4, jsxs as jsxs4 } 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 }) {
+  const { dark, colors } = useAutoPaperTheme4();
+  const ambientRotation = useRotation2();
+  const rotation = rotationOverride ?? ambientRotation;
+  const [confirmResetVisible, setConfirmResetVisible] = useState2(false);
+  const showReset = !!onReset;
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
+  return /* @__PURE__ */ jsxs4(View4, { style: [styles4.container, { backgroundColor: bg }], children: [
+    /* @__PURE__ */ jsxs4(View4, { style: [styles4.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
+      /* @__PURE__ */ jsx4(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: onBack }),
+      /* @__PURE__ */ jsx4(Text4, { variant: titleVariant, style: [styles4.title, { color: fg }], children: title })
+    ] }),
+    /* @__PURE__ */ jsxs4(ScrollView2, { style: styles4.scrollView, contentContainerStyle: [styles4.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+      children,
+      showReset && /* @__PURE__ */ jsx4(Button3, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles4.resetButton, children: resetLabel })
+    ] }),
+    /* @__PURE__ */ jsx4(
+      ConfirmDialog,
+      {
+        visible: confirmResetVisible,
+        title: resetConfirmTitle,
+        message: resetConfirmBody,
+        confirmLabel: "Reset",
+        cancelLabel: "Cancel",
+        icon: "alert-outline",
+        destructive: true,
+        rotation,
+        onCancel: () => setConfirmResetVisible(false),
+        onConfirm: () => {
+          onReset?.();
+          setConfirmResetVisible(false);
+        }
+      }
+    )
+  ] });
+}
+var styles4 = StyleSheet4.create({
+  container: {
+    flex: 1
+  },
+  content: {
+    gap: 12,
+    paddingHorizontal: 20
+  },
+  header: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 4,
+    paddingBottom: 8
+  },
+  resetButton: {
+    marginTop: 16
+  },
+  // Bounds the ScrollView 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.
+  scrollView: {
+    flex: 1
+  },
+  title: {
+    flexShrink: 1,
     fontWeight: "bold"
   }
 });
@@ -470,7 +469,7 @@ import { getBlendedColor, getColorRoles } from "@rific/auto-paper";
 import { IconButton as IconButton2, TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
 import { useRotation as useRotation3 } from "@tastic/core";
 import { ScrollView as ScrollView3, StyleSheet as StyleSheet7, View as View8 } from "react-native";
-import { Icon as Icon5, Text as Text5 } from "react-native-paper";
+import { Icon as Icon4, Text as Text5 } from "react-native-paper";
 
 // src/fonts.ts
 import { Platform as Platform2 } from "react-native";
@@ -689,7 +688,7 @@ function SingleSection({
     const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
     const descriptionStyle = { fontFamily: labelFontFamily, color: rowColor };
     return /* @__PURE__ */ jsx8(TouchableRipple2, { disabled: taken, onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ jsxs7(View8, { style: styles7.itemRow, children: [
-      option.icon && /* @__PURE__ */ jsx8(Icon5, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+      option.icon && /* @__PURE__ */ jsx8(Icon4, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
       /* @__PURE__ */ jsxs7(View8, { style: styles7.itemLabelColumn, children: [
         /* @__PURE__ */ jsx8(Text5, { variant: "labelLarge", style: labelStyle, children: option.label }),
         option.description && /* @__PURE__ */ jsx8(Text5, { variant: "labelSmall", style: descriptionStyle, children: option.description })
@@ -715,7 +714,7 @@ function MultiSection({
       const itemStyle = [styles7.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }];
       const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
       return /* @__PURE__ */ jsx8(TouchableRipple2, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ jsxs7(View8, { style: styles7.itemRow, children: [
-        option.icon && /* @__PURE__ */ jsx8(Icon5, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+        option.icon && /* @__PURE__ */ jsx8(Icon4, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
         /* @__PURE__ */ jsx8(Text5, { variant: "labelLarge", style: [styles7.itemLabelFlex, labelStyle], children: option.label })
       ] }) }, option.value);
     }),
@@ -820,11 +819,11 @@ var styles8 = StyleSheet8.create({
 
 // src/CornerStatusBadges.tsx
 import { StyleSheet as StyleSheet9, View as View9 } from "react-native";
-import { Icon as Icon6 } from "react-native-paper";
+import { Icon as Icon5 } from "react-native-paper";
 import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var BADGE_SIZE = 30;
 function StatusBadge({ icon }) {
-  return /* @__PURE__ */ jsx11(View9, { style: styles9.badge, children: icon && /* @__PURE__ */ jsx11(Icon6, { source: icon, size: 16, color: "rgba(255,255,255,0.85)" }) });
+  return /* @__PURE__ */ jsx11(View9, { style: styles9.badge, children: icon && /* @__PURE__ */ jsx11(Icon5, { source: icon, size: 16, color: "rgba(255,255,255,0.85)" }) });
 }
 function CornerStatusBadges({ orientationMode, p1OnRight, p1, p2 }) {
   const p1OnRightSide = orientationMode === "sideBySide" && p1OnRight;
@@ -857,7 +856,7 @@ import { defaultColors, getContrastColor } from "@rific/auto-paper";
 import { TouchableRipple as TouchableRipple3 } from "@rific/feedback-press";
 import { clamp, useRotation as useRotation4 } from "@tastic/core";
 import { ScrollView as ScrollView4, StyleSheet as StyleSheet10, useWindowDimensions as useWindowDimensions3, View as View10 } from "react-native";
-import { Icon as Icon7, Text as Text6 } from "react-native-paper";
+import { Icon as Icon6, Text as Text6 } from "react-native-paper";
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
 var DEFAULT_SIZE = 48;
@@ -889,7 +888,7 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
   const contrastColor = getContrastColor(displayValue);
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4);
   return /* @__PURE__ */ jsxs10(View10, { style: [styles10.anchor, open && styles10.anchorOpen], children: [
-    /* @__PURE__ */ jsx12(TouchableRipple3, { onPress: () => host.toggle(id), borderless: true, style: [styles10.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ jsx12(View10, { ref: triggerRef, collapsable: false, style: styles10.triggerMeasure, children: tag ? /* @__PURE__ */ jsx12(Text6, { style: [styles10.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx12(Icon7, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
+    /* @__PURE__ */ jsx12(TouchableRipple3, { onPress: () => host.toggle(id), borderless: true, style: [styles10.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ jsx12(View10, { ref: triggerRef, collapsable: false, style: styles10.triggerMeasure, children: tag ? /* @__PURE__ */ jsx12(Text6, { style: [styles10.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx12(Icon6, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
     /* @__PURE__ */ jsx12(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: displayValue, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ jsx12(ScrollView4, { style: [styles10.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }], contentContainerStyle: styles10.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
       const selected = swatch.value.toLowerCase() === value.toLowerCase();
       const taken = !selected && !!takenValue && swatch.value.toLowerCase() === takenValue.toLowerCase();
@@ -905,7 +904,7 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
           },
           borderless: true,
           style: [styles10.swatch, { backgroundColor: swatchDisplay }, selected && styles10.swatchSelected, taken && !swappable && styles10.swatchTaken],
-          children: selected ? /* @__PURE__ */ jsx12(Icon7, { source: "check", size: 16, color: getContrastColor(swatchDisplay) }) : swappable ? /* @__PURE__ */ jsx12(Icon7, { source: "swap-horizontal", size: 16, color: getContrastColor(swatchDisplay) }) : taken ? /* @__PURE__ */ jsx12(Icon7, { source: "close", size: 16, color: getContrastColor(swatchDisplay) }) : /* @__PURE__ */ jsx12(View10, {})
+          children: selected ? /* @__PURE__ */ jsx12(Icon6, { source: "check", size: 16, color: getContrastColor(swatchDisplay) }) : swappable ? /* @__PURE__ */ jsx12(Icon6, { source: "swap-horizontal", size: 16, color: getContrastColor(swatchDisplay) }) : taken ? /* @__PURE__ */ jsx12(Icon6, { source: "close", size: 16, color: getContrastColor(swatchDisplay) }) : /* @__PURE__ */ jsx12(View10, {})
         },
         swatch.value
       );
@@ -987,7 +986,7 @@ var styles10 = StyleSheet10.create({
 import { getContrastColor as getContrastColor2 } from "@rific/auto-paper";
 import { TouchableRipple as TouchableRipple4 } from "@rific/feedback-press";
 import { ScrollView as ScrollView5, StyleSheet as StyleSheet11, View as View11 } from "react-native";
-import { Icon as Icon8, Text as Text7 } from "react-native-paper";
+import { Icon as Icon7, Text as Text7 } from "react-native-paper";
 import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var TRIGGER_HEIGHT = 28;
 var POPOVER_WIDTH = 180;
@@ -1014,13 +1013,13 @@ function LabeledDropdown({ id, host, options, value, onChange, color, dark, alig
   return /* @__PURE__ */ jsxs11(View11, { style: [styles11.anchor, open && styles11.anchorOpen], children: [
     /* @__PURE__ */ jsx13(TouchableRipple4, { onPress: () => host.toggle(id), style: styles11.trigger, children: /* @__PURE__ */ jsxs11(View11, { ref: triggerRef, collapsable: false, style: styles11.triggerInner, children: [
       /* @__PURE__ */ jsx13(Text7, { style: [styles11.triggerLabel, { color }], numberOfLines: 1, children: (selected?.label ?? "").toUpperCase() }),
-      /* @__PURE__ */ jsx13(Icon8, { source: "menu-down", size: 16, color })
+      /* @__PURE__ */ jsx13(Icon7, { source: "menu-down", size: 16, color })
     ] }) }),
     /* @__PURE__ */ jsx13(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ jsx13(ScrollView5, { style: [styles11.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }], contentContainerStyle: styles11.menuContent, showsVerticalScrollIndicator: false, children: options.map((option) => {
       const isSelected = option.value === value;
       const onColor = getContrastColor2(color);
       return /* @__PURE__ */ jsx13(TouchableRipple4, { onPress: () => handleSelect(option), style: [styles11.row, isSelected && { backgroundColor: color }], children: /* @__PURE__ */ jsxs11(View11, { style: styles11.rowInner, children: [
-        option.icon && /* @__PURE__ */ jsx13(Icon8, { source: option.icon, size: 18, color: isSelected ? onColor : fg }),
+        option.icon && /* @__PURE__ */ jsx13(Icon7, { source: option.icon, size: 18, color: isSelected ? onColor : fg }),
         /* @__PURE__ */ jsx13(Text7, { style: [styles11.rowLabel, { color: isSelected ? onColor : fg }], numberOfLines: 1, children: option.label })
       ] }) }, option.value);
     }) }) })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "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",

package/src/BaseStatsScreen.tsx

@@ -3,7 +3,9 @@ import { Button, IconButton } from '@rific/feedback-press'
 import { useRotation } from '@tastic/core'
 import { ReactNode, useState } from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
-import { Icon, Portal, Text } from 'react-native-paper'
+import { Text } from 'react-native-paper'
+
+import { ConfirmDialog } from './ConfirmDialog'
 
 // react-native-paper's own MD3 Text variant names — mirrored locally rather than importing its
 // internal VariantProp/MD3TypescaleKey (not exported from the package's public entry point) just
@@ -12,11 +14,12 @@ type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headl
 
 interface Props {
   // Explicit override for the live physical-hold rotation (see @tastic/core's useRotation) — only
-  // affects this component's own Portal-rendered reset-confirm overlay, which (like any Portal
-  // content) is unaffected by whichever screen's own FakeLandscapeView wraps the trigger and so has
-  // to rotate itself. Defaults to a live ambient read via useRotation() when omitted — note this
-  // does NOT make the header/scrollable content below rotate; the caller's own screen still needs
-  // its own FakeLandscapeView wrap for that (this component has no transform on its own main body).
+  // affects this component's own Portal-rendered reset-confirm dialog (via ConfirmDialog's own
+  // rotation prop), which (like any Portal content) is unaffected by whichever screen's own
+  // FakeLandscapeView wraps the trigger and so has to rotate itself. Defaults to a live ambient
+  // read via useRotation() when omitted — note this does NOT make the header/scrollable content
+  // below rotate; the caller's own screen still needs its own FakeLandscapeView wrap for that
+  // (this component has no transform on its own main body).
   rotation?: number
   title?: string
   // 'headlineSmall' (this screen's own default, below) — was originally 'displaySmall' (the full
@@ -36,39 +39,38 @@ interface Props {
   resetLabel?: string
   resetConfirmTitle?: string
   resetConfirmBody?: string
-  // Independently optional overrides for this screen's own background/text colors — each defaults
-  // to the literal-black/white-by-appearance formula described below when omitted, so every
-  // existing caller (none of which pass these) renders identically to before. A caller with its own
-  // app-wide chrome palette (e.g. a tinted background rather than neutral black/white) passes
-  // whichever of the three it needs; cardBorder on the reset-confirm overlay stays fixed regardless,
-  // since its low alpha already reads fine against any cardBg.
+  // Independently optional overrides for this screen's own header/background colors — each
+  // defaults to the literal-black/white-by-appearance formula described below when omitted, so
+  // every existing caller (none of which pass these) renders identically to before. A caller with
+  // its own app-wide chrome palette (e.g. a tinted background rather than neutral black/white)
+  // passes whichever of the two it needs.
+  //
+  // There used to be a third override here, cardBg, plus a separate accentColor override for the
+  // reset-confirm dialog's own icon/title/card. Both are gone: the reset-confirm step used to be a
+  // hand-rolled lookalike of ConfirmDialog with its own copy of the overlay/card/button styling,
+  // which is exactly how it drifted from ConfirmDialog's real look in the first place (different
+  // button layout, different Cancel styling, and — via cardBg — a different, caller-tintable card
+  // background no other ConfirmDialog in the fleet has). It now renders a real ConfirmDialog
+  // instance below instead of its own copy, which by construction can never drift from every other
+  // confirm prompt in the app again — at the cost of losing that per-caller tinting, which is the
+  // right trade: a "you're about to erase everything" prompt should look and read identically
+  // everywhere, not take on whichever screen happened to trigger it.
   fg?: string
   bg?: string
-  cardBg?: string
-  // Overrides the confirm-overlay's alert icon/title, which otherwise default to auto-paper's
-  // colors.secondary. That default is tuned to read against auto-paper's OWN background role, not
-  // necessarily against a cardBg override above — a caller passing cardBg should generally pass a
-  // matching accentColor too, rather than risk colors.secondary landing close in hue/lightness to
-  // its own custom card background (this is what actually happened with a tinted felt cardBg in the
-  // app this was first overridden for). Every button on this screen (the reset trigger included)
-  // fills with colors.secondary/onSecondary as a self-contained, always-legible pair instead of
-  // relying on a text-only color read against the surrounding chrome, so none of them need this —
-  // only the bare icon/title do.
-  accentColor?: string
   children: ReactNode
 }
 
 // The stats/achievements screen shell every @tastic game shares — back button + title header,
 // scrollable content area, and an optional reset-everything action with its own confirm-before-
-// destroying overlay — extracted after the same header/scroll/reset-confirm shape was independently
+// destroying dialog — extracted after the same header/scroll/reset-confirm shape was independently
 // built into LightCycles' own achievements.tsx. Colors default to the same literal-black/white-by-
 // appearance formula BaseSettingsDialog hardcodes internally (same as this package's own
-// BaseSettingsDialog) — zero-config for every existing caller — but fg/bg/cardBg are each
-// independently overridable for a caller whose own app-wide chrome palette isn't that literal
-// black/white 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, cardBg: cardBgOverride, accentColor: accentColorOverride, children }: Props) {
+// BaseSettingsDialog) — zero-config for every existing caller — but fg/bg are each independently
+// overridable for a caller whose own app-wide chrome palette isn't that literal black/white
+// 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) {
   const { dark, colors } = useAutoPaperTheme()
   const ambientRotation = useRotation()
   const rotation = rotationOverride ?? ambientRotation
@@ -77,15 +79,10 @@ export function BaseStatsScreen({ rotation: rotationOverride, title = 'Achieveme
 
   // High-contrast retro look by default: literal black/white by appearance, matching every other
   // screen in this ecosystem (title/loadout/settings all use this identical formula) rather than
-  // auto-paper's own (slightly tinted) background role — same convention BaseSettingsDialog's own
-  // fg/cardBg/cardBorder use internally. Overridable per-instance via the props above for a caller
-  // whose own chrome isn't that literal black/white convention; cardBorder has no override (see the
-  // Props doc above for why).
+  // auto-paper's own (slightly tinted) background role. Overridable per-instance via the props
+  // above for a caller whose own chrome isn't that literal black/white convention.
   const fg = fgOverride ?? (dark ? '#FFFFFF' : '#000000')
   const bg = bgOverride ?? (dark ? '#000000' : '#FFFFFF')
-  const cardBg = cardBgOverride ?? (dark ? '#111111' : '#F2F2F2')
-  const cardBorder = dark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)'
-  const accentColor = accentColorOverride ?? colors.secondary
 
   return (
     <View style={[styles.container, { backgroundColor: bg }]}>
@@ -100,42 +97,27 @@ export function BaseStatsScreen({ rotation: rotationOverride, title = 'Achieveme
         {children}
 
         {showReset && (
-          <Button mode='contained' onPress={() => setConfirmResetVisible(true)} buttonColor={colors.secondary} textColor={colors.onSecondary} style={styles.resetButton}>
+          <Button mode='contained' onPress={() => setConfirmResetVisible(true)} buttonColor={colors.danger} textColor={colors.onDanger} style={styles.resetButton}>
             {resetLabel}
           </Button>
         )}
       </ScrollView>
 
-      {confirmResetVisible && (
-        <Portal>
-          <View style={[styles.overlay, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }]}>
-            <View style={[styles.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }]}>
-              <Icon source='alert-outline' size={64} color={accentColor} />
-              <Text variant='headlineLarge' style={[styles.overlayTitle, { color: accentColor }]}>
-                {resetConfirmTitle}
-              </Text>
-              <Text variant='bodyLarge' style={[styles.overlayBody, { color: fg }]}>
-                {resetConfirmBody}
-              </Text>
-              <Button mode='contained' onPress={() => setConfirmResetVisible(false)} style={styles.overlayButton}>
-                Cancel
-              </Button>
-              <Button
-                mode='contained'
-                onPress={() => {
-                  onReset?.()
-                  setConfirmResetVisible(false)
-                }}
-                style={styles.overlayButton}
-                buttonColor={colors.secondary}
-                textColor={colors.onSecondary}
-              >
-                Reset
-              </Button>
-            </View>
-          </View>
-        </Portal>
-      )}
+      <ConfirmDialog
+        visible={confirmResetVisible}
+        title={resetConfirmTitle}
+        message={resetConfirmBody}
+        confirmLabel='Reset'
+        cancelLabel='Cancel'
+        icon='alert-outline'
+        destructive
+        rotation={rotation}
+        onCancel={() => setConfirmResetVisible(false)}
+        onConfirm={() => {
+          onReset?.()
+          setConfirmResetVisible(false)
+        }}
+      />
     </View>
   )
 }
@@ -154,30 +136,6 @@ const styles = StyleSheet.create({
     gap: 4,
     paddingBottom: 8
   },
-  // Same overlay shape BaseSettingsDialog's own info overlay uses (backdrop + centered card),
-  // rotated in place the same way rather than via Portal-root transform for the same reason — see
-  // that component's own identical styles for the full rationale.
-  overlay: {
-    alignItems: 'center',
-    backgroundColor: 'rgba(0,0,0,0.72)',
-    bottom: 0,
-    justifyContent: 'center',
-    left: 0,
-    position: 'absolute',
-    right: 0,
-    top: 0
-  },
-  overlayBody: { textAlign: 'center' },
-  overlayButton: { width: 160 },
-  overlayCard: {
-    alignItems: 'center',
-    borderRadius: 20,
-    borderWidth: 1,
-    gap: 16,
-    maxWidth: 360,
-    padding: 32
-  },
-  overlayTitle: { fontWeight: 'bold', marginBottom: -8 },
   resetButton: {
     marginTop: 16
   },

package/src/ConfirmDialog.tsx

@@ -69,11 +69,24 @@ export function ConfirmDialog({ visible, title, message, confirmLabel, cancelLab
 }
 
 const styles = StyleSheet.create({
+  // flexBasis (not flex: 1's own 0%) is each button's real floor: whenever both fit side by side,
+  // flexGrow still splits any leftover width evenly beyond that floor, same visual result as the
+  // old flex: 1 on a roomy screen - but a button can never be squeezed narrower than 128, only
+  // wrap to its own row instead (see actions' flexWrap below). react-native-paper's Button
+  // hardcodes numberOfLines={1} on its label with no override, so a button squeezed under its
+  // label's natural width silently ellipsizes ("Cancel" -> "Can...") instead of wrapping - assumed
+  // fixable by just giving the row more width, until confirmed live that these two-word labels
+  // (Cancel/Reset/New Game) can still lose the truncation fight even with the extra room card's own
+  // width fix below provides, on a narrow enough screen. flexBasis is the real fix: past a certain
+  // width there's no side-by-side arrangement that fits both buttons at their natural label size,
+  // so the layout has to give (stack) rather than the label (truncate).
   actionButton: {
-    flex: 1
+    flexBasis: 128,
+    flexGrow: 1
   },
   actions: {
     flexDirection: 'row',
+    flexWrap: 'wrap',
     gap: 12,
     width: '100%'
   },
@@ -86,7 +99,12 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     gap: 16,
     maxWidth: 360,
-    padding: 32
+    padding: 32,
+    // Claims its full allowance instead of just maxWidth alone, which only caps how wide the card
+    // is allowed to get - without an explicit width, a flex-centered child sizes to its own content
+    // instead of stretching, so the card (and therefore actions below) can end up narrower than the
+    // screen actually has room for, needlessly forcing the action row to wrap sooner than it has to.
+    width: '100%'
   },
   overlay: {
     alignItems: 'center',
@@ -94,11 +112,19 @@ const styles = StyleSheet.create({
     bottom: 0,
     justifyContent: 'center',
     left: 0,
+    // Gives the card room to breathe from the screen edges now that it reliably stretches to fill
+    // its full width allowance (see card's own width comment) - without this, width: '100%' would
+    // run the card edge-to-edge on a screen narrower than maxWidth's own 360.
+    paddingHorizontal: 24,
     position: 'absolute',
     right: 0,
     top: 0
   },
+  // textAlign is load-bearing, not decorative, once `title` wraps to more than one line - centered
+  // within card's own alignItems: 'center' only centers the Text's block as a whole; each wrapped
+  // line inside that block still defaults to left-aligned without this.
   title: {
-    fontWeight: 'bold'
+    fontWeight: 'bold',
+    textAlign: 'center'
   }
 })