@tastic/hud 0.14.2 → 0.15.0

package/dist/index.mjs

@@ -1,129 +1,52 @@
 import {
   SkiaGate
 } from "./chunk-XEOFR236.mjs";
+import {
+  AchievementCatalogSection,
+  AchievementRow,
+  ActivityStatSection,
+  BaseSettingsDialog,
+  BaseStatsScreen,
+  ConfirmDialog,
+  ContentGutter,
+  CornerActionButtons,
+  LOCKED_BADGE_COLOR,
+  MONO_FONT,
+  RotatedFrame,
+  StaggeredWord,
+  StatRow,
+  StatSection,
+  UpdateDialog,
+  getStaggeredWordDuration
+} from "./chunk-OTMMST5M.mjs";
 import {
   getOverlayCardColors,
   overlayActionStyles,
   overlayStyles
 } from "./chunk-32U2OIRW.mjs";
 
-// 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";
-
-// 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 { 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/AchievementUnlockList.tsx
-import { getContrastColor, useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
+import { getContrastColor, useAutoPaperTheme } from "@rific/auto-paper";
 import { ProfileChip } from "@tastic/profile";
-import { StyleSheet as StyleSheet3, View as View2 } from "react-native";
-import { Icon as Icon2, Text as Text3 } from "react-native-paper";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { StyleSheet, View } from "react-native";
+import { Icon, Text } from "react-native-paper";
+import { jsx, jsxs } from "react/jsx-runtime";
 var AVATAR_SIZE = 18;
 function AchievementUnlockList({ unlocks, seats, owners, tierColors, fg: fgOverride, style }) {
-  const { dark } = useAutoPaperTheme3();
+  const { dark } = useAutoPaperTheme();
   const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
   const rows = seats.flatMap((seat) => (unlocks[seat] ?? []).map((achievement) => ({ seat, achievement })));
   if (rows.length === 0) return null;
-  return /* @__PURE__ */ jsx3(View2, { style: [styles3.list, style], children: rows.map(({ seat, achievement }) => {
+  return /* @__PURE__ */ jsx(View, { style: [styles.list, style], children: rows.map(({ seat, achievement }) => {
     const owner = owners[seat];
-    return /* @__PURE__ */ jsxs3(View2, { style: styles3.row, children: [
-      owner.profile ? /* @__PURE__ */ jsx3(ProfileChip, { profile: owner.profile, size: AVATAR_SIZE }) : /* @__PURE__ */ jsx3(View2, { style: [styles3.circle, { backgroundColor: owner.color }], children: /* @__PURE__ */ jsx3(Icon2, { source: "account", size: 10, color: getContrastColor(owner.color) }) }),
-      /* @__PURE__ */ jsx3(View2, { style: [styles3.circle, { backgroundColor: tierColors[achievement.tier] }], children: /* @__PURE__ */ jsx3(Icon2, { source: achievement.icon, size: 12, color: "#000000" }) }),
-      /* @__PURE__ */ jsx3(Text3, { style: [styles3.label, { color: fg }], numberOfLines: 1, children: achievement.title })
+    return /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+      owner.profile ? /* @__PURE__ */ jsx(ProfileChip, { profile: owner.profile, size: AVATAR_SIZE }) : /* @__PURE__ */ jsx(View, { style: [styles.circle, { backgroundColor: owner.color }], children: /* @__PURE__ */ jsx(Icon, { source: "account", size: 10, color: getContrastColor(owner.color) }) }),
+      /* @__PURE__ */ jsx(View, { style: [styles.circle, { backgroundColor: tierColors[achievement.tier] }], children: /* @__PURE__ */ jsx(Icon, { source: achievement.icon, size: 12, color: "#000000" }) }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], numberOfLines: 1, children: achievement.title })
     ] }, `${seat}-${achievement.id}`);
   }) });
 }
-var styles3 = StyleSheet3.create({
+var styles = StyleSheet.create({
   circle: {
     alignItems: "center",
     borderRadius: AVATAR_SIZE / 2,
@@ -146,517 +69,49 @@ var styles3 = StyleSheet3.create({
   }
 });
 
-// src/StatRow.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 StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }) {
-  const { dark } = useAutoPaperTheme4();
-  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
-  const fgMuted = fgMutedOverride ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
-  return /* @__PURE__ */ jsxs4(View3, { style: styles4.row, children: [
-    /* @__PURE__ */ jsx4(Text4, { variant: "bodyMedium", style: { color: fgMuted }, children: label }),
-    /* @__PURE__ */ jsx4(Text4, { variant: "bodyMedium", style: [styles4.value, { color: fg }], children: value })
-  ] });
-}
-var styles4 = StyleSheet4.create({
-  row: {
-    alignItems: "center",
-    flexDirection: "row",
-    justifyContent: "space-between"
-  },
-  value: {
-    fontWeight: "bold"
-  }
-});
-
-// src/StatSection.tsx
-import { useAutoPaperTheme as useAutoPaperTheme5 } from "@rific/auto-paper";
-import { StyleSheet as StyleSheet5, View as View4 } from "react-native";
-import { Text as Text5 } from "react-native-paper";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }) {
-  const { dark } = useAutoPaperTheme5();
-  const fg = fgOverride ?? (dark ? "#FFFFFF" : "#000000");
-  const sectionBg = sectionBgOverride ?? (dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)");
-  return /* @__PURE__ */ jsxs5(View4, { style: [styles5.section, { backgroundColor: sectionBg }], children: [
-    /* @__PURE__ */ jsx5(Text5, { variant: "labelMedium", style: [styles5.label, { color: fg }], children: label }),
-    children
-  ] });
-}
-var styles5 = StyleSheet5.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 jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function ActivityStatSection({ stats }) {
-  return /* @__PURE__ */ jsxs6(StatSection, { label: "ACTIVITY", children: [
-    /* @__PURE__ */ jsx6(StatRow, { label: "Days Played", value: String(stats.distinctDaysPlayed) }),
-    /* @__PURE__ */ jsx6(StatRow, { label: "Day Streak", value: String(stats.currentDayStreak) }),
-    /* @__PURE__ */ jsx6(StatRow, { label: "Best Day Streak", value: String(stats.bestDayStreak) })
-  ] });
-}
-
-// src/BaseSettingsDialog.tsx
-import { AutoAppearancePicker, Dialog, useAutoPaperTheme as useAutoPaperTheme7 } 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 StyleSheet8, View as View7 } from "react-native";
-import { Icon as Icon4, Portal as Portal3, Text as Text7 } from "react-native-paper";
-
-// src/ConfirmDialog.tsx
-import { useAutoPaperTheme as useAutoPaperTheme6 } from "@rific/auto-paper";
-import { Button } from "@rific/feedback-press";
-import { toRotationStyle } from "@tastic/core";
-import { StyleSheet as StyleSheet6, View as View5 } from "react-native";
-import { Icon as Icon3, Portal, Text as Text6 } from "react-native-paper";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation = 0, icon = "help-circle-outline", destructive = false }) {
-  const { dark, colors } = useAutoPaperTheme6();
-  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__ */ jsx7(Portal, { children: /* @__PURE__ */ jsx7(View5, { style: [overlayStyles.overlay, styles6.overlay], children: /* @__PURE__ */ jsxs7(View5, { style: [overlayStyles.card, styles6.card, { backgroundColor: cardBg, borderColor: cardBorder }, toRotationStyle(rotation)], children: [
-    /* @__PURE__ */ jsx7(Icon3, { source: icon, size: 64, color: accent }),
-    /* @__PURE__ */ jsx7(Text6, { variant: "headlineLarge", style: [styles6.title, { color: accent }], children: title }),
-    /* @__PURE__ */ jsx7(Text6, { variant: "bodyLarge", style: [styles6.body, { color: fg }], children: message }),
-    /* @__PURE__ */ jsxs7(View5, { style: overlayActionStyles.actions, children: [
-      showCancel && /* @__PURE__ */ jsx7(Button, { mode: "outlined", onPress: onCancel, style: overlayActionStyles.actionButton, children: cancelLabel }),
-      /* @__PURE__ */ jsx7(Button, { mode: "contained", onPress: onConfirm, style: showCancel ? overlayActionStyles.actionButton : overlayActionStyles.actionButtonSingle, buttonColor: accent, textColor: onAccent, children: confirmLabel })
-    ] })
-  ] }) }) });
-}
-var styles6 = StyleSheet6.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 StyleSheet7, useWindowDimensions, View as View6 } from "react-native";
-import { Portal as Portal2 } from "react-native-paper";
-import { SafeAreaInsetsContext, useSafeAreaInsets } from "react-native-safe-area-context";
-import { jsx as jsx8 } 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__ */ jsx8(View6, { style: [styles7.column, cappedWidth !== void 0 && { maxWidth: cappedWidth }], pointerEvents: passThrough ? "box-none" : void 0, children });
-  return /* @__PURE__ */ jsx8(FakeLandscapeView, { rotation, passThrough, style: styles7.root, children: /* @__PURE__ */ jsx8(SafeAreaInsetsContext.Provider, { value: insets, children: portalHost ? /* @__PURE__ */ jsx8(Portal2.Host, { children: column }) : column }) });
-}
-var styles7 = StyleSheet7.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/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 jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-function SettingIcon({ source, color, containerColor }) {
-  return /* @__PURE__ */ jsx9(View7, { style: [styles8.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ jsx9(Icon4, { 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 } = useAutoPaperTheme7();
-  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__ */ jsx9(Portal3, { children: /* @__PURE__ */ jsxs8(RotatedFrame, { rotation, rotatedSafeArea: true, portalHost: true, passThrough: true, children: [
-    /* @__PURE__ */ jsxs8(Dialog, { visible, onDismiss, style: styles8.dialog, children: [
-      /* @__PURE__ */ jsx9(Dialog.Title, { children: "Settings" }),
-      /* @__PURE__ */ jsx9(Dialog.ScrollArea, { style: styles8.scrollArea, children: /* @__PURE__ */ jsxs8(ScrollView, { contentContainerStyle: styles8.content, showsVerticalScrollIndicator: false, children: [
-        /* @__PURE__ */ jsxs8(View7, { style: styles8.toggleGroup, children: [
-          showLockOrientation && /* @__PURE__ */ jsx9(TouchableRipple, { onPress: () => onLockOrientationChange(!lockOrientation), style: styles8.toggleButton, accessibilityLabel: `Lock orientation ${lockOrientation ? "on" : "off"}`, children: /* @__PURE__ */ jsxs8(View7, { style: styles8.toggleContent, children: [
-            /* @__PURE__ */ jsx9(SettingIcon, { source: lockOrientation ? "lock" : "lock-open-variant-outline", color: lockOrientation ? colors.tertiary : colors.onSurfaceVariant, containerColor: lockOrientation ? colors.tertiaryContainer : colors.surfaceVariant }),
-            /* @__PURE__ */ jsxs8(View7, { style: styles8.flexShrink, children: [
-              /* @__PURE__ */ jsx9(Text7, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Lock Orientation" }),
-              /* @__PURE__ */ jsx9(Text7, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Pins the current layout" })
-            ] })
-          ] }) }),
-          showEdgeGuard && /* @__PURE__ */ jsx9(TouchableRipple, { onPress: () => onDeferBottomEdgeGestures(!deferBottomEdgeGestures), style: styles8.toggleButton, accessibilityLabel: `Edge guard ${deferBottomEdgeGestures ? "on" : "off"}`, children: /* @__PURE__ */ jsxs8(View7, { style: styles8.toggleContent, children: [
-            /* @__PURE__ */ jsx9(SettingIcon, { source: deferBottomEdgeGestures ? "shield-check-outline" : "shield-off-outline", color: deferBottomEdgeGestures ? colors.tertiary : colors.onSurfaceVariant, containerColor: deferBottomEdgeGestures ? colors.tertiaryContainer : colors.surfaceVariant }),
-            /* @__PURE__ */ jsxs8(View7, { style: styles8.flexShrink, children: [
-              /* @__PURE__ */ jsx9(Text7, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Edge Guard" }),
-              /* @__PURE__ */ jsx9(Text7, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Requires a second swipe" })
-            ] })
-          ] }) }),
-          (showSound || showHaptics) && /* @__PURE__ */ jsxs8(View7, { style: styles8.toggleRow, children: [
-            showSound && /* @__PURE__ */ jsx9(
-              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__ */ jsxs8(View7, { style: styles8.toggleContent, children: [
-                  /* @__PURE__ */ jsx9(SettingIcon, { source: soundSettings.enabled ? "volume-high" : "volume-off", color: soundSettings.enabled ? colors.tertiary : colors.onSurfaceVariant, containerColor: soundSettings.enabled ? colors.tertiaryContainer : colors.surfaceVariant }),
-                  /* @__PURE__ */ jsx9(Text7, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Sound" })
-                ] })
-              }
-            ),
-            showHaptics && /* @__PURE__ */ jsx9(
-              TouchableRipple,
-              {
-                hapticDisabled: true,
-                onPress: () => {
-                  const vibrate = !hapticSettings.vibrate;
-                  setHapticSettings({ vibrate });
-                  if (vibrate) forceHapticFeedback();
-                },
-                style: styles8.toggleButtonInRow,
-                accessibilityLabel: `Haptics ${hapticSettings.vibrate ? "on" : "off"}`,
-                children: /* @__PURE__ */ jsxs8(View7, { style: styles8.toggleContent, children: [
-                  /* @__PURE__ */ jsx9(SettingIcon, { source: hapticSettings.vibrate ? "vibrate" : "vibrate-off", color: hapticSettings.vibrate ? colors.tertiary : colors.onSurfaceVariant, containerColor: hapticSettings.vibrate ? colors.tertiaryContainer : colors.surfaceVariant }),
-                  /* @__PURE__ */ jsx9(Text7, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Haptics" })
-                ] })
-              }
-            )
-          ] }),
-          onShowHowToPlay && /* @__PURE__ */ jsx9(
-            TouchableRipple,
-            {
-              onPress: () => {
-                onDismiss();
-                onShowHowToPlay();
-              },
-              style: styles8.toggleButton,
-              accessibilityLabel: "How to Play",
-              children: /* @__PURE__ */ jsxs8(View7, { style: styles8.toggleContent, children: [
-                /* @__PURE__ */ jsx9(SettingIcon, { source: "help-circle-outline", color: colors.secondary, containerColor: colors.secondaryContainer }),
-                /* @__PURE__ */ jsxs8(View7, { style: styles8.flexShrink, children: [
-                  /* @__PURE__ */ jsx9(Text7, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "How to Play" }),
-                  /* @__PURE__ */ jsx9(Text7, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Replay the quick intro" })
-                ] })
-              ] })
-            }
-          )
-        ] }),
-        showAppearance && /* @__PURE__ */ jsxs8(View7, { style: styles8.section, children: [
-          /* @__PURE__ */ jsx9(Text7, { variant: "labelMedium", style: [styles8.sectionLabel, { color: colors.onSurfaceVariant }], children: "APPEARANCE" }),
-          /* @__PURE__ */ jsx9(AutoAppearancePicker, { showLabels: false })
-        ] }),
-        children,
-        showUpdateCheck && /* @__PURE__ */ jsxs8(View7, { style: styles8.section, children: [
-          /* @__PURE__ */ jsxs8(Text7, { variant: "labelSmall", style: [styles8.sectionLabel, { color: colors.onSurfaceVariant }], children: [
-            "VERSION ",
-            version,
-            updateReady ? " \xB7 UPDATE READY" : ""
-          ] }),
-          /* @__PURE__ */ jsx9(Button2, { mode: "outlined", onPress: check, loading: checking, disabled: checking, children: "Check for Updates" })
-        ] })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx9(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__ */ jsx9(ConfirmDialog, { visible: !!infoMessage, title: infoMessage?.title ?? "", message: infoMessage?.message ?? "", confirmLabel: "OK", icon: "information-outline", rotation: 0, onConfirm: () => setInfoMessage(null) })
-  ] }) });
-}
-var styles8 = StyleSheet8.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 useAutoPaperTheme8 } 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 StyleSheet9, View as View8 } from "react-native";
-import { Text as Text8 } from "react-native-paper";
-import { jsx as jsx10, jsxs as jsxs9 } 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 } = useAutoPaperTheme8();
-  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__ */ jsxs9(View8, { style: [styles9.container, { backgroundColor: bg }], children: [
-    /* @__PURE__ */ jsxs9(View8, { style: [styles9.header, { paddingTop: 8 + insets.top, paddingLeft: 8 + insets.left }], children: [
-      /* @__PURE__ */ jsx10(IconButton, { icon: "arrow-left", iconColor: fg, size: 24, onPress: onBack }),
-      /* @__PURE__ */ jsx10(Text8, { variant: titleVariant, style: [styles9.title, { color: fg }], children: title })
-    ] }),
-    /* @__PURE__ */ jsxs9(ScrollView2, { style: styles9.scrollView, contentContainerStyle: [styles9.content, { paddingBottom: 32 + insets.bottom }], showsVerticalScrollIndicator: false, children: [
-      children,
-      showReset && /* @__PURE__ */ jsx10(Button3, { mode: "contained", onPress: () => setConfirmResetVisible(true), buttonColor: colors.danger, textColor: colors.onDanger, style: styles9.resetButton, children: resetLabel })
-    ] }),
-    /* @__PURE__ */ jsx10(
-      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 styles9 = StyleSheet9.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 StyleSheet10, View as View9 } from "react-native";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
-function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }) {
-  const { width: windowWidth } = useRotatedWindowDimensions();
-  const { contentWidth, gutterWidth } = computeContentBounds(windowWidth, maxContentWidth ?? Infinity);
-  return /* @__PURE__ */ jsxs10(View9, { style: [styles10.row, style], children: [
-    /* @__PURE__ */ jsx11(View9, { style: [styles10.gutter, { width: gutterWidth }], children: leftGutter }),
-    /* @__PURE__ */ jsx11(View9, { style: { width: contentWidth }, children }),
-    /* @__PURE__ */ jsx11(View9, { style: [styles10.gutter, { width: gutterWidth }], children: rightGutter })
-  ] });
-}
-var styles10 = StyleSheet10.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/ControlSchemePicker.tsx
-import { useIsTouchPrimaryDevice as useIsTouchPrimaryDevice2 } from "@tastic/core";
-import { Platform as Platform3 } from "react-native";
+import { useIsTouchPrimaryDevice } from "@tastic/core";
+import { Platform } from "react-native";
 
 // src/SectionedDropdown.tsx
 import { getBlendedColor, getColorRoles } from "@rific/auto-paper";
-import { IconButton as IconButton2, TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
-import { useRotation as useRotation4 } from "@tastic/core";
-import { ScrollView as ScrollView3, StyleSheet as StyleSheet12, View as View12 } from "react-native";
-import { Icon as Icon5, Text as Text9 } from "react-native-paper";
+import { IconButton, TouchableRipple } from "@rific/feedback-press";
+import { useRotation } from "@tastic/core";
+import { ScrollView, StyleSheet as StyleSheet3, View as View4 } from "react-native";
+import { Icon as Icon2, Text as Text2 } from "react-native-paper";
 
 // src/PopoverBody.tsx
-import { StyleSheet as StyleSheet11, View as View10 } from "react-native";
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var CARET_SIZE = 7;
 var CARET_RING_OFFSET = 2;
 var CARET_DIP = 1;
 function PopoverBody({ visible, children, align = "center", verticalAlign = "below", caretColor, caretBorderColor, caretBorderWidth = 1, triggerSize = 0 }) {
   if (!visible) return null;
   const above = verticalAlign === "above";
-  const alignStyle = align === "left" ? styles11.contentLeft : align === "right" ? styles11.contentRight : styles11.contentCenter;
-  const verticalStyle = above ? styles11.contentAbove : styles11.contentBelow;
+  const alignStyle = align === "left" ? styles2.contentLeft : align === "right" ? styles2.contentRight : styles2.contentCenter;
+  const verticalStyle = above ? styles2.contentAbove : styles2.contentBelow;
   const ringSize = CARET_SIZE + caretBorderWidth;
   const caretOffset = (halfFootprint) => align === "right" ? { right: triggerSize / 2 - halfFootprint } : { left: triggerSize / 2 - halfFootprint };
   const caretFill = above ? "borderTopColor" : "borderBottomColor";
   const caretWidthProp = above ? "borderTopWidth" : "borderBottomWidth";
   const caretEdge = (size) => above ? { bottom: -size + CARET_DIP } : { top: -size + CARET_DIP };
-  return /* @__PURE__ */ jsxs11(View10, { style: [styles11.content, alignStyle, verticalStyle], children: [
+  return /* @__PURE__ */ jsxs2(View2, { style: [styles2.content, alignStyle, verticalStyle], children: [
     children,
-    caretColor && /* @__PURE__ */ jsxs11(Fragment2, { children: [
-      /* @__PURE__ */ jsx12(View10, { style: [styles11.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
-      /* @__PURE__ */ jsx12(View10, { style: [styles11.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
+    caretColor && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2(View2, { style: [styles2.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
+      /* @__PURE__ */ jsx2(View2, { style: [styles2.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
     ] })
   ] });
 }
-var styles11 = StyleSheet11.create({
+var styles2 = StyleSheet2.create({
   caret: {
     borderLeftColor: "transparent",
     borderRightColor: "transparent",
     height: 0,
     position: "absolute",
     width: 0,
-    // Explicit, not left to DOM order — the box it dips into is itself a position:'relative' view,
+    // Explicit, not left to DOM order - the box it dips into is itself a position:'relative' view,
     // which React Native Web always gives an implicit zIndex:0 (see PopoverBody's stacking-context
     // notes elsewhere in this codebase), so painting on top needs a real zIndex to beat that
     // reliably rather than relying on being the later sibling.
@@ -675,7 +130,7 @@ var styles11 = StyleSheet11.create({
     top: "100%"
   },
   // Stretched to the anchor's own (trigger) width, with alignItems centering the actual (usually
-  // much wider) popover box inside via plain flexbox — not `left:'50%'` plus a percentage
+  // much wider) popover box inside via plain flexbox - not `left:'50%'` plus a percentage
   // `transform`, which depends on native resolving the box's own auto width before applying the
   // transform and has proven unreliable there, visibly shifting the box off-center.
   contentCenter: {
@@ -692,15 +147,15 @@ var styles11 = StyleSheet11.create({
 });
 
 // src/TriggerGaugeHost.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var getTriggerGauge = () => import("./TriggerGauge-2OJOOF6I.mjs").then((mod) => ({ default: mod.TriggerGauge }));
 function TriggerGaugeHost(props) {
-  return /* @__PURE__ */ jsx13(SkiaGate, { getComponent: getTriggerGauge, componentProps: props });
+  return /* @__PURE__ */ jsx3(SkiaGate, { getComponent: getTriggerGauge, componentProps: props });
 }
 
 // src/useAutoAlign.ts
-import { useCallback as useCallback2, useEffect, useRef as useRef2, useState as useState4 } from "react";
-import { useWindowDimensions as useWindowDimensions2 } from "react-native";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useWindowDimensions } from "react-native";
 var EDGE_MARGIN = 12;
 function rotateRect(x, y, width, height, rotation, windowWidth, windowHeight) {
   if (rotation === 0) return { x, y, width, height };
@@ -712,18 +167,18 @@ function rotateRect(x, y, width, height, rotation, windowWidth, windowHeight) {
   return { x: cx + newDx - newWidth / 2, y: cy + newDy - newHeight / 2, width: newWidth, height: newHeight };
 }
 function useAutoAlign(open, contentWidth, contentHeight, rotation = 0) {
-  const triggerRef = useRef2(null);
-  const { width: windowWidth, height: windowHeight } = useWindowDimensions2();
-  const [align, setAlign] = useState4("center");
-  const [verticalAlign, setVerticalAlign] = useState4("below");
-  const [maxHeight, setMaxHeight] = useState4(contentHeight);
-  const [measured, setMeasured] = useState4(false);
-  const [prevOpen, setPrevOpen] = useState4(open);
+  const triggerRef = useRef(null);
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const [align, setAlign] = useState("center");
+  const [verticalAlign, setVerticalAlign] = useState("below");
+  const [maxHeight, setMaxHeight] = useState(contentHeight);
+  const [measured, setMeasured] = useState(false);
+  const [prevOpen, setPrevOpen] = useState(open);
   if (open !== prevOpen) {
     setPrevOpen(open);
     if (open) setMeasured(false);
   }
-  const measure = useCallback2(() => {
+  const measure = useCallback(() => {
     triggerRef.current?.measureInWindow((rawX, rawY, rawWidth, rawHeight) => {
       const { x, y, width: triggerWidth, height: triggerHeight } = rotateRect(rawX, rawY, rawWidth, rawHeight, rotation, windowWidth, windowHeight);
       const centerX = x + triggerWidth / 2;
@@ -747,7 +202,7 @@ function useAutoAlign(open, contentWidth, contentHeight, rotation = 0) {
 }
 
 // src/SectionedDropdown.tsx
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var MENU_BORDER_WIDTH = 1;
 var TRIGGER_SIZE = 44;
 var MENU_MIN_WIDTH = 200;
@@ -759,7 +214,7 @@ var MENU_ITEM_HEIGHT_WITH_DESCRIPTION = 58;
 var MENU_DIVIDER_HEIGHT = 9;
 var MENU_VERTICAL_PADDING = 12;
 function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, autoDismiss = true, labelFontFamily = MONO_FONT, allClearLabels = { all: "All", clear: "Clear" } }) {
-  const ambientRotation = useRotation4();
+  const ambientRotation = useRotation();
   const rotation = rotationOverride ?? ambientRotation;
   const menuBg = dark ? "#000000" : "#FFFFFF";
   const menuBorderColor = getBlendedColor(mutedColor, menuBg, 0.5);
@@ -797,17 +252,17 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
     }
     gaugeOffset += section.options.length;
   }
-  const anchorStyle = [styles12.anchor, open && styles12.anchorOpen];
+  const anchorStyle = [styles3.anchor, open && styles3.anchorOpen];
   const menuStyle = { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight };
   const dividerStyle = { backgroundColor: menuBorderColor };
-  return /* @__PURE__ */ jsxs12(View12, { style: anchorStyle, children: [
-    /* @__PURE__ */ jsxs12(View12, { ref: triggerRef, collapsable: false, style: styles12.triggerBox, children: [
-      /* @__PURE__ */ jsx14(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
-      /* @__PURE__ */ jsx14(IconButton2, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
+  return /* @__PURE__ */ jsxs3(View4, { style: anchorStyle, children: [
+    /* @__PURE__ */ jsxs3(View4, { ref: triggerRef, collapsable: false, style: styles3.triggerBox, children: [
+      /* @__PURE__ */ jsx4(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
+      /* @__PURE__ */ jsx4(IconButton, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
     ] }),
-    /* @__PURE__ */ jsx14(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ jsx14(ScrollView3, { style: [styles12.menu, menuStyle], contentContainerStyle: styles12.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs12(View12, { children: [
-      sectionIndex > 0 && /* @__PURE__ */ jsx14(View12, { style: [styles12.divider, dividerStyle] }),
-      section.kind === "single" ? /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx4(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ jsx4(ScrollView, { style: [styles3.menu, menuStyle], contentContainerStyle: styles3.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs3(View4, { children: [
+      sectionIndex > 0 && /* @__PURE__ */ jsx4(View4, { style: [styles3.divider, dividerStyle] }),
+      section.kind === "single" ? /* @__PURE__ */ jsx4(
         SingleSection,
         {
           section,
@@ -820,7 +275,7 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
             if (autoDismiss) host.close();
           }
         }
-      ) : /* @__PURE__ */ jsx14(MultiSection, { section, accentColor, onAccentColor: resolvedOnAccentColor, mutedColor, labelFontFamily, allClearLabels })
+      ) : /* @__PURE__ */ jsx4(MultiSection, { section, accentColor, onAccentColor: resolvedOnAccentColor, mutedColor, labelFontFamily, allClearLabels })
     ] }, section.id)) }) })
   ] });
 }
@@ -832,18 +287,18 @@ function SingleSection({
   labelFontFamily,
   onSelect
 }) {
-  return /* @__PURE__ */ jsx14(Fragment3, { children: section.options.map((option) => {
+  return /* @__PURE__ */ jsx4(Fragment2, { children: section.options.map((option) => {
     const selected = option.value === section.value;
     const taken = !selected && option.value === section.takenValue;
     const rowColor = selected ? onAccentColor : mutedColor;
-    const itemStyle = [styles12.item, selected && { backgroundColor: accentColor }, taken && styles12.itemTaken];
+    const itemStyle = [styles3.item, selected && { backgroundColor: accentColor }, taken && styles3.itemTaken];
     const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
     const descriptionStyle = { fontFamily: labelFontFamily, color: rowColor };
-    return /* @__PURE__ */ jsx14(TouchableRipple2, { disabled: taken, onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ jsxs12(View12, { style: styles12.itemRow, children: [
-      option.icon && /* @__PURE__ */ jsx14(Icon5, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-      /* @__PURE__ */ jsxs12(View12, { style: styles12.itemLabelColumn, children: [
-        /* @__PURE__ */ jsx14(Text9, { variant: "labelLarge", style: labelStyle, children: option.label }),
-        option.description && /* @__PURE__ */ jsx14(Text9, { variant: "labelSmall", style: descriptionStyle, children: option.description })
+    return /* @__PURE__ */ jsx4(TouchableRipple, { disabled: taken, onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ jsxs3(View4, { style: styles3.itemRow, children: [
+      option.icon && /* @__PURE__ */ jsx4(Icon2, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+      /* @__PURE__ */ jsxs3(View4, { style: styles3.itemLabelColumn, children: [
+        /* @__PURE__ */ jsx4(Text2, { variant: "labelLarge", style: labelStyle, children: option.label }),
+        option.description && /* @__PURE__ */ jsx4(Text2, { variant: "labelSmall", style: descriptionStyle, children: option.description })
       ] })
     ] }) }, option.value);
   }) });
@@ -857,23 +312,23 @@ function MultiSection({
   allClearLabels
 }) {
   const allSelected = section.value.length === section.options.length;
-  return /* @__PURE__ */ jsxs12(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
     section.options.map((option, i) => {
       const selected = section.value.includes(option.value);
       const rowColor = selected ? onAccentColor : mutedColor;
       const prevSelected = selected && i > 0 && section.value.includes(section.options[i - 1].value);
       const nextSelected = selected && i < section.options.length - 1 && section.value.includes(section.options[i + 1].value);
-      const itemStyle = [styles12.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }];
+      const itemStyle = [styles3.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }];
       const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
-      return /* @__PURE__ */ jsx14(TouchableRipple2, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ jsxs12(View12, { style: styles12.itemRow, children: [
-        option.icon && /* @__PURE__ */ jsx14(Icon5, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-        /* @__PURE__ */ jsx14(Text9, { variant: "labelLarge", style: [styles12.itemLabelFlex, labelStyle], children: option.label })
+      return /* @__PURE__ */ jsx4(TouchableRipple, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ jsxs3(View4, { style: styles3.itemRow, children: [
+        option.icon && /* @__PURE__ */ jsx4(Icon2, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+        /* @__PURE__ */ jsx4(Text2, { variant: "labelLarge", style: [styles3.itemLabelFlex, labelStyle], children: option.label })
       ] }) }, option.value);
     }),
-    section.allClear && /* @__PURE__ */ jsx14(TouchableRipple2, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles12.item, children: /* @__PURE__ */ jsx14(Text9, { variant: "labelLarge", style: [styles12.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
+    section.allClear && /* @__PURE__ */ jsx4(TouchableRipple, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles3.item, children: /* @__PURE__ */ jsx4(Text2, { variant: "labelLarge", style: [styles3.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
   ] });
 }
-var styles12 = StyleSheet12.create({
+var styles3 = StyleSheet3.create({
   allClearLabel: {
     fontWeight: "bold",
     textAlign: "center"
@@ -882,7 +337,7 @@ var styles12 = StyleSheet12.create({
     position: "relative"
   },
   // React Native Web gives every position:'relative' view an explicit zIndex (0, not 'auto'),
-  // which makes each one its own stacking context — so a zIndex set only on the popover content
+  // which makes each one its own stacking context - so a zIndex set only on the popover content
   // below only wins comparisons within this anchor's own box, not against this anchor's own later
   // siblings (e.g. a Ready button), which are otherwise painted on top by DOM-order tiebreak.
   // Elevating the anchor itself, only while its popover is open, fixes that at the right level.
@@ -890,7 +345,7 @@ var styles12 = StyleSheet12.create({
     zIndex: 100
   },
   divider: {
-    height: StyleSheet12.hairlineWidth,
+    height: StyleSheet3.hairlineWidth,
     marginVertical: 4
   },
   item: {
@@ -909,7 +364,7 @@ var styles12 = StyleSheet12.create({
     flexDirection: "row",
     gap: 8
   },
-  // Same opacity as ProfilePicker's rowDisabled / InlineColorPicker's swatchTaken — the fleet's
+  // Same opacity as ProfilePicker's rowDisabled / InlineColorPicker's swatchTaken - the fleet's
   // established "shown, not removed" treatment for another seat's own current pick.
   itemTaken: {
     opacity: 0.35
@@ -925,7 +380,7 @@ var styles12 = StyleSheet12.create({
     shadowOpacity: 0.3,
     shadowRadius: 8
   },
-  // Separate from `menu` itself — a ScrollView's own style sets the scrolling frame's bounds
+  // Separate from `menu` itself - a ScrollView's own style sets the scrolling frame's bounds
   // (including the maxHeight that actually caps it), while padding/gap belong to its
   // contentContainerStyle, which sizes to the *unclamped* content instead of the frame.
   menuContent: {
@@ -943,49 +398,30 @@ var styles12 = StyleSheet12.create({
 });
 
 // src/ControlSchemePicker.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function ControlSchemePicker({ id, host, value, onChange, options, takenValue, accentColor, mutedColor, onAccentColor, dark, align, alignOverride, rotation, labelFontFamily }) {
-  const isTouchPrimary = useIsTouchPrimaryDevice2();
-  if (Platform3.OS !== "web" || isTouchPrimary) return null;
-  return /* @__PURE__ */ jsx15(SectionedDropdown, { id, host, icon: "keyboard-outline", accessibilityLabel: "Control scheme", sections: [{ kind: "single", id: "controls", options, value, onChange, takenValue }], accentColor, mutedColor, onAccentColor, dark, align, alignOverride, rotation, labelFontFamily });
-}
-
-// src/CornerActionButtons.tsx
-import { IconButton as IconButton3 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet13 } from "react-native";
-import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
-function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon = "arrow-left", backLabel = "Back" }) {
-  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
-    /* @__PURE__ */ jsx16(IconButton3, { icon: backIcon, iconColor: fg, size: 24, style: [styles13.back, { top: 8 + insets.top, left: 8 + insets.left }], onPress: onBack, accessibilityLabel: backLabel }),
-    /* @__PURE__ */ jsx16(IconButton3, { icon: "cog", iconColor: fg, size: 24, style: [styles13.topRight, { top: 8 + insets.top, right: 8 + insets.right }], onPress: onSettings, accessibilityLabel: "Settings" })
-  ] });
+  const isTouchPrimary = useIsTouchPrimaryDevice();
+  if (Platform.OS !== "web" || isTouchPrimary) return null;
+  return /* @__PURE__ */ jsx5(SectionedDropdown, { id, host, icon: "keyboard-outline", accessibilityLabel: "Control scheme", sections: [{ kind: "single", id: "controls", options, value, onChange, takenValue }], accentColor, mutedColor, onAccentColor, dark, align, alignOverride, rotation, labelFontFamily });
 }
-var styles13 = StyleSheet13.create({
-  back: {
-    position: "absolute"
-  },
-  topRight: {
-    position: "absolute"
-  }
-});
 
 // src/CornerStatusBadges.tsx
-import { StyleSheet as StyleSheet14, View as View13 } from "react-native";
-import { Icon as Icon6 } from "react-native-paper";
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet4, View as View5 } from "react-native";
+import { Icon as Icon3 } from "react-native-paper";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var BADGE_SIZE = 30;
 function StatusBadge({ icon }) {
-  return /* @__PURE__ */ jsx17(View13, { style: styles14.badge, children: icon && /* @__PURE__ */ jsx17(Icon6, { source: icon, size: 16, color: "rgba(255,255,255,0.85)" }) });
+  return /* @__PURE__ */ jsx6(View5, { style: styles4.badge, children: icon && /* @__PURE__ */ jsx6(Icon3, { source: icon, size: 16, color: "rgba(255,255,255,0.85)" }) });
 }
 function CornerStatusBadges({ orientationMode, p1OnRight, p1, p2 }) {
   const p1OnRightSide = orientationMode === "sideBySide" && p1OnRight;
   const p2OnLeftSide = orientationMode === "sideBySide" && !p1OnRight;
-  return /* @__PURE__ */ jsxs14(Fragment5, { children: [
-    p1 && /* @__PURE__ */ jsx17(View13, { pointerEvents: "none", style: p1OnRightSide ? styles14.bottomRight : styles14.bottomLeft, children: /* @__PURE__ */ jsx17(StatusBadge, { icon: p1.icon }) }),
-    p2 && /* @__PURE__ */ jsx17(View13, { pointerEvents: "none", style: p2OnLeftSide ? styles14.topLeft : styles14.topRight, children: /* @__PURE__ */ jsx17(StatusBadge, { icon: p2.icon }) })
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    p1 && /* @__PURE__ */ jsx6(View5, { pointerEvents: "none", style: p1OnRightSide ? styles4.bottomRight : styles4.bottomLeft, children: /* @__PURE__ */ jsx6(StatusBadge, { icon: p1.icon }) }),
+    p2 && /* @__PURE__ */ jsx6(View5, { pointerEvents: "none", style: p2OnLeftSide ? styles4.topLeft : styles4.topRight, children: /* @__PURE__ */ jsx6(StatusBadge, { icon: p2.icon }) })
   ] });
 }
-var styles14 = StyleSheet14.create({
+var styles4 = StyleSheet4.create({
   badge: {
     alignItems: "center",
     backgroundColor: "rgba(0,0,0,0.28)",
@@ -1005,11 +441,11 @@ var styles14 = StyleSheet14.create({
 
 // src/InlineColorPicker.tsx
 import { defaultColors, getContrastColor as getContrastColor2 } from "@rific/auto-paper";
-import { TouchableRipple as TouchableRipple3 } from "@rific/feedback-press";
-import { clamp, useRotation as useRotation5 } from "@tastic/core";
-import { ScrollView as ScrollView4, StyleSheet as StyleSheet15, useWindowDimensions as useWindowDimensions3, View as View14 } from "react-native";
-import { Icon as Icon7, Text as Text10 } from "react-native-paper";
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
+import { clamp, useRotation as useRotation2 } from "@tastic/core";
+import { ScrollView as ScrollView2, StyleSheet as StyleSheet5, useWindowDimensions as useWindowDimensions2, View as View6 } from "react-native";
+import { Icon as Icon4, Text as Text3 } from "react-native-paper";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
 var DEFAULT_SIZE = 48;
 var SWATCH_SIZE = 28;
@@ -1031,10 +467,10 @@ function getInlineColorPickerContentSize(swatchCount, windowWidth, columns) {
   return { width, height };
 }
 function InlineColorPicker({ id, host, value, onChange, previewValue, swatches = defaultColors, takenValue, allowSwapTaken, dark, align: forcedAlign, alignOverride, rotation: rotationOverride, icon = "palette", tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }) {
-  const ambientRotation = useRotation5();
+  const ambientRotation = useRotation2();
   const rotation = rotationOverride ?? ambientRotation;
   const menuBg = dark ? "#000000" : "#FFFFFF";
-  const { width: windowWidth } = useWindowDimensions3();
+  const { width: windowWidth } = useWindowDimensions2();
   const { width: swatchesWidth, height: swatchesHeight } = getInlineColorPickerContentSize(swatches.length, windowWidth, columns);
   const open = host.openId === id;
   const auto = useAutoAlign(open, swatchesWidth, swatchesHeight, rotation);
@@ -1045,15 +481,15 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
   const displayValue = displayFor(value);
   const contrastColor = getContrastColor2(displayValue);
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4);
-  return /* @__PURE__ */ jsxs15(View14, { style: [styles15.anchor, open && styles15.anchorOpen], children: [
-    /* @__PURE__ */ jsx18(TouchableRipple3, { onPress: () => host.toggle(id), borderless: true, style: [styles15.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ jsx18(View14, { ref: triggerRef, collapsable: false, style: styles15.triggerMeasure, children: tag ? /* @__PURE__ */ jsx18(Text10, { style: [styles15.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx18(Icon7, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
-    /* @__PURE__ */ jsx18(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: displayValue, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ jsx18(ScrollView4, { style: [styles15.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }], contentContainerStyle: styles15.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
+  return /* @__PURE__ */ jsxs5(View6, { style: [styles5.anchor, open && styles5.anchorOpen], children: [
+    /* @__PURE__ */ jsx7(TouchableRipple2, { onPress: () => host.toggle(id), borderless: true, style: [styles5.trigger, { backgroundColor: displayValue, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ jsx7(View6, { ref: triggerRef, collapsable: false, style: styles5.triggerMeasure, children: tag ? /* @__PURE__ */ jsx7(Text3, { style: [styles5.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ jsx7(Icon4, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
+    /* @__PURE__ */ jsx7(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: displayValue, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ jsx7(ScrollView2, { style: [styles5.swatches, { backgroundColor: menuBg, borderColor: displayValue, width: swatchesWidth, maxHeight }], contentContainerStyle: styles5.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
       const selected = swatch.value.toLowerCase() === value.toLowerCase();
       const taken = !selected && !!takenValue && swatch.value.toLowerCase() === takenValue.toLowerCase();
       const swappable = taken && allowSwapTaken;
       const swatchDisplay = displayFor(swatch.value);
-      return /* @__PURE__ */ jsx18(
-        TouchableRipple3,
+      return /* @__PURE__ */ jsx7(
+        TouchableRipple2,
         {
           disabled: taken && !swappable,
           onPress: () => {
@@ -1061,19 +497,19 @@ function InlineColorPicker({ id, host, value, onChange, previewValue, swatches =
             if (autoDismiss) host.close();
           },
           borderless: true,
-          style: [styles15.swatch, { backgroundColor: swatchDisplay }, selected && styles15.swatchSelected, taken && !swappable && styles15.swatchTaken],
-          children: selected ? /* @__PURE__ */ jsx18(Icon7, { source: "check", size: 16, color: getContrastColor2(swatchDisplay) }) : swappable ? /* @__PURE__ */ jsx18(Icon7, { source: "swap-horizontal", size: 16, color: getContrastColor2(swatchDisplay) }) : taken ? /* @__PURE__ */ jsx18(Icon7, { source: "close", size: 16, color: getContrastColor2(swatchDisplay) }) : /* @__PURE__ */ jsx18(View14, {})
+          style: [styles5.swatch, { backgroundColor: swatchDisplay }, selected && styles5.swatchSelected, taken && !swappable && styles5.swatchTaken],
+          children: selected ? /* @__PURE__ */ jsx7(Icon4, { source: "check", size: 16, color: getContrastColor2(swatchDisplay) }) : swappable ? /* @__PURE__ */ jsx7(Icon4, { source: "swap-horizontal", size: 16, color: getContrastColor2(swatchDisplay) }) : taken ? /* @__PURE__ */ jsx7(Icon4, { source: "close", size: 16, color: getContrastColor2(swatchDisplay) }) : /* @__PURE__ */ jsx7(View6, {})
         },
         swatch.value
       );
     }) }) })
   ] });
 }
-var styles15 = StyleSheet15.create({
+var styles5 = StyleSheet5.create({
   anchor: {
     position: "relative"
   },
-  // See SectionedDropdown's identical comment — React Native Web gives every position:'relative' view
+  // See SectionedDropdown's identical comment - React Native Web gives every position:'relative' view
   // its own stacking context, so the elevation has to live on the anchor itself, not just the
   // popover content nested inside it, to correctly paint above this anchor's own later siblings.
   anchorOpen: {
@@ -1101,12 +537,12 @@ var styles15 = StyleSheet15.create({
     shadowOffset: { height: 2, width: 0 },
     shadowOpacity: 0.3,
     shadowRadius: 8
-    // width is set inline above — border-box sizing means it has to include the border too
+    // width is set inline above - border-box sizing means it has to include the border too
     // (2*SWATCHES_BORDER_WIDTH), not just padding+content, or exactly enough room goes missing that
     // the last column silently wraps to a new row. Anything wider than the exact sum just shows as
     // dead space on the right edge of each row instead.
   },
-  // Separate from `swatches` itself — see SectionedDropdown's identical menu/menuContent split.
+  // Separate from `swatches` itself - see SectionedDropdown's identical menu/menuContent split.
   // The scroll frame's own bounds (including maxHeight) live on the ScrollView; the actual grid
   // wrapping belongs to its contentContainerStyle, which sizes to the unclamped content instead.
   swatchesContent: {
@@ -1119,7 +555,7 @@ var styles15 = StyleSheet15.create({
     fontWeight: "700",
     letterSpacing: 0.5
   },
-  // borderRadius/height/width come from the `size` prop instead (see render-site override) — no
+  // borderRadius/height/width come from the `size` prop instead (see render-site override) - no
   // fixed default here, since this style object is shared by every caller regardless of size.
   trigger: {
     alignItems: "center",
@@ -1127,7 +563,7 @@ var styles15 = StyleSheet15.create({
     justifyContent: "center"
   },
   // Wraps just the icon/tag, inside the TouchableRipple, purely so useAutoAlign has a plain View
-  // to attach its measurement ref to — TouchableRipple itself doesn't forward a ref to a
+  // to attach its measurement ref to - TouchableRipple itself doesn't forward a ref to a
   // measurable native node. Padded horizontally so a multi-character tag doesn't butt right up
   // against the trigger's own circular edge (an icon alone doesn't need it, but this style is
   // shared by both).
@@ -1142,10 +578,10 @@ var styles15 = StyleSheet15.create({
 
 // src/LabeledDropdown.tsx
 import { getContrastColor as getContrastColor3 } from "@rific/auto-paper";
-import { TouchableRipple as TouchableRipple4 } from "@rific/feedback-press";
-import { ScrollView as ScrollView5, StyleSheet as StyleSheet16, View as View15 } from "react-native";
-import { Icon as Icon8, Text as Text11 } from "react-native-paper";
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { TouchableRipple as TouchableRipple3 } from "@rific/feedback-press";
+import { ScrollView as ScrollView3, StyleSheet as StyleSheet6, View as View7 } from "react-native";
+import { Icon as Icon5, Text as Text4 } from "react-native-paper";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var TRIGGER_HEIGHT = 28;
 var POPOVER_WIDTH = 180;
 var ROW_HEIGHT = 36;
@@ -1168,27 +604,27 @@ function LabeledDropdown({ id, host, options, value, onChange, color, dark, alig
     onChange(option.value);
     host.close();
   };
-  return /* @__PURE__ */ jsxs16(View15, { style: [styles16.anchor, open && styles16.anchorOpen], children: [
-    /* @__PURE__ */ jsx19(TouchableRipple4, { onPress: () => host.toggle(id), style: styles16.trigger, children: /* @__PURE__ */ jsxs16(View15, { ref: triggerRef, collapsable: false, style: styles16.triggerInner, children: [
-      /* @__PURE__ */ jsx19(Text11, { style: [styles16.triggerLabel, { color }], numberOfLines: 1, children: (selected?.label ?? "").toUpperCase() }),
-      /* @__PURE__ */ jsx19(Icon8, { source: "menu-down", size: 16, color })
+  return /* @__PURE__ */ jsxs6(View7, { style: [styles6.anchor, open && styles6.anchorOpen], children: [
+    /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => host.toggle(id), style: styles6.trigger, children: /* @__PURE__ */ jsxs6(View7, { ref: triggerRef, collapsable: false, style: styles6.triggerInner, children: [
+      /* @__PURE__ */ jsx8(Text4, { style: [styles6.triggerLabel, { color }], numberOfLines: 1, children: (selected?.label ?? "").toUpperCase() }),
+      /* @__PURE__ */ jsx8(Icon5, { source: "menu-down", size: 16, color })
     ] }) }),
-    /* @__PURE__ */ jsx19(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ jsx19(ScrollView5, { style: [styles16.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }], contentContainerStyle: styles16.menuContent, showsVerticalScrollIndicator: false, children: options.map((option) => {
+    /* @__PURE__ */ jsx8(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ jsx8(ScrollView3, { style: [styles6.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }], contentContainerStyle: styles6.menuContent, showsVerticalScrollIndicator: false, children: options.map((option) => {
       const isSelected = option.value === value;
       const onColor = getContrastColor3(color);
-      return /* @__PURE__ */ jsx19(TouchableRipple4, { onPress: () => handleSelect(option), style: [styles16.row, isSelected && { backgroundColor: color }], children: /* @__PURE__ */ jsxs16(View15, { style: styles16.rowInner, children: [
-        option.icon && /* @__PURE__ */ jsx19(Icon8, { source: option.icon, size: 18, color: isSelected ? onColor : fg }),
-        /* @__PURE__ */ jsx19(Text11, { style: [styles16.rowLabel, { color: isSelected ? onColor : fg }], numberOfLines: 1, children: option.label })
+      return /* @__PURE__ */ jsx8(TouchableRipple3, { onPress: () => handleSelect(option), style: [styles6.row, isSelected && { backgroundColor: color }], children: /* @__PURE__ */ jsxs6(View7, { style: styles6.rowInner, children: [
+        option.icon && /* @__PURE__ */ jsx8(Icon5, { source: option.icon, size: 18, color: isSelected ? onColor : fg }),
+        /* @__PURE__ */ jsx8(Text4, { style: [styles6.rowLabel, { color: isSelected ? onColor : fg }], numberOfLines: 1, children: option.label })
       ] }) }, option.value);
     }) }) })
   ] });
 }
-var styles16 = StyleSheet16.create({
+var styles6 = StyleSheet6.create({
   anchor: {
     position: "relative"
   },
   // React Native Web gives every position:'relative' view its own stacking context, so the
-  // elevation has to live on the anchor itself — see PopoverBody's own stacking-context notes.
+  // elevation has to live on the anchor itself - see PopoverBody's own stacking-context notes.
   anchorOpen: {
     zIndex: 100
   },
@@ -1242,21 +678,21 @@ function loadSkiaWeb() {
 
 // src/PlayerSetupPanel.tsx
 import { ProfilePicker } from "@tastic/profile";
-import { StyleSheet as StyleSheet18, View as View16 } from "react-native";
-import { Text as Text13 } from "react-native-paper";
+import { StyleSheet as StyleSheet8, View as View8 } from "react-native";
+import { Text as Text6 } from "react-native-paper";
 
 // src/ReadyButton.tsx
-import { TouchableRipple as TouchableRipple5 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet17 } from "react-native";
-import { Text as Text12 } from "react-native-paper";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { TouchableRipple as TouchableRipple4 } from "@rific/feedback-press";
+import { StyleSheet as StyleSheet7 } from "react-native";
+import { Text as Text5 } from "react-native-paper";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }) {
-  const readyButtonStyle = [styles17.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
+  const readyButtonStyle = [styles7.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
   const labelTextStyle = { fontFamily: labelFontFamily, fontWeight: "bold" };
   const labelColorStyle = { color: ready ? "#000000" : color };
-  return /* @__PURE__ */ jsx20(TouchableRipple5, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ jsx20(Text12, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
+  return /* @__PURE__ */ jsx9(TouchableRipple4, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ jsx9(Text5, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
 }
-var styles17 = StyleSheet17.create({
+var styles7 = StyleSheet7.create({
   readyButton: {
     alignItems: "center",
     borderRadius: 12,
@@ -1269,18 +705,18 @@ var styles17 = StyleSheet17.create({
 });
 
 // src/usePopoverHost.ts
-import { useCallback as useCallback3, useState as useState5 } from "react";
+import { useCallback as useCallback2, useState as useState2 } from "react";
 function usePopoverHost() {
-  const [openId, setOpenId] = useState5(null);
-  const toggle = useCallback3((id) => {
+  const [openId, setOpenId] = useState2(null);
+  const toggle = useCallback2((id) => {
     setOpenId((prev) => prev === id ? null : id);
   }, []);
-  const close = useCallback3(() => setOpenId(null), []);
+  const close = useCallback2(() => setOpenId(null), []);
   return { openId, toggle, close };
 }
 
 // src/PlayerSetupPanel.tsx
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function getColorPopoverId(idPrefix) {
   return `${idPrefix}-color`;
 }
@@ -1295,27 +731,27 @@ function PlayerSetupPanel({ idPrefix, host, label, labelFontFamily, color, onCol
   const showProfilePicker = isHuman && profiles !== void 0 && !!onProfileSelect;
   const showCpuDifficulty = !isHuman && cpuDifficulty !== void 0 && cpuDifficultyOptions !== void 0 && !!onCpuDifficultyChange;
   const selectedProfile = profiles?.find((p) => p.id === selectedProfileId) ?? null;
-  return /* @__PURE__ */ jsxs17(View16, { style: [styles18.panel, ownPopoverOpen && styles18.panelOpen], children: [
-    showProfilePicker ? /* @__PURE__ */ jsx21(ProfilePicker, { idPrefix, host: popover, profiles, selectedId: selectedProfileId ?? null, takenId: takenProfileId, color, dark, guestLabel: guestLabel ?? "GUEST", onSelect: (profile) => onProfileSelect?.(profile), onManage: onManageProfiles }) : showCpuDifficulty ? /* @__PURE__ */ jsx21(LabeledDropdown, { id: getCpuDifficultyPopoverId(idPrefix), host: popover, options: cpuDifficultyOptions, value: cpuDifficulty, onChange: onCpuDifficultyChange, color, dark, alignOverride: cpuDifficultyAlignOverride }) : label && /* @__PURE__ */ jsx21(Text13, { variant: "labelSmall", style: { color, fontFamily: labelFontFamily }, children: label }),
-    /* @__PURE__ */ jsxs17(View16, { style: [styles18.pickerRow, pickerRowPopoverOpen && styles18.pickerRowOpen], children: [
-      /* @__PURE__ */ jsx21(InlineColorPicker, { id: getColorPopoverId(idPrefix), host: popover, value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, alignOverride: colorAlignOverride, rotation: colorRotation, dark, tag: isHuman ? selectedProfile?.tag : void 0, icon: isHuman ? humanIcon : cpuIcon }),
+  return /* @__PURE__ */ jsxs7(View8, { style: [styles8.panel, ownPopoverOpen && styles8.panelOpen], children: [
+    showProfilePicker ? /* @__PURE__ */ jsx10(ProfilePicker, { idPrefix, host: popover, profiles, selectedId: selectedProfileId ?? null, takenId: takenProfileId, color, dark, guestLabel: guestLabel ?? "GUEST", onSelect: (profile) => onProfileSelect?.(profile), onManage: onManageProfiles }) : showCpuDifficulty ? /* @__PURE__ */ jsx10(LabeledDropdown, { id: getCpuDifficultyPopoverId(idPrefix), host: popover, options: cpuDifficultyOptions, value: cpuDifficulty, onChange: onCpuDifficultyChange, color, dark, alignOverride: cpuDifficultyAlignOverride }) : label && /* @__PURE__ */ jsx10(Text6, { variant: "labelSmall", style: { color, fontFamily: labelFontFamily }, children: label }),
+    /* @__PURE__ */ jsxs7(View8, { style: [styles8.pickerRow, pickerRowPopoverOpen && styles8.pickerRowOpen], children: [
+      /* @__PURE__ */ jsx10(InlineColorPicker, { id: getColorPopoverId(idPrefix), host: popover, value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, alignOverride: colorAlignOverride, rotation: colorRotation, dark, tag: isHuman ? selectedProfile?.tag : void 0, icon: isHuman ? humanIcon : cpuIcon }),
       secondPicker
     ] }),
-    isHuman && showReadyButton && onToggleReady && /* @__PURE__ */ jsx21(ReadyButton, { color, ready: ready ?? false, onToggleReady })
+    isHuman && showReadyButton && onToggleReady && /* @__PURE__ */ jsx10(ReadyButton, { color, ready: ready ?? false, onToggleReady })
   ] });
 }
-var styles18 = StyleSheet18.create({
+var styles8 = StyleSheet8.create({
   panel: {
     alignItems: "center",
     gap: 12
   },
-  // See SectionedDropdown's anchorOpen comment — this panel is typically a sibling of another
+  // See SectionedDropdown's anchorOpen comment - this panel is typically a sibling of another
   // panel (and/or a shared-controls row), so a popover escaping this panel's bounds needs the panel
   // itself elevated, not just the popover content, to paint above a later sibling.
   panelOpen: {
     zIndex: 100
   },
-  // Same gap as `panel`'s own vertical rhythm, reused horizontally — the color picker and (when
+  // Same gap as `panel`'s own vertical rhythm, reused horizontally - the color picker and (when
   // present) secondPicker sit side by side within this row instead of stacked in the panel's own
   // column.
   pickerRow: {
@@ -1323,10 +759,10 @@ var styles18 = StyleSheet18.create({
     flexDirection: "row",
     gap: 12
   },
-  // A popover is an absolutely-positioned sibling of its own trigger — so a tall one (the color
+  // A popover is an absolutely-positioned sibling of its own trigger - so a tall one (the color
   // swatch grid) can extend down far enough to overlap the ReadyButton below, which paints on top of
   // it by default DOM order since it's a later sibling within `panel`. `panel`'s own panelOpen
-  // elevation only helps this panel paint above OTHER panels (see its own comment) — it does nothing
+  // elevation only helps this panel paint above OTHER panels (see its own comment) - it does nothing
   // for stacking *within* this panel, since React Native Web gives each View its own stacking
   // context. This is what actually fixes that: elevate pickerRow itself above its own later sibling
   // whenever one of its own popovers is open.
@@ -1336,29 +772,29 @@ var styles18 = StyleSheet18.create({
 });
 
 // src/PressAwayOverlay.tsx
-import { Pressable, StyleSheet as StyleSheet19 } from "react-native";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { Pressable, StyleSheet as StyleSheet9 } from "react-native";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function PressAwayOverlay({ active, onPress, style }) {
   if (!active) return null;
-  return /* @__PURE__ */ jsx22(Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [StyleSheet19.absoluteFill, style] });
+  return /* @__PURE__ */ jsx11(Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [StyleSheet9.absoluteFill, style] });
 }
 
 // src/SharedActionBand.tsx
-import { IconButton as IconButton4 } from "@rific/feedback-press";
-import { StyleSheet as StyleSheet20, View as View17 } from "react-native";
-import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+import { IconButton as IconButton2 } from "@rific/feedback-press";
+import { StyleSheet as StyleSheet10, View as View9 } from "react-native";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }) {
-  return /* @__PURE__ */ jsxs18(View17, { style: [styles19.column, popoverOpen && styles19.columnOpen], children: [
-    /* @__PURE__ */ jsxs18(View17, { style: styles19.actionsRow, children: [
-      /* @__PURE__ */ jsx23(IconButton4, { icon: "arrow-left", iconColor: fg, size: 20, onPress: onBack, accessibilityLabel: "Back" }),
-      onRandomize && /* @__PURE__ */ jsx23(IconButton4, { icon: "dice-multiple", iconColor: fg, size: 18, onPress: onRandomize, accessibilityLabel: "Randomize match settings" }),
-      onReset && /* @__PURE__ */ jsx23(IconButton4, { icon: "restore", iconColor: fg, size: 18, onPress: onReset, accessibilityLabel: "Reset match settings to defaults" }),
-      /* @__PURE__ */ jsx23(IconButton4, { icon: "cog", iconColor: fg, size: 20, onPress: onSettings, accessibilityLabel: "Settings" })
+  return /* @__PURE__ */ jsxs8(View9, { style: [styles9.column, popoverOpen && styles9.columnOpen], children: [
+    /* @__PURE__ */ jsxs8(View9, { style: styles9.actionsRow, children: [
+      /* @__PURE__ */ jsx12(IconButton2, { icon: "arrow-left", iconColor: fg, size: 20, onPress: onBack, accessibilityLabel: "Back" }),
+      onRandomize && /* @__PURE__ */ jsx12(IconButton2, { icon: "dice-multiple", iconColor: fg, size: 18, onPress: onRandomize, accessibilityLabel: "Randomize match settings" }),
+      onReset && /* @__PURE__ */ jsx12(IconButton2, { icon: "restore", iconColor: fg, size: 18, onPress: onReset, accessibilityLabel: "Reset match settings to defaults" }),
+      /* @__PURE__ */ jsx12(IconButton2, { icon: "cog", iconColor: fg, size: 20, onPress: onSettings, accessibilityLabel: "Settings" })
     ] }),
     children
   ] });
 }
-var styles19 = StyleSheet20.create({
+var styles9 = StyleSheet10.create({
   actionsRow: {
     alignItems: "center",
     flexDirection: "row",
@@ -1373,86 +809,45 @@ var styles19 = StyleSheet20.create({
   }
 });
 
-// src/StaggeredWord.tsx
-import { useEffect as useEffect2 } from "react";
-import { StyleSheet as StyleSheet21, View as View18 } from "react-native";
-import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming } from "react-native-reanimated";
-import { jsx as jsx24 } 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);
-  useEffect2(() => {
-    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__ */ jsx24(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__ */ jsx24(View18, { style: [styles20.row, style], onLayout, children: word.split("").map((char, i) => /* @__PURE__ */ jsx24(AnimatedLetter, { char, index: startIndex + i, color, reducedMotion, fontFamily, fontSize, lineHeight, fontWeight, letterSpacing }, i)) });
-}
-var styles20 = StyleSheet21.create({
-  row: {
-    flexDirection: "row"
-  }
-});
-
-// src/UpdateDialog.tsx
-import { useUpdater as useUpdater2 } from "@rific/updater";
-import { jsx as jsx25 } 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__ */ jsx25(ConfirmDialog, { visible: !!manifest, title: "Update Available", message: date ? `Released ${date.toLocaleDateString()} at ${date.toLocaleTimeString()}` : "", confirmLabel: "Restart", cancelLabel: "Later", icon: "update", rotation, onConfirm: () => respond(true), onCancel: () => respond(false) });
-}
-
 // src/useQuitConfirmation.ts
-import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
 function useQuitConfirmation(hasProgress, onConfirmedBack) {
-  const [confirmVisible, setConfirmVisible] = useState6(false);
-  const hasProgressRef = useRef3(hasProgress);
-  useEffect3(() => {
+  const [confirmVisible, setConfirmVisible] = useState3(false);
+  const hasProgressRef = useRef2(hasProgress);
+  useEffect2(() => {
     hasProgressRef.current = hasProgress;
   });
-  const onConfirmedBackRef = useRef3(onConfirmedBack);
-  useEffect3(() => {
+  const onConfirmedBackRef = useRef2(onConfirmedBack);
+  useEffect2(() => {
     onConfirmedBackRef.current = onConfirmedBack;
   });
-  const requestBack = useCallback4(() => {
+  const requestBack = useCallback3(() => {
     if (hasProgressRef.current()) setConfirmVisible(true);
     else onConfirmedBackRef.current();
   }, []);
-  const cancelBack = useCallback4(() => setConfirmVisible(false), []);
+  const cancelBack = useCallback3(() => setConfirmVisible(false), []);
   return { confirmVisible, requestBack, cancelBack };
 }
 
 // src/useZoneClampedAlign.ts
 import { useZoneBounds } from "@tastic/split-screen";
-import { useEffect as useEffect4, useState as useState7 } from "react";
-import { useWindowDimensions as useWindowDimensions4 } from "react-native";
-import { useSafeAreaInsets as useSafeAreaInsets2 } from "react-native-safe-area-context";
+import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useWindowDimensions as useWindowDimensions3 } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 var EDGE_MARGIN2 = 12;
 function useZoneClampedAlign(open, contentWidth, contentHeight, rotation = 0) {
   const auto = useAutoAlign(open, contentWidth, contentHeight, rotation);
   const zone = useZoneBounds();
-  const { height: windowHeight } = useWindowDimensions4();
-  const insets = useSafeAreaInsets2();
+  const { height: windowHeight } = useWindowDimensions3();
+  const insets = useSafeAreaInsets();
   const shouldMeasure = open && auto.measured && zone !== null;
-  const [ownBounds, setOwnBounds] = useState7(null);
-  const [prevShouldMeasure, setPrevShouldMeasure] = useState7(shouldMeasure);
+  const [ownBounds, setOwnBounds] = useState4(null);
+  const [prevShouldMeasure, setPrevShouldMeasure] = useState4(shouldMeasure);
   if (shouldMeasure !== prevShouldMeasure) {
     setPrevShouldMeasure(shouldMeasure);
     setOwnBounds(null);
   }
-  useEffect4(() => {
+  useEffect3(() => {
     if (!shouldMeasure) return;
     auto.triggerRef.current?.measureInWindow((_x, y, _width, height) => {
       const belowShared = zone.zoneSide === "belowShared";