@tastic/hud 0.14.2 → 0.15.0

package/dist/chunk-OTMMST5M.mjs

@@ -0,0 +1,645 @@
+import {
+  getOverlayCardColors,
+  overlayActionStyles,
+  overlayStyles
+} from "./chunk-32U2OIRW.mjs";
+
+// src/AchievementRow.tsx
+import { useAutoPaperTheme } from "@rific/auto-paper";
+import { StyleSheet, View } from "react-native";
+import { Icon, ProgressBar, Text } from "react-native-paper";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
+function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }) {
+  const { dark } = useAutoPaperTheme();
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
+  const unlocked = unlockedLabel !== void 0;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.row, { backgroundColor: sectionBg }], children: [
+    /* @__PURE__ */ jsx(View, { style: [styles.badge, { backgroundColor: badgeColor }], children: /* @__PURE__ */ jsx(Icon, { source: icon, size: 20, color: unlocked ? "#000000" : fgMuted }) }),
+    /* @__PURE__ */ jsxs(View, { style: styles.text, children: [
+      /* @__PURE__ */ jsx(Text, { variant: "bodyLarge", style: [styles.boldText, { color: fg }], children: title }),
+      /* @__PURE__ */ jsx(Text, { variant: "bodySmall", style: { color: fgMuted }, children: description }),
+      deviceMarker && /* @__PURE__ */ jsxs(View, { style: styles.deviceMarker, children: [
+        /* @__PURE__ */ jsx(Icon, { source: "earth", size: 11, color: fgMuted }),
+        /* @__PURE__ */ jsx(Text, { variant: "labelSmall", style: { color: fgMuted }, children: "Same for every profile" })
+      ] }),
+      !unlocked && progress !== void 0 && /* @__PURE__ */ jsx(ProgressBar, { progress, color: checkColor ?? badgeColor, style: styles.progressBar })
+    ] }),
+    unlocked ? /* @__PURE__ */ jsxs(View, { style: styles.status, children: [
+      /* @__PURE__ */ jsx(Icon, { source: "check-circle", size: 20, color: checkColor ?? badgeColor }),
+      /* @__PURE__ */ jsx(Text, { variant: "labelSmall", style: { color: fgMuted }, children: unlockedLabel })
+    ] }) : /* @__PURE__ */ jsx(Icon, { source: "lock-outline", size: 20, color: fgMuted })
+  ] });
+}
+var styles = StyleSheet.create({
+  badge: {
+    alignItems: "center",
+    borderRadius: 10,
+    height: 36,
+    justifyContent: "center",
+    width: 36
+  },
+  boldText: {
+    fontWeight: "bold"
+  },
+  deviceMarker: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 4
+  },
+  progressBar: {
+    borderRadius: 4,
+    height: 6,
+    marginTop: 6
+  },
+  row: {
+    alignItems: "center",
+    borderRadius: 12,
+    flexDirection: "row",
+    gap: 12,
+    padding: 12
+  },
+  status: {
+    alignItems: "center",
+    gap: 2,
+    width: 64
+  },
+  text: {
+    flex: 1,
+    gap: 2
+  }
+});
+
+// src/fonts.ts
+import { Platform } from "react-native";
+var MONO_FONT = Platform.select({ ios: "Menlo", android: "monospace", default: "monospace" });
+
+// src/AchievementCatalogSection.tsx
+import { useAutoPaperTheme as useAutoPaperTheme2 } from "@rific/auto-paper";
+import { Fragment } from "react";
+import { StyleSheet as StyleSheet2 } from "react-native";
+import { Text as Text2 } from "react-native-paper";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function AchievementCatalogSection({ rows, label = "ALL ACHIEVEMENTS", fg, fgMuted: fgMutedOverride }) {
+  const { dark } = useAutoPaperTheme2();
+  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(Text2, { variant: "labelMedium", style: [styles2.label, { color: fgMuted, fontFamily: MONO_FONT }], children: label }),
+    rows.map((row) => /* @__PURE__ */ jsx2(AchievementRow, { icon: row.icon, title: row.title, description: row.description, badgeColor: row.unlockedAt !== void 0 ? row.tierColor : LOCKED_BADGE_COLOR, checkColor: row.tierColor, unlockedLabel: row.unlockedLabel, progress: row.progress, deviceMarker: row.deviceMarker, fg, fgMuted: fgMutedOverride }, row.id))
+  ] });
+}
+var styles2 = StyleSheet2.create({
+  label: {
+    letterSpacing: 2,
+    marginTop: 8
+  }
+});
+
+// src/StatRow.tsx
+import { useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
+import { StyleSheet as StyleSheet3, View as View2 } from "react-native";
+import { Text as Text3 } from "react-native-paper";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }) {
+  const { dark } = useAutoPaperTheme3();
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  return /* @__PURE__ */ jsxs3(View2, { style: styles3.row, children: [
+    /* @__PURE__ */ jsx3(Text3, { variant: "bodyMedium", style: { color: fgMuted }, children: label }),
+    /* @__PURE__ */ jsx3(Text3, { variant: "bodyMedium", style: [styles3.value, { color: fg }], children: value })
+  ] });
+}
+var styles3 = StyleSheet3.create({
+  row: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  value: {
+    fontWeight: "bold"
+  }
+});
+
+// src/StatSection.tsx
+import { useAutoPaperTheme as useAutoPaperTheme4 } from "@rific/auto-paper";
+import { StyleSheet as StyleSheet4, View as View3 } from "react-native";
+import { Text as Text4 } from "react-native-paper";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }) {
+  const { dark } = useAutoPaperTheme4();
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
+  return /* @__PURE__ */ jsxs4(View3, { style: [styles4.section, { backgroundColor: sectionBg }], children: [
+    /* @__PURE__ */ jsx4(Text4, { variant: "labelMedium", style: [styles4.label, { color: fg }], children: label }),
+    children
+  ] });
+}
+var styles4 = StyleSheet4.create({
+  // Bold and full-contrast (fg), not the original fontless/fgMuted treatment - that read at the
+  // same visual weight as StatRow's own row labels below it (both used the identical muted color;
+  // letterSpacing/variant alone didn't separate them enough to read as "this is the group header"
+  // at a glance). Matches AchievementRow's own title styling (bold + fg) below it in the same list.
+  label: {
+    fontWeight: "bold",
+    letterSpacing: 2
+  },
+  section: {
+    borderRadius: 12,
+    gap: 8,
+    padding: 16
+  }
+});
+
+// src/ActivityStatSection.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ActivityStatSection({ stats }) {
+  return /* @__PURE__ */ jsxs5(StatSection, { label: "ACTIVITY", children: [
+    /* @__PURE__ */ jsx5(StatRow, { label: "Days Played", value: String(stats.distinctDaysPlayed) }),
+    /* @__PURE__ */ jsx5(StatRow, { label: "Day Streak", value: String(stats.currentDayStreak) }),
+    /* @__PURE__ */ jsx5(StatRow, { label: "Best Day Streak", value: String(stats.bestDayStreak) })
+  ] });
+}
+
+// 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 { 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();
+  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 }),
+    /* @__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 }),
+      /* @__PURE__ */ jsx6(Button, { mode: "contained", onPress: onConfirm, style: showCancel ? overlayActionStyles.actionButton : overlayActionStyles.actionButtonSingle, buttonColor: accent, textColor: onAccent, children: confirmLabel })
+    ] })
+  ] }) }) });
+}
+var styles5 = StyleSheet5.create({
+  body: {
+    textAlign: "center"
+  },
+  // Additive on top of overlayCard's own shared `card` shape (borderRadius/borderWidth/gap/maxWidth/
+  // padding) - claims its full allowance instead of just maxWidth alone, which only caps how wide the
+  // card is allowed to get - without an explicit width, a flex-centered child sizes to its own content
+  // instead of stretching, so the card (and therefore actions below) can end up narrower than the
+  // screen actually has room for, needlessly forcing the action row to wrap sooner than it has to.
+  card: {
+    width: "100%"
+  },
+  // Additive on top of overlayCard's own shared `overlay` backdrop - gives the card room to breathe
+  // from the screen edges now that it reliably stretches to fill its full width allowance (see
+  // card's own width comment) - without this, width: '100%' would run the card edge-to-edge on a
+  // screen narrower than maxWidth's own 360.
+  overlay: {
+    paddingHorizontal: 24
+  },
+  // textAlign is load-bearing, not decorative, once `title` wraps to more than one line - centered
+  // within card's own alignItems: 'center' only centers the Text's block as a whole; each wrapped
+  // line inside that block still defaults to left-aligned without this.
+  title: {
+    fontWeight: "bold",
+    textAlign: "center"
+  }
+});
+
+// src/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 { 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 { width, height } = rotateDimensions(window.width, window.height, rotation);
+  const rawInsets = useSafeAreaInsets();
+  const insets = useMemo(() => rotatedSafeArea ? rotateInsets(rawInsets, rotation) : rawInsets, [rotatedSafeArea, rawInsets, rotation]);
+  const cappedWidth = maxContentWidth !== void 0 && width > height ? maxContentWidth : void 0;
+  const column = /* @__PURE__ */ jsx7(View5, { style: [styles6.column, cappedWidth !== void 0 && { maxWidth: cappedWidth }], pointerEvents: passThrough ? "box-none" : void 0, children });
+  return /* @__PURE__ */ jsx7(FakeLandscapeView, { rotation, passThrough, style: styles6.root, children: /* @__PURE__ */ jsx7(SafeAreaInsetsContext.Provider, { value: insets, children: portalHost ? /* @__PURE__ */ jsx7(Portal2.Host, { children: column }) : column }) });
+}
+var styles6 = StyleSheet6.create({
+  // A centred column: full width up to `maxWidth`, so a capped frame sits in the middle of a wider window.
+  column: {
+    alignSelf: "center",
+    flex: 1,
+    width: "100%"
+  },
+  root: {
+    flex: 1
+  }
+});
+
+// src/BaseSettingsDialog.tsx
+import { AutoAppearancePicker, Dialog, useAutoPaperTheme as useAutoPaperTheme6 } 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";
+
+// src/useUpdateConfirmBridge.ts
+import { useCallback, useRef, useState } from "react";
+function useUpdateConfirmBridge() {
+  const [manifest, setManifest] = useState(null);
+  const resolveRef = useRef(null);
+  const onConfirm = useCallback(
+    (next) => new Promise((resolve) => {
+      resolveRef.current = resolve;
+      setManifest(next);
+    }),
+    []
+  );
+  const respond = useCallback((confirmed) => {
+    setManifest(null);
+    resolveRef.current?.(confirmed);
+    resolveRef.current = null;
+  }, []);
+  return { manifest, onConfirm, respond };
+}
+
+// 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 }) });
+}
+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 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 { manifest: updateManifest, onConfirm: onUpdateConfirm, respond: respondToUpdateConfirm } = useUpdateConfirmBridge();
+  const { check, checking, updateReady } = useUpdater({
+    autoCheck: false,
+    autoPrompt: false,
+    onConfirm: onUpdateConfirm,
+    onError: onUpdateError,
+    onInfo: (title, message) => setInfoMessage({ title, message })
+  });
+  const updateManifestDate = updateManifest ? new Date(updateManifest.createdAt) : null;
+  const [opened, setOpened] = useState2(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 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(
+              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,
+            {
+              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 })
+        ] }),
+        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" })
+        ] })
+      ] }) })
+    ] }),
+    /* @__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 styles7 = StyleSheet7.create({
+  content: {
+    gap: 24,
+    paddingVertical: 20
+  },
+  // 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
+  // what happened in landscape where there's less height to work with. Dialog.ScrollArea +
+  // ScrollView below then take over and let the content scroll within that bound.
+  dialog: {
+    maxHeight: "90%"
+  },
+  flexShrink: {
+    flexShrink: 1
+  },
+  iconBadge: {
+    alignItems: "center",
+    borderRadius: 10,
+    height: 36,
+    justifyContent: "center",
+    width: 36
+  },
+  scrollArea: {
+    marginBottom: 0
+  },
+  section: {
+    gap: 12
+  },
+  sectionLabel: {
+    letterSpacing: 2
+  },
+  // Used to carry marginHorizontal: -12 + paddingHorizontal: 12 (netting to the same inset as
+  // APPEARANCE/SOUND & HAPTICS below, while giving the ripple/hover highlight room to breathe
+  // into the dialog's own gutter beyond that). Removed: this dialog scrolls (Dialog.ScrollArea +
+  // ScrollView above), and on web a ScrollView's own content wrapper clips to its own bounds
+  // regardless of a child's negative margin - confirmed live, the icon's own rounded-square badge
+  // was getting its left edge sliced off by exactly that overhang. No horizontal inset of its own
+  // now - it relies purely on the same dialog padding APPEARANCE/every other row already does,
+  // which can never overflow because it's never negative.
+  toggleButton: {
+    borderRadius: 12,
+    overflow: "hidden",
+    paddingVertical: 10
+  },
+  // Same shape as toggleButton, `flex: 1` instead of its own width - two of these side by side in
+  // toggleRow share the row's own edge alignment instead of each carrying their own.
+  toggleButtonInRow: {
+    borderRadius: 12,
+    flex: 1,
+    overflow: "hidden",
+    paddingVertical: 10
+  },
+  toggleContent: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 12
+  },
+  toggleGroup: {
+    gap: 4
+  },
+  // No horizontal margin of its own now either - see toggleButton's identical note.
+  toggleRow: {
+    flexDirection: "row",
+    gap: 4
+  }
+});
+
+// src/BaseStatsScreen.tsx
+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 { 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 showReset = !!onReset;
+  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
+  const bg = bgOverride ?? (dark ? "#000000" : "#FFFFFF");
+  return /* @__PURE__ */ jsxs8(View7, { style: [styles8.container, { backgroundColor: bg }], children: [
+    /* @__PURE__ */ jsxs8(View7, { style: [styles8.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
+      /* @__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: [
+      children,
+      showReset && /* @__PURE__ */ jsx9(Button3, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles8.resetButton, children: resetLabel })
+    ] }),
+    /* @__PURE__ */ jsx9(
+      ConfirmDialog,
+      {
+        visible: confirmResetVisible,
+        title: resetConfirmTitle,
+        message: resetConfirmBody,
+        confirmLabel: "Reset",
+        cancelLabel: "Cancel",
+        icon: "alert-outline",
+        destructive: true,
+        rotation,
+        onCancel: () => setConfirmResetVisible(false),
+        onConfirm: () => {
+          onReset?.();
+          setConfirmResetVisible(false);
+        }
+      }
+    )
+  ] });
+}
+var styles8 = StyleSheet8.create({
+  container: {
+    flex: 1
+  },
+  content: {
+    gap: 12,
+    paddingHorizontal: 20
+  },
+  header: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 4,
+    paddingBottom: 8
+  },
+  resetButton: {
+    marginTop: 16
+  },
+  // Bounds the ScrollView to the space `container`'s flex:1 actually gives it - without this, a
+  // ScrollView with only a contentContainerStyle isn't reliably height-constrained on native (it
+  // can render at its full unclipped content height instead of the screen's), which leaves the
+  // header's back button touch target unreliable underneath it.
+  scrollView: {
+    flex: 1
+  },
+  title: {
+    flexShrink: 1,
+    fontWeight: "bold"
+  }
+});
+
+// src/ContentGutter.tsx
+import { computeContentBounds, useRotatedWindowDimensions } 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 { 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 }),
+    /* @__PURE__ */ jsx10(View8, { style: { width: contentWidth }, children }),
+    /* @__PURE__ */ jsx10(View8, { style: [styles9.gutter, { width: gutterWidth }], children: rightGutter })
+  ] });
+}
+var styles9 = StyleSheet9.create({
+  // overflow:'hidden' keeps an oversized leftGutter/rightGutter from bleeding into the content
+  // column instead of clipping cleanly at its own real width.
+  gutter: {
+    overflow: "hidden"
+  },
+  row: {
+    flexDirection: "row"
+  }
+});
+
+// src/CornerActionButtons.tsx
+import { IconButton as IconButton2 } from "@rific/feedback-press";
+import { StyleSheet as StyleSheet10 } from "react-native";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow-left", backLabel = "Back" }) {
+  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
+    /* @__PURE__ */ jsx11(IconButton2, { icon: backIcon, iconColor: fg, size: 24, style: [styles10.back, { top: 8 + insets.top, left: 8 + insets.left }], onPress: onBack, accessibilityLabel: backLabel }),
+    /* @__PURE__ */ jsx11(IconButton2, { icon: "cog", iconColor: fg, size: 24, style: [styles10.topRight, { top: 8 + insets.top, right: 8 + insets.right }], onPress: onSettings, accessibilityLabel: "Settings" })
+  ] });
+}
+var styles10 = StyleSheet10.create({
+  back: {
+    position: "absolute"
+  },
+  topRight: {
+    position: "absolute"
+  }
+});
+
+// src/StaggeredWord.tsx
+import { useEffect } from "react";
+import { StyleSheet as StyleSheet11, View as View9 } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming } from "react-native-reanimated";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var STAGGER_MS = 45;
+var LETTER_DURATION_MS = 320;
+function getStaggeredWordDuration(letterCount) {
+  return (letterCount - 1) * STAGGER_MS + LETTER_DURATION_MS;
+}
+function AnimatedLetter({ char, index, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }) {
+  const progress = useSharedValue(reducedMotion ? 1 : 0);
+  useEffect(() => {
+    if (reducedMotion) return;
+    progress.value = withDelay(index * STAGGER_MS, withTiming(1, { duration: LETTER_DURATION_MS, easing: Easing.out(Easing.back(1.5)) }));
+  }, [reducedMotion]);
+  const style = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    transform: [{ translateY: (1 - progress.value) * 12 }, { scale: 0.85 + progress.value * 0.15 }]
+  }));
+  return /* @__PURE__ */ jsx12(Animated.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__ */ jsx12(View9, { style: [styles11.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ jsx12(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
+}
+var styles11 = StyleSheet11.create({
+  row: {
+    flexDirection: "row"
+  }
+});
+
+// src/UpdateDialog.tsx
+import { useUpdater as useUpdater2 } from "@rific/updater";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function UpdateDialog({ rotation = 0, autoCheck = true, autoPrompt = true, onError }) {
+  const { manifest, onConfirm, respond } = useUpdateConfirmBridge();
+  useUpdater2({ autoCheck, autoPrompt, onConfirm, onError });
+  const date = manifest ? new Date(manifest.createdAt) : null;
+  return /* @__PURE__ */ jsx13(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) });
+}
+
+export {
+  LOCKED_BADGE_COLOR,
+  AchievementRow,
+  MONO_FONT,
+  AchievementCatalogSection,
+  StatRow,
+  StatSection,
+  ActivityStatSection,
+  ConfirmDialog,
+  RotatedFrame,
+  BaseSettingsDialog,
+  BaseStatsScreen,
+  ContentGutter,
+  CornerActionButtons,
+  getStaggeredWordDuration,
+  StaggeredWord,
+  UpdateDialog
+};

package/dist/guide/index.js

@@ -270,7 +270,7 @@ var styles2 = import_react_native3.StyleSheet.create({
   body: {
     textAlign: "center"
   },
-  // Additive on top of overlayCard's own shared `card` shape — its default 32px padding is tighter
+  // Additive on top of overlayCard's own shared `card` shape - its default 32px padding is tighter
   // here (a paged card wants more width for its art) and the shared 16px gap is right.
   card: {
     padding: CARD_PADDING
@@ -448,7 +448,7 @@ var styles4 = import_react_native5.StyleSheet.create({
   label: {
     fontWeight: "bold"
   },
-  // A wash of the seat color behind its own label rather than an rgba() fill — the theme's colors
+  // A wash of the seat color behind its own label rather than an rgba() fill - the theme's colors
   // aren't guaranteed to be 6-digit hex, so an opacity layer is the only alpha that always works.
   tint: {
     opacity: 0.2
@@ -508,7 +508,7 @@ var styles5 = import_react_native6.StyleSheet.create({
     justifyContent: "space-between"
   },
   // Centered on the whole path (not on the dots row alone) by the container's own alignItems/
-  // justifyContent, then pushed along the axis by its own animated translate — absolute so it never
+  // justifyContent, then pushed along the axis by its own animated translate - absolute so it never
   // takes space from the dots and arrowhead it's drawn over.
   finger: {
     borderRadius: FINGER_SIZE / 2,