@tastic/hud 0.8.3 → 0.8.5

package/dist/index.d.mts

@@ -64,11 +64,11 @@ declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVaria
 interface ConfirmDialogProps {
     visible: boolean;
     title: string;
-    message: string;
+    message: ReactNode;
     confirmLabel: string;
-    cancelLabel: string;
+    cancelLabel?: string;
     onConfirm: () => void;
-    onCancel: () => void;
+    onCancel?: () => void;
     rotation?: ViewRotation;
     icon?: string;
     destructive?: boolean;
@@ -337,4 +337,12 @@ interface TriggerGaugeProps {
 
 declare function TriggerGaugeHost(props: TriggerGaugeProps): react.JSX.Element;
 
-export { AchievementRow, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, type ConfirmDialogProps, ContentGutter, ControlSchemePicker, type ControlSchemePickerProps, CornerActionButtons, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LOCKED_BADGE_COLOR, LabeledDropdown, type LabeledDropdownOption, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, type OverlayCardColors, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, StatRow, StatSection, TriggerGaugeHost, type TriggerGaugeProps, getLabeledDropdownContentHeight, getOverlayCardColors, loadSkiaWeb, overlayStyles, useAutoAlign, usePopoverHost };
+interface UpdateDialogProps {
+    rotation?: ViewRotation;
+    autoCheck?: boolean;
+    autoPrompt?: boolean;
+    onError?: (message: string) => void;
+}
+declare function UpdateDialog({ rotation, autoCheck, autoPrompt, onError }: UpdateDialogProps): react.JSX.Element;
+
+export { AchievementRow, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, type ConfirmDialogProps, ContentGutter, ControlSchemePicker, type ControlSchemePickerProps, CornerActionButtons, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LOCKED_BADGE_COLOR, LabeledDropdown, type LabeledDropdownOption, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, type OverlayCardColors, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, StatRow, StatSection, TriggerGaugeHost, type TriggerGaugeProps, UpdateDialog, type UpdateDialogProps, getLabeledDropdownContentHeight, getOverlayCardColors, loadSkiaWeb, overlayStyles, useAutoAlign, usePopoverHost };

package/dist/index.d.ts

@@ -64,11 +64,11 @@ declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVaria
 interface ConfirmDialogProps {
     visible: boolean;
     title: string;
-    message: string;
+    message: ReactNode;
     confirmLabel: string;
-    cancelLabel: string;
+    cancelLabel?: string;
     onConfirm: () => void;
-    onCancel: () => void;
+    onCancel?: () => void;
     rotation?: ViewRotation;
     icon?: string;
     destructive?: boolean;
@@ -337,4 +337,12 @@ interface TriggerGaugeProps {
 
 declare function TriggerGaugeHost(props: TriggerGaugeProps): react.JSX.Element;
 
-export { AchievementRow, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, type ConfirmDialogProps, ContentGutter, ControlSchemePicker, type ControlSchemePickerProps, CornerActionButtons, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LOCKED_BADGE_COLOR, LabeledDropdown, type LabeledDropdownOption, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, type OverlayCardColors, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, StatRow, StatSection, TriggerGaugeHost, type TriggerGaugeProps, getLabeledDropdownContentHeight, getOverlayCardColors, loadSkiaWeb, overlayStyles, useAutoAlign, usePopoverHost };
+interface UpdateDialogProps {
+    rotation?: ViewRotation;
+    autoCheck?: boolean;
+    autoPrompt?: boolean;
+    onError?: (message: string) => void;
+}
+declare function UpdateDialog({ rotation, autoCheck, autoPrompt, onError }: UpdateDialogProps): react.JSX.Element;
+
+export { AchievementRow, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, type ConfirmDialogProps, ContentGutter, ControlSchemePicker, type ControlSchemePickerProps, CornerActionButtons, type CornerStatusBadgeSeat, CornerStatusBadges, type CornerStatusBadgesProps, InlineColorPicker, LABELED_DROPDOWN_POPOVER_WIDTH, LOCKED_BADGE_COLOR, LabeledDropdown, type LabeledDropdownOption, MONO_FONT, type MenuOption, type MenuSection, type MultiSelectSection, type OrientationMode, type OverlayCardColors, type PopoverAlign, PopoverBody, type PopoverHost, type PopoverRotation, type PopoverVerticalAlign, PressAwayOverlay, ReadyButton, SectionedDropdown, SharedActionBand, type SingleSelectSection, StatRow, StatSection, TriggerGaugeHost, type TriggerGaugeProps, UpdateDialog, type UpdateDialogProps, getLabeledDropdownContentHeight, getOverlayCardColors, loadSkiaWeb, overlayStyles, useAutoAlign, usePopoverHost };

package/dist/index.js

@@ -28,22 +28,22 @@ __export(TriggerGauge_exports, {
 function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, dashWidth, startDeg = DEFAULT_START_DEG, endDeg = startDeg }) {
   const totalDurationMs = MOUNT_DURATION_MS + Math.max(0, segments - 1) * MOUNT_STAGGER_MS;
   const mountProgress = (0, import_react_native_reanimated.useSharedValue)(0);
-  (0, import_react4.useLayoutEffect)(() => {
+  (0, import_react5.useLayoutEffect)(() => {
     mountProgress.value = (0, import_react_native_reanimated.withTiming)(1, { duration: totalDurationMs, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.cubic) });
   }, []);
   const rawSweepDeg = ((endDeg - startDeg) % 360 + 360) % 360;
   const totalSweepDeg = rawSweepDeg === 0 ? 360 : rawSweepDeg;
   const step = segments > 0 ? totalSweepDeg / segments : 0;
-  const centerDeg = (0, import_react4.useCallback)((i) => startDeg + (i + 0.5) * step, [startDeg, step]);
+  const centerDeg = (0, import_react5.useCallback)((i) => startDeg + (i + 0.5) * step, [startDeg, step]);
   const singleSelect = litIndices.length === 1;
   const angleDeg = (0, import_react_native_reanimated.useSharedValue)(centerDeg(litIndices[0] ?? 0));
   const litIndicesKey = [...litIndices].sort((a, b) => a - b).join(",");
-  const [transitionFrom, setTransitionFrom] = (0, import_react4.useState)(litIndices);
+  const [transitionFrom, setTransitionFrom] = (0, import_react5.useState)(litIndices);
   const transitionFromKey = [...transitionFrom].sort((a, b) => a - b).join(",");
-  const lastKeyRef = (0, import_react4.useRef)(litIndicesKey);
-  const lastIndicesRef = (0, import_react4.useRef)(litIndices);
+  const lastKeyRef = (0, import_react5.useRef)(litIndicesKey);
+  const lastIndicesRef = (0, import_react5.useRef)(litIndices);
   const selectionProgress = (0, import_react_native_reanimated.useSharedValue)(1);
-  (0, import_react4.useLayoutEffect)(() => {
+  (0, import_react5.useLayoutEffect)(() => {
     if (litIndicesKey !== lastKeyRef.current) {
       if (singleSelect && lastIndicesRef.current.length === 1) {
         angleDeg.value = (0, import_react_native_reanimated.withTiming)(centerDeg(litIndices[0]), { duration: SELECTION_TRANSITION_DURATION_MS, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.cubic) });
@@ -125,13 +125,13 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_skia.Path, { path: litPath, style: "stroke", strokeWidth: LIT_THICKNESS, strokeCap: "round", color: accentColor, opacity: 1 })
   ] }) });
 }
-var import_react_native_skia, import_core5, import_react4, import_react_native9, import_react_native_reanimated, import_jsx_runtime8, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles7;
+var import_react_native_skia, import_core5, import_react5, import_react_native9, import_react_native_reanimated, import_jsx_runtime8, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles7;
 var init_TriggerGauge = __esm({
   "src/TriggerGauge.tsx"() {
     "use strict";
     import_react_native_skia = require("@shopify/react-native-skia");
     import_core5 = require("@tastic/core");
-    import_react4 = require("react");
+    import_react5 = require("react");
     import_react_native9 = require("react-native");
     import_react_native_reanimated = require("react-native-reanimated");
     import_jsx_runtime8 = require("react/jsx-runtime");
@@ -179,6 +179,7 @@ __export(index_exports, {
   StatRow: () => StatRow,
   StatSection: () => StatSection,
   TriggerGaugeHost: () => TriggerGaugeHost,
+  UpdateDialog: () => UpdateDialog,
   getLabeledDropdownContentHeight: () => getLabeledDropdownContentHeight,
   getOverlayCardColors: () => getOverlayCardColors,
   loadSkiaWeb: () => loadSkiaWeb,
@@ -257,11 +258,18 @@ var styles = import_react_native.StyleSheet.create({
 });
 
 // src/BaseSettingsDialog.tsx
+var import_auto_paper3 = require("@rific/auto-paper");
+var import_feedback_press2 = require("@rific/feedback-press");
+var import_updater = require("@rific/updater");
+var import_core2 = require("@tastic/core");
+var import_react2 = require("react");
+var import_react_native4 = require("react-native");
+var import_react_native_paper3 = require("react-native-paper");
+
+// src/ConfirmDialog.tsx
 var import_auto_paper2 = require("@rific/auto-paper");
 var import_feedback_press = require("@rific/feedback-press");
-var import_updater = require("@rific/updater");
 var import_core = require("@tastic/core");
-var import_react = require("react");
 var import_react_native3 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
 
@@ -296,56 +304,164 @@ var overlayStyles = import_react_native2.StyleSheet.create({
   }
 });
 
-// src/BaseSettingsDialog.tsx
+// src/ConfirmDialog.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
+  const { dark, colors } = (0, import_auto_paper2.useAutoPaperTheme)();
+  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 !== void 0 && onCancel !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: [overlayStyles.overlay, styles2.overlay], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: [overlayStyles.card, styles2.card, { backgroundColor: cardBg, borderColor: cardBorder }, (0, import_core.toRotationStyle)(rotation)], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: icon, size: 64, color: accent }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "headlineLarge", style: [styles2.title, { color: accent }], children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "bodyLarge", style: [styles2.body, { color: fg }], children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.actions, children: [
+      showCancel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.Button, { mode: "outlined", onPress: onCancel, style: styles2.actionButton, children: cancelLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.Button, { mode: "contained", onPress: onConfirm, style: showCancel ? styles2.actionButton : styles2.actionButtonSingle, buttonColor: accent, textColor: onAccent, children: confirmLabel })
+    ] })
+  ] }) }) });
+}
+var styles2 = import_react_native3.StyleSheet.create({
+  // 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.
+  actionButton: {
+    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: {
+    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: {
+    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: {
+    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",
+    textAlign: "center"
+  }
+});
+
+// src/useUpdateConfirmBridge.ts
+var import_react = require("react");
+function useUpdateConfirmBridge() {
+  const [manifest, setManifest] = (0, import_react.useState)(null);
+  const resolveRef = (0, import_react.useRef)(null);
+  const onConfirm = (0, import_react.useCallback)(
+    (next) => new Promise((resolve) => {
+      resolveRef.current = resolve;
+      setManifest(next);
+    }),
+    []
+  );
+  const respond = (0, import_react.useCallback)((confirmed) => {
+    setManifest(null);
+    resolveRef.current?.(confirmed);
+    resolveRef.current = null;
+  }, []);
+  return { manifest, onConfirm, respond };
+}
+
+// src/BaseSettingsDialog.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function SettingIcon({ source, color, containerColor }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: [styles2.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source, size: 18, color }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.View, { style: [styles3.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Icon, { source, size: 18, color }) });
 }
 function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, children }) {
-  const { dark, colors } = (0, import_auto_paper2.useAutoPaperTheme)();
-  const ambientRotation = (0, import_core.useRotation)();
+  const { colors } = (0, import_auto_paper3.useAutoPaperTheme)();
+  const ambientRotation = (0, import_core2.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
-  const isTouchPrimary = (0, import_core.useIsTouchPrimaryDevice)();
-  const { settings: hapticSettings, set: setHapticSettings } = (0, import_feedback_press.useHapticSettings)();
-  const { settings: soundSettings, set: setSoundSettings } = (0, import_feedback_press.useSoundSettings)();
-  const sound = (0, import_react.useContext)(import_feedback_press.SoundContext);
-  const { forceShort: forceHapticFeedback } = (0, import_feedback_press.useVibration)();
-  const [infoMessage, setInfoMessage] = (0, import_react.useState)(null);
+  const isTouchPrimary = (0, import_core2.useIsTouchPrimaryDevice)();
+  const { settings: hapticSettings, set: setHapticSettings } = (0, import_feedback_press2.useHapticSettings)();
+  const { settings: soundSettings, set: setSoundSettings } = (0, import_feedback_press2.useSoundSettings)();
+  const sound = (0, import_react2.useContext)(import_feedback_press2.SoundContext);
+  const { forceShort: forceHapticFeedback } = (0, import_feedback_press2.useVibration)();
+  const [infoMessage, setInfoMessage] = (0, import_react2.useState)(null);
+  const { manifest: updateManifest, onConfirm: onUpdateConfirm, respond: respondToUpdateConfirm } = useUpdateConfirmBridge();
   const { check, checking, updateReady } = (0, import_updater.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 !== void 0 && onLockOrientationChange !== void 0;
-  const showEdgeGuard = import_react_native3.Platform.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
-  const showHaptics = import_react_native3.Platform.OS !== "web" && !hideHaptics;
+  const showEdgeGuard = import_react_native4.Platform.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
+  const showHaptics = import_react_native4.Platform.OS !== "web" && !hideHaptics;
   const showSound = !hideSound;
   const showAppearance = !hideAppearance;
-  const showUpdateCheck = import_react_native3.Platform.OS !== "web" && !hideUpdateCheck;
-  const { fg, cardBg, cardBorder } = getOverlayCardColors(dark);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_auto_paper2.Dialog, { visible, onDismiss, style: [styles2.dialog, (0, import_core.toRotationStyle)(rotation)], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_auto_paper2.Dialog.Title, { children: "Settings" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_auto_paper2.Dialog.ScrollArea, { style: styles2.scrollArea, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.ScrollView, { contentContainerStyle: styles2.content, showsVerticalScrollIndicator: false, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.toggleGroup, children: [
-          showLockOrientation && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: () => onLockOrientationChange(!lockOrientation), style: styles2.toggleButton, accessibilityLabel: `Lock orientation ${lockOrientation ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.toggleContent, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingIcon, { source: lockOrientation ? "lock" : "lock-open-variant-outline", color: lockOrientation ? colors.secondary : colors.onSurfaceVariant, containerColor: lockOrientation ? colors.secondaryContainer : colors.surfaceVariant }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.flexShrink, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Lock Orientation" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Pins the current layout" })
+  const showUpdateCheck = import_react_native4.Platform.OS !== "web" && !hideUpdateCheck;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_auto_paper3.Dialog, { visible, onDismiss, style: [styles3.dialog, (0, import_core2.toRotationStyle)(rotation)], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_auto_paper3.Dialog.Title, { children: "Settings" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_auto_paper3.Dialog.ScrollArea, { style: styles3.scrollArea, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.ScrollView, { contentContainerStyle: styles3.content, showsVerticalScrollIndicator: false, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: styles3.toggleGroup, children: [
+          showLockOrientation && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => onLockOrientationChange(!lockOrientation), style: styles3.toggleButton, accessibilityLabel: `Lock orientation ${lockOrientation ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: styles3.toggleContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SettingIcon, { source: lockOrientation ? "lock" : "lock-open-variant-outline", color: lockOrientation ? colors.secondary : colors.onSurfaceVariant, containerColor: lockOrientation ? colors.secondaryContainer : colors.surfaceVariant }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: styles3.flexShrink, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Lock Orientation" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Pins the current layout" })
             ] })
           ] }) }),
-          showEdgeGuard && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: () => onDeferBottomEdgeGestures(!deferBottomEdgeGestures), style: styles2.toggleButton, accessibilityLabel: `Edge guard ${deferBottomEdgeGestures ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.toggleContent, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingIcon, { source: deferBottomEdgeGestures ? "shield-check-outline" : "shield-off-outline", color: deferBottomEdgeGestures ? colors.secondary : colors.onSurfaceVariant, containerColor: deferBottomEdgeGestures ? colors.secondaryContainer : colors.surfaceVariant }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.flexShrink, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Edge Guard" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Requires a second swipe" })
+          showEdgeGuard && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => onDeferBottomEdgeGestures(!deferBottomEdgeGestures), style: styles3.toggleButton, accessibilityLabel: `Edge guard ${deferBottomEdgeGestures ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: styles3.toggleContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SettingIcon, { source: deferBottomEdgeGestures ? "shield-check-outline" : "shield-off-outline", color: deferBottomEdgeGestures ? colors.secondary : colors.onSurfaceVariant, containerColor: deferBottomEdgeGestures ? colors.secondaryContainer : colors.surfaceVariant }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: styles3.flexShrink, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Edge Guard" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Requires a second swipe" })
             ] })
           ] }) }),
-          (showSound || showHaptics) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.toggleRow, children: [
-            showSound && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              import_feedback_press.TouchableRipple,
+          (showSound || showHaptics) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: styles3.toggleRow, children: [
+            showSound && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_feedback_press2.TouchableRipple,
               {
                 soundDisabled: true,
                 onPress: () => {
@@ -353,16 +469,16 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
                   setSoundSettings({ enabled });
                   if (enabled) sound.selection?.();
                 },
-                style: styles2.toggleButtonInRow,
+                style: styles3.toggleButtonInRow,
                 accessibilityLabel: `Sound ${soundSettings.enabled ? "on" : "off"}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.toggleContent, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingIcon, { source: soundSettings.enabled ? "volume-high" : "volume-off", color: soundSettings.enabled ? colors.tertiary : colors.onSurfaceVariant, containerColor: soundSettings.enabled ? colors.tertiaryContainer : colors.surfaceVariant }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Sound" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: styles3.toggleContent, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SettingIcon, { source: soundSettings.enabled ? "volume-high" : "volume-off", color: soundSettings.enabled ? colors.tertiary : colors.onSurfaceVariant, containerColor: soundSettings.enabled ? colors.tertiaryContainer : colors.surfaceVariant }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Sound" })
                 ] })
               }
             ),
-            showHaptics && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              import_feedback_press.TouchableRipple,
+            showHaptics && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_feedback_press2.TouchableRipple,
               {
                 hapticDisabled: true,
                 onPress: () => {
@@ -370,40 +486,36 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
                   setHapticSettings({ vibrate });
                   if (vibrate) forceHapticFeedback();
                 },
-                style: styles2.toggleButtonInRow,
+                style: styles3.toggleButtonInRow,
                 accessibilityLabel: `Haptics ${hapticSettings.vibrate ? "on" : "off"}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.toggleContent, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingIcon, { source: hapticSettings.vibrate ? "vibrate" : "vibrate-off", color: hapticSettings.vibrate ? colors.tertiary : colors.onSurfaceVariant, containerColor: hapticSettings.vibrate ? colors.tertiaryContainer : colors.surfaceVariant }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Haptics" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: styles3.toggleContent, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SettingIcon, { source: hapticSettings.vibrate ? "vibrate" : "vibrate-off", color: hapticSettings.vibrate ? colors.tertiary : colors.onSurfaceVariant, containerColor: hapticSettings.vibrate ? colors.tertiaryContainer : colors.surfaceVariant }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Haptics" })
                 ] })
               }
             )
           ] })
         ] }),
-        showAppearance && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.section, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "labelMedium", style: [styles2.sectionLabel, { color: colors.onSurfaceVariant }], children: "APPEARANCE" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_auto_paper2.AutoAppearancePicker, { showLabels: false })
+        showAppearance && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: styles3.section, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "labelMedium", style: [styles3.sectionLabel, { color: colors.onSurfaceVariant }], children: "APPEARANCE" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_auto_paper3.AutoAppearancePicker, { showLabels: false })
         ] }),
         children,
-        showUpdateCheck && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles2.section, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native_paper2.Text, { variant: "labelSmall", style: [styles2.sectionLabel, { color: colors.onSurfaceVariant }], children: [
+        showUpdateCheck && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: styles3.section, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native_paper3.Text, { variant: "labelSmall", style: [styles3.sectionLabel, { color: colors.onSurfaceVariant }], children: [
             "VERSION ",
             version,
             updateReady ? " \xB7 UPDATE READY" : ""
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.Button, { mode: "outlined", onPress: check, loading: checking, disabled: checking, children: "Check for Updates" })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.Button, { mode: "outlined", onPress: check, loading: checking, disabled: checking, children: "Check for Updates" })
         ] })
       ] }) })
     ] }),
-    infoMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: overlayStyles.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: [overlayStyles.card, { backgroundColor: cardBg, borderColor: cardBorder }, (0, import_core.toRotationStyle)(rotation)], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Icon, { source: "information-outline", size: 64, color: colors.secondary }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "headlineLarge", style: [styles2.overlayTitle, { color: colors.secondary }], children: infoMessage.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Text, { variant: "bodyLarge", style: [styles2.overlayBody, { color: fg }], children: infoMessage.message }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.Button, { mode: "contained", onPress: () => setInfoMessage(null), style: styles2.overlayButton, buttonColor: colors.primary, textColor: colors.onPrimary, children: "OK" })
-    ] }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ConfirmDialog, { visible: !!updateManifest, title: "Update Available", message: updateManifestDate ? `Released ${updateManifestDate.toLocaleDateString()} at ${updateManifestDate.toLocaleTimeString()}` : "", confirmLabel: "Restart", cancelLabel: "Later", icon: "update", rotation, onConfirm: () => respondToUpdateConfirm(true), onCancel: () => respondToUpdateConfirm(false) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ConfirmDialog, { visible: !!infoMessage, title: infoMessage?.title ?? "", message: infoMessage?.message ?? "", confirmLabel: "OK", icon: "information-outline", rotation, onConfirm: () => setInfoMessage(null) })
   ] });
 }
-var styles2 = import_react_native3.StyleSheet.create({
+var styles3 = import_react_native4.StyleSheet.create({
   content: {
     gap: 24,
     paddingVertical: 20
@@ -425,9 +537,6 @@ var styles2 = import_react_native3.StyleSheet.create({
     justifyContent: "center",
     width: 36
   },
-  overlayBody: { textAlign: "center" },
-  overlayButton: { width: 160 },
-  overlayTitle: { fontWeight: "bold" },
   scrollArea: {
     marginBottom: 0
   },
@@ -477,89 +586,15 @@ var styles2 = import_react_native3.StyleSheet.create({
 var import_auto_paper4 = require("@rific/auto-paper");
 var import_feedback_press3 = require("@rific/feedback-press");
 var import_core3 = require("@tastic/core");
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_react_native5 = require("react-native");
 var import_react_native_paper4 = require("react-native-paper");
-
-// src/ConfirmDialog.tsx
-var import_auto_paper3 = require("@rific/auto-paper");
-var import_feedback_press2 = require("@rific/feedback-press");
-var import_core2 = require("@tastic/core");
-var import_react_native4 = require("react-native");
-var import_react_native_paper3 = require("react-native-paper");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
-  const { dark, colors } = (0, import_auto_paper3.useAutoPaperTheme)();
-  if (!visible) return null;
-  const { fg, cardBg, cardBorder } = getOverlayCardColors(dark);
-  const accent = destructive ? colors.danger : colors.primary;
-  const onAccent = destructive ? colors.onDanger : colors.onPrimary;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.View, { style: [overlayStyles.overlay, styles3.overlay], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: [overlayStyles.card, styles3.card, { backgroundColor: cardBg, borderColor: cardBorder }, (0, import_core2.toRotationStyle)(rotation)], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Icon, { source: icon, size: 64, color: accent }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "headlineLarge", style: [styles3.title, { color: accent }], children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Text, { variant: "bodyLarge", style: [styles3.body, { color: fg }], children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: styles3.actions, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.Button, { mode: "outlined", onPress: onCancel, style: styles3.actionButton, children: cancelLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.Button, { mode: "contained", onPress: onConfirm, style: styles3.actionButton, buttonColor: accent, textColor: onAccent, children: confirmLabel })
-    ] })
-  ] }) }) });
-}
-var styles3 = import_react_native4.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: {
-    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: {
-    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: {
-    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",
-    textAlign: "center"
-  }
-});
-
-// src/BaseStatsScreen.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 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 }) {
   const { dark, colors } = (0, import_auto_paper4.useAutoPaperTheme)();
   const ambientRotation = (0, import_core3.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
-  const [confirmResetVisible, setConfirmResetVisible] = (0, import_react2.useState)(false);
+  const [confirmResetVisible, setConfirmResetVisible] = (0, import_react3.useState)(false);
   const showReset = !!onReset;
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
@@ -728,11 +763,11 @@ var styles6 = import_react_native8.StyleSheet.create({
 });
 
 // src/SkiaGate.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function SkiaGate({ getComponent, componentProps, fallback = null }) {
-  const [Component, setComponent] = (0, import_react3.useState)(null);
-  (0, import_react3.useEffect)(() => {
+  const [Component, setComponent] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
     let cancelled = false;
     getComponent().then((mod) => {
       if (!cancelled) setComponent(() => mod.default);
@@ -753,7 +788,7 @@ function TriggerGaugeHost(props) {
 }
 
 // src/useAutoAlign.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_native10 = require("react-native");
 var EDGE_MARGIN = 12;
 function rotateRect(x, y, width, height, rotation, windowWidth, windowHeight) {
@@ -766,18 +801,18 @@ function rotateRect(x, y, width, height, rotation, windowWidth, windowHeight) {
   return { x: cx + newDx - newWidth / 2, y: cy + newDy - newHeight / 2, width: newWidth, height: newHeight };
 }
 function useAutoAlign(open, contentWidth, contentHeight, rotation = 0) {
-  const triggerRef = (0, import_react5.useRef)(null);
+  const triggerRef = (0, import_react6.useRef)(null);
   const { width: windowWidth, height: windowHeight } = (0, import_react_native10.useWindowDimensions)();
-  const [align, setAlign] = (0, import_react5.useState)("center");
-  const [verticalAlign, setVerticalAlign] = (0, import_react5.useState)("below");
-  const [maxHeight, setMaxHeight] = (0, import_react5.useState)(contentHeight);
-  const [measured, setMeasured] = (0, import_react5.useState)(false);
-  const [prevOpen, setPrevOpen] = (0, import_react5.useState)(open);
+  const [align, setAlign] = (0, import_react6.useState)("center");
+  const [verticalAlign, setVerticalAlign] = (0, import_react6.useState)("below");
+  const [maxHeight, setMaxHeight] = (0, import_react6.useState)(contentHeight);
+  const [measured, setMeasured] = (0, import_react6.useState)(false);
+  const [prevOpen, setPrevOpen] = (0, import_react6.useState)(open);
   if (open !== prevOpen) {
     setPrevOpen(open);
     if (open) setMeasured(false);
   }
-  const measure = (0, import_react5.useCallback)(() => {
+  const measure = (0, import_react6.useCallback)(() => {
     triggerRef.current?.measureInWindow((rawX, rawY, rawWidth, rawHeight) => {
       const { x, y, width: triggerWidth, height: triggerHeight } = rotateRect(rawX, rawY, rawWidth, rawHeight, rotation, windowWidth, windowHeight);
       const centerX = x + triggerWidth / 2;
@@ -794,7 +829,7 @@ function useAutoAlign(open, contentWidth, contentHeight, rotation = 0) {
       setMeasured(true);
     });
   }, [contentWidth, contentHeight, windowWidth, windowHeight, rotation]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (open) measure();
   }, [open, measure]);
   return { align, maxHeight, measured, triggerRef, verticalAlign };
@@ -1402,14 +1437,24 @@ var styles16 = import_react_native21.StyleSheet.create({
   }
 });
 
+// src/UpdateDialog.tsx
+var import_updater2 = require("@rific/updater");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function UpdateDialog({ rotation = 0, autoCheck = true, autoPrompt = true, onError }) {
+  const { manifest, onConfirm, respond } = useUpdateConfirmBridge();
+  (0, import_updater2.useUpdater)({ autoCheck, autoPrompt, onConfirm, onError });
+  const date = manifest ? new Date(manifest.createdAt) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ConfirmDialog, { visible: !!manifest, title: "Update Available", message: date ? `Released ${date.toLocaleDateString()} at ${date.toLocaleTimeString()}` : "", confirmLabel: "Restart", cancelLabel: "Later", icon: "update", rotation, onConfirm: () => respond(true), onCancel: () => respond(false) });
+}
+
 // src/usePopoverHost.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 function usePopoverHost() {
-  const [openId, setOpenId] = (0, import_react6.useState)(null);
-  const toggle = (0, import_react6.useCallback)((id) => {
+  const [openId, setOpenId] = (0, import_react7.useState)(null);
+  const toggle = (0, import_react7.useCallback)((id) => {
     setOpenId((prev) => prev === id ? null : id);
   }, []);
-  const close = (0, import_react6.useCallback)(() => setOpenId(null), []);
+  const close = (0, import_react7.useCallback)(() => setOpenId(null), []);
   return { openId, toggle, close };
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -1436,6 +1481,7 @@ function usePopoverHost() {
   StatRow,
   StatSection,
   TriggerGaugeHost,
+  UpdateDialog,
   getLabeledDropdownContentHeight,
   getOverlayCardColors,
   loadSkiaWeb,