@tastic/hud 0.8.3 → 0.8.5

package/src/ConfirmDialog.tsx

@@ -1,6 +1,7 @@
 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'
 
@@ -9,11 +10,11 @@ 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
+  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).
@@ -41,6 +42,7 @@ export function ConfirmDialog({ visible, title, message, confirmLabel, cancelLab
   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>
@@ -54,10 +56,12 @@ export function ConfirmDialog({ visible, title, message, confirmLabel, cancelLab
             {message}
           </Text>
           <View style={styles.actions}>
-            <Button mode='outlined' onPress={onCancel} style={styles.actionButton}>
-              {cancelLabel}
-            </Button>
-            <Button mode='contained' onPress={onConfirm} style={styles.actionButton} buttonColor={accent} textColor={onAccent}>
+            {showCancel && (
+              <Button mode='outlined' onPress={onCancel} style={styles.actionButton}>
+                {cancelLabel}
+              </Button>
+            )}
+            <Button mode='contained' onPress={onConfirm} style={showCancel ? styles.actionButton : styles.actionButtonSingle} buttonColor={accent} textColor={onAccent}>
               {confirmLabel}
             </Button>
           </View>
@@ -68,25 +72,43 @@ 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
+  // minWidth (not flexBasis) 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 a plain 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). This used to be flexBasis: 128, which measured
+  // correctly on web but rendered every button roughly SQUARE on iOS - confirmed live (see the
+  // "Quit Match?" Cancel/Quit buttons and the single-button "OK" dialogs both coming out ~128pt
+  // tall instead of wide). Root cause: react-native-paper's Button renders its Surface as two
+  // nested views on iOS only (Surface.tsx's SurfaceIOS, for shadow rendering) - only a curated
+  // allowlist of style keys (flex/flexGrow/flexShrink/width/height/position/... - notably NOT
+  // flexBasis) reaches the outer view, which is the real flex item inside this row; every other
+  // key, flexBasis included, falls through to an inner view whose own unspecified flexDirection
+  // defaults to column. flexGrow: 1 landed on the (row-context) outer view and grew width
+  // correctly; flexBasis: 128 landed on the (column-context) inner view instead, where a flexBasis
+  // sets HEIGHT, not width. minWidth isn't axis-relative like flexBasis, so it constrains width
+  // correctly regardless of which of the two views it ends up on. react-native-paper's Button also
   // 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).
+  // width fix below provides, on a narrow enough screen.
   actionButton: {
-    flexBasis: 128,
-    flexGrow: 1
+    flexGrow: 1,
+    minWidth: 128
+  },
+  // A lone confirm button (no cancel - BaseSettingsDialog's info-only "OK" dialogs, e.g. the
+  // update-check "no update found" message) has nothing left to share actions' width with, so
+  // actionButton's own flexGrow: 1 would stretch it across the entire row instead of reading as a
+  // normal button. Same 128 floor, no flexGrow, so it stays at that natural size instead of filling
+  // the card - centered by actions' own justifyContent below.
+  actionButtonSingle: {
+    minWidth: 128
   },
   actions: {
     flexDirection: 'row',
     flexWrap: 'wrap',
     gap: 12,
+    justifyContent: 'center',
     width: '100%'
   },
   body: {

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

@@ -28,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/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 }
+}