@tastic/hud 0.8.2 → 0.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "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",
@@ -73,11 +73,12 @@
     "@infinitetoken/eslint-config": "^0.2.0",
     "@infinitetoken/jest-config": "^0.3.0",
     "@infinitetoken/tsconfig": "^0.4.1",
-    "@rific/auto-paper": "^0.10.3",
-    "@rific/feedback-press": "^0.10.8",
+    "@rific/auto-paper": "^0.11.0",
+    "@rific/core": "^0.1.1",
+    "@rific/feedback-press": "^0.11.1",
     "@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,10 +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 { Icon, Text } from 'react-native-paper'
+
+import { ConfirmDialog } from './ConfirmDialog'
+import { useUpdateConfirmBridge } from './useUpdateConfirmBridge'
 
 interface SettingIconProps {
   source: string
@@ -31,7 +34,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
@@ -78,7 +81,7 @@ export interface BaseSettingsDialogProps {
 // backup flow, or anything else genuinely specific to it) renders those below Appearance, not by
 // forking this component.
 export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, children }: BaseSettingsDialogProps) {
-  const { dark, colors } = useAutoPaperTheme()
+  const { colors } = useAutoPaperTheme()
   const ambientRotation = useRotation()
   const rotation = rotationOverride ?? ambientRotation
   // Also gates the Lock Orientation row below (alongside showLockOrientation itself) — true
@@ -103,13 +106,18 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
   // autoCheck: false — every consuming app's own root layout already runs the background check via
   // its own useUpdater() instance; a second instance with autoCheck's default (true) would set up a
   // second AppState listener and double every foreground-resume update check. This instance only
-  // ever checks on an explicit tap of the button below.
+  // ever checks on an explicit tap of the button below. Deliberately its own useUpdater() instance
+  // rather than rendering UpdateDialog directly here, for the same reason — UpdateDialog owns a
+  // second AppState listener of its own.
+  const { manifest: updateManifest, onConfirm: onUpdateConfirm, respond: respondToUpdateConfirm } = useUpdateConfirmBridge()
   const { check, checking, updateReady } = useUpdater({
     autoCheck: false,
     autoPrompt: false,
+    onConfirm: onUpdateConfirm,
     onError: onUpdateError,
     onInfo: (title, message) => setInfoMessage({ title, message })
   })
+  const updateManifestDate = updateManifest ? new Date(updateManifest.createdAt) : null
 
   const showLockOrientation = isTouchPrimary && lockOrientation !== undefined && onLockOrientationChange !== undefined
   const showEdgeGuard = Platform.OS === 'ios' && deferBottomEdgeGestures !== undefined && onDeferBottomEdgeGestures !== undefined
@@ -118,15 +126,9 @@ 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)'
-
   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
@@ -263,24 +265,8 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
           </ScrollView>
         </Dialog.ScrollArea>
       </Dialog>
-      {infoMessage && (
-        <Portal>
-          <View style={styles.overlay}>
-            <View style={[styles.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }]}>
-              <Icon source='information-outline' size={64} color={colors.secondary} />
-              <Text variant='headlineLarge' style={[styles.overlayTitle, { color: colors.secondary }]}>
-                {infoMessage.title}
-              </Text>
-              <Text variant='bodyLarge' style={[styles.overlayBody, { color: fg }]}>
-                {infoMessage.message}
-              </Text>
-              <Button mode='contained' onPress={() => setInfoMessage(null)} style={styles.overlayButton} buttonColor={colors.primary} textColor={colors.onPrimary}>
-                OK
-              </Button>
-            </View>
-          </View>
-        </Portal>
-      )}
+      <ConfirmDialog visible={!!updateManifest} title='Update Available' message={updateManifestDate ? `Released ${updateManifestDate.toLocaleDateString()} at ${updateManifestDate.toLocaleTimeString()}` : ''} confirmLabel='Restart' cancelLabel='Later' icon='update' rotation={rotation} onConfirm={() => respondToUpdateConfirm(true)} onCancel={() => respondToUpdateConfirm(false)} />
+      <ConfirmDialog visible={!!infoMessage} title={infoMessage?.title ?? ''} message={infoMessage?.message ?? ''} confirmLabel='OK' icon='information-outline' rotation={rotation} onConfirm={() => setInfoMessage(null)} />
     </>
   )
 }
@@ -307,27 +293,6 @@ 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,6 +1,6 @@
 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 { Text } from 'react-native-paper'
@@ -20,7 +20,7 @@ interface Props {
   // 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
+  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

package/src/ConfirmDialog.tsx

@@ -1,20 +1,24 @@
 import { useAutoPaperTheme } from '@rific/auto-paper'
 import { Button } from '@rific/feedback-press'
+import { toRotationStyle, type ViewRotation } from '@tastic/core'
+import { type ReactNode } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Icon, Portal, Text } from 'react-native-paper'
 
+import { getOverlayCardColors, overlayStyles } from './overlayCard'
+
 export interface ConfirmDialogProps {
   visible: boolean
   title: string
-  message: string
+  message: ReactNode
   confirmLabel: string
-  cancelLabel: string
+  cancelLabel?: string
   onConfirm: () => void
-  onCancel: () => void
-  // Live physical-hold rotation (see @tastic/split-screen's getViewRotation) - same convention as
+  onCancel?: () => void
+  // 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 +39,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}
@@ -55,9 +55,11 @@ export function ConfirmDialog({ visible, title, message, confirmLabel, cancelLab
             {message}
           </Text>
           <View style={styles.actions}>
-            <Button mode='outlined' onPress={onCancel} style={styles.actionButton}>
-              {cancelLabel}
-            </Button>
+            {cancelLabel !== undefined && onCancel !== undefined && (
+              <Button mode='outlined' onPress={onCancel} style={styles.actionButton}>
+                {cancelLabel}
+              </Button>
+            )}
             <Button mode='contained' onPress={onConfirm} style={styles.actionButton} buttonColor={accent} textColor={onAccent}>
               {confirmLabel}
             </Button>
@@ -93,32 +95,20 @@ const styles = StyleSheet.create({
   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,
-    // 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%'
   },
+  // 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,
-    // 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
+    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

package/src/UpdateDialog.tsx

@@ -0,0 +1,28 @@
+import { useUpdater } from '@rific/updater'
+import { type ViewRotation } from '@tastic/core'
+
+import { ConfirmDialog } from './ConfirmDialog'
+import { useUpdateConfirmBridge } from './useUpdateConfirmBridge'
+
+export interface UpdateDialogProps {
+  // Same live physical-hold rotation convention as ConfirmDialog/BaseSettingsDialog's own rotation
+  // prop - defaults to 0 for a caller with no per-player zone to match.
+  rotation?: ViewRotation
+  autoCheck?: boolean
+  autoPrompt?: boolean
+  onError?: (message: string) => void
+}
+
+// Drop-in background updater: mount once (e.g. an app's root layout) and it owns its own
+// useUpdater() instance end to end, rendering a themed ConfirmDialog instead of useUpdater's
+// default Alert-based prompt whenever an update is found. BaseSettingsDialog's own manual "Check
+// for Updates" button deliberately does NOT render this component - see its own comment on why
+// that flow keeps a second, separate useUpdater() instance instead of reusing this one.
+export function UpdateDialog({ rotation = 0, autoCheck = true, autoPrompt = true, onError }: UpdateDialogProps) {
+  const { manifest, onConfirm, respond } = useUpdateConfirmBridge()
+  useUpdater({ autoCheck, autoPrompt, onConfirm, onError })
+
+  const date = manifest ? new Date(manifest.createdAt) : null
+
+  return <ConfirmDialog visible={!!manifest} title='Update Available' message={date ? `Released ${date.toLocaleDateString()} at ${date.toLocaleTimeString()}` : ''} confirmLabel='Restart' cancelLabel='Later' icon='update' rotation={rotation} onConfirm={() => respond(true)} onCancel={() => respond(false)} />
+}

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'
@@ -27,5 +28,6 @@ export { StatSection } from './StatSection'
 // TriggerGaugeHost is the only supported way to render this.
 export type { TriggerGaugeProps } from './TriggerGauge'
 export { default as TriggerGaugeHost } from './TriggerGaugeHost'
+export { UpdateDialog, type UpdateDialogProps } from './UpdateDialog'
 export { type PopoverAlign, type PopoverRotation, type PopoverVerticalAlign, useAutoAlign } from './useAutoAlign'
 export { type PopoverHost, usePopoverHost } from './usePopoverHost'

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
+  }
+})

package/src/useUpdateConfirmBridge.ts

@@ -0,0 +1,30 @@
+import type { UpdateManifest } from '@rific/updater'
+import { useCallback, useRef, useState } from 'react'
+
+// Bridges @rific/updater's async onConfirm: (manifest) => Promise<boolean> into plain render
+// state a ConfirmDialog can drive: `manifest` is the pending update to show (or null when there's
+// nothing to confirm), and `respond` both resolves the promise onConfirm handed back to useUpdater
+// and clears `manifest` so the dialog closes. Internal - not exported from index.ts. Shared by
+// UpdateDialog and BaseSettingsDialog's own manual-check flow, so each only owns its own
+// useUpdater() instance (see BaseSettingsDialog's comment on why that instance can't be shared).
+export function useUpdateConfirmBridge() {
+  const [manifest, setManifest] = useState<UpdateManifest | null>(null)
+  const resolveRef = useRef<((confirmed: boolean) => void) | null>(null)
+
+  const onConfirm = useCallback(
+    (next: UpdateManifest) =>
+      new Promise<boolean>((resolve) => {
+        resolveRef.current = resolve
+        setManifest(next)
+      }),
+    []
+  )
+
+  const respond = useCallback((confirmed: boolean) => {
+    setManifest(null)
+    resolveRef.current?.(confirmed)
+    resolveRef.current = null
+  }, [])
+
+  return { manifest, onConfirm, respond }
+}