@tastic/hud 0.16.0 → 0.18.0

package/dist/chrome/index.mjs

@@ -14,31 +14,43 @@ import {
   StatRow,
   StatSection,
   UpdateDialog,
-  getStaggeredWordDuration
-} from "../chunk-JXRBXQLQ.mjs";
+  getStaggeredWordDuration,
+  useCompactDialog
+} from "../chunk-Z2WUUYTE.mjs";
 import {
-  getOverlayCardColors,
+  COMPACT_DIALOG_HEIGHT,
+  DialogHeader,
+  OverlayBackdrop,
+  OverlayCard,
+  isCompactDialogHeight,
   overlayActionStyles,
-  overlayStyles
-} from "../chunk-32U2OIRW.mjs";
+  overlayStyles,
+  useOverlayCardColors
+} from "../chunk-PUF6TABL.mjs";
 export {
   AchievementCatalogSection,
   AchievementRow,
   ActivityStatSection,
   BaseSettingsDialog,
   BaseStatsScreen,
+  COMPACT_DIALOG_HEIGHT,
   ConfirmDialog,
   ContentGutter,
   CornerActionButtons,
+  DialogHeader,
   LOCKED_BADGE_COLOR,
   MONO_FONT,
+  OverlayBackdrop,
+  OverlayCard,
   RotatedFrame,
   StaggeredWord,
   StatRow,
   StatSection,
   UpdateDialog,
-  getOverlayCardColors,
   getStaggeredWordDuration,
+  isCompactDialogHeight,
   overlayActionStyles,
-  overlayStyles
+  overlayStyles,
+  useCompactDialog,
+  useOverlayCardColors
 };

package/dist/{chunk-32U2OIRW.mjs → chunk-PUF6TABL.mjs}

@@ -1,21 +1,55 @@
-// src/overlayCard.ts
-import { StyleSheet } from "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)"
-  };
+// src/DialogHeader.tsx
+import { useAutoPaperTheme } from "@rific/auto-paper";
+import { StyleSheet, View } from "react-native";
+import { Icon, Text } from "react-native-paper";
+import { jsx, jsxs } from "react/jsx-runtime";
+var COMPACT_DIALOG_HEIGHT = 528;
+function isCompactDialogHeight(height) {
+  return height < COMPACT_DIALOG_HEIGHT;
+}
+function DialogHeader({ icon, title, color, compact = false, style }) {
+  const { colors } = useAutoPaperTheme();
+  const accent = color ?? colors.primary;
+  return /* @__PURE__ */ jsxs(View, { style: [compact ? styles.compact : styles.full, style], children: [
+    /* @__PURE__ */ jsx(Icon, { source: icon, size: compact ? COMPACT_ICON_SIZE : ICON_SIZE, color: accent }),
+    /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", variant: compact ? "headlineSmall" : "headlineLarge", style: [styles.title, compact && styles.titleCompact, { color: accent }], children: title })
+  ] });
 }
-var overlayStyles = StyleSheet.create({
+var ICON_SIZE = 64;
+var COMPACT_ICON_SIZE = 32;
+var styles = 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
+import { StyleSheet as StyleSheet2 } from "react-native";
+var overlayStyles = StyleSheet2.create({
   card: {
     alignItems: "center",
-    borderRadius: 20,
-    borderWidth: 1,
+    borderRadius: 28,
     gap: 16,
     maxWidth: 360,
-    padding: 32
+    padding: 24
   },
   overlay: {
     alignItems: "center",
@@ -28,7 +62,7 @@ var overlayStyles = StyleSheet.create({
     top: 0
   }
 });
-var overlayActionStyles = StyleSheet.create({
+var overlayActionStyles = StyleSheet2.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
@@ -70,8 +104,34 @@ var overlayActionStyles = StyleSheet.create({
   }
 });
 
+// src/OverlaySurface.tsx
+import { BlurView, useAutoPaperTheme as useAutoPaperTheme2, useBlur } from "@rific/auto-paper";
+import { StyleSheet as StyleSheet3, View as View2 } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function useOverlayCardColors() {
+  const { colors } = useAutoPaperTheme2();
+  return { fg: colors.onSurface, fgMuted: colors.onSurfaceVariant, cardBorder: colors.outlineVariant, backdrop: colors.backdrop };
+}
+function OverlayBackdrop({ children, style, onLayout }) {
+  const { backdrop } = useOverlayCardColors();
+  return /* @__PURE__ */ jsx2(View2, { onLayout, style: [overlayStyles.overlay, { backgroundColor: backdrop }, style], children });
+}
+function OverlayCard({ children, style, ...rest }) {
+  const { isV3, roundness } = useAutoPaperTheme2();
+  const blur = useBlur();
+  return /* @__PURE__ */ jsx2(BlurView, { blur, style: [overlayStyles.card, styles2.card, { borderRadius: (isV3 ? 7 : 1) * roundness }, style], ...rest, children });
+}
+var styles2 = StyleSheet3.create({
+  card: { overflow: "hidden" }
+});
+
 export {
-  getOverlayCardColors,
+  COMPACT_DIALOG_HEIGHT,
+  isCompactDialogHeight,
+  DialogHeader,
   overlayStyles,
-  overlayActionStyles
+  overlayActionStyles,
+  useOverlayCardColors,
+  OverlayBackdrop,
+  OverlayCard
 };

package/dist/{chunk-JXRBXQLQ.mjs → chunk-Z2WUUYTE.mjs}

@@ -1,8 +1,12 @@
 import {
-  getOverlayCardColors,
+  DialogHeader,
+  OverlayBackdrop,
+  OverlayCard,
+  isCompactDialogHeight,
   overlayActionStyles,
-  overlayStyles
-} from "./chunk-32U2OIRW.mjs";
+  overlayStyles,
+  useOverlayCardColors
+} from "./chunk-PUF6TABL.mjs";
 
 // src/AchievementRow.tsx
 import { useAutoPaperTheme } from "@rific/auto-paper";
@@ -162,23 +166,40 @@ function ActivityStatSection({ stats }) {
   ] });
 }
 
+// src/useCompactDialog.ts
+import { useRotatedWindowDimensions } from "@tastic/core";
+import { useCallback, useState } from "react";
+import { useWindowDimensions } from "react-native";
+function useCompactDialog(rotation = 0) {
+  const window = useWindowDimensions();
+  const framed = useRotatedWindowDimensions();
+  const [measured, setMeasured] = useState(null);
+  const onLayout = 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
 import { useAutoPaperTheme as useAutoPaperTheme5 } from "@rific/auto-paper";
 import { Button } from "@rific/feedback-press";
 import { toRotationStyle } from "@tastic/core";
 import { StyleSheet as StyleSheet5, View as View4 } from "react-native";
-import { Icon as Icon2, Portal, Text as Text5 } from "react-native-paper";
+import { Portal, Text as Text5 } from "react-native-paper";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
-  const { dark, colors } = useAutoPaperTheme5();
+  const { colors } = useAutoPaperTheme5();
+  const { fg } = useOverlayCardColors();
+  const { compact, onLayout } = useCompactDialog(rotation);
   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__ */ jsx6(Portal, { children: /* @__PURE__ */ jsx6(View4, { style: [overlayStyles.overlay, styles5.overlay], children: /* @__PURE__ */ jsxs6(View4, { style: [overlayStyles.card, styles5.card, { backgroundColor: cardBg, borderColor: cardBorder }, toRotationStyle(rotation)], children: [
-    /* @__PURE__ */ jsx6(Icon2, { source: icon, size: 64, color: accent }),
-    /* @__PURE__ */ jsx6(Text5, { variant: "headlineLarge", style: [styles5.title, { color: accent }], children: title }),
+  return /* @__PURE__ */ jsx6(Portal, { children: /* @__PURE__ */ jsx6(OverlayBackdrop, { style: styles5.overlay, onLayout, children: /* @__PURE__ */ jsxs6(OverlayCard, { style: [styles5.card, toRotationStyle(rotation)], children: [
+    /* @__PURE__ */ jsx6(DialogHeader, { icon, title, color: accent, compact }),
     /* @__PURE__ */ jsx6(Text5, { variant: "bodyLarge", style: [styles5.body, { color: fg }], children: message }),
     /* @__PURE__ */ jsxs6(View4, { style: overlayActionStyles.actions, children: [
       showCancel && /* @__PURE__ */ jsx6(Button, { mode: "outlined", onPress: onCancel, style: overlayActionStyles.actionButton, children: cancelLabel }),
@@ -204,27 +225,20 @@ var styles5 = StyleSheet5.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
 import { FakeLandscapeView, rotateDimensions, rotateInsets, useRotation } from "@tastic/core";
 import { useMemo } from "react";
-import { StyleSheet as StyleSheet6, useWindowDimensions, View as View5 } from "react-native";
+import { StyleSheet as StyleSheet6, useWindowDimensions as useWindowDimensions2, View as View5 } from "react-native";
 import { Portal as Portal2 } from "react-native-paper";
 import { SafeAreaInsetsContext, useSafeAreaInsets } from "react-native-safe-area-context";
 import { jsx as jsx7 } from "react/jsx-runtime";
 function RotatedFrame({ children, rotation: rotationOverride, rotatedSafeArea = false, portalHost = false, passThrough = false, maxContentWidth }) {
   const ambientRotation = useRotation();
   const rotation = rotationOverride ?? ambientRotation;
-  const window = useWindowDimensions();
+  const window = useWindowDimensions2();
   const { width, height } = rotateDimensions(window.width, window.height, rotation);
   const rawInsets = useSafeAreaInsets();
   const insets = useMemo(() => rotatedSafeArea ? rotateInsets(rawInsets, rotation) : rawInsets, [rotatedSafeArea, rawInsets, rotation]);
@@ -245,27 +259,28 @@ var styles6 = StyleSheet6.create({
 });
 
 // src/BaseSettingsDialog.tsx
-import { AutoAppearancePicker, Dialog, useAutoPaperTheme as useAutoPaperTheme6 } from "@rific/auto-paper";
+import { AutoAppearancePicker, Dialog, FadingScrollView, useAutoPaperTheme as useAutoPaperTheme6, useBlurModule, useThemeSettings } from "@rific/auto-paper";
 import { Button as Button2, SoundContext, TouchableRipple, useHapticSettings, useSoundSettings, useVibration } from "@rific/feedback-press";
 import { useUpdater } from "@rific/updater";
-import { useIsTouchPrimaryDevice, useRotation as useRotation2 } from "@tastic/core";
-import { useContext, useState as useState2 } from "react";
-import { Platform as Platform2, ScrollView, StyleSheet as StyleSheet7, View as View6 } from "react-native";
-import { Icon as Icon3, Portal as Portal3, Text as Text6 } from "react-native-paper";
+import { rotateInsets as rotateInsets2, useIsTouchPrimaryDevice, useRotation as useRotation2 } from "@tastic/core";
+import { useContext, useState as useState3 } from "react";
+import { Platform as Platform2, StyleSheet as StyleSheet7, useWindowDimensions as useWindowDimensions3, View as View6 } from "react-native";
+import { Icon as Icon2, Portal as Portal3, Text as Text6 } from "react-native-paper";
+import { useSafeAreaInsets as useSafeAreaInsets2 } from "react-native-safe-area-context";
 
 // src/useUpdateConfirmBridge.ts
-import { useCallback, useRef, useState } from "react";
+import { useCallback as useCallback2, useRef, useState as useState2 } from "react";
 function useUpdateConfirmBridge() {
-  const [manifest, setManifest] = useState(null);
+  const [manifest, setManifest] = useState2(null);
   const resolveRef = useRef(null);
-  const onConfirm = useCallback(
+  const onConfirm = useCallback2(
     (next) => new Promise((resolve) => {
       resolveRef.current = resolve;
       setManifest(next);
     }),
     []
   );
-  const respond = useCallback((confirmed) => {
+  const respond = useCallback2((confirmed) => {
     setManifest(null);
     resolveRef.current?.(confirmed);
     resolveRef.current = null;
@@ -276,18 +291,25 @@ function useUpdateConfirmBridge() {
 // src/BaseSettingsDialog.tsx
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function SettingIcon({ source, color, containerColor }) {
-  return /* @__PURE__ */ jsx8(View6, { style: [styles7.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ jsx8(Icon3, { source, size: 18, color }) });
+  return /* @__PURE__ */ jsx8(View6, { style: [styles7.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ jsx8(Icon2, { 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 } = useAutoPaperTheme6();
   const ambientRotation = useRotation2();
   const rotation = rotationOverride ?? ambientRotation;
+  const window = useWindowDimensions3();
+  const turned = rotation === 90 || rotation === -90;
+  const compactHeader = isCompactDialogHeight(turned ? window.width : window.height);
+  const insets = rotateInsets2(useSafeAreaInsets2(), rotation);
+  const sheetWidth = Math.min(overlayStyles.card.maxWidth, (turned ? window.height : window.width) - 2 * Math.max(insets.left, insets.right, SHEET_GUTTER));
   const isTouchPrimary = useIsTouchPrimaryDevice();
   const { settings: hapticSettings, set: setHapticSettings } = useHapticSettings();
   const { settings: soundSettings, set: setSoundSettings } = useSoundSettings();
   const sound = useContext(SoundContext);
   const { forceShort: forceHapticFeedback } = useVibration();
-  const [infoMessage, setInfoMessage] = useState2(null);
+  const { settings: themeSettings, set: setThemeSettings } = useThemeSettings();
+  const expoBlur = useBlurModule();
+  const [infoMessage, setInfoMessage] = useState3(null);
   const { manifest: updateManifest, onConfirm: onUpdateConfirm, respond: respondToUpdateConfirm } = useUpdateConfirmBridge();
   const { check, checking, updateReady } = useUpdater({
     autoCheck: false,
@@ -297,112 +319,124 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
     onInfo: (title, message) => setInfoMessage({ title, message })
   });
   const updateManifestDate = updateManifest ? new Date(updateManifest.createdAt) : null;
-  const [opened, setOpened] = useState2(visible);
+  const [opened, setOpened] = useState3(visible);
   if (visible && !opened) setOpened(true);
   const showLockOrientation = isTouchPrimary && lockOrientation !== void 0 && onLockOrientationChange !== void 0;
   const showEdgeGuard = Platform2.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
   const showHaptics = Platform2.OS !== "web" && !hideHaptics;
   const showSound = !hideSound;
   const showAppearance = !hideAppearance;
+  const showBlur = showAppearance && Platform2.OS !== "android" && expoBlur !== void 0 && expoBlur !== null;
   const showUpdateCheck = Platform2.OS !== "web" && !hideUpdateCheck;
   if (!opened) return null;
   return /* @__PURE__ */ jsx8(Portal3, { children: /* @__PURE__ */ jsxs7(RotatedFrame, { rotation, rotatedSafeArea: true, portalHost: true, passThrough: true, children: [
-    /* @__PURE__ */ jsxs7(Dialog, { visible, onDismiss, style: styles7.dialog, children: [
-      /* @__PURE__ */ jsx8(Dialog.Title, { children: "Settings" }),
-      /* @__PURE__ */ jsx8(Dialog.ScrollArea, { style: styles7.scrollArea, children: /* @__PURE__ */ jsxs7(ScrollView, { contentContainerStyle: styles7.content, showsVerticalScrollIndicator: false, children: [
-        /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleGroup, children: [
-          showLockOrientation && /* @__PURE__ */ jsx8(TouchableRipple, { onPress: () => onLockOrientationChange(!lockOrientation), style: styles7.toggleButton, accessibilityLabel: `Lock orientation ${lockOrientation ? "on" : "off"}`, children: /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleContent, children: [
-            /* @__PURE__ */ jsx8(SettingIcon, { source: lockOrientation ? "lock" : "lock-open-variant-outline", color: lockOrientation ? colors.tertiary : colors.onSurfaceVariant, containerColor: lockOrientation ? colors.tertiaryContainer : colors.surfaceVariant }),
-            /* @__PURE__ */ jsxs7(View6, { style: styles7.flexShrink, children: [
-              /* @__PURE__ */ jsx8(Text6, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Lock Orientation" }),
-              /* @__PURE__ */ jsx8(Text6, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Pins the current layout" })
-            ] })
-          ] }) }),
-          showEdgeGuard && /* @__PURE__ */ jsx8(TouchableRipple, { onPress: () => onDeferBottomEdgeGestures(!deferBottomEdgeGestures), style: styles7.toggleButton, accessibilityLabel: `Edge guard ${deferBottomEdgeGestures ? "on" : "off"}`, children: /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleContent, children: [
-            /* @__PURE__ */ jsx8(SettingIcon, { source: deferBottomEdgeGestures ? "shield-check-outline" : "shield-off-outline", color: deferBottomEdgeGestures ? colors.tertiary : colors.onSurfaceVariant, containerColor: deferBottomEdgeGestures ? colors.tertiaryContainer : colors.surfaceVariant }),
-            /* @__PURE__ */ jsxs7(View6, { style: styles7.flexShrink, children: [
-              /* @__PURE__ */ jsx8(Text6, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Edge Guard" }),
-              /* @__PURE__ */ jsx8(Text6, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Requires a second swipe" })
-            ] })
-          ] }) }),
-          (showSound || showHaptics) && /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleRow, children: [
-            showSound && /* @__PURE__ */ jsx8(
-              TouchableRipple,
-              {
-                soundDisabled: true,
-                onPress: () => {
-                  const enabled = !soundSettings.enabled;
-                  setSoundSettings({ enabled });
-                  if (enabled) sound.selection?.();
-                },
-                style: styles7.toggleButtonInRow,
-                accessibilityLabel: `Sound ${soundSettings.enabled ? "on" : "off"}`,
-                children: /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleContent, children: [
-                  /* @__PURE__ */ jsx8(SettingIcon, { source: soundSettings.enabled ? "volume-high" : "volume-off", color: soundSettings.enabled ? colors.tertiary : colors.onSurfaceVariant, containerColor: soundSettings.enabled ? colors.tertiaryContainer : colors.surfaceVariant }),
-                  /* @__PURE__ */ jsx8(Text6, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Sound" })
-                ] })
-              }
-            ),
-            showHaptics && /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsxs7(Dialog, { visible, onDismiss, style: [styles7.dialog, { width: sheetWidth }], children: [
+      /* @__PURE__ */ jsx8(Dialog.ScrollArea, { style: styles7.scrollArea, children: /* @__PURE__ */ jsxs7(FadingScrollView, { contentContainerStyle: styles7.scrollContent, showsVerticalScrollIndicator: false, children: [
+        /* @__PURE__ */ jsx8(DialogHeader, { icon: "cog", title: "Settings", compact: compactHeader }),
+        /* @__PURE__ */ jsxs7(View6, { style: styles7.content, children: [
+          /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleGroup, children: [
+            showLockOrientation && /* @__PURE__ */ jsx8(TouchableRipple, { onPress: () => onLockOrientationChange(!lockOrientation), style: styles7.toggleButton, accessibilityLabel: `Lock orientation ${lockOrientation ? "on" : "off"}`, children: /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleContent, children: [
+              /* @__PURE__ */ jsx8(SettingIcon, { source: lockOrientation ? "lock" : "lock-open-variant-outline", color: lockOrientation ? colors.tertiary : colors.onSurfaceVariant, containerColor: lockOrientation ? colors.tertiaryContainer : colors.surfaceVariant }),
+              /* @__PURE__ */ jsxs7(View6, { style: styles7.flexShrink, children: [
+                /* @__PURE__ */ jsx8(Text6, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Lock Orientation" }),
+                /* @__PURE__ */ jsx8(Text6, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Pin current layout" })
+              ] })
+            ] }) }),
+            showEdgeGuard && /* @__PURE__ */ jsx8(TouchableRipple, { onPress: () => onDeferBottomEdgeGestures(!deferBottomEdgeGestures), style: styles7.toggleButton, accessibilityLabel: `Edge guard ${deferBottomEdgeGestures ? "on" : "off"}`, children: /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleContent, children: [
+              /* @__PURE__ */ jsx8(SettingIcon, { source: deferBottomEdgeGestures ? "shield-check-outline" : "shield-off-outline", color: deferBottomEdgeGestures ? colors.tertiary : colors.onSurfaceVariant, containerColor: deferBottomEdgeGestures ? colors.tertiaryContainer : colors.surfaceVariant }),
+              /* @__PURE__ */ jsxs7(View6, { style: styles7.flexShrink, children: [
+                /* @__PURE__ */ jsx8(Text6, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Edge Guard" }),
+                /* @__PURE__ */ jsx8(Text6, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Require second swipe" })
+              ] })
+            ] }) }),
+            (showSound || showHaptics) && /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleRow, children: [
+              showSound && /* @__PURE__ */ jsx8(
+                TouchableRipple,
+                {
+                  soundDisabled: true,
+                  onPress: () => {
+                    const enabled = !soundSettings.enabled;
+                    setSoundSettings({ enabled });
+                    if (enabled) sound.selection?.();
+                  },
+                  style: styles7.toggleButtonInRow,
+                  accessibilityLabel: `Sound ${soundSettings.enabled ? "on" : "off"}`,
+                  children: /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleContent, children: [
+                    /* @__PURE__ */ jsx8(SettingIcon, { source: soundSettings.enabled ? "volume-high" : "volume-off", color: soundSettings.enabled ? colors.tertiary : colors.onSurfaceVariant, containerColor: soundSettings.enabled ? colors.tertiaryContainer : colors.surfaceVariant }),
+                    /* @__PURE__ */ jsx8(Text6, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Sound" })
+                  ] })
+                }
+              ),
+              showHaptics && /* @__PURE__ */ jsx8(
+                TouchableRipple,
+                {
+                  hapticDisabled: true,
+                  onPress: () => {
+                    const vibrate = !hapticSettings.vibrate;
+                    setHapticSettings({ vibrate });
+                    if (vibrate) forceHapticFeedback();
+                  },
+                  style: styles7.toggleButtonInRow,
+                  accessibilityLabel: `Haptics ${hapticSettings.vibrate ? "on" : "off"}`,
+                  children: /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleContent, children: [
+                    /* @__PURE__ */ jsx8(SettingIcon, { source: hapticSettings.vibrate ? "vibrate" : "vibrate-off", color: hapticSettings.vibrate ? colors.tertiary : colors.onSurfaceVariant, containerColor: hapticSettings.vibrate ? colors.tertiaryContainer : colors.surfaceVariant }),
+                    /* @__PURE__ */ jsx8(Text6, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Haptics" })
+                  ] })
+                }
+              )
+            ] }),
+            onShowHowToPlay && /* @__PURE__ */ jsx8(
               TouchableRipple,
               {
-                hapticDisabled: true,
                 onPress: () => {
-                  const vibrate = !hapticSettings.vibrate;
-                  setHapticSettings({ vibrate });
-                  if (vibrate) forceHapticFeedback();
+                  onDismiss();
+                  onShowHowToPlay();
                 },
-                style: styles7.toggleButtonInRow,
-                accessibilityLabel: `Haptics ${hapticSettings.vibrate ? "on" : "off"}`,
+                style: styles7.toggleButton,
+                accessibilityLabel: "How to Play",
                 children: /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleContent, children: [
-                  /* @__PURE__ */ jsx8(SettingIcon, { source: hapticSettings.vibrate ? "vibrate" : "vibrate-off", color: hapticSettings.vibrate ? colors.tertiary : colors.onSurfaceVariant, containerColor: hapticSettings.vibrate ? colors.tertiaryContainer : colors.surfaceVariant }),
-                  /* @__PURE__ */ jsx8(Text6, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Haptics" })
+                  /* @__PURE__ */ jsx8(SettingIcon, { source: "help-circle-outline", color: colors.secondary, containerColor: colors.secondaryContainer }),
+                  /* @__PURE__ */ jsxs7(View6, { style: styles7.flexShrink, children: [
+                    /* @__PURE__ */ jsx8(Text6, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "How to Play" }),
+                    /* @__PURE__ */ jsx8(Text6, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Replay quick intro" })
+                  ] })
                 ] })
               }
             )
           ] }),
-          onShowHowToPlay && /* @__PURE__ */ jsx8(
-            TouchableRipple,
-            {
-              onPress: () => {
-                onDismiss();
-                onShowHowToPlay();
-              },
-              style: styles7.toggleButton,
-              accessibilityLabel: "How to Play",
-              children: /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleContent, children: [
-                /* @__PURE__ */ jsx8(SettingIcon, { source: "help-circle-outline", color: colors.secondary, containerColor: colors.secondaryContainer }),
-                /* @__PURE__ */ jsxs7(View6, { style: styles7.flexShrink, children: [
-                  /* @__PURE__ */ jsx8(Text6, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "How to Play" }),
-                  /* @__PURE__ */ jsx8(Text6, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Replay the quick intro" })
-                ] })
+          showAppearance && /* @__PURE__ */ jsxs7(View6, { style: styles7.section, children: [
+            /* @__PURE__ */ jsx8(Text6, { variant: "labelMedium", style: [styles7.sectionLabel, { color: colors.onSurfaceVariant }], children: "APPEARANCE" }),
+            /* @__PURE__ */ jsx8(AutoAppearancePicker, { showLabels: false }),
+            showBlur && /* @__PURE__ */ jsx8(TouchableRipple, { onPress: () => setThemeSettings({ blur: !themeSettings.blur }), style: styles7.toggleButton, accessibilityLabel: `Blur ${themeSettings.blur ? "on" : "off"}`, children: /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleContent, children: [
+              /* @__PURE__ */ jsx8(SettingIcon, { source: themeSettings.blur ? "blur" : "blur-off", color: themeSettings.blur ? colors.tertiary : colors.onSurfaceVariant, containerColor: themeSettings.blur ? colors.tertiaryContainer : colors.surfaceVariant }),
+              /* @__PURE__ */ jsxs7(View6, { style: styles7.flexShrink, children: [
+                /* @__PURE__ */ jsx8(Text6, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Blur" }),
+                /* @__PURE__ */ jsx8(Text6, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Frost behind dialogs" })
               ] })
-            }
-          )
-        ] }),
-        showAppearance && /* @__PURE__ */ jsxs7(View6, { style: styles7.section, children: [
-          /* @__PURE__ */ jsx8(Text6, { variant: "labelMedium", style: [styles7.sectionLabel, { color: colors.onSurfaceVariant }], children: "APPEARANCE" }),
-          /* @__PURE__ */ jsx8(AutoAppearancePicker, { showLabels: false })
-        ] }),
-        children,
-        showUpdateCheck && /* @__PURE__ */ jsxs7(View6, { style: styles7.section, children: [
-          /* @__PURE__ */ jsxs7(Text6, { variant: "labelSmall", style: [styles7.sectionLabel, { color: colors.onSurfaceVariant }], children: [
-            "VERSION ",
-            version,
-            updateReady ? " \xB7 UPDATE READY" : ""
+            ] }) })
           ] }),
-          /* @__PURE__ */ jsx8(Button2, { mode: "outlined", onPress: check, loading: checking, disabled: checking, children: "Check for Updates" })
+          children,
+          showUpdateCheck && /* @__PURE__ */ jsxs7(View6, { style: styles7.section, children: [
+            /* @__PURE__ */ jsxs7(Text6, { variant: "labelMedium", style: [styles7.sectionLabel, { color: colors.onSurfaceVariant }], children: [
+              "VERSION ",
+              version,
+              updateReady ? " \xB7 UPDATE READY" : ""
+            ] }),
+            /* @__PURE__ */ jsx8(Button2, { mode: "outlined", onPress: check, loading: checking, disabled: checking, children: "Check for Updates" })
+          ] })
         ] })
-      ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsx8(View6, { style: [overlayActionStyles.actions, styles7.footer], children: /* @__PURE__ */ jsx8(Button2, { mode: "contained", onPress: onDismiss, style: overlayActionStyles.actionButtonSingle, buttonColor: colors.primary, textColor: colors.onPrimary, children: "Done" }) })
     ] }),
     /* @__PURE__ */ jsx8(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__ */ jsx8(ConfirmDialog, { visible: !!infoMessage, title: infoMessage?.title ?? "", message: infoMessage?.message ?? "", confirmLabel: "OK", icon: "information-outline", rotation: 0, onConfirm: () => setInfoMessage(null) })
   ] }) });
 }
+var SHEET_GUTTER = 24;
 var styles7 = StyleSheet7.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
@@ -414,6 +448,11 @@ var styles7 = StyleSheet7.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,
@@ -421,9 +460,20 @@ var styles7 = StyleSheet7.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
   },
@@ -470,15 +520,15 @@ var styles7 = StyleSheet7.create({
 import { useAutoPaperTheme as useAutoPaperTheme7 } from "@rific/auto-paper";
 import { Button as Button3, IconButton } from "@rific/feedback-press";
 import { useRotation as useRotation3 } from "@tastic/core";
-import { useState as useState3 } from "react";
-import { ScrollView as ScrollView2, StyleSheet as StyleSheet8, View as View7 } from "react-native";
+import { useState as useState4 } from "react";
+import { ScrollView, StyleSheet as StyleSheet8, View as View7 } from "react-native";
 import { Text as Text7 } from "react-native-paper";
 import { jsx as jsx9, jsxs as jsxs8 } from "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 } = useAutoPaperTheme7();
   const ambientRotation = useRotation3();
   const rotation = rotationOverride ?? ambientRotation;
-  const [confirmResetVisible, setConfirmResetVisible] = useState3(false);
+  const [confirmResetVisible, setConfirmResetVisible] = useState4(false);
   const showReset = !!onReset;
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
@@ -487,7 +537,7 @@ function BaseStatsScreen({ rotation: rotationOverride, title = "Achievements", t
       /* @__PURE__ */ jsx9(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: onBack }),
       /* @__PURE__ */ jsx9(Text7, { variant: titleVariant, style: [styles8.title, { color: fg }], children: title })
     ] }),
-    /* @__PURE__ */ jsxs8(ScrollView2, { style: styles8.scrollView, contentContainerStyle: [styles8.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
+    /* @__PURE__ */ jsxs8(ScrollView, { style: styles8.scrollView, contentContainerStyle: [styles8.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
       children,
       showReset && /* @__PURE__ */ jsx9(Button3, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles8.resetButton, children: resetLabel })
     ] }),
@@ -542,11 +592,11 @@ var styles8 = StyleSheet8.create({
 });
 
 // src/ContentGutter.tsx
-import { computeContentBounds, useRotatedWindowDimensions } from "@tastic/core";
+import { computeContentBounds, useRotatedWindowDimensions as useRotatedWindowDimensions2 } from "@tastic/core";
 import { StyleSheet as StyleSheet9, View as View8 } from "react-native";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }) {
-  const { width: windowWidth } = useRotatedWindowDimensions();
+  const { width: windowWidth } = useRotatedWindowDimensions2();
   const { contentWidth, gutterWidth } = computeContentBounds(windowWidth, maxContentWidth ?? Infinity);
   return /* @__PURE__ */ jsxs9(View8, { style: [styles9.row, style], children: [
     /* @__PURE__ */ jsx10(View8, { style: [styles9.gutter, { width: gutterWidth }], children: leftGutter }),
@@ -633,6 +683,7 @@ export {
   StatRow,
   StatSection,
   ActivityStatSection,
+  useCompactDialog,
   ConfirmDialog,
   RotatedFrame,
   BaseSettingsDialog,

package/dist/guide/index.d.mts

@@ -80,6 +80,7 @@ declare function getGuideCardSize(windowWidth: number, windowHeight: number, rot
     pageWidth: number;
     maxHeight: number;
     artHeight: number;
+    compact: boolean;
 };
 interface HowToPlayDialogProps {
     visible: boolean;
@@ -87,6 +88,8 @@ interface HowToPlayDialogProps {
     onFinish: () => void;
     onSkip: () => void;
     rotation?: GuideRotation;
+    title?: string;
+    icon?: string;
 }
 declare function HowToPlayDialog({ visible, steps, ...rest }: HowToPlayDialogProps): react.JSX.Element | null;