@tastic/hud 0.4.0 → 0.5.0

package/dist/index.d.mts

@@ -13,8 +13,11 @@ interface Props$b {
     checkColor?: string;
     progress?: number;
     deviceMarker?: boolean;
+    fg?: string;
+    fgMuted?: string;
+    sectionBg?: string;
 }
-declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker }: Props$b): react.JSX.Element;
+declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$b): react.JSX.Element;
 
 interface BaseSettingsDialogProps {
     visible: boolean;
@@ -34,9 +37,11 @@ interface BaseSettingsDialogProps {
 }
 declare function BaseSettingsDialog({ visible, onDismiss, rotation, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
 
+type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface Props$a {
     rotation?: number;
     title?: string;
+    titleVariant?: MD3TextVariant;
     onBack: () => void;
     insets: {
         top: number;
@@ -48,9 +53,13 @@ interface Props$a {
     resetLabel?: string;
     resetConfirmTitle?: string;
     resetConfirmBody?: string;
+    fg?: string;
+    bg?: string;
+    cardBg?: string;
+    accentColor?: string;
     children: ReactNode;
 }
-declare function BaseStatsScreen({ rotation, title, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, children }: Props$a): react.JSX.Element;
+declare function BaseStatsScreen({ rotation, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, cardBg: cardBgOverride, accentColor: accentColorOverride, children }: Props$a): react.JSX.Element;
 
 interface Props$9 {
     onBack: () => void;
@@ -216,14 +225,18 @@ declare function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg
 interface Props$1 {
     label: string;
     value: string;
+    fg?: string;
+    fgMuted?: string;
 }
-declare function StatRow({ label, value }: Props$1): react.JSX.Element;
+declare function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }: Props$1): react.JSX.Element;
 
 interface Props {
     label: string;
+    fg?: string;
+    sectionBg?: string;
     children: ReactNode;
 }
-declare function StatSection({ label, children }: Props): react.JSX.Element;
+declare function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }: Props): react.JSX.Element;
 
 interface TriggerGaugeProps {
     segments: number;

package/dist/index.d.ts

@@ -13,8 +13,11 @@ interface Props$b {
     checkColor?: string;
     progress?: number;
     deviceMarker?: boolean;
+    fg?: string;
+    fgMuted?: string;
+    sectionBg?: string;
 }
-declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker }: Props$b): react.JSX.Element;
+declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$b): react.JSX.Element;
 
 interface BaseSettingsDialogProps {
     visible: boolean;
@@ -34,9 +37,11 @@ interface BaseSettingsDialogProps {
 }
 declare function BaseSettingsDialog({ visible, onDismiss, rotation, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, children }: BaseSettingsDialogProps): react.JSX.Element;
 
+type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface Props$a {
     rotation?: number;
     title?: string;
+    titleVariant?: MD3TextVariant;
     onBack: () => void;
     insets: {
         top: number;
@@ -48,9 +53,13 @@ interface Props$a {
     resetLabel?: string;
     resetConfirmTitle?: string;
     resetConfirmBody?: string;
+    fg?: string;
+    bg?: string;
+    cardBg?: string;
+    accentColor?: string;
     children: ReactNode;
 }
-declare function BaseStatsScreen({ rotation, title, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, children }: Props$a): react.JSX.Element;
+declare function BaseStatsScreen({ rotation, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, cardBg: cardBgOverride, accentColor: accentColorOverride, children }: Props$a): react.JSX.Element;
 
 interface Props$9 {
     onBack: () => void;
@@ -216,14 +225,18 @@ declare function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg
 interface Props$1 {
     label: string;
     value: string;
+    fg?: string;
+    fgMuted?: string;
 }
-declare function StatRow({ label, value }: Props$1): react.JSX.Element;
+declare function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }: Props$1): react.JSX.Element;
 
 interface Props {
     label: string;
+    fg?: string;
+    sectionBg?: string;
     children: ReactNode;
 }
-declare function StatSection({ label, children }: Props): react.JSX.Element;
+declare function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }: Props): react.JSX.Element;
 
 interface TriggerGaugeProps {
     segments: number;

package/dist/index.js

@@ -187,11 +187,11 @@ var import_react_native = require("react-native");
 var import_react_native_paper = require("react-native-paper");
 var import_jsx_runtime = require("react/jsx-runtime");
 var LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
-function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker }) {
+function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }) {
   const { dark } = (0, import_auto_paper.useAutoPaperTheme)();
-  const fg = dark ? "#FFFFFF" : "#000000";
-  const fgMuted = dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
-  const sectionBg = dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)";
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
   const unlocked = unlockedLabel !== void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: [styles.row, { backgroundColor: sectionBg }], children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.badge, { backgroundColor: badgeColor }], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Icon, { source: icon, size: 20, color: unlocked ? "#000000" : fgMuted }) }),
@@ -458,26 +458,27 @@ var import_react2 = require("react");
 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 = 0, title = "Achievements", onBack, insets, onReset, resetLabel = "Reset All Stats", resetConfirmTitle = "Reset Everything?", resetConfirmBody = "This permanently erases all stats and achievements. This cannot be undone.", children }) {
+function BaseStatsScreen({ rotation = 0, 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 [confirmResetVisible, setConfirmResetVisible] = (0, import_react2.useState)(false);
   const showReset = !!onReset;
-  const fg = dark ? "#FFFFFF" : "#000000";
-  const bg = dark ? "#000000" : "#FFFFFF";
-  const cardBg = dark ? "#111111" : "#F2F2F2";
+  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: "displaySmall", style: [styles3.title, { color: fg }], children: title })
+      /* @__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: "outlined", onPress: () => setConfirmResetVisible(true), textColor: colors.secondary, style: styles3.resetButton, children: resetLabel })
+      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: colors.secondary }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "headlineLarge", style: [styles3.overlayTitle, { color: colors.secondary }], children: resetConfirmTitle }),
+      /* @__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)(
@@ -1172,10 +1173,10 @@ var import_auto_paper7 = require("@rific/auto-paper");
 var import_react_native15 = require("react-native");
 var import_react_native_paper8 = require("react-native-paper");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function StatRow({ label, value }) {
+function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }) {
   const { dark } = (0, import_auto_paper7.useAutoPaperTheme)();
-  const fg = dark ? "#FFFFFF" : "#000000";
-  const fgMuted = dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native15.View, { style: styles12.row, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper8.Text, { variant: "bodyMedium", style: { color: fgMuted }, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper8.Text, { variant: "bodyMedium", style: [styles12.value, { color: fg }], children: value })
@@ -1197,17 +1198,22 @@ var import_auto_paper8 = require("@rific/auto-paper");
 var import_react_native16 = require("react-native");
 var import_react_native_paper9 = require("react-native-paper");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-function StatSection({ label, children }) {
+function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }) {
   const { dark } = (0, import_auto_paper8.useAutoPaperTheme)();
-  const fgMuted = dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
-  const sectionBg = dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)";
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { style: [styles13.section, { backgroundColor: sectionBg }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper9.Text, { variant: "labelMedium", style: [styles13.label, { color: fgMuted }], children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper9.Text, { variant: "labelMedium", style: [styles13.label, { color: fg }], children: label }),
     children
   ] });
 }
 var styles13 = import_react_native16.StyleSheet.create({
+  // Bold and full-contrast (fg), not the original fontless/fgMuted treatment — that read at the
+  // same visual weight as StatRow's own row labels below it (both used the identical muted color;
+  // letterSpacing/variant alone didn't separate them enough to read as "this is the group header"
+  // at a glance). Matches AchievementRow's own title styling (bold + fg) below it in the same list.
   label: {
+    fontWeight: "bold",
     letterSpacing: 2
   },
   section: {

package/dist/index.mjs

@@ -4,11 +4,11 @@ import { StyleSheet, View } from "react-native";
 import { Icon, ProgressBar, Text } from "react-native-paper";
 import { jsx, jsxs } from "react/jsx-runtime";
 var LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
-function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker }) {
+function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }) {
   const { dark } = useAutoPaperTheme();
-  const fg = dark ? "#FFFFFF" : "#000000";
-  const fgMuted = dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
-  const sectionBg = dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)";
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
   const unlocked = unlockedLabel !== void 0;
   return /* @__PURE__ */ jsxs(View, { style: [styles.row, { backgroundColor: sectionBg }], children: [
     /* @__PURE__ */ jsx(View, { style: [styles.badge, { backgroundColor: badgeColor }], children: /* @__PURE__ */ jsx(Icon, { source: icon, size: 20, color: unlocked ? "#000000" : fgMuted }) }),
@@ -275,26 +275,27 @@ 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 = 0, title = "Achievements", onBack, insets, onReset, resetLabel = "Reset All Stats", resetConfirmTitle = "Reset Everything?", resetConfirmBody = "This permanently erases all stats and achievements. This cannot be undone.", children }) {
+function BaseStatsScreen({ rotation = 0, 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 [confirmResetVisible, setConfirmResetVisible] = useState2(false);
   const showReset = !!onReset;
-  const fg = dark ? "#FFFFFF" : "#000000";
-  const bg = dark ? "#000000" : "#FFFFFF";
-  const cardBg = dark ? "#111111" : "#F2F2F2";
+  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: "displaySmall", style: [styles3.title, { color: fg }], children: title })
+      /* @__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: "outlined", onPress: () => setConfirmResetVisible(true), textColor: colors.secondary, style: styles3.resetButton, children: resetLabel })
+      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: colors.secondary }),
-      /* @__PURE__ */ jsx3(Text3, { variant: "headlineLarge", style: [styles3.overlayTitle, { color: colors.secondary }], children: resetConfirmTitle }),
+      /* @__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(
@@ -989,10 +990,10 @@ import { useAutoPaperTheme as useAutoPaperTheme4 } from "@rific/auto-paper";
 import { StyleSheet as StyleSheet12, View as View10 } from "react-native";
 import { Text as Text8 } from "react-native-paper";
 import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
-function StatRow({ label, value }) {
+function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }) {
   const { dark } = useAutoPaperTheme4();
-  const fg = dark ? "#FFFFFF" : "#000000";
-  const fgMuted = dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
   return /* @__PURE__ */ jsxs10(View10, { style: styles11.row, children: [
     /* @__PURE__ */ jsx13(Text8, { variant: "bodyMedium", style: { color: fgMuted }, children: label }),
     /* @__PURE__ */ jsx13(Text8, { variant: "bodyMedium", style: [styles11.value, { color: fg }], children: value })
@@ -1014,17 +1015,22 @@ import { useAutoPaperTheme as useAutoPaperTheme5 } from "@rific/auto-paper";
 import { StyleSheet as StyleSheet13, View as View11 } from "react-native";
 import { Text as Text9 } from "react-native-paper";
 import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
-function StatSection({ label, children }) {
+function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }) {
   const { dark } = useAutoPaperTheme5();
-  const fgMuted = dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
-  const sectionBg = dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)";
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
   return /* @__PURE__ */ jsxs11(View11, { style: [styles12.section, { backgroundColor: sectionBg }], children: [
-    /* @__PURE__ */ jsx14(Text9, { variant: "labelMedium", style: [styles12.label, { color: fgMuted }], children: label }),
+    /* @__PURE__ */ jsx14(Text9, { variant: "labelMedium", style: [styles12.label, { color: fg }], children: label }),
     children
   ] });
 }
 var styles12 = StyleSheet13.create({
+  // Bold and full-contrast (fg), not the original fontless/fgMuted treatment — that read at the
+  // same visual weight as StatRow's own row labels below it (both used the identical muted color;
+  // letterSpacing/variant alone didn't separate them enough to read as "this is the group header"
+  // at a glance). Matches AchievementRow's own title styling (bold + fg) below it in the same list.
   label: {
+    fontWeight: "bold",
     letterSpacing: 2
   },
   section: {

package/package.json

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

package/src/AchievementRow.tsx

@@ -32,20 +32,28 @@ interface Props {
   // from a specific profile's own tab — optional since only an app with per-profile stat views has
   // this concept at all.
   deviceMarker?: boolean
+  // Independently optional overrides for this row's own text/background colors — each defaults to
+  // the same dark-mode-derived formula as StatRow/StatSection/BaseStatsScreen (see that component's
+  // own doc for why) when omitted, so every existing caller renders identically to before. A caller
+  // with its own app-wide chrome palette passes whichever of the three it needs.
+  fg?: string
+  fgMuted?: string
+  sectionBg?: string
 }
 
 // One row per achievement — a tier-colored (or locked-gray) badge, title/description, an optional
 // progress bar while locked, and either an unlocked check-mark+label or a lock icon. Extracted
 // verbatim from LightCycles' own achievements.tsx, where this exact row shape backed its entire
-// "ALL ACHIEVEMENTS" list. Derives fg/fgMuted/its own section background from useAutoPaperTheme(),
-// same as StatRow/StatSection/BaseStatsScreen — see BaseStatsScreen's own doc for why. Has no
-// opinion on what an achievement actually IS (id, unlock predicate, catalog) — that stays entirely
-// app-local; this is purely the presentational row.
-export function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker }: Props) {
+// "ALL ACHIEVEMENTS" list. fg/fgMuted/its own section background default to the same
+// useAutoPaperTheme()-derived formula as StatRow/StatSection/BaseStatsScreen (see BaseStatsScreen's
+// own doc for why), each independently overridable via the matching prop for a caller with its own
+// chrome palette. Has no opinion on what an achievement actually IS (id, unlock predicate, catalog)
+// — that stays entirely app-local; this is purely the presentational row.
+export function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props) {
   const { dark } = useAutoPaperTheme()
-  const fg = dark ? '#FFFFFF' : '#000000'
-  const fgMuted = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)'
-  const sectionBg = dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)'
+  const fg = fgOverride ?? (dark ? '#FFFFFF' : '#000000')
+  const fgMuted = fgMutedOverride ?? (dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)')
+  const sectionBg = sectionBgOverride ?? (dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)')
   const unlocked = unlockedLabel !== undefined
 
   return (

package/src/BaseStatsScreen.tsx

@@ -4,6 +4,11 @@ import { ReactNode, useState } from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
 import { Icon, Portal, Text } from 'react-native-paper'
 
+// 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
+// to type one optional prop.
+type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall'
+
 interface Props {
   // Live physical-hold rotation (see @tastic/split-screen's getViewRotation) — this dialog renders
   // as a centered Portal modal, unaffected by whichever screen's own FakeLandscapeView wraps its
@@ -13,6 +18,13 @@ interface Props {
   // don't wrap it in a FakeLandscapeView at all and so never have a nonzero one to give.
   rotation?: number
   title?: string
+  // 'headlineSmall' (this screen's own default, below) — was originally 'displaySmall' (the full
+  // display tier's own smallest step), then 'headlineLarge', both still read as oversized for a
+  // header that's paired with a small 24px back-button glyph rather than standing alone the way a
+  // title screen's own wordmark does; headlineSmall sits close to that icon's own size instead of
+  // towering over it. Any react-native-paper MD3 Text variant, not just the headline tier, for a
+  // caller that wants something else entirely.
+  titleVariant?: MD3TextVariant
   onBack: () => void
   insets: { top: number; left: number; bottom: number; right: number }
   // Optional, and always passed as a pair — a caller with nothing resettable (or that deliberately
@@ -23,38 +35,60 @@ 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.
+  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
-// built into LightCycles' own achievements.tsx. Derives its own colors from useAutoPaperTheme(),
-// same as this package's own BaseSettingsDialog, rather than taking fg/bg/cardBg/etc as props — a
-// stats screen is app-wide chrome, not a per-player surface, so there's no reason to make every
-// caller re-derive and thread through the identical dark-mode formula BaseSettingsDialog already
-// hardcodes internally. `children` is the seam for whatever isn't shared: this component has no
+// 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 = 0, title = 'Achievements', onBack, insets, onReset, resetLabel = 'Reset All Stats', resetConfirmTitle = 'Reset Everything?', resetConfirmBody = 'This permanently erases all stats and achievements. This cannot be undone.', children }: Props) {
+export function BaseStatsScreen({ rotation = 0, 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) {
   const { dark, colors } = useAutoPaperTheme()
   const [confirmResetVisible, setConfirmResetVisible] = useState(false)
   const showReset = !!onReset
 
-  // High-contrast retro look: 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.
-  const fg = dark ? '#FFFFFF' : '#000000'
-  const bg = dark ? '#000000' : '#FFFFFF'
-  const cardBg = dark ? '#111111' : '#F2F2F2'
+  // 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).
+  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 }]}>
       <View style={[styles.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }]}>
         <IconButton icon='arrow-left' iconColor={fg} size={24} onPress={onBack} />
-        <Text variant='displaySmall' style={[styles.title, { color: fg }]}>
+        <Text variant={titleVariant} style={[styles.title, { color: fg }]}>
           {title}
         </Text>
       </View>
@@ -63,7 +97,7 @@ export function BaseStatsScreen({ rotation = 0, title = 'Achievements', onBack,
         {children}
 
         {showReset && (
-          <Button mode='outlined' onPress={() => setConfirmResetVisible(true)} textColor={colors.secondary} style={styles.resetButton}>
+          <Button mode='contained' onPress={() => setConfirmResetVisible(true)} buttonColor={colors.secondary} textColor={colors.onSecondary} style={styles.resetButton}>
             {resetLabel}
           </Button>
         )}
@@ -73,8 +107,8 @@ export function BaseStatsScreen({ rotation = 0, title = 'Achievements', onBack,
         <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={colors.secondary} />
-              <Text variant='headlineLarge' style={[styles.overlayTitle, { color: colors.secondary }]}>
+              <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 }]}>

package/src/StatRow.tsx

@@ -5,20 +5,25 @@ import { Text } from 'react-native-paper'
 interface Props {
   label: string
   value: string
+  // Independently optional overrides for this row's own text colors — default to the same
+  // useAutoPaperTheme()-derived formula as BaseStatsScreen (see that component's own doc for why)
+  // when omitted, so every existing caller renders identically to before.
+  fg?: string
+  fgMuted?: string
 }
 
 // A single labeled stat — label on the left (muted), value on the right (bold, full-contrast).
 // Extracted from LightCycles' own achievements.tsx, where this exact row shape backed every
-// section (Overall/Vs CPU/Two Player/Activity). Derives its own colors from useAutoPaperTheme(),
-// same as BaseStatsScreen — see that component's own doc for why a stats-screen row doesn't take
-// fg/fgMuted as props. Deliberately just label+value text, not a color swatch or profile chip —
-// an app needing a row with a leading visual builds its own on top of this same dark-mode formula
-// (see LightCycles' own ColorStatRow/ProfileRankingRow for an example), since what that visual
-// even is varies per game.
-export function StatRow({ label, value }: Props) {
+// section (Overall/Vs CPU/Two Player/Activity). fg/fgMuted default to the same
+// useAutoPaperTheme()-derived formula as BaseStatsScreen (see that component's own doc for why),
+// each independently overridable via the matching prop for a caller with its own chrome palette.
+// Deliberately just label+value text, not a color swatch or profile chip — an app needing a row
+// with a leading visual builds its own on top of this same dark-mode formula (see LightCycles' own
+// ColorStatRow/ProfileRankingRow for an example), since what that visual even is varies per game.
+export function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }: Props) {
   const { dark } = useAutoPaperTheme()
-  const fg = dark ? '#FFFFFF' : '#000000'
-  const fgMuted = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)'
+  const fg = fgOverride ?? (dark ? '#FFFFFF' : '#000000')
+  const fgMuted = fgMutedOverride ?? (dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)')
 
   return (
     <View style={styles.row}>

package/src/StatSection.tsx

@@ -5,22 +5,29 @@ import { Text } from 'react-native-paper'
 
 interface Props {
   label: string
+  // Independently optional overrides for this section's own label color/background — default to
+  // the same useAutoPaperTheme()-derived formula as StatRow/BaseStatsScreen (see BaseStatsScreen's
+  // own doc for why) when omitted, so every existing caller renders identically to before.
+  fg?: string
+  sectionBg?: string
   children: ReactNode
 }
 
 // A labeled, tinted-background grouping box — the "OVERALL"/"VS CPU"/"ACTIVITY"-style section
 // shape from LightCycles' own achievements.tsx, generalized to any content (typically a stack of
-// StatRow). Derives its own colors from useAutoPaperTheme(), same as StatRow/BaseStatsScreen — see
-// BaseStatsScreen's own doc for why. The label itself carries the section's own meaning (what it's
-// a section OF), so this component has no opinion on that beyond rendering the string it's given.
-export function StatSection({ label, children }: Props) {
+// StatRow). fg/sectionBg default to the same useAutoPaperTheme()-derived formula as
+// StatRow/BaseStatsScreen (see BaseStatsScreen's own doc for why), each independently overridable
+// via the matching prop for a caller with its own chrome palette. The label itself carries the
+// section's own meaning (what it's a section OF), so this component has no opinion on that beyond
+// rendering the string it's given.
+export function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }: Props) {
   const { dark } = useAutoPaperTheme()
-  const fgMuted = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)'
-  const sectionBg = dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)'
+  const fg = fgOverride ?? (dark ? '#FFFFFF' : '#000000')
+  const sectionBg = sectionBgOverride ?? (dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)')
 
   return (
     <View style={[styles.section, { backgroundColor: sectionBg }]}>
-      <Text variant='labelMedium' style={[styles.label, { color: fgMuted }]}>
+      <Text variant='labelMedium' style={[styles.label, { color: fg }]}>
         {label}
       </Text>
       {children}
@@ -29,7 +36,12 @@ export function StatSection({ label, children }: Props) {
 }
 
 const styles = StyleSheet.create({
+  // Bold and full-contrast (fg), not the original fontless/fgMuted treatment — that read at the
+  // same visual weight as StatRow's own row labels below it (both used the identical muted color;
+  // letterSpacing/variant alone didn't separate them enough to read as "this is the group header"
+  // at a glance). Matches AchievementRow's own title styling (bold + fg) below it in the same list.
   label: {
+    fontWeight: 'bold',
     letterSpacing: 2
   },
   section: {