@tastic/hud 0.17.0 → 0.19.0

package/dist/chrome/index.js

@@ -35,9 +35,11 @@ __export(chrome_exports, {
   ActivityStatSection: () => ActivityStatSection,
   BaseSettingsDialog: () => BaseSettingsDialog,
   BaseStatsScreen: () => BaseStatsScreen,
+  COMPACT_DIALOG_HEIGHT: () => COMPACT_DIALOG_HEIGHT,
   ConfirmDialog: () => ConfirmDialog,
   ContentGutter: () => ContentGutter,
   CornerActionButtons: () => CornerActionButtons,
+  DialogHeader: () => DialogHeader,
   LOCKED_BADGE_COLOR: () => LOCKED_BADGE_COLOR,
   MONO_FONT: () => MONO_FONT,
   OverlayBackdrop: () => OverlayBackdrop,
@@ -47,10 +49,11 @@ __export(chrome_exports, {
   StatRow: () => StatRow,
   StatSection: () => StatSection,
   UpdateDialog: () => UpdateDialog,
-  getOverlayCardColors: () => getOverlayCardColors,
   getStaggeredWordDuration: () => getStaggeredWordDuration,
+  isCompactDialogHeight: () => isCompactDialogHeight,
   overlayActionStyles: () => overlayActionStyles,
   overlayStyles: () => overlayStyles,
+  useCompactDialog: () => useCompactDialog,
   useOverlayCardColors: () => useOverlayCardColors
 });
 module.exports = __toCommonJS(chrome_exports);
@@ -216,39 +219,74 @@ function ActivityStatSection({ stats }) {
 }
 
 // src/BaseSettingsDialog.tsx
-var import_auto_paper7 = require("@rific/auto-paper");
+var import_auto_paper8 = require("@rific/auto-paper");
 var import_feedback_press2 = require("@rific/feedback-press");
 var import_updater = require("@rific/updater");
-var import_core3 = require("@tastic/core");
-var import_react4 = require("react");
-var import_react_native10 = require("react-native");
-var import_react_native_paper7 = require("react-native-paper");
+var import_core4 = require("@tastic/core");
+var import_react5 = require("react");
+var import_react_native12 = require("react-native");
+var import_react_native_paper8 = require("react-native-paper");
+var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 
 // src/ConfirmDialog.tsx
-var import_auto_paper6 = require("@rific/auto-paper");
+var import_auto_paper7 = require("@rific/auto-paper");
 var import_feedback_press = require("@rific/feedback-press");
-var import_core = require("@tastic/core");
-var import_react_native8 = require("react-native");
-var import_react_native_paper5 = require("react-native-paper");
+var import_core2 = require("@tastic/core");
+var import_react_native10 = require("react-native");
+var import_react_native_paper6 = require("react-native-paper");
 
-// src/overlayCard.ts
+// src/DialogHeader.tsx
+var import_auto_paper5 = require("@rific/auto-paper");
 var import_react_native6 = require("react-native");
-function getOverlayCardColors(dark) {
-  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)"
-  };
+var import_react_native_paper5 = require("react-native-paper");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var COMPACT_DIALOG_HEIGHT = 528;
+function isCompactDialogHeight(height) {
+  return height < COMPACT_DIALOG_HEIGHT;
 }
-var overlayStyles = import_react_native6.StyleSheet.create({
+function DialogHeader({ icon, title, color, compact = false, style }) {
+  const { colors } = (0, import_auto_paper5.useAutoPaperTheme)();
+  const accent = color ?? colors.primary;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: [compact ? styles5.compact : styles5.full, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper5.Icon, { source: icon, size: compact ? COMPACT_ICON_SIZE : ICON_SIZE, color: accent }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper5.Text, { accessibilityRole: "header", variant: compact ? "headlineSmall" : "headlineLarge", style: [styles5.title, compact && styles5.titleCompact, { color: accent }], children: title })
+  ] });
+}
+var ICON_SIZE = 64;
+var COMPACT_ICON_SIZE = 32;
+var styles5 = import_react_native6.StyleSheet.create({
+  compact: {
+    alignItems: "center",
+    alignSelf: "stretch",
+    flexDirection: "row",
+    gap: 12,
+    justifyContent: "center"
+  },
+  full: {
+    alignItems: "center",
+    alignSelf: "stretch",
+    gap: 16
+  },
+  // textAlign matters once a title wraps: the card centers the Text's block, but each wrapped line
+  // still defaults to left-aligned without it.
+  title: {
+    fontWeight: "bold",
+    textAlign: "center"
+  },
+  titleCompact: {
+    flexShrink: 1
+  }
+});
+
+// src/overlayCard.ts
+var import_react_native7 = require("react-native");
+var overlayStyles = import_react_native7.StyleSheet.create({
   card: {
     alignItems: "center",
-    borderRadius: 20,
-    borderWidth: 1,
+    borderRadius: 28,
     gap: 16,
     maxWidth: 360,
-    padding: 32
+    padding: 24
   },
   overlay: {
     alignItems: "center",
@@ -261,7 +299,7 @@ var overlayStyles = import_react_native6.StyleSheet.create({
     top: 0
   }
 });
-var overlayActionStyles = import_react_native6.StyleSheet.create({
+var overlayActionStyles = import_react_native7.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
@@ -304,46 +342,63 @@ var overlayActionStyles = import_react_native6.StyleSheet.create({
 });
 
 // src/OverlaySurface.tsx
-var import_auto_paper5 = require("@rific/auto-paper");
-var import_react_native7 = require("react-native");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_auto_paper6 = require("@rific/auto-paper");
+var import_react_native8 = require("react-native");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function useOverlayCardColors() {
-  const { colors } = (0, import_auto_paper5.useAutoPaperTheme)();
+  const { colors } = (0, import_auto_paper6.useAutoPaperTheme)();
   return { fg: colors.onSurface, fgMuted: colors.onSurfaceVariant, cardBorder: colors.outlineVariant, backdrop: colors.backdrop };
 }
-function OverlayBackdrop({ children, style }) {
+function OverlayBackdrop({ children, style, onLayout }) {
   const { backdrop } = useOverlayCardColors();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native7.View, { style: [overlayStyles.overlay, { backgroundColor: backdrop }, style], children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native8.View, { onLayout, style: [overlayStyles.overlay, { backgroundColor: backdrop }, style], children });
 }
 function OverlayCard({ children, style, ...rest }) {
-  const { cardBorder } = useOverlayCardColors();
-  const blur = (0, import_auto_paper5.useBlur)();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_auto_paper5.BlurView, { blur, elevation: 3, style: [overlayStyles.card, styles5.card, { borderColor: cardBorder }, style], ...rest, children });
+  const { isV3, roundness } = (0, import_auto_paper6.useAutoPaperTheme)();
+  const blur = (0, import_auto_paper6.useBlur)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_auto_paper6.BlurView, { blur, style: [overlayStyles.card, styles6.card, { borderRadius: (isV3 ? 7 : 1) * roundness }, style], ...rest, children });
 }
-var styles5 = import_react_native7.StyleSheet.create({
+var styles6 = import_react_native8.StyleSheet.create({
   card: { overflow: "hidden" }
 });
 
+// src/useCompactDialog.ts
+var import_core = require("@tastic/core");
+var import_react2 = require("react");
+var import_react_native9 = require("react-native");
+function useCompactDialog(rotation = 0) {
+  const window = (0, import_react_native9.useWindowDimensions)();
+  const framed = (0, import_core.useRotatedWindowDimensions)();
+  const [measured, setMeasured] = (0, import_react2.useState)(null);
+  const onLayout = (0, import_react2.useCallback)((e) => {
+    const { width, height } = e.nativeEvent.layout;
+    setMeasured((prev) => prev && prev.width === width && prev.height === height ? prev : { width, height });
+  }, []);
+  const box = measured ?? (rotation === 0 ? framed : window);
+  const turned = rotation === 90 || rotation === -90;
+  return { compact: isCompactDialogHeight(turned ? box.width : box.height), onLayout };
+}
+
 // src/ConfirmDialog.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
-  const { colors } = (0, import_auto_paper6.useAutoPaperTheme)();
+  const { colors } = (0, import_auto_paper7.useAutoPaperTheme)();
   const { fg } = useOverlayCardColors();
+  const { compact, onLayout } = useCompactDialog(rotation);
   if (!visible) return null;
   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_runtime7.jsx)(import_react_native_paper5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(OverlayBackdrop, { style: styles6.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(OverlayCard, { style: [styles6.card, (0, import_core.toRotationStyle)(rotation)], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper5.Icon, { source: icon, size: 64, color: accent }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper5.Text, { variant: "headlineLarge", style: [styles6.title, { color: accent }], children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper5.Text, { variant: "bodyLarge", style: [styles6.body, { color: fg }], children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { style: overlayActionStyles.actions, children: [
-      showCancel && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press.Button, { mode: "outlined", onPress: onCancel, style: overlayActionStyles.actionButton, children: cancelLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press.Button, { mode: "contained", onPress: onConfirm, style: showCancel ? overlayActionStyles.actionButton : overlayActionStyles.actionButtonSingle, buttonColor: accent, textColor: onAccent, children: confirmLabel })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OverlayBackdrop, { style: styles7.overlay, onLayout, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(OverlayCard, { style: [styles7.card, (0, import_core2.toRotationStyle)(rotation)], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogHeader, { icon, title, color: accent, compact }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper6.Text, { variant: "bodyLarge", style: [styles7.body, { color: fg }], children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native10.View, { style: overlayActionStyles.actions, children: [
+      showCancel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_feedback_press.Button, { mode: "outlined", onPress: onCancel, style: overlayActionStyles.actionButton, children: cancelLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_feedback_press.Button, { mode: "contained", onPress: onConfirm, style: showCancel ? overlayActionStyles.actionButton : overlayActionStyles.actionButtonSingle, buttonColor: accent, textColor: onAccent, children: confirmLabel })
     ] })
   ] }) }) });
 }
-var styles6 = import_react_native8.StyleSheet.create({
+var styles7 = import_react_native10.StyleSheet.create({
   body: {
     textAlign: "center"
   },
@@ -361,35 +416,28 @@ var styles6 = import_react_native8.StyleSheet.create({
   // 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/RotatedFrame.tsx
-var import_core2 = require("@tastic/core");
-var import_react2 = require("react");
-var import_react_native9 = require("react-native");
-var import_react_native_paper6 = require("react-native-paper");
+var import_core3 = require("@tastic/core");
+var import_react3 = require("react");
+var import_react_native11 = require("react-native");
+var import_react_native_paper7 = require("react-native-paper");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function RotatedFrame({ children, rotation: rotationOverride, rotatedSafeArea = false, portalHost = false, passThrough = false, maxContentWidth }) {
-  const ambientRotation = (0, import_core2.useRotation)();
+  const ambientRotation = (0, import_core3.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
-  const window = (0, import_react_native9.useWindowDimensions)();
-  const { width, height } = (0, import_core2.rotateDimensions)(window.width, window.height, rotation);
+  const window = (0, import_react_native11.useWindowDimensions)();
+  const { width, height } = (0, import_core3.rotateDimensions)(window.width, window.height, rotation);
   const rawInsets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
-  const insets = (0, import_react2.useMemo)(() => rotatedSafeArea ? (0, import_core2.rotateInsets)(rawInsets, rotation) : rawInsets, [rotatedSafeArea, rawInsets, rotation]);
+  const insets = (0, import_react3.useMemo)(() => rotatedSafeArea ? (0, import_core3.rotateInsets)(rawInsets, rotation) : rawInsets, [rotatedSafeArea, rawInsets, rotation]);
   const cappedWidth = maxContentWidth !== void 0 && width > height ? maxContentWidth : void 0;
-  const column = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.View, { style: [styles7.column, cappedWidth !== void 0 && { maxWidth: cappedWidth }], pointerEvents: passThrough ? "box-none" : void 0, children });
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core2.FakeLandscapeView, { rotation, passThrough, style: styles7.root, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_safe_area_context.SafeAreaInsetsContext.Provider, { value: insets, children: portalHost ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper6.Portal.Host, { children: column }) : column }) });
+  const column = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native11.View, { style: [styles8.column, cappedWidth !== void 0 && { maxWidth: cappedWidth }], pointerEvents: passThrough ? "box-none" : void 0, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.FakeLandscapeView, { rotation, passThrough, style: styles8.root, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_safe_area_context.SafeAreaInsetsContext.Provider, { value: insets, children: portalHost ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper7.Portal.Host, { children: column }) : column }) });
 }
-var styles7 = import_react_native9.StyleSheet.create({
+var styles8 = import_react_native11.StyleSheet.create({
   // A centred column: full width up to `maxWidth`, so a capped frame sits in the middle of a wider window.
   column: {
     alignSelf: "center",
@@ -402,18 +450,18 @@ var styles7 = import_react_native9.StyleSheet.create({
 });
 
 // src/useUpdateConfirmBridge.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 function useUpdateConfirmBridge() {
-  const [manifest, setManifest] = (0, import_react3.useState)(null);
-  const resolveRef = (0, import_react3.useRef)(null);
-  const onConfirm = (0, import_react3.useCallback)(
+  const [manifest, setManifest] = (0, import_react4.useState)(null);
+  const resolveRef = (0, import_react4.useRef)(null);
+  const onConfirm = (0, import_react4.useCallback)(
     (next) => new Promise((resolve) => {
       resolveRef.current = resolve;
       setManifest(next);
     }),
     []
   );
-  const respond = (0, import_react3.useCallback)((confirmed) => {
+  const respond = (0, import_react4.useCallback)((confirmed) => {
     setManifest(null);
     resolveRef.current?.(confirmed);
     resolveRef.current = null;
@@ -422,22 +470,27 @@ function useUpdateConfirmBridge() {
 }
 
 // src/BaseSettingsDialog.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function SettingIcon({ source, color, containerColor }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native10.View, { style: [styles8.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper7.Icon, { source, size: 18, color }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [styles9.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.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, onShowHowToPlay, children }) {
-  const { colors } = (0, import_auto_paper7.useAutoPaperTheme)();
-  const ambientRotation = (0, import_core3.useRotation)();
+function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, keepAwake, onKeepAwakeChange, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }) {
+  const { colors } = (0, import_auto_paper8.useAutoPaperTheme)();
+  const ambientRotation = (0, import_core4.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
-  const isTouchPrimary = (0, import_core3.useIsTouchPrimaryDevice)();
+  const window = (0, import_react_native12.useWindowDimensions)();
+  const turned = rotation === 90 || rotation === -90;
+  const compactHeader = isCompactDialogHeight(turned ? window.width : window.height);
+  const insets = (0, import_core4.rotateInsets)((0, import_react_native_safe_area_context2.useSafeAreaInsets)(), rotation);
+  const sheetWidth = Math.min(overlayStyles.card.maxWidth, (turned ? window.height : window.width) - 2 * Math.max(insets.left, insets.right, SHEET_GUTTER));
+  const isTouchPrimary = (0, import_core4.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_react4.useContext)(import_feedback_press2.SoundContext);
+  const sound = (0, import_react5.useContext)(import_feedback_press2.SoundContext);
   const { forceShort: forceHapticFeedback } = (0, import_feedback_press2.useVibration)();
-  const { settings: themeSettings, set: setThemeSettings } = (0, import_auto_paper7.useThemeSettings)();
-  const expoBlur = (0, import_auto_paper7.useBlurModule)();
-  const [infoMessage, setInfoMessage] = (0, import_react4.useState)(null);
+  const { settings: themeSettings, set: setThemeSettings } = (0, import_auto_paper8.useThemeSettings)();
+  const expoBlur = (0, import_auto_paper8.useBlurModule)();
+  const [infoMessage, setInfoMessage] = (0, import_react5.useState)(null);
   const { manifest: updateManifest, onConfirm: onUpdateConfirm, respond: respondToUpdateConfirm } = useUpdateConfirmBridge();
   const { check, checking, updateReady } = (0, import_updater.useUpdater)({
     autoCheck: false,
@@ -447,117 +500,132 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
     onInfo: (title, message) => setInfoMessage({ title, message })
   });
   const updateManifestDate = updateManifest ? new Date(updateManifest.createdAt) : null;
-  const [opened, setOpened] = (0, import_react4.useState)(visible);
+  const [opened, setOpened] = (0, import_react5.useState)(visible);
   if (visible && !opened) setOpened(true);
   const showLockOrientation = isTouchPrimary && lockOrientation !== void 0 && onLockOrientationChange !== void 0;
-  const showEdgeGuard = import_react_native10.Platform.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
-  const showHaptics = import_react_native10.Platform.OS !== "web" && !hideHaptics;
+  const showEdgeGuard = import_react_native12.Platform.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
+  const showKeepAwake = isTouchPrimary && keepAwake !== void 0 && onKeepAwakeChange !== void 0;
+  const showHaptics = import_react_native12.Platform.OS !== "web" && !hideHaptics;
   const showSound = !hideSound;
   const showAppearance = !hideAppearance;
-  const showBlur = showAppearance && import_react_native10.Platform.OS !== "android" && expoBlur !== void 0 && expoBlur !== null;
-  const showUpdateCheck = import_react_native10.Platform.OS !== "web" && !hideUpdateCheck;
+  const showBlur = showAppearance && import_react_native12.Platform.OS !== "android" && expoBlur !== void 0 && expoBlur !== null;
+  const showUpdateCheck = import_react_native12.Platform.OS !== "web" && !hideUpdateCheck;
   if (!opened) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(RotatedFrame, { rotation, rotatedSafeArea: true, portalHost: true, passThrough: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_auto_paper7.Dialog, { visible, onDismiss, style: styles8.dialog, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_auto_paper7.Dialog.Title, { children: "Settings" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_auto_paper7.Dialog.ScrollArea, { style: styles8.scrollArea, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.ScrollView, { contentContainerStyle: styles8.content, showsVerticalScrollIndicator: false, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: styles8.toggleGroup, children: [
-          showLockOrientation && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => onLockOrientationChange(!lockOrientation), style: styles8.toggleButton, accessibilityLabel: `Lock orientation ${lockOrientation ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: styles8.toggleContent, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SettingIcon, { source: lockOrientation ? "lock" : "lock-open-variant-outline", color: lockOrientation ? colors.tertiary : colors.onSurfaceVariant, containerColor: lockOrientation ? colors.tertiaryContainer : colors.surfaceVariant }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: styles8.flexShrink, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper7.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Lock Orientation" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper7.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Pins the current layout" })
-            ] })
-          ] }) }),
-          showEdgeGuard && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => onDeferBottomEdgeGestures(!deferBottomEdgeGestures), style: styles8.toggleButton, accessibilityLabel: `Edge guard ${deferBottomEdgeGestures ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: styles8.toggleContent, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SettingIcon, { source: deferBottomEdgeGestures ? "shield-check-outline" : "shield-off-outline", color: deferBottomEdgeGestures ? colors.tertiary : colors.onSurfaceVariant, containerColor: deferBottomEdgeGestures ? colors.tertiaryContainer : colors.surfaceVariant }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: styles8.flexShrink, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper7.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Edge Guard" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper7.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Requires a second swipe" })
-            ] })
-          ] }) }),
-          (showSound || showHaptics) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: styles8.toggleRow, children: [
-            showSound && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              import_feedback_press2.TouchableRipple,
-              {
-                soundDisabled: true,
-                onPress: () => {
-                  const enabled = !soundSettings.enabled;
-                  setSoundSettings({ enabled });
-                  if (enabled) sound.selection?.();
-                },
-                style: styles8.toggleButtonInRow,
-                accessibilityLabel: `Sound ${soundSettings.enabled ? "on" : "off"}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: styles8.toggleContent, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)(import_react_native_paper7.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Sound" })
-                ] })
-              }
-            ),
-            showHaptics && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(RotatedFrame, { rotation, rotatedSafeArea: true, portalHost: true, passThrough: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_auto_paper8.Dialog, { visible, onDismiss, style: [styles9.dialog, { width: sheetWidth }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_auto_paper8.Dialog.ScrollArea, { style: styles9.scrollArea, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_auto_paper8.FadingScrollView, { contentContainerStyle: styles9.scrollContent, showsVerticalScrollIndicator: false, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogHeader, { icon: "cog", title: "Settings", compact: compactHeader }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.content, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleGroup, children: [
+            showLockOrientation && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => onLockOrientationChange(!lockOrientation), style: styles9.toggleButton, accessibilityLabel: `Lock orientation ${lockOrientation ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SettingIcon, { source: lockOrientation ? "lock" : "lock-open-variant-outline", color: lockOrientation ? colors.tertiary : colors.onSurfaceVariant, containerColor: lockOrientation ? colors.tertiaryContainer : colors.surfaceVariant }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Lock Orientation" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Pin current layout" })
+              ] })
+            ] }) }),
+            showEdgeGuard && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => onDeferBottomEdgeGestures(!deferBottomEdgeGestures), style: styles9.toggleButton, accessibilityLabel: `Edge guard ${deferBottomEdgeGestures ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SettingIcon, { source: deferBottomEdgeGestures ? "shield-check-outline" : "shield-off-outline", color: deferBottomEdgeGestures ? colors.tertiary : colors.onSurfaceVariant, containerColor: deferBottomEdgeGestures ? colors.tertiaryContainer : colors.surfaceVariant }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Edge Guard" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Require second swipe" })
+              ] })
+            ] }) }),
+            showKeepAwake && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => onKeepAwakeChange(!keepAwake), style: styles9.toggleButton, accessibilityLabel: `Keep awake ${keepAwake ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SettingIcon, { source: keepAwake ? "eye" : "eye-closed", color: keepAwake ? colors.tertiary : colors.onSurfaceVariant, containerColor: keepAwake ? colors.tertiaryContainer : colors.surfaceVariant }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Keep Awake" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Stop auto-lock mid-match" })
+              ] })
+            ] }) }),
+            (showSound || showHaptics) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleRow, children: [
+              showSound && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                import_feedback_press2.TouchableRipple,
+                {
+                  soundDisabled: true,
+                  onPress: () => {
+                    const enabled = !soundSettings.enabled;
+                    setSoundSettings({ enabled });
+                    if (enabled) sound.selection?.();
+                  },
+                  style: styles9.toggleButtonInRow,
+                  accessibilityLabel: `Sound ${soundSettings.enabled ? "on" : "off"}`,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Sound" })
+                  ] })
+                }
+              ),
+              showHaptics && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                import_feedback_press2.TouchableRipple,
+                {
+                  hapticDisabled: true,
+                  onPress: () => {
+                    const vibrate = !hapticSettings.vibrate;
+                    setHapticSettings({ vibrate });
+                    if (vibrate) forceHapticFeedback();
+                  },
+                  style: styles9.toggleButtonInRow,
+                  accessibilityLabel: `Haptics ${hapticSettings.vibrate ? "on" : "off"}`,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Haptics" })
+                  ] })
+                }
+              )
+            ] }),
+            onShowHowToPlay && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               import_feedback_press2.TouchableRipple,
               {
-                hapticDisabled: true,
                 onPress: () => {
-                  const vibrate = !hapticSettings.vibrate;
-                  setHapticSettings({ vibrate });
-                  if (vibrate) forceHapticFeedback();
+                  onDismiss();
+                  onShowHowToPlay();
                 },
-                style: styles8.toggleButtonInRow,
-                accessibilityLabel: `Haptics ${hapticSettings.vibrate ? "on" : "off"}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: styles8.toggleContent, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)(import_react_native_paper7.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Haptics" })
+                style: styles9.toggleButton,
+                accessibilityLabel: "How to Play",
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SettingIcon, { source: "help-circle-outline", color: colors.secondary, containerColor: colors.secondaryContainer }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "How to Play" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Replay quick intro" })
+                  ] })
                 ] })
               }
             )
           ] }),
-          onShowHowToPlay && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            import_feedback_press2.TouchableRipple,
-            {
-              onPress: () => {
-                onDismiss();
-                onShowHowToPlay();
-              },
-              style: styles8.toggleButton,
-              accessibilityLabel: "How to Play",
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: styles8.toggleContent, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SettingIcon, { source: "help-circle-outline", color: colors.secondary, containerColor: colors.secondaryContainer }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: styles8.flexShrink, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper7.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "How to Play" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper7.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Replay the quick intro" })
-                ] })
+          showAppearance && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.section, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "labelMedium", style: [styles9.sectionLabel, { color: colors.onSurfaceVariant }], children: "APPEARANCE" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_auto_paper8.AutoAppearancePicker, { showLabels: false }),
+            showBlur && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => setThemeSettings({ blur: !themeSettings.blur }), style: styles9.toggleButton, accessibilityLabel: `Blur ${themeSettings.blur ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SettingIcon, { source: themeSettings.blur ? "blur" : "blur-off", color: themeSettings.blur ? colors.tertiary : colors.onSurfaceVariant, containerColor: themeSettings.blur ? colors.tertiaryContainer : colors.surfaceVariant }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Blur" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Frost behind dialogs" })
               ] })
-            }
-          )
-        ] }),
-        showAppearance && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: styles8.section, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper7.Text, { variant: "labelMedium", style: [styles8.sectionLabel, { color: colors.onSurfaceVariant }], children: "APPEARANCE" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_auto_paper7.AutoAppearancePicker, { showLabels: false }),
-          showBlur && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => setThemeSettings({ blur: !themeSettings.blur }), style: styles8.toggleButton, accessibilityLabel: `Blur ${themeSettings.blur ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: styles8.toggleContent, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SettingIcon, { source: themeSettings.blur ? "blur" : "blur-off", color: themeSettings.blur ? colors.tertiary : colors.onSurfaceVariant, containerColor: themeSettings.blur ? colors.tertiaryContainer : colors.surfaceVariant }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper7.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Blur" })
-          ] }) })
-        ] }),
-        children,
-        showUpdateCheck && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: styles8.section, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_paper7.Text, { variant: "labelSmall", style: [styles8.sectionLabel, { color: colors.onSurfaceVariant }], children: [
-            "VERSION ",
-            version,
-            updateReady ? " \xB7 UPDATE READY" : ""
+            ] }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_feedback_press2.Button, { mode: "outlined", onPress: check, loading: checking, disabled: checking, children: "Check for Updates" })
+          children,
+          showUpdateCheck && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.section, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native_paper8.Text, { variant: "labelMedium", style: [styles9.sectionLabel, { color: colors.onSurfaceVariant }], children: [
+              "VERSION ",
+              version,
+              updateReady ? " \xB7 UPDATE READY" : ""
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press2.Button, { mode: "outlined", onPress: check, loading: checking, disabled: checking, children: "Check for Updates" })
+          ] })
         ] })
-      ] }) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [overlayActionStyles.actions, styles9.footer], children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press2.Button, { mode: "contained", onPress: onDismiss, style: overlayActionStyles.actionButtonSingle, buttonColor: colors.primary, textColor: colors.onPrimary, children: "Done" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ConfirmDialog, { visible: !!updateManifest, title: "Update Available", message: updateManifestDate ? `Released ${updateManifestDate.toLocaleDateString()} at ${updateManifestDate.toLocaleTimeString()}` : "", confirmLabel: "Restart", cancelLabel: "Later", icon: "update", rotation: 0, onConfirm: () => respondToUpdateConfirm(true), onCancel: () => respondToUpdateConfirm(false) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ConfirmDialog, { visible: !!infoMessage, title: infoMessage?.title ?? "", message: infoMessage?.message ?? "", confirmLabel: "OK", icon: "information-outline", rotation: 0, onConfirm: () => setInfoMessage(null) })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ConfirmDialog, { visible: !!updateManifest, title: "Update Available", message: updateManifestDate ? `Released ${updateManifestDate.toLocaleDateString()} at ${updateManifestDate.toLocaleTimeString()}` : "", confirmLabel: "Restart", cancelLabel: "Later", icon: "update", rotation: 0, onConfirm: () => respondToUpdateConfirm(true), onCancel: () => respondToUpdateConfirm(false) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ConfirmDialog, { visible: !!infoMessage, title: infoMessage?.title ?? "", message: infoMessage?.message ?? "", confirmLabel: "OK", icon: "information-outline", rotation: 0, onConfirm: () => setInfoMessage(null) })
   ] }) });
 }
-var styles8 = import_react_native10.StyleSheet.create({
+var SHEET_GUTTER = 24;
+var styles9 = import_react_native12.StyleSheet.create({
+  // The rows' sections, 24pt apart.
   content: {
-    gap: 24,
-    paddingVertical: 20
+    gap: 24
   },
   // Caps the card so it never grows past the screen - without this the dialog just keeps
   // growing to fit its content and the overflow gets clipped by the screen edge, which is
@@ -569,6 +637,11 @@ var styles8 = import_react_native10.StyleSheet.create({
   flexShrink: {
     flexShrink: 1
   },
+  // The overlay cards' 24pt padding, as the sheet's own insets (its scroll area pads 24 sideways).
+  footer: {
+    paddingBottom: 24,
+    paddingHorizontal: 24
+  },
   iconBadge: {
     alignItems: "center",
     borderRadius: 10,
@@ -576,9 +649,20 @@ var styles8 = import_react_native10.StyleSheet.create({
     justifyContent: "center",
     width: 36
   },
+  // No hairline dividers above and below the scroll area (Paper's MD2-era borders): none of the
+  // fleet's other dialogs draws one, so the sheet matches them (Jay, 2026-10-15).
   scrollArea: {
+    borderBottomWidth: 0,
+    borderTopWidth: 0,
     marginBottom: 0
   },
+  // The header and the rows scroll together: the card's 24pt inset above the header, the overlay
+  // cards' 16pt gap between it and the rows, and 16pt below the last row before the Done row.
+  scrollContent: {
+    gap: 16,
+    paddingBottom: 16,
+    paddingTop: 24
+  },
   section: {
     gap: 12
   },
@@ -622,31 +706,31 @@ var styles8 = import_react_native10.StyleSheet.create({
 });
 
 // src/BaseStatsScreen.tsx
-var import_auto_paper8 = require("@rific/auto-paper");
+var import_auto_paper9 = require("@rific/auto-paper");
 var import_feedback_press3 = require("@rific/feedback-press");
-var import_core4 = require("@tastic/core");
-var import_react5 = require("react");
-var import_react_native11 = require("react-native");
-var import_react_native_paper8 = require("react-native-paper");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_core5 = require("@tastic/core");
+var import_react6 = require("react");
+var import_react_native13 = require("react-native");
+var import_react_native_paper9 = require("react-native-paper");
+var import_jsx_runtime11 = 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_paper8.useAutoPaperTheme)();
-  const ambientRotation = (0, import_core4.useRotation)();
+  const { dark, colors } = (0, import_auto_paper9.useAutoPaperTheme)();
+  const ambientRotation = (0, import_core5.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
-  const [confirmResetVisible, setConfirmResetVisible] = (0, import_react5.useState)(false);
+  const [confirmResetVisible, setConfirmResetVisible] = (0, import_react6.useState)(false);
   const showReset = !!onReset;
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native11.View, { style: [styles9.container, { backgroundColor: bg }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native11.View, { style: [styles9.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: onBack }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: titleVariant, style: [styles9.title, { color: fg }], children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: [styles10.container, { backgroundColor: bg }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: [styles10.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: onBack }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper9.Text, { variant: titleVariant, style: [styles10.title, { color: fg }], children: title })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native11.ScrollView, { style: styles9.scrollView, contentContainerStyle: [styles9.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.ScrollView, { style: styles10.scrollView, contentContainerStyle: [styles10.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
       children,
-      showReset && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press3.Button, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles9.resetButton, children: resetLabel })
+      showReset && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press3.Button, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles10.resetButton, children: resetLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       ConfirmDialog,
       {
         visible: confirmResetVisible,
@@ -666,7 +750,7 @@ function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", t
     )
   ] });
 }
-var styles9 = import_react_native11.StyleSheet.create({
+var styles10 = import_react_native13.StyleSheet.create({
   container: {
     flex: 1
   },
@@ -697,19 +781,19 @@ var styles9 = import_react_native11.StyleSheet.create({
 });
 
 // src/ContentGutter.tsx
-var import_core5 = require("@tastic/core");
-var import_react_native12 = require("react-native");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_core6 = require("@tastic/core");
+var import_react_native14 = require("react-native");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }) {
-  const { width: windowWidth } = (0, import_core5.useRotatedWindowDimensions)();
-  const { contentWidth, gutterWidth } = (0, import_core5.computeContentBounds)(windowWidth, maxContentWidth ?? Infinity);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: [styles10.row, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native12.View, { style: [styles10.gutter, { width: gutterWidth }], children: leftGutter }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native12.View, { style: { width: contentWidth }, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native12.View, { style: [styles10.gutter, { width: gutterWidth }], children: rightGutter })
+  const { width: windowWidth } = (0, import_core6.useRotatedWindowDimensions)();
+  const { contentWidth, gutterWidth } = (0, import_core6.computeContentBounds)(windowWidth, maxContentWidth ?? Infinity);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native14.View, { style: [styles11.row, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native14.View, { style: [styles11.gutter, { width: gutterWidth }], children: leftGutter }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native14.View, { style: { width: contentWidth }, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native14.View, { style: [styles11.gutter, { width: gutterWidth }], children: rightGutter })
   ] });
 }
-var styles10 = import_react_native12.StyleSheet.create({
+var styles11 = import_react_native14.StyleSheet.create({
   // overflow:'hidden' keeps an oversized leftGutter/rightGutter from bleeding into the content
   // column instead of clipping cleanly at its own real width.
   gutter: {
@@ -722,15 +806,15 @@ var styles10 = import_react_native12.StyleSheet.create({
 
 // src/CornerActionButtons.tsx
 var import_feedback_press4 = require("@rific/feedback-press");
-var import_react_native13 = require("react-native");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react_native15 = require("react-native");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow-left", backLabel = "Back", hitSlop }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_feedback_press4.IconButton, { icon: backIcon, iconColor: fg, size: 24, style: [styles11.back, { top: 8 + insets.top, left: 8 + insets.left }], hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_feedback_press4.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles11.topRight, { top: 8 + insets.top, right: 8 + insets.right }], hitSlop, onPress: onSettings, accessibilityLabel: "Settings" })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_feedback_press4.IconButton, { icon: backIcon, iconColor: fg, size: 24, style: [styles12.back, { top: 8 + insets.top, left: 8 + insets.left }], hitSlop, onPress: onBack, accessibilityLabel: backLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_feedback_press4.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles12.topRight, { top: 8 + insets.top, right: 8 + insets.right }], hitSlop, onPress: onSettings, accessibilityLabel: "Settings" })
   ] });
 }
-var styles11 = import_react_native13.StyleSheet.create({
+var styles12 = import_react_native15.StyleSheet.create({
   back: {
     position: "absolute"
   },
@@ -740,10 +824,10 @@ var styles11 = import_react_native13.StyleSheet.create({
 });
 
 // src/StaggeredWord.tsx
-var import_react6 = require("react");
-var import_react_native14 = require("react-native");
+var import_react7 = require("react");
+var import_react_native16 = require("react-native");
 var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var STAGGER_MS = 45;
 var LETTER_DURATION_MS = 320;
 function getStaggeredWordDuration(letterCount) {
@@ -751,7 +835,7 @@ function getStaggeredWordDuration(letterCount) {
 }
 function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }) {
   const progress = (0, import_react_native_reanimated.useSharedValue)(reducedMotion ? 1 : 0);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (reducedMotion) return;
     progress.value = (0, import_react_native_reanimated.withDelay)(index * STAGGER_MS, (0, import_react_native_reanimated.withTiming)(1, { duration: LETTER_DURATION_MS, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.back(1.5)) }));
   }, [reducedMotion]);
@@ -759,12 +843,12 @@ function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSiz
     opacity: progress.value,
     transform: [{ translateY: (1 - progress.value) * 12 }, { scale: 0.85 + progress.value * 0.15 }]
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_reanimated.default.Text, { allowFontScaling: false, style: [{ color, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, style], children: char });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_reanimated.default.Text, { allowFontScaling: false, style: [{ color, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, style], children: char });
 }
 function StaggeredWord({ word, color, fontFamily, fontSize, lineHeight, reducedMotion, startIndex = 0, fontWeight = "bold", letterSpacing, style, onLayout }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native14.View, { style: [styles12.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native16.View, { style: [styles13.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
 }
-var styles12 = import_react_native14.StyleSheet.create({
+var styles13 = import_react_native16.StyleSheet.create({
   row: {
     flexDirection: "row"
   }
@@ -772,12 +856,12 @@ var styles12 = import_react_native14.StyleSheet.create({
 
 // src/UpdateDialog.tsx
 var import_updater2 = require("@rific/updater");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = 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_runtime14.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) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.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) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -786,9 +870,11 @@ function UpdateDialog({ rotation = 0, autoCheck = true, autoPrompt = true, onErr
   ActivityStatSection,
   BaseSettingsDialog,
   BaseStatsScreen,
+  COMPACT_DIALOG_HEIGHT,
   ConfirmDialog,
   ContentGutter,
   CornerActionButtons,
+  DialogHeader,
   LOCKED_BADGE_COLOR,
   MONO_FONT,
   OverlayBackdrop,
@@ -798,9 +884,10 @@ function UpdateDialog({ rotation = 0, autoCheck = true, autoPrompt = true, onErr
   StatRow,
   StatSection,
   UpdateDialog,
-  getOverlayCardColors,
   getStaggeredWordDuration,
+  isCompactDialogHeight,
   overlayActionStyles,
   overlayStyles,
+  useCompactDialog,
   useOverlayCardColors
 });