@tastic/hud 0.8.1 → 0.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "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",
@@ -77,7 +77,7 @@
     "@rific/feedback-press": "^0.10.8",
     "@rific/updater": "^0.6.0",
     "@shopify/react-native-skia": "^2.6.2",
-    "@tastic/core": "^0.3.0",
+    "@tastic/core": "^0.4.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",

package/src/BaseSettingsDialog.tsx

@@ -1,11 +1,13 @@
 import { AutoAppearancePicker, Dialog, useAutoPaperTheme } from '@rific/auto-paper'
 import { Button, SoundContext, TouchableRipple, useHapticSettings, useSoundSettings, useVibration } from '@rific/feedback-press'
 import { useUpdater } from '@rific/updater'
-import { useIsTouchPrimaryDevice, useRotation } from '@tastic/core'
+import { toRotationStyle, useIsTouchPrimaryDevice, useRotation, type ViewRotation } from '@tastic/core'
 import { ReactNode, useContext, useState } from 'react'
 import { Platform, ScrollView, StyleSheet, View } from 'react-native'
 import { Icon, Portal, Text } from 'react-native-paper'
 
+import { getOverlayCardColors, overlayStyles } from './overlayCard'
+
 interface SettingIconProps {
   source: string
   color: string
@@ -31,7 +33,7 @@ export interface BaseSettingsDialogProps {
   // dialog), so it just rotates its own content in place. Defaults to a live ambient read via
   // useRotation() when omitted; pass this only when a caller's own reading needs to differ from the
   // ambient one (rare — most callers should simply omit it).
-  rotation?: number
+  rotation?: ViewRotation
   // Each app's own OTA version (e.g. release.otaVersion) — not something this package can read
   // itself, since every consuming app tracks its own release.ts independently. Accepts a number too
   // since that's what release.otaVersion actually is in most apps (a bare incrementing counter, not
@@ -118,15 +120,11 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
   const showAppearance = !hideAppearance
   const showUpdateCheck = Platform.OS !== 'web' && !hideUpdateCheck
 
-  // High-contrast retro look: literal black/white by appearance, not auto-paper's own (slightly
-  // tinted) background role.
-  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 { fg, cardBg, cardBorder } = getOverlayCardColors(dark)
 
   return (
     <>
-      <Dialog visible={visible} onDismiss={onDismiss} style={[styles.dialog, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }]}>
+      <Dialog visible={visible} onDismiss={onDismiss} style={[styles.dialog, toRotationStyle(rotation)]}>
         <Dialog.Title>Settings</Dialog.Title>
         {/* react-native-paper's Dialog.ScrollArea has a fixed 24px marginBottom baked in (meant to
           reserve room for a Dialog.Actions row below it) — overridden to 0 since this dialog has
@@ -265,8 +263,8 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
       </Dialog>
       {infoMessage && (
         <Portal>
-          <View style={styles.overlay}>
-            <View style={[styles.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }]}>
+          <View style={overlayStyles.overlay}>
+            <View style={[overlayStyles.card, { backgroundColor: cardBg, borderColor: cardBorder }, toRotationStyle(rotation)]}>
               <Icon source='information-outline' size={64} color={colors.secondary} />
               <Text variant='headlineLarge' style={[styles.overlayTitle, { color: colors.secondary }]}>
                 {infoMessage.title}
@@ -307,26 +305,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: 36
   },
-  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' },
   scrollArea: {
     marginBottom: 0

package/src/BaseStatsScreen.tsx

@@ -1,9 +1,11 @@
 import { useAutoPaperTheme } from '@rific/auto-paper'
 import { Button, IconButton } from '@rific/feedback-press'
-import { useRotation } from '@tastic/core'
+import { useRotation, type ViewRotation } 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,12 +14,13 @@ 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).
-  rotation?: number
+  // 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?: ViewRotation
   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
@@ -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

@@ -1,8 +1,11 @@
 import { useAutoPaperTheme } from '@rific/auto-paper'
 import { Button } from '@rific/feedback-press'
+import { toRotationStyle, type ViewRotation } from '@tastic/core'
 import { StyleSheet, View } from 'react-native'
 import { Icon, Portal, Text } from 'react-native-paper'
 
+import { getOverlayCardColors, overlayStyles } from './overlayCard'
+
 export interface ConfirmDialogProps {
   visible: boolean
   title: string
@@ -11,10 +14,10 @@ export interface ConfirmDialogProps {
   cancelLabel: string
   onConfirm: () => void
   onCancel: () => void
-  // Live physical-hold rotation (see @tastic/split-screen's getViewRotation) - same convention as
+  // Live physical-hold rotation (see @tastic/core's getViewRotation) - same convention as
   // BaseSettingsDialog's own rotation prop; defaults to 0 for a caller with no per-player zone to
   // match (a portrait-only or single-player game has nothing to stay consistent with).
-  rotation?: number
+  rotation?: ViewRotation
   // Any react-native-paper Icon `source` name, shown above the title - defaults to a plain
   // question mark, since this component has no way to know why a caller is asking.
   icon?: string
@@ -35,18 +38,14 @@ export function ConfirmDialog({ visible, title, message, confirmLabel, cancelLab
   const { dark, colors } = useAutoPaperTheme()
   if (!visible) return null
 
-  // High-contrast retro look: literal black/white by appearance, not auto-paper's own (slightly
-  // tinted) background role - same convention BaseSettingsDialog's own overlay card uses.
-  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 { fg, cardBg, cardBorder } = getOverlayCardColors(dark)
   const accent = destructive ? colors.danger : colors.primary
   const onAccent = destructive ? colors.onDanger : colors.onPrimary
 
   return (
     <Portal>
-      <View style={styles.overlay}>
-        <View style={[styles.card, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }]}>
+      <View style={[overlayStyles.overlay, styles.overlay]}>
+        <View style={[overlayStyles.card, styles.card, { backgroundColor: cardBg, borderColor: cardBorder }, toRotationStyle(rotation)]}>
           <Icon source={icon} size={64} color={accent} />
           <Text variant='headlineLarge' style={[styles.title, { color: accent }]}>
             {title}
@@ -69,36 +68,50 @@ 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%'
   },
   body: {
     textAlign: 'center'
   },
+  // Additive on top of overlayCard's own shared `card` shape (borderRadius/borderWidth/gap/maxWidth/
+  // padding) — 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.
   card: {
-    alignItems: 'center',
-    borderRadius: 20,
-    borderWidth: 1,
-    gap: 16,
-    maxWidth: 360,
-    padding: 32
+    width: '100%'
   },
+  // Additive on top of overlayCard's own shared `overlay` backdrop — 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.
   overlay: {
-    alignItems: 'center',
-    backgroundColor: 'rgba(0,0,0,0.72)',
-    bottom: 0,
-    justifyContent: 'center',
-    left: 0,
-    position: 'absolute',
-    right: 0,
-    top: 0
+    paddingHorizontal: 24
   },
+  // 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'
   }
 })

package/src/index.ts

@@ -10,6 +10,7 @@ export { MONO_FONT } from './fonts'
 export { InlineColorPicker } from './InlineColorPicker'
 export { getLabeledDropdownContentHeight, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption } from './LabeledDropdown'
 export { loadSkiaWeb } from './loadSkiaWeb'
+export { getOverlayCardColors, type OverlayCardColors, overlayStyles } from './overlayCard'
 export { PopoverBody } from './PopoverBody'
 export { PressAwayOverlay } from './PressAwayOverlay'
 export { ReadyButton } from './ReadyButton'

package/src/overlayCard.ts

@@ -0,0 +1,48 @@
+import { StyleSheet } from 'react-native'
+
+export interface OverlayCardColors {
+  fg: string
+  fgMuted: string
+  cardBg: string
+  cardBorder: string
+}
+
+// The literal-black/white-by-appearance "retro" formula this package's own BaseSettingsDialog and
+// ConfirmDialog each independently re-derived — deliberately NOT auto-paper's own (seed-color-tinted)
+// background role, see either component's own "High-contrast retro look" comment for why. Every
+// fleet app's own Game-Over/Round-Over/Match-Over/Quit-confirmation overlay re-derives this same
+// three-or-four-line formula again, which is what this export exists to replace.
+export function getOverlayCardColors(dark: boolean): OverlayCardColors {
+  return {
+    fg: dark ? '#FFFFFF' : '#000000',
+    fgMuted: dark ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.4)',
+    cardBg: dark ? '#111111' : '#F2F2F2',
+    cardBorder: dark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)'
+  }
+}
+
+// Only the shell shape every overlay card shares (backdrop + card geometry) — deliberately not the
+// button/title/body styling, which already legitimately varies by consumer (BaseSettingsDialog's
+// single centered OK button vs. ConfirmDialog's two-button flexBasis-wrap row vs. each app's own
+// score/badge/zone content). A consumer applies `{backgroundColor: cardBg, borderColor: cardBorder}`
+// from getOverlayCardColors on top of `card` itself, same as every existing call site already does.
+export const overlayStyles = StyleSheet.create({
+  card: {
+    alignItems: 'center',
+    borderRadius: 20,
+    borderWidth: 1,
+    gap: 16,
+    maxWidth: 360,
+    padding: 32
+  },
+  overlay: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.72)',
+    bottom: 0,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0
+  }
+})