@tastic/hud 0.16.0 → 0.17.0

package/dist/index.mjs

@@ -18,12 +18,15 @@ import {
   StatSection,
   UpdateDialog,
   getStaggeredWordDuration
-} from "./chunk-JXRBXQLQ.mjs";
+} from "./chunk-27FIA26F.mjs";
 import {
+  OverlayBackdrop,
+  OverlayCard,
   getOverlayCardColors,
   overlayActionStyles,
-  overlayStyles
-} from "./chunk-32U2OIRW.mjs";
+  overlayStyles,
+  useOverlayCardColors
+} from "./chunk-AX4GC5KU.mjs";
 
 // src/AchievementUnlockList.tsx
 import { getContrastColor, useAutoPaperTheme } from "@rific/auto-paper";
@@ -884,6 +887,8 @@ export {
   LOCKED_BADGE_COLOR,
   LabeledDropdown,
   MONO_FONT,
+  OverlayBackdrop,
+  OverlayCard,
   PlayerSetupPanel,
   PopoverBody,
   PressAwayOverlay,
@@ -907,6 +912,7 @@ export {
   overlayActionStyles,
   overlayStyles,
   useAutoAlign,
+  useOverlayCardColors,
   usePopoverHost,
   useQuitConfirmation,
   useZoneClampedAlign

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.16.0",
+  "version": "0.17.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/BaseSettingsDialog.tsx

@@ -1,4 +1,4 @@
-import { AutoAppearancePicker, Dialog, useAutoPaperTheme } from '@rific/auto-paper'
+import { AutoAppearancePicker, Dialog, useAutoPaperTheme, useBlurModule, useThemeSettings } from '@rific/auto-paper'
 import { Button, SoundContext, TouchableRipple, useHapticSettings, useSoundSettings, useVibration } from '@rific/feedback-press'
 import { useUpdater } from '@rific/updater'
 import { useIsTouchPrimaryDevice, useRotation, type ViewRotation } from '@tastic/core'
@@ -106,6 +106,8 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
   // manually here instead, gated on the NEW value so it only plays when switching that channel on.
   const sound = useContext(SoundContext)
   const { forceShort: forceHapticFeedback } = useVibration()
+  const { settings: themeSettings, set: setThemeSettings } = useThemeSettings()
+  const expoBlur = useBlurModule()
   // Covers check()'s three purely-informational cases (dev-mode disabled, web unsupported, no
   // update found) via onInfo below - a retro card overlay instead of the native Alert.alert those
   // cases fall back to by default.
@@ -139,6 +141,8 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
   const showHaptics = Platform.OS !== 'web' && !hideHaptics
   const showSound = !hideSound
   const showAppearance = !hideAppearance
+  // See the Blur row's own comment below for why it hides on Android and without expo-blur.
+  const showBlur = showAppearance && Platform.OS !== 'android' && expoBlur !== undefined && expoBlur !== null
   const showUpdateCheck = Platform.OS !== 'web' && !hideUpdateCheck
 
   // Laid out in its own turned frame rather than rotated in place. Paper's Portal mounts at the app
@@ -297,6 +301,23 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
                     APPEARANCE
                   </Text>
                   <AutoAppearancePicker showLabels={false} />
+                  {/* Blur (Jay, 2026-10-15): one fleet-wide switch for auto-paper's own `blur` setting,
+                    which every blur-capable surface follows on its own (this sheet, and the
+                    OverlayCard behind ConfirmDialog, UpdateDialog and the guide). Off, or wherever
+                    blur can't happen, those surfaces paint the theme's raised surface instead. So the
+                    row only shows where turning it on would change something: not on Android
+                    (auto-paper's BlurView needs a blur target there, which these cards don't have) and
+                    not in an app that never handed expo-blur to auto-paper's Provider. */}
+                  {showBlur && (
+                    <TouchableRipple onPress={() => setThemeSettings({ blur: !themeSettings.blur })} style={styles.toggleButton} accessibilityLabel={`Blur ${themeSettings.blur ? 'on' : 'off'}`}>
+                      <View style={styles.toggleContent}>
+                        <SettingIcon source={themeSettings.blur ? 'blur' : 'blur-off'} color={themeSettings.blur ? colors.tertiary : colors.onSurfaceVariant} containerColor={themeSettings.blur ? colors.tertiaryContainer : colors.surfaceVariant} />
+                        <Text variant='bodyLarge' style={{ color: colors.onSurface }}>
+                          Blur
+                        </Text>
+                      </View>
+                    </TouchableRipple>
+                  )}
                 </View>
               )}
 

package/src/ConfirmDialog.tsx

@@ -5,7 +5,8 @@ import { type ReactNode } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Icon, Portal, Text } from 'react-native-paper'
 
-import { getOverlayCardColors, overlayActionStyles, overlayStyles } from './overlayCard'
+import { overlayActionStyles } from './overlayCard'
+import { OverlayBackdrop, OverlayCard, useOverlayCardColors } from './OverlaySurface'
 
 export interface ConfirmDialogProps {
   visible: boolean
@@ -27,27 +28,28 @@ export interface ConfirmDialogProps {
   destructive?: boolean
 }
 
-// A themed replacement for the native Alert.alert/window.confirm two-button confirm pattern - the
-// same "retro card overlay" look BaseSettingsDialog's own update-check info messages already use
-// (see its onInfo/infoMessage), generalized here into its own reusable, exported component for any
-// caller that needs a real yes/no decision instead of a single OK dismissal. A solid backdrop +
-// centered card, not react-native-paper's own Dialog (which BaseSettingsDialog uses instead) -
+// A themed replacement for the native Alert.alert/window.confirm two-button confirm pattern, the same
+// card BaseSettingsDialog's own update-check info messages use (see its onInfo/infoMessage),
+// generalized into its own reusable, exported component for any caller that needs a real yes/no
+// decision instead of a single OK dismissal. The card and backdrop come from OverlaySurface.tsx: the
+// theme's raised surface, blurred when the player's Blur setting allows it. A backdrop + centered
+// card, not react-native-paper's own Dialog (which BaseSettingsDialog uses instead) -
 // this renders identically on every platform, including web, where react-native-web's Alert.alert
 // is a hard no-op (confirmed: its entire implementation is `static alert() {}`) and Dialog's own
 // Portal-based positioning has its own web quirks BaseSettingsDialog already works around.
 export function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = 'help-circle-outline', destructive = false }: ConfirmDialogProps) {
-  const { dark, colors } = useAutoPaperTheme()
+  const { colors } = useAutoPaperTheme()
+  const { fg } = useOverlayCardColors()
   if (!visible) return null
 
-  const { fg, cardBg, cardBorder } = getOverlayCardColors(dark)
   const accent = destructive ? colors.danger : colors.primary
   const onAccent = destructive ? colors.onDanger : colors.onPrimary
   const showCancel = cancelLabel !== undefined && onCancel !== undefined
 
   return (
     <Portal>
-      <View style={[overlayStyles.overlay, styles.overlay]}>
-        <View style={[overlayStyles.card, styles.card, { backgroundColor: cardBg, borderColor: cardBorder }, toRotationStyle(rotation)]}>
+      <OverlayBackdrop style={styles.overlay}>
+        <OverlayCard style={[styles.card, toRotationStyle(rotation)]}>
           <Icon source={icon} size={64} color={accent} />
           <Text variant='headlineLarge' style={[styles.title, { color: accent }]}>
             {title}
@@ -65,8 +67,8 @@ export function ConfirmDialog({ visible, title, message, confirmLabel, cancelLab
               {confirmLabel}
             </Button>
           </View>
-        </View>
-      </View>
+        </OverlayCard>
+      </OverlayBackdrop>
     </Portal>
   )
 }

package/src/OverlaySurface.tsx

@@ -0,0 +1,62 @@
+import { BlurView, useAutoPaperTheme, useBlur } from '@rific/auto-paper'
+import { type ReactNode } from 'react'
+import { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
+
+import { overlayStyles } from './overlayCard'
+
+export interface OverlayCardThemeColors {
+  fg: string
+  fgMuted: string
+  cardBorder: string
+  backdrop: string
+}
+
+// The colors for text and edges on an OverlayCard, taken from the app's own theme (Jay, 2026-10-15:
+// the cards follow each game's palette instead of the old literal black/white "retro" formula that
+// getOverlayCardColors still returns for apps that haven't moved over yet).
+export function useOverlayCardColors(): OverlayCardThemeColors {
+  const { colors } = useAutoPaperTheme()
+  return { fg: colors.onSurface, fgMuted: colors.onSurfaceVariant, cardBorder: colors.outlineVariant, backdrop: colors.backdrop }
+}
+
+export interface OverlayBackdropProps {
+  children?: ReactNode
+  style?: StyleProp<ViewStyle>
+}
+
+// The full-screen dim behind a card: overlayStyles.overlay's geometry in the theme's own backdrop
+// color (the same scrim auto-paper's Dialog uses), lighter than the old solid 72% black.
+export function OverlayBackdrop({ children, style }: OverlayBackdropProps) {
+  const { backdrop } = useOverlayCardColors()
+  return <View style={[overlayStyles.overlay, { backgroundColor: backdrop }, style]}>{children}</View>
+}
+
+export interface OverlayCardProps {
+  children?: ReactNode
+  style?: StyleProp<ViewStyle>
+  accessibilityViewIsModal?: boolean
+  testID?: string
+}
+
+// The card itself, on auto-paper's BlurView at elevation 3 (MD3's dialog surface: the theme's surface
+// with a light wash of its primary). It blurs whatever is behind it when the player's Blur setting is
+// on and the app has handed expo-blur to auto-paper's Provider, and otherwise falls back to that
+// raised surface color on its own: on Android (no blur target here), in an app without expo-blur, or
+// with Blur off. So every game gets the same card, and beyond passing expoBlur to auto-paper's
+// Provider, it wires nothing for the blur.
+// BlurView itself only follows its `blur` prop (on by default), so the setting is read here with
+// useBlur(), the same way auto-paper's own Dialog and Menu read it.
+// overflow: hidden keeps a native blur inside the card's rounded corners.
+export function OverlayCard({ children, style, ...rest }: OverlayCardProps) {
+  const { cardBorder } = useOverlayCardColors()
+  const blur = useBlur()
+  return (
+    <BlurView blur={blur} elevation={3} style={[overlayStyles.card, styles.card, { borderColor: cardBorder }, style]} {...rest}>
+      {children}
+    </BlurView>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: { overflow: 'hidden' }
+})

package/src/chrome/index.ts

@@ -15,6 +15,7 @@ export { ContentGutter } from '../ContentGutter'
 export { CornerActionButtons } from '../CornerActionButtons'
 export { MONO_FONT } from '../fonts'
 export { getOverlayCardColors, overlayActionStyles, type OverlayCardColors, overlayStyles } from '../overlayCard'
+export { OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardProps, type OverlayCardThemeColors, useOverlayCardColors } from '../OverlaySurface'
 export { RotatedFrame, type RotatedFrameProps } from '../RotatedFrame'
 export { getStaggeredWordDuration, StaggeredWord, type StaggeredWordProps } from '../StaggeredWord'
 export { StatRow } from '../StatRow'

package/src/guide/HowToPlayDialog.tsx

@@ -5,7 +5,8 @@ import { BackHandler, type NativeScrollEvent, type NativeSyntheticEvent, ScrollV
 import { Portal, Text } from 'react-native-paper'
 import { useReducedMotion } from 'react-native-reanimated'
 
-import { getOverlayCardColors, overlayActionStyles, overlayStyles } from '../overlayCard'
+import { overlayActionStyles } from '../overlayCard'
+import { OverlayBackdrop, OverlayCard, useOverlayCardColors } from '../OverlaySurface'
 import type { GuideRotation, GuideStep } from './types'
 
 // The overlay's own breathing room and the card's own inner padding. Together with the card's max
@@ -73,7 +74,7 @@ function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0 }: CardProps) {
     return () => subscription.remove()
   }, [onSkip])
 
-  const { fg, cardBg, cardBorder, fgMuted } = getOverlayCardColors(dark)
+  const { fg, fgMuted } = useOverlayCardColors()
   const { width: cardWidth, pageWidth, maxHeight, artHeight } = getGuideCardSize(windowWidth, windowHeight, rotation)
   const rotationStyle = rotation === 0 ? undefined : { transform: [{ rotate: `${rotation}deg` }] }
   const isFirst = index === 0
@@ -119,8 +120,8 @@ function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0 }: CardProps) {
 
   return (
     <Portal>
-      <View style={[overlayStyles.overlay, styles.overlay]}>
-        <View accessibilityViewIsModal style={[overlayStyles.card, styles.card, { width: cardWidth, maxHeight, backgroundColor: cardBg, borderColor: cardBorder }, rotationStyle]}>
+      <OverlayBackdrop style={styles.overlay}>
+        <OverlayCard accessibilityViewIsModal style={[styles.card, { width: cardWidth, maxHeight }, rotationStyle]}>
           {/* The pager shrinks (flexShrink) when the card hits maxHeight, and each page is its own
             vertical ScrollView, so a page that still doesn't fit (a long translation, large text)
             scrolls instead of being clipped. In the normal case nothing scrolls. */}
@@ -140,8 +141,10 @@ function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0 }: CardProps) {
 
           {steps.length > 1 && (
             <View accessible accessibilityLabel={`Step ${index + 1} of ${steps.length}`} style={styles.dots}>
+              {/* fgMuted is the full-strength onSurfaceVariant, so the inactive dots are dimmed to half or
+                they'd stand out more than the active primary one. */}
               {steps.map((_, i) => (
-                <View key={i} style={[styles.dot, { backgroundColor: i === index ? colors.primary : fgMuted }]} />
+                <View key={i} style={i === index ? [styles.dot, { backgroundColor: colors.primary }] : [styles.dot, styles.dotInactive, { backgroundColor: fgMuted }]} />
               ))}
             </View>
           )}
@@ -161,14 +164,14 @@ function HowToPlayCard({ steps, onFinish, onSkip, rotation = 0 }: CardProps) {
               {isLast ? 'Ready' : 'Next'}
             </Button>
           </View>
-        </View>
-      </View>
+        </OverlayCard>
+      </OverlayBackdrop>
     </Portal>
   )
 }
 
 // A short, skippable, paged "how to play" card - the one shared shape every fleet game's intro takes,
-// built on the same retro overlay-card look as ConfirmDialog (see overlayCard.ts) so it reads as
+// built on the same overlay card as ConfirmDialog (see OverlaySurface.tsx) so it reads as
 // part of the same family. Controlled and presentational: whether it's visible, and what happens on
 // finish/skip (persisting "seen", mostly), is the caller's - see GuideProvider for the wiring nearly
 // every app wants. Buttons are the primary way through; the paging ScrollView underneath is what
@@ -203,6 +206,9 @@ const styles = StyleSheet.create({
     height: 8,
     width: 8
   },
+  dotInactive: {
+    opacity: 0.5
+  },
   dots: {
     flexDirection: 'row',
     gap: 8

package/src/index.ts

@@ -14,6 +14,7 @@ export { getInlineColorPickerContentSize, InlineColorPicker } from './InlineColo
 export { getLabeledDropdownContentHeight, LABELED_DROPDOWN_POPOVER_WIDTH, LabeledDropdown, type LabeledDropdownOption } from './LabeledDropdown'
 export { loadSkiaWeb } from './loadSkiaWeb'
 export { getOverlayCardColors, overlayActionStyles, type OverlayCardColors, overlayStyles } from './overlayCard'
+export { OverlayBackdrop, type OverlayBackdropProps, OverlayCard, type OverlayCardProps, type OverlayCardThemeColors, useOverlayCardColors } from './OverlaySurface'
 export { getColorPopoverId, getCpuDifficultyPopoverId, PlayerSetupPanel, type PlayerSetupPanelProps } from './PlayerSetupPanel'
 export { PopoverBody } from './PopoverBody'
 export { PressAwayOverlay } from './PressAwayOverlay'

package/src/overlayCard.ts

@@ -7,11 +7,14 @@ export interface OverlayCardColors {
   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.
+// The old literal black/white "retro" card, the formula the fleet apps' own Game-Over/Round-Over/
+// Match-Over overlays each re-derived and that this export was made to replace. hud's own cards no
+// longer use it.
+/**
+ * @deprecated The literal black/white card colors. hud's own cards moved to the theme-driven, blur-aware
+ * OverlayCard / OverlayBackdrop / useOverlayCardColors (OverlaySurface.tsx) on 2026-10-15; this stays
+ * only until every app's own result cards have moved over too.
+ */
 export function getOverlayCardColors(dark: boolean): OverlayCardColors {
   return {
     fg: dark ? '#FFFFFF' : '#000000',
@@ -23,9 +26,11 @@ export function getOverlayCardColors(dark: boolean): OverlayCardColors {
 
 // Only the shell shape every overlay card shares (backdrop + card geometry) - deliberately not the
 // title/body styling, which already legitimately varies by consumer (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. The
-// one button row every overlay card with actions shares lives in overlayActionStyles below.
+// content). New cards should use OverlayBackdrop and OverlayCard (OverlaySurface.tsx), which apply
+// `overlay` and `card` underneath and set the theme's backdrop and border colors themselves (the
+// backdrop replaces `overlay`'s rgba(0,0,0,0.72)). Only an app still on the deprecated
+// getOverlayCardColors puts its cardBg and cardBorder on `card` by hand. The one button row every
+// overlay card with actions shares lives in overlayActionStyles below.
 export const overlayStyles = StyleSheet.create({
   card: {
     alignItems: 'center',