@tastic/shell 0.1.1 → 0.2.1

package/dist/index.js

@@ -32,6 +32,7 @@ var index_exports = {};
 __export(index_exports, {
   DEFAULT_APP_SETTINGS: () => DEFAULT_APP_SETTINGS,
   DEFAULT_OPPONENT: () => DEFAULT_OPPONENT,
+  GUEST_PLAYER_ID: () => GUEST_PLAYER_ID,
   HomeScreen: () => HomeScreen,
   LoadoutRoute: () => LoadoutRoute,
   PREVIEW_ASPECT: () => PREVIEW_ASPECT,
@@ -99,7 +100,8 @@ var import_auto_paper2 = require("@rific/auto-paper");
 var import_feedback_press2 = require("@rific/feedback-press");
 var import_toaster2 = require("@rific/toaster");
 var import_core6 = require("@tastic/core");
-var import_hud2 = require("@tastic/hud");
+var import_chrome2 = require("@tastic/hud/chrome");
+var import_profile3 = require("@tastic/profile");
 var Haptics = __toESM(require("expo-haptics"));
 var import_expo_router = require("expo-router");
 var import_expo_sensors = require("expo-sensors");
@@ -148,24 +150,35 @@ function seatTwoFor(saved, choices) {
 function humanSeatsFor(mode) {
   return mode === "twoPlayer" ? [1, 2] : [1];
 }
+var GUEST_PLAYER_ID = "guest";
 
 // src/components/GuideHost.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var PACK_GUIDE = "__pack__";
+var NO_INPUT = {};
 var GameGuideContext = (0, import_react2.createContext)(null);
 function GuideHost({ children }) {
   const pack = usePack();
-  const [gameId, setGameId] = (0, import_react2.useState)(pack.games[0].id);
-  const game = pack.games.find((g) => g.id === gameId) ?? pack.games[0];
+  const [subject, setSubject] = (0, import_react2.useState)(() => pack.guide ? PACK_GUIDE : pack.games.find((g) => g.guide)?.id ?? null);
+  const packGuide = subject === PACK_GUIDE ? pack.guide : void 0;
+  const game = subject === PACK_GUIDE ? void 0 : pack.games.find((g) => g.id === subject);
+  const gameGuide = game?.guide;
   const rotation = (0, import_core.useRotation)();
   const touch = (0, import_core.useIsTouchPrimaryDevice)();
   const seatTwo = (0, import_react_redux.useSelector)((state) => state.opponent.seatTwo);
-  const input = (0, import_react_redux.useSelector)((state) => game.guide.selectInput(state), import_react_redux.shallowEqual);
-  const seenVersion = (0, import_react_redux.useSelector)((state) => game.guide.selectVersionSeen(state));
+  const input = (0, import_react_redux.useSelector)((state) => gameGuide ? gameGuide.selectInput(state) : NO_INPUT, import_react_redux.shallowEqual);
+  const seenVersion = (0, import_react_redux.useSelector)((state) => (packGuide ?? gameGuide)?.selectVersionSeen(state) ?? 0);
   const dispatch = (0, import_react_redux.useDispatch)();
-  const mode = roundModeFor(seatTwoFor(seatTwo, game.seatTwo));
-  const steps = (0, import_react2.useMemo)(() => game.guide.getSteps(input, { touch, mode }), [game, input, touch, mode]);
-  const onSeen = (0, import_react2.useCallback)((version) => dispatch(game.guide.markSeen(version)), [dispatch, game]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_guide.GuideProvider, { steps, currentVersion: game.guide.version, seenVersion, onSeen, rotation, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GameGuideBridge, { onPick: setGameId, children }) });
+  const mode = roundModeFor(seatTwoFor(seatTwo, game?.seatTwo));
+  const steps = (0, import_react2.useMemo)(() => packGuide ? packGuide.getSteps({ touch }) : gameGuide ? gameGuide.getSteps(input, { touch, mode }) : [], [packGuide, gameGuide, input, touch, mode]);
+  const onSeen = (0, import_react2.useCallback)(
+    (version) => {
+      const guide = packGuide ?? gameGuide;
+      if (guide) dispatch(guide.markSeen(version));
+    },
+    [dispatch, packGuide, gameGuide]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_guide.GuideProvider, { steps, currentVersion: (packGuide ?? gameGuide)?.version ?? 0, seenVersion, onSeen, rotation, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GameGuideBridge, { onPick: setSubject, children }) });
 }
 function GameGuideBridge({ onPick, children }) {
   const pack = usePack();
@@ -173,6 +186,7 @@ function GameGuideBridge({ onPick, children }) {
   const { isOpen, open } = (0, import_guide.useGuide)();
   const pendingNext = (0, import_react2.useRef)(null);
   const wasOpen = (0, import_react2.useRef)(false);
+  const packAutoShown = (0, import_react2.useRef)(false);
   (0, import_react2.useEffect)(() => {
     if (wasOpen.current && !isOpen && pendingNext.current) {
       const next = pendingNext.current;
@@ -183,15 +197,16 @@ function GameGuideBridge({ onPick, children }) {
   }, [isOpen]);
   const openFor = (0, import_react2.useCallback)(
     (gameId) => {
+      if (!pack.games.find((g) => g.id === gameId)?.guide) return;
       onPick(gameId);
       open();
     },
-    [onPick, open]
+    [pack, onPick, open]
   );
   const openFirstTime = (0, import_react2.useCallback)(
     (gameId, next) => {
-      const game = pack.games.find((g) => g.id === gameId);
-      if (!game || game.guide.selectVersionSeen(store.getState()) >= game.guide.version) {
+      const guide = pack.games.find((g) => g.id === gameId)?.guide;
+      if (!guide || guide.selectVersionSeen(store.getState()) >= guide.version) {
         next();
         return;
       }
@@ -200,7 +215,18 @@ function GameGuideBridge({ onPick, children }) {
     },
     [pack, store, openFor]
   );
-  const value = (0, import_react2.useMemo)(() => ({ openFirstTime, openFor }), [openFirstTime, openFor]);
+  const openPack = (0, import_react2.useCallback)(() => {
+    if (!pack.guide) return;
+    onPick(PACK_GUIDE);
+    open();
+  }, [pack, onPick, open]);
+  const autoShowPack = (0, import_react2.useCallback)(() => {
+    const guide = pack.guide;
+    if (!guide || packAutoShown.current || guide.selectVersionSeen(store.getState()) >= guide.version) return;
+    packAutoShown.current = true;
+    openPack();
+  }, [pack, store, openPack]);
+  const value = (0, import_react2.useMemo)(() => ({ openFirstTime, openFor, openPack, autoShowPack }), [openFirstTime, openFor, openPack, autoShowPack]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GameGuideContext.Provider, { value, children });
 }
 function useGameGuide() {
@@ -220,15 +246,20 @@ var RNPaper = __toESM(require("react-native-paper"));
 var import_react_redux2 = require("react-redux");
 var import_react4 = require("redux-persist/integration/react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function useShellFeedbackSounds() {
+  const selection = (0, import_audio.useAudioPool)(require("./select-MLBNNA4N.wav"));
+  const notification = (0, import_audio.useAudioPool)(require("./notification-CGGFPYK7.wav"));
+  return { selection, notification };
+}
 var FeedbackBridge = ({ children }) => {
   const haptic = (0, import_react_redux2.useSelector)((state) => state.haptic);
   const sound = (0, import_react_redux2.useSelector)((state) => state.sound);
   const dispatch = (0, import_react_redux2.useDispatch)();
   const onChange = (0, import_react3.useCallback)((next) => dispatch(import_feedback_press.hapticActions.initialize(next)), [dispatch]);
   const onSoundChange = (0, import_react3.useCallback)((next) => dispatch(import_feedback_press.soundActions.initialize(next)), [dispatch]);
-  const playSelection = (0, import_audio.useAudioPool)(require("./select-MLBNNA4N.wav"));
-  const playNotification = (0, import_audio.useAudioPool)(require("./notification-CGGFPYK7.wav"));
-  const bridgeProps = (0, import_feedback_press.useFeedbackBridgeProps)({ initialValue: haptic, onChange, soundInitialValue: sound, onSoundChange, sound: { selection: playSelection, notification: playNotification } });
+  const { useFeedbackSounds = useShellFeedbackSounds } = usePack();
+  const sounds = useFeedbackSounds();
+  const bridgeProps = (0, import_feedback_press.useFeedbackBridgeProps)({ initialValue: haptic, onChange, soundInitialValue: sound, onSoundChange, sound: sounds });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press.FeedbackPressProvider, { ...bridgeProps, paper: RNPaper, children });
 };
 var EdgeGuardBridge = ({ children }) => {
@@ -271,12 +302,12 @@ function Theme({ children }) {
 // src/components/UpdateDialog.tsx
 var import_toaster = require("@rific/toaster");
 var import_core3 = require("@tastic/core");
-var import_hud = require("@tastic/hud");
+var import_chrome = require("@tastic/hud/chrome");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function UpdateDialog() {
   const onError = (0, import_toaster.useUpdateErrorToast)();
   const rotation = (0, import_core3.useRotation)();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_hud.UpdateDialog, { onError, rotation });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_chrome.UpdateDialog, { onError, rotation });
 }
 
 // src/hooks/useAppSettings.ts
@@ -446,18 +477,39 @@ function useProfiles() {
 // src/RootLayout.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var PLAY_OPTIONS = { statusBarHidden: true };
+var KEEP_STATUS_BAR_OPTIONS = {};
+var TRANSPARENT_CONTENT = { backgroundColor: "transparent" };
+var noScreenOptions = () => ({});
 function AppStack() {
+  const pack = usePack();
+  const { Backdrop } = pack;
   const { dark } = (0, import_auto_paper2.useAutoPaperTheme)();
-  const rootBackground = (0, import_core6.useThemedRootBackground)(dark, false);
+  const rootBackground = (0, import_core6.useThemedRootBackground)(Backdrop ? true : dark, false);
   const statusBar = (0, import_core6.useRotationAwareStatusBar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_expo_router.Stack, { screenOptions: { ...rootBackground, ...statusBar }, children: [
+  const packOptions = (pack.useScreenOptions ?? noScreenOptions)();
+  const backdropOptions = Backdrop ? { contentStyle: TRANSPARENT_CONTENT, animation: import_react_native2.Platform.select({ android: "fade" }) } : void 0;
+  const playOptions = (0, import_react9.useCallback)(
+    ({ route }) => {
+      const id = route.params?.game;
+      return pack.games.some((g) => g.id === id && g.keepStatusBar) ? KEEP_STATUS_BAR_OPTIONS : PLAY_OPTIONS;
+    },
+    [pack.games]
+  );
+  const navigationTheme = (0, import_react9.useMemo)(() => Backdrop ? { ...import_expo_router.DarkTheme, colors: { ...import_expo_router.DarkTheme.colors, background: "transparent" } } : null, [Backdrop]);
+  const stack = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_expo_router.Stack, { screenOptions: { ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_router.Stack.Screen, { name: "index" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_router.Stack.Screen, { name: "play/[game]", options: PLAY_OPTIONS })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_router.Stack.Screen, { name: "play/[game]", options: playOptions })
+  ] });
+  if (!Backdrop || !navigationTheme) return stack;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native2.View, { style: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Backdrop, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_router.ThemeProvider, { value: navigationTheme, children: stack })
   ] });
 }
 function OrientationBridge({ children }) {
   const { settings, setSettings } = useAppSettings();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core6.OrientationProvider, { deviceMotion: import_expo_sensors.DeviceMotion, freezeWhileLocked: true, lockInitialValue: { locked: settings.lockOrientation, rotation: settings.lockedRotation }, onLockChange: (next) => setSettings({ lockOrientation: next.locked, lockedRotation: next.rotation }), children });
+  const { portraitWhileKeyboard } = usePack();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core6.OrientationProvider, { deviceMotion: import_expo_sensors.DeviceMotion, freezeWhileLocked: true, lockInitialValue: { locked: settings.lockOrientation, rotation: settings.lockedRotation }, onLockChange: (next) => setSettings({ lockOrientation: next.locked, lockedRotation: next.rotation }), portraitWhileKeyboard, children });
 }
 function GatedApp({ children }) {
   const { loaded } = useProfiles();
@@ -465,24 +517,38 @@ function GatedApp({ children }) {
 }
 function HapticGatedToastProvider({ children }) {
   const { settings } = (0, import_feedback_press2.useHapticSettings)();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_toaster2.ToastProvider, { haptics: settings.vibrate ? Haptics : void 0, paper: RNPaper2, children });
+  const { Toaster: PackToasterComponent } = usePack();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_toaster2.ToastProvider, { haptics: settings.vibrate ? Haptics : void 0, paper: PackToasterComponent ? void 0 : RNPaper2, children });
 }
 function RotatingToaster() {
   const renderFrame = (0, import_react9.useCallback)(
-    (toasts) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_hud2.RotatedFrame, { rotatedSafeArea: true, passThrough: true, children: toasts }),
+    (toasts) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_chrome2.RotatedFrame, { rotatedSafeArea: true, passThrough: true, children: toasts }),
     []
   );
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_toaster2.Toaster, { historyButton: null, clearButton: null, limit: 3, renderFrame });
 }
+function PackToaster({ Toaster: PackToasterComponent }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native2.View, { style: import_react_native2.StyleSheet.absoluteFill, pointerEvents: "box-none", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_chrome2.RotatedFrame, { rotatedSafeArea: true, passThrough: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PackToasterComponent, {}) }) });
+}
 function GameProviders({ games, children }) {
-  return games.reduceRight((inner, game) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(game.Provider, { children: inner }, game.id), children);
+  return games.reduceRight((inner, game) => game.Provider ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(game.Provider, { children: inner }, game.id) : inner, children);
+}
+function PreviewColors({ previewColor, children }) {
+  const { dark } = (0, import_auto_paper2.useAutoPaperTheme)();
+  const preview = (0, import_react9.useCallback)((hex) => previewColor(hex, dark), [previewColor, dark]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_profile3.ProfileColorProvider, { preview, children });
+}
+function PackRoot({ pack, children }) {
+  const { Provider, previewColor } = pack;
+  const inner = Provider ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Provider, { children }) : children;
+  return previewColor ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PreviewColors, { previewColor, children: inner }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: inner });
 }
 function RootLayout({ pack, store, persistor }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_gesture_handler.GestureHandlerRootView, { style: styles.root, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_safe_area_context.SafeAreaProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PackProvider, { pack, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Fonts, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Providers, { store, persistor, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ProfilesProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LastActiveGameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GameProviders, { games: pack.games, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GatedApp, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(OrientationBridge, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(HapticGatedToastProvider, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_gesture_handler.GestureHandlerRootView, { style: styles.root, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_safe_area_context.SafeAreaProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PackProvider, { pack, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Fonts, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Providers, { store, persistor, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ProfilesProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LastActiveGameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GameProviders, { games: pack.games, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PackRoot, { pack, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GatedApp, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(OrientationBridge, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(HapticGatedToastProvider, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GuideHost, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AppStack, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RotatingToaster, {}),
+    pack.Toaster ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PackToaster, { Toaster: pack.Toaster }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RotatingToaster, {}),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(UpdateDialog, {})
-  ] }) }) }) }) }) }) }) }) }) }) }) });
+  ] }) }) }) }) }) }) }) }) }) }) }) }) });
 }
 var styles = import_react_native2.StyleSheet.create({
   root: { flex: 1 }
@@ -491,11 +557,19 @@ var styles = import_react_native2.StyleSheet.create({
 // src/screens/GameRoute.tsx
 var import_expo_router5 = require("expo-router");
 var import_react14 = require("react");
+var import_react_native5 = require("react-native");
+
+// src/routes.ts
+var playHref = (game) => ({ pathname: "/play/[game]", params: { game } });
+var loadoutHref = (game) => ({ pathname: "/loadout/[game]", params: { game } });
+var STATS_HREF = "/stats";
+var PROFILES_HREF = "/profiles";
 
 // src/screens/LoadoutScreen.tsx
 var import_auto_paper4 = require("@rific/auto-paper");
 var import_core10 = require("@tastic/core");
-var import_hud5 = require("@tastic/hud");
+var import_chrome4 = require("@tastic/hud/chrome");
+var import_lobby2 = require("@tastic/hud/lobby");
 var import_split_screen = require("@tastic/split-screen");
 var import_expo_router4 = require("expo-router");
 var import_react13 = require("react");
@@ -505,8 +579,8 @@ var import_react_native_safe_area_context2 = require("react-native-safe-area-con
 var import_react_redux9 = require("react-redux");
 
 // src/components/SeatTwoPanel.tsx
-var import_hud3 = require("@tastic/hud");
-var import_profile3 = require("@tastic/profile");
+var import_lobby = require("@tastic/hud/lobby");
+var import_profile4 = require("@tastic/profile");
 var import_react10 = require("react");
 var import_react_native3 = require("react-native");
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -549,14 +623,14 @@ function SeatTwoPanel({ idPrefix, host, choices, seatTwo, onSeatTwoChange, cpuDi
   };
   const colorSection = seatTwo === "nobody" ? void 0 : { value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, caption: selectedProfile ? colorCaption : void 0 };
   const pickerId = getSeatTwoPopoverId(idPrefix);
-  const size = (0, import_profile3.getOptionPickerContentSize)(options.length, colorSection);
-  const align = (0, import_hud3.useZoneClampedAlign)(host.openId === pickerId, size.width, size.height);
+  const size = (0, import_profile4.getOptionPickerContentSize)(options.length, colorSection);
+  const align = (0, import_lobby.useZoneClampedAlign)(host.openId === pickerId, size.width, size.height);
   const ownPopoverOpen = host.openId?.startsWith(`${idPrefix}-`) ?? false;
   const pickerRowOpen = secondPickerId !== void 0 && host.openId === secondPickerId;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native3.View, { style: [styles2.panel, ownPopoverOpen && styles2.panelOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_profile3.OptionPicker, { id: pickerId, host, options, value, onChange: handleChange, color, dark, icon, colorSection, alignOverride: align }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_profile4.OptionPicker, { id: pickerId, host, options, value, onChange: handleChange, color, dark, icon, colorSection, alignOverride: align }),
     isPerson && secondPicker && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native3.View, { style: [styles2.pickerRow, pickerRowOpen && styles2.pickerRowOpen], children: secondPicker }),
-    isPerson && showReadyButton && onToggleReady && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_hud3.ReadyButton, { color, ready: ready ?? false, onToggleReady })
+    isPerson && showReadyButton && onToggleReady && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lobby.ReadyButton, { color, ready: ready ?? false, onToggleReady })
   ] });
 }
 var styles2 = import_react_native3.StyleSheet.create({
@@ -582,13 +656,14 @@ var styles2 = import_react_native3.StyleSheet.create({
 
 // src/components/SettingsDialog.tsx
 var import_toaster3 = require("@rific/toaster");
-var import_hud4 = require("@tastic/hud");
+var import_chrome3 = require("@tastic/hud/chrome");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function SettingsDialog({ visible, onDismiss, rotation = 0, onShowHowToPlay, children }) {
   const onUpdateError = (0, import_toaster3.useUpdateErrorToast)();
   const { settings, setSettings } = useAppSettings();
-  const { otaVersion, SettingsSections } = usePack();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_hud4.BaseSettingsDialog, { visible, onDismiss, rotation, version: otaVersion, lockOrientation: settings.lockOrientation, onLockOrientationChange: (value) => setSettings({ lockOrientation: value }), deferBottomEdgeGestures: settings.deferBottomEdgeGestures, onDeferBottomEdgeGestures: (value) => setSettings({ deferBottomEdgeGestures: value }), onUpdateError, onShowHowToPlay, children: [
+  const { otaVersion, SettingsSections, edgeGuard = true } = usePack();
+  const edgeGuardProps = edgeGuard ? { deferBottomEdgeGestures: settings.deferBottomEdgeGestures, onDeferBottomEdgeGestures: (value) => setSettings({ deferBottomEdgeGestures: value }) } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_chrome3.BaseSettingsDialog, { visible, onDismiss, rotation, version: otaVersion, lockOrientation: settings.lockOrientation, onLockOrientationChange: (value) => setSettings({ lockOrientation: value }), ...edgeGuardProps, onUpdateError, onShowHowToPlay, children: [
     children,
     SettingsSections && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SettingsSections, {})
   ] });
@@ -617,29 +692,33 @@ function useOpponent() {
 
 // src/hooks/useSeatColors.ts
 var import_auto_paper3 = require("@rific/auto-paper");
-var import_profile5 = require("@tastic/profile");
+var import_profile6 = require("@tastic/profile");
 var import_expo_router2 = require("expo-router");
 var import_react12 = require("react");
 var import_react_redux8 = require("react-redux");
 
 // src/redux/seatColorsSlice.ts
-var import_profile4 = require("@tastic/profile");
+var import_profile5 = require("@tastic/profile");
 function defaultSeatColorsState(seatColors) {
   return { lastGuestColor: { 1: seatColors[1], 2: seatColors[2] }, lastCpuColor: seatColors[2], profileColors: {} };
 }
 function createSeatColorsReducer(seatColors) {
-  return (0, import_profile4.createSeatColorsSlice)("pack", defaultSeatColorsState(seatColors)).reducer;
+  return (0, import_profile5.createSeatColorsSlice)("pack", defaultSeatColorsState(seatColors)).reducer;
 }
-var seatColorsActions = (0, import_profile4.createSeatColorsSlice)("pack", defaultSeatColorsState({ 1: "", 2: "" })).actions;
+var seatColorsActions = (0, import_profile5.createSeatColorsSlice)("pack", defaultSeatColorsState({ 1: "", 2: "" })).actions;
 
 // src/hooks/useSeatColors.ts
+function sameTheme(current, next) {
+  const a = current.color;
+  const b = next.color;
+  const sameColor = typeof a === "string" || typeof b === "string" ? typeof a === typeof b && String(a).toLowerCase() === String(b).toLowerCase() : !!a && !!b && a.primary.toLowerCase() === b.primary.toLowerCase() && a.secondary.toLowerCase() === b.secondary.toLowerCase();
+  return sameColor && (next.harmony === void 0 || next.harmony === current.harmony);
+}
 function useSeatColors(p2IsHuman) {
-  const { colors: themeColors } = (0, import_auto_paper3.useAutoPaperTheme)();
-  const { set: setThemeColor } = (0, import_auto_paper3.useThemeSettings)();
-  const p1Color = themeColors.primary;
-  const p2Color = themeColors.secondary;
+  const { dark, colors: themeColors } = (0, import_auto_paper3.useAutoPaperTheme)();
+  const { settings: themeSettings, set: setThemeColor } = (0, import_auto_paper3.useThemeSettings)();
   const { profiles, lastSelected } = useProfiles();
-  const { seatColors } = usePack();
+  const { seatColors, seatTheme } = usePack();
   const seatDefaultColors = [seatColors[1], seatColors[2]];
   const dispatch = (0, import_react_redux8.useDispatch)();
   const guestColors = (0, import_react_redux8.useSelector)((state) => state.seatColors.lastGuestColor);
@@ -647,11 +726,21 @@ function useSeatColors(p2IsHuman) {
   const profileColors = (0, import_react_redux8.useSelector)((state) => state.seatColors.profileColors);
   const p1Profile = profiles.find((p) => p.id === lastSelected[1]) ?? null;
   const p2Profile = p2IsHuman ? profiles.find((p) => p.id === lastSelected[2]) ?? null : null;
+  const rememberedColors = (p1Prof, p2Prof, picks, guest, cpu) => {
+    const p1 = p1Prof ? (0, import_profile6.profileSeatColor)(p1Prof, picks) : guest[1];
+    const p2 = (0, import_profile6.avoidSeatColorClash)(p1, p2Prof ? (0, import_profile6.profileSeatColor)(p2Prof, picks) : p2IsHuman ? guest[2] : cpu, seatDefaultColors);
+    return { p1, p2 };
+  };
+  const remembered = rememberedColors(p1Profile, p2Profile, profileColors, guestColors, cpuColor);
+  const p1Color = seatTheme ? remembered.p1 : themeColors.primary;
+  const p2Color = seatTheme ? remembered.p2 : themeColors.secondary;
+  const themeFor = (0, import_react12.useCallback)((p1, p2) => seatTheme ? seatTheme({ 1: p1, 2: p2 }, dark) : { color: { primary: p1, secondary: p2, tertiary: (0, import_auto_paper3.getThirdColor)(p1, p2) } }, [seatTheme, dark]);
   const p1ProfileRef = (0, import_react12.useRef)(p1Profile);
   const p2ProfileRef = (0, import_react12.useRef)(p2Profile);
   const guestColorsRef = (0, import_react12.useRef)(guestColors);
   const cpuColorRef = (0, import_react12.useRef)(cpuColor);
   const profileColorsRef = (0, import_react12.useRef)(profileColors);
+  const themeForRef = (0, import_react12.useRef)(themeFor);
   (0, import_react12.useEffect)(() => {
     p1ProfileRef.current = p1Profile;
   }, [p1Profile]);
@@ -668,21 +757,17 @@ function useSeatColors(p2IsHuman) {
     profileColorsRef.current = profileColors;
   }, [profileColors]);
   (0, import_react12.useEffect)(() => {
-    const nextP1 = p1Profile ? (0, import_profile5.profileSeatColor)(p1Profile, profileColors) : guestColors[1];
-    const nextP2 = (0, import_profile5.avoidSeatColorClash)(nextP1, p2Profile ? (0, import_profile5.profileSeatColor)(p2Profile, profileColors) : p2IsHuman ? guestColors[2] : cpuColor, seatDefaultColors);
-    if (nextP1.toLowerCase() === p1Color.toLowerCase() && nextP2.toLowerCase() === p2Color.toLowerCase()) return;
-    setThemeColor({ color: { primary: nextP1, secondary: nextP2, tertiary: (0, import_auto_paper3.getThirdColor)(nextP1, nextP2) } });
-  }, [lastSelected[1], lastSelected[2], p2IsHuman, guestColors, cpuColor, profileColors, profiles.length]);
+    themeForRef.current = themeFor;
+  }, [themeFor]);
+  (0, import_react12.useEffect)(() => {
+    const next = themeFor(remembered.p1, remembered.p2);
+    if (sameTheme(themeSettings, next)) return;
+    setThemeColor(next);
+  }, [lastSelected[1], lastSelected[2], p2IsHuman, guestColors, cpuColor, profileColors, profiles.length, dark]);
   (0, import_expo_router2.useFocusEffect)(
     (0, import_react12.useCallback)(() => {
-      const guest = guestColorsRef.current;
-      const cpu = cpuColorRef.current;
-      const p1Prof = p1ProfileRef.current;
-      const p2Prof = p2ProfileRef.current;
-      const picks = profileColorsRef.current;
-      const nextP1 = p1Prof ? (0, import_profile5.profileSeatColor)(p1Prof, picks) : guest[1];
-      const nextP2 = (0, import_profile5.avoidSeatColorClash)(nextP1, p2Prof ? (0, import_profile5.profileSeatColor)(p2Prof, picks) : p2IsHuman ? guest[2] : cpu, seatDefaultColors);
-      setThemeColor({ color: { primary: nextP1, secondary: nextP2, tertiary: (0, import_auto_paper3.getThirdColor)(nextP1, nextP2) } });
+      const next = rememberedColors(p1ProfileRef.current, p2ProfileRef.current, profileColorsRef.current, guestColorsRef.current, cpuColorRef.current);
+      setThemeColor(themeForRef.current(next.p1, next.p2));
     }, [lastSelected[1], lastSelected[2], p2IsHuman, setThemeColor])
   );
   const persistSeatColor = (0, import_react12.useCallback)(
@@ -704,21 +789,21 @@ function useSeatColors(p2IsHuman) {
     (hex) => {
       const swapped = hex.toLowerCase() === p2Color.toLowerCase();
       const nextP2 = swapped ? p1Color : p2Color;
-      setThemeColor({ color: { primary: hex, secondary: nextP2, tertiary: (0, import_auto_paper3.getThirdColor)(hex, nextP2) } });
+      setThemeColor(themeFor(hex, nextP2));
       persistSeatColor(1, hex);
       if (swapped) persistSeatColor(2, nextP2);
     },
-    [setThemeColor, p1Color, p2Color, persistSeatColor]
+    [setThemeColor, themeFor, p1Color, p2Color, persistSeatColor]
   );
   const handleP2ColorChange = (0, import_react12.useCallback)(
     (hex) => {
       const swapped = hex.toLowerCase() === p1Color.toLowerCase();
       const nextP1 = swapped ? p2Color : p1Color;
-      setThemeColor({ color: { primary: nextP1, secondary: hex, tertiary: (0, import_auto_paper3.getThirdColor)(nextP1, hex) } });
+      setThemeColor(themeFor(nextP1, hex));
       persistSeatColor(2, hex);
       if (swapped) persistSeatColor(1, nextP1);
     },
-    [setThemeColor, p1Color, p2Color, persistSeatColor]
+    [setThemeColor, themeFor, p1Color, p2Color, persistSeatColor]
   );
   return { p1Color, p2Color, handleP1ColorChange, handleP2ColorChange };
 }
@@ -754,6 +839,7 @@ function LoadoutScreen({ game }) {
   const fixedSeats = p2IsHuman && (!!game.twoPlayerSeats?.faceToFaceOnWeb || import_react_native4.Platform.OS !== "web");
   const fixedUpsideDown = !!game.twoPlayerSeats?.followUpsideDown && orientationMode === "faceToFace" && upsideDown;
   const { panelLayout, panelFadeStyle } = (0, import_split_screen.useDualZoneLayout)(fixedSeats ? "faceToFace" : orientationMode, fixedSeats ? true : p1OnRight, fixedSeats || p1OnRightResolved, fixedSeats ? fixedUpsideDown : upsideDown, PANEL_SWAP_FADE_MS);
+  const playersRowFade = panelFadeStyle;
   const [settingsOpen, setSettingsOpen] = (0, import_react13.useState)(false);
   const rotation = (0, import_core10.getViewRotation)(panelLayout.orientationMode, panelLayout.p1OnRight, panelLayout.upsideDown);
   const insets = (0, import_core10.rotateInsets)((0, import_react_native_safe_area_context2.useSafeAreaInsets)(), rotation);
@@ -782,7 +868,7 @@ function LoadoutScreen({ game }) {
   (0, import_react13.useEffect)(() => {
     if (!humanSeats.every((s) => ready[s])) return;
     dispatch(liveplayActions.setActiveRound({ game: game.id, mode, settings: roundSettingsRef.current }));
-    import_expo_router4.router.push({ pathname: "/play/[game]", params: { game: game.id } });
+    import_expo_router4.router.push(playHref(game.id));
   }, [ready, humanSeats, game.id, mode, dispatch]);
   const bg = dark ? "#000000" : "#FFFFFF";
   const fg = dark ? "#FFFFFF" : "#000000";
@@ -791,8 +877,8 @@ function LoadoutScreen({ game }) {
   const showMetaInSharedBand = (0, import_split_screen.needsSharedNeutralZone)(panelLayout.orientationMode, humanSeats.length);
   const p2ZoneStyle = p2IsHuman ? isPortrait ? styles3.p2ZoneTop : panelLayout.p1OnRight ? styles3.p2ZoneLeft : styles3.p2ZoneRight : null;
   const showReadyButton = p2IsHuman;
-  const controlsHost = (0, import_hud5.usePopoverHost)();
-  const p2PanelHost = (0, import_hud5.usePopoverHost)();
+  const controlsHost = (0, import_chrome4.usePopoverHost)();
+  const p2PanelHost = (0, import_chrome4.usePopoverHost)();
   const p2Host = p2IsHuman ? p2PanelHost : controlsHost;
   const anyPlayerPickerOpen = !!(controlsHost.openId?.startsWith("p1-") || controlsHost.openId?.startsWith("p2-"));
   const optionsRow = loadout.options({
@@ -807,17 +893,17 @@ function LoadoutScreen({ game }) {
     onReset: showMetaInSharedBand ? void 0 : loadout.reset
   });
   const optionsPopoverOpen = controlsHost.openId !== null && loadout.optionIds.includes(controlsHost.openId);
-  const sharedControls = showMetaInSharedBand ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_hud5.SharedActionBand, { onBack: import_core8.safeBack, onSettings: () => setSettingsOpen(true), onRandomize: loadout.randomize, onReset: loadout.reset, fg, popoverOpen: optionsPopoverOpen, children: optionsRow }) : optionsRow;
+  const sharedControls = showMetaInSharedBand ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lobby2.SharedActionBand, { onBack: import_core8.safeBack, onSettings: () => setSettingsOpen(true), onRandomize: loadout.randomize, onReset: loadout.reset, fg, popoverOpen: optionsPopoverOpen, children: optionsRow }) : optionsRow;
   const controlLook = { accentColor: themeColors.tertiary, mutedColor: fgMuted, dark, rotation };
   const p1Control = loadout.seatControl(1, controlsHost, { ...controlLook, seatColor: p1Color });
-  const p1Panel = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_hud5.PlayerSetupPanel, { idPrefix: "p1", host: controlsHost, color: p1Color, onColorChange: handleP1ColorChange, swatches: import_auto_paper4.defaultColors, takenColor: p2Exists ? p2Color : void 0, allowSwapTaken: mode === "vsCpu", colorCaption: pack.colorCaption, isHuman: true, ready: ready[1], onToggleReady: () => setReady((r) => ({ ...r, 1: !r[1] })), dark, showReadyButton, secondPicker: p1Control, secondPickerId: p1Control ? "p1-control" : void 0, profiles, selectedProfileId: lastSelected[1], takenProfileId: p2IsHuman ? lastSelected[2] : null, guestLabel: "P1", onProfileSelect: handleP1ProfileSelect, onManageProfiles: () => import_expo_router4.router.push("/profiles") });
+  const p1Panel = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lobby2.PlayerSetupPanel, { idPrefix: "p1", host: controlsHost, color: p1Color, onColorChange: handleP1ColorChange, swatches: import_auto_paper4.defaultColors, takenColor: p2Exists ? p2Color : void 0, allowSwapTaken: mode === "vsCpu", colorCaption: pack.colorCaption, isHuman: true, ready: ready[1], onToggleReady: () => setReady((r) => ({ ...r, 1: !r[1] })), dark, showReadyButton, secondPicker: p1Control, secondPickerId: p1Control ? "p1-control" : void 0, profiles, selectedProfileId: lastSelected[1], takenProfileId: p2IsHuman ? lastSelected[2] : null, guestLabel: "P1", onProfileSelect: handleP1ProfileSelect, onManageProfiles: () => import_expo_router4.router.push(PROFILES_HREF) });
   const p2Control = p2IsHuman ? loadout.seatControl(2, p2Host, { ...controlLook, seatColor: p2Color }) : void 0;
   const p2Panel = game.seatTwo && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SeatTwoPanel, { idPrefix: "p2", host: p2Host, choices: game.seatTwo, seatTwo, onSeatTwoChange: changeSeatTwo, cpuDifficulty: loadout.cpuDifficulty, profiles, selectedProfileId: lastSelected[2], onProfileSelect: handleP2ProfileSelect, color: p2Color, onColorChange: handleP2ColorChange, swatches: import_auto_paper4.defaultColors, takenColor: p1Color, allowSwapTaken: mode === "vsCpu", colorCaption: pack.colorCaption, dark, secondPicker: p2Control, secondPickerId: p2Control ? "p2-control" : void 0, ready: ready[2], onToggleReady: () => setReady((r) => ({ ...r, 2: !r[2] })), showReadyButton });
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native4.View, { style: [styles3.container, { backgroundColor: bg }], children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core10.FakeLandscapeView, { orientationMode: panelLayout.orientationMode, p1OnRight: panelLayout.p1OnRight, upsideDown: panelLayout.upsideDown, style: styles3.rotatable, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_hud5.PressAwayOverlay, { active: controlsHost.openId !== null, onPress: controlsHost.close }),
-      p2ZoneStyle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_hud5.PressAwayOverlay, { active: controlsHost.openId !== null || p2Host.openId !== null, onPress: p2Host.close, style: p2ZoneStyle }),
-      !showMetaInSharedBand && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_hud5.CornerActionButtons, { onBack: import_core8.safeBack, onSettings: () => setSettingsOpen(true), fg, insets }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_chrome4.PressAwayOverlay, { active: controlsHost.openId !== null, onPress: controlsHost.close }),
+      p2ZoneStyle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_chrome4.PressAwayOverlay, { active: controlsHost.openId !== null || p2Host.openId !== null, onPress: p2Host.close, style: p2ZoneStyle }),
+      !showMetaInSharedBand && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_chrome4.CornerActionButtons, { onBack: import_core8.safeBack, onSettings: () => setSettingsOpen(true), fg, insets }),
       p2IsHuman ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_split_screen.DualZoneLayout,
         {
@@ -832,11 +918,11 @@ function LoadoutScreen({ game }) {
         }
       ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native4.View, { style: styles3.stackedZone, children: [
         sharedControls,
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native_reanimated2.default.View, { style: [styles3.playersRow, anyPlayerPickerOpen && styles3.playersRowOpen, panelFadeStyle], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native_reanimated2.default.View, { style: [styles3.playersRow, anyPlayerPickerOpen && styles3.playersRowOpen, playersRowFade], children: [
           !isPortrait && panelLayout.p1OnRight ? p2Panel : p1Panel,
           !isPortrait && panelLayout.p1OnRight ? p1Panel : p2Panel
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_hud5.ReadyButton, { color: p1Color, ready: ready[1], onToggleReady: () => setReady((r) => ({ ...r, 1: !r[1] })), style: anyPlayerPickerOpen && styles3.readyButtonHidden })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lobby2.ReadyButton, { color: p1Color, ready: ready[1], onToggleReady: () => setReady((r) => ({ ...r, 1: !r[1] })), style: anyPlayerPickerOpen && styles3.readyButtonHidden })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SettingsDialog, { visible: settingsOpen, onDismiss: () => setSettingsOpen(false), rotation, onShowHowToPlay: () => openFor(game.id) })
@@ -902,7 +988,7 @@ function LoadoutRoute() {
   const { game: id } = (0, import_expo_router5.useLocalSearchParams)();
   const game = usePackGame(id);
   if (!game) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_expo_router5.Redirect, { href: "/" });
-  if (!hasLoadout(game)) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_expo_router5.Redirect, { href: { pathname: "/play/[game]", params: { game: game.id } } });
+  if (!hasLoadout(game)) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_expo_router5.Redirect, { href: playHref(game.id) });
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LoadoutScreen, { game }, game.id);
 }
 function hasLoadout(game) {
@@ -921,7 +1007,9 @@ function useResumePoint(gameId) {
   (0, import_react14.useEffect)(() => {
     if (!gameId) return;
     setLastActiveGame(gameId);
-    return clearLastActiveGame;
+    return () => {
+      if (import_react_native5.AppState.currentState === "active") clearLastActiveGame();
+    };
   }, [gameId, setLastActiveGame, clearLastActiveGame]);
 }
 
@@ -929,11 +1017,11 @@ function useResumePoint(gameId) {
 var import_auto_paper5 = require("@rific/auto-paper");
 var import_feedback_press3 = require("@rific/feedback-press");
 var import_core12 = require("@tastic/core");
-var import_hud6 = require("@tastic/hud");
-var import_profile6 = require("@tastic/profile");
+var import_chrome5 = require("@tastic/hud/chrome");
+var import_profile7 = require("@tastic/profile");
 var import_expo_router6 = require("expo-router");
 var import_react16 = require("react");
-var import_react_native5 = require("react-native");
+var import_react_native6 = require("react-native");
 var import_react_native_paper = require("react-native-paper");
 
 // src/hooks/useFrozenWhileHidden.ts
@@ -1018,11 +1106,15 @@ var import_jsx_runtime14 = require("react/jsx-runtime");
 function HomeScreen() {
   const pack = usePack();
   const { consumeResumeGame } = useLastActiveGame();
+  const { autoShowPack } = useGameGuide();
   const [resumeGame] = (0, import_react16.useState)(() => {
     const id = consumeResumeGame();
     return pack.games.find((g) => g.id === id && g.resumable) ?? null;
   });
-  if (resumeGame) return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_expo_router6.Redirect, { href: { pathname: "/play/[game]", params: { game: resumeGame.id } } });
+  (0, import_react16.useEffect)(() => {
+    if (!resumeGame) autoShowPack();
+  }, [resumeGame, autoShowPack]);
+  if (resumeGame) return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_expo_router6.Redirect, { href: playHref(resumeGame.id) });
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HomeMenu, {});
 }
 function HomeMenu() {
@@ -1030,20 +1122,21 @@ function HomeMenu() {
   const rotation = (0, import_core12.useRotation)();
   const layout = useHomeLayout();
   const { insets } = layout;
-  const { dark } = (0, import_auto_paper5.useAutoPaperTheme)();
-  const { openFirstTime, openFor } = useGameGuide();
+  const { dark, colors } = (0, import_auto_paper5.useAutoPaperTheme)();
+  const { openFirstTime, openFor, openPack } = useGameGuide();
   const [settingsOpen, setSettingsOpen] = (0, import_react16.useState)(false);
+  const [rulesGame, setRulesGame] = (0, import_react16.useState)(null);
   const isFocused = (0, import_expo_router6.useIsFocused)();
-  const [appState, setAppState] = (0, import_react16.useState)(import_react_native5.AppState.currentState);
+  const [appState, setAppState] = (0, import_react16.useState)(import_react_native6.AppState.currentState);
   (0, import_react16.useEffect)(() => {
-    const subscription = import_react_native5.AppState.addEventListener("change", setAppState);
+    const subscription = import_react_native6.AppState.addEventListener("change", setAppState);
     return () => subscription.remove();
   }, []);
   const heroActive = isFocused && appState === "active";
   const { profiles, lastSelected, selectProfile } = useProfiles();
   const { seatTwo } = useOpponent();
   const { p1Color, p2Color, handleP1ColorChange } = useSeatColors(seatTwo === "person");
-  const pickerHost = (0, import_hud6.usePopoverHost)();
+  const pickerHost = (0, import_chrome5.usePopoverHost)();
   const selectedProfile = profiles.find((p) => p.id === lastSelected[1]) ?? null;
   const tiled = pack.games.some((game) => game.Preview);
   const isWide = useFrozenWhileHidden(tiled && layout.isWide, !isFocused);
@@ -1056,71 +1149,91 @@ function HomeMenu() {
   const closePicker = pickerHost.close;
   (0, import_react16.useEffect)(() => {
     closePicker();
-  }, [isWide, closePicker]);
-  const bg = dark ? "#000000" : "#FFFFFF";
-  const fg = dark ? "#FFFFFF" : "#000000";
-  const openGame = (0, import_react16.useCallback)((game) => openFirstTime(game.id, () => import_expo_router6.router.push(game.useLoadout ? { pathname: "/loadout/[game]", params: { game: game.id } } : { pathname: "/play/[game]", params: { game: game.id } })), [openFirstTime]);
-  const picker = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_profile6.ProfilePicker, { idPrefix: "home-p1", host: pickerHost, profiles, selectedId: lastSelected[1], color: p1Color, dark, guestLabel: "P1", onSelect: (profile) => selectProfile(1, profile?.id ?? null), onManage: () => import_expo_router6.router.push("/profiles"), colorSection: { value: p1Color, onChange: handleP1ColorChange, swatches: import_auto_paper5.defaultColors, caption: selectedProfile ? pack.colorCaption : void 0 } });
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native5.View, { style: [styles4.container, { backgroundColor: bg }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core12.FakeLandscapeView, { style: styles4.rotatable, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_hud6.PressAwayOverlay, { active: pickerHost.openId !== null, onPress: pickerHost.close }),
+  }, [isWide, rotation, layout.windowWidth, layout.windowHeight, closePicker]);
+  const bg = pack.Backdrop ? "transparent" : dark ? "#000000" : "#FFFFFF";
+  const fg = pack.foreground ?? (dark ? "#FFFFFF" : "#000000");
+  const { previewColor } = pack;
+  const p1Drawn = previewColor ? previewColor(p1Color, dark) : p1Color;
+  const triggerStyle = (0, import_react16.useMemo)(() => pack.Backdrop ? [styles4.pill, { backgroundColor: colors.surface }] : void 0, [pack.Backdrop, colors.surface]);
+  const openGame = (0, import_react16.useCallback)((game) => openFirstTime(game.id, () => import_expo_router6.router.push(game.useLoadout ? loadoutHref(game.id) : playHref(game.id))), [openFirstTime]);
+  const openRules = (0, import_react16.useCallback)((game) => game.Rules ? setRulesGame(game) : openFor(game.id), [openFor]);
+  const colorSection = { value: p1Color, onChange: handleP1ColorChange, swatches: import_auto_paper5.defaultColors, caption: selectedProfile ? pack.colorCaption : void 0, previewValue: previewColor ? (hex) => previewColor(hex, dark) : void 0 };
+  const usePickerAlign = pack.usePickerAlign ?? noPickerAlign;
+  const pickerSize = (0, import_profile7.getProfilePickerContentSize)(profiles.length, true, colorSection);
+  const pickerAlign = usePickerAlign(pickerHost.openId === `${SEAT_ONE_PICKER}-profile`, pickerSize.width, pickerSize.height);
+  const picker = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_profile7.ProfilePicker, { idPrefix: SEAT_ONE_PICKER, host: pickerHost, profiles, selectedId: lastSelected[1], color: p1Drawn, dark, guestLabel: pack.guestLabel ?? "P1", nullLabel: pack.nullLabel, onSelect: (profile) => selectProfile(1, profile?.id ?? null), onManage: () => import_expo_router6.router.push(PROFILES_HREF), colorSection, alignOverride: pickerAlign, triggerStyle });
+  const pressAway = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_chrome5.PressAwayOverlay, { active: pickerHost.openId !== null, onPress: pickerHost.close, style: styles4.pressAway });
+  const RulesSheet = rulesGame?.Rules;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native6.View, { style: [styles4.container, { backgroundColor: bg }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core12.FakeLandscapeView, { style: styles4.rotatable, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(RulesHost, { enabled: pack.games.some((game) => game.Rules), children: [
       isWide ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native5.ScrollView, { style: [styles4.wideRightPane, { left: layout.paddingLeft + layout.leftPaneWidth + HOME_WIDE_PANE_GAP }], contentContainerStyle: { paddingTop: 16 + insets.top, paddingBottom: 16 + insets.bottom, paddingRight: layout.paddingRight }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native5.View, { style: [styles4.grid, { width: layout.rightPaneWidth }], children: pack.games.map((game) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameTile, { game, width: layout.tileWidth, previewWidth: layout.previewWidth, previewRevealed: previewsRevealed, dark, p1Color, p2Color, onPress: () => openGame(game), onRules: () => openFor(game.id) }, game.id)) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native5.View, { style: [styles4.wideLeftPane, { left: layout.paddingLeft, width: layout.leftPaneWidth, paddingTop: HOME_TOP_BAND + insets.top, paddingBottom: 16 + insets.bottom }, pickerHost.openId !== null && styles4.pickerOpen], children: [
+        pressAway,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_auto_paper5.FadingScrollView, { style: [styles4.wideRightPane, { left: layout.paddingLeft + layout.leftPaneWidth + HOME_WIDE_PANE_GAP }], contentContainerStyle: { paddingTop: 16 + insets.top, paddingBottom: 16 + insets.bottom, paddingRight: layout.paddingRight }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native6.View, { style: [styles4.grid, { width: layout.rightPaneWidth }], children: pack.games.map((game) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameTile, { game, width: layout.tileWidth, previewWidth: layout.previewWidth, previewRevealed: previewsRevealed, dark, p1Color, p2Color, onPress: () => openGame(game), onRules: hasRules(game) ? () => openRules(game) : void 0 }, game.id)) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native6.View, { style: [styles4.wideLeftPane, { left: layout.paddingLeft, width: layout.leftPaneWidth, paddingTop: HOME_TOP_BAND + insets.top, paddingBottom: 16 + insets.bottom }, pickerHost.openId !== null && styles4.pickerOpen], children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(pack.HeroTitle, { words: pack.wordmark, color: fg, p1Color, p2Color, active: heroActive, fit: layout.heroFit }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native5.View, { style: styles4.widePicker, children: picker })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native6.View, { style: styles4.widePicker, children: picker })
         ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native5.ScrollView, { style: styles4.scroll, contentContainerStyle: [styles4.content, { paddingTop: 56 + insets.top, paddingBottom: 24 + insets.bottom, paddingLeft: 16 + insets.left, paddingRight: 16 + insets.right }], children: [
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_auto_paper5.FadingScrollView, { style: styles4.scroll, contentContainerStyle: [styles4.content, { paddingTop: 56 + insets.top, paddingBottom: 24 + insets.bottom, paddingLeft: 16 + insets.left, paddingRight: 16 + insets.right }], children: [
+        pressAway,
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(pack.HeroTitle, { words: pack.wordmark, color: fg, p1Color, p2Color, active: heroActive }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native5.View, { style: [styles4.picker, pickerHost.openId !== null && styles4.pickerOpen], children: picker }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native5.View, { style: styles4.list, children: pack.games.map((game) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameRow, { game, dark, p1Color, p2Color, previewRevealed: previewsRevealed, onPress: () => openGame(game), onRules: () => openFor(game.id) }, game.id)) })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native6.View, { style: [styles4.picker, pickerHost.openId !== null && styles4.pickerOpen], children: picker }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native6.View, { style: styles4.list, children: pack.games.map((game) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameRow, { game, dark, p1Color, p2Color, previewRevealed: previewsRevealed, onPress: () => openGame(game), onRules: hasRules(game) ? () => openRules(game) : void 0 }, game.id)) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_feedback_press3.IconButton, { icon: "trophy", iconColor: fg, size: 24, style: [styles4.corner, { top: 8 + insets.top, left: 8 + insets.left }], onPress: () => import_expo_router6.router.push("/stats"), accessibilityLabel: "Stats & Achievements" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_feedback_press3.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles4.corner, { top: 8 + insets.top, right: 8 + insets.right }], onPress: () => setSettingsOpen(true), accessibilityLabel: "Settings" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SettingsDialog, { visible: settingsOpen, onDismiss: () => setSettingsOpen(false), rotation })
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_feedback_press3.IconButton, { icon: "trophy", iconColor: fg, size: 24, style: [styles4.corner, { top: 8 + insets.top, left: 8 + insets.left }], onPress: () => import_expo_router6.router.push(STATS_HREF), accessibilityLabel: "Stats & Achievements" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_feedback_press3.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles4.corner, { top: 8 + insets.top, right: 8 + insets.right }], onPress: () => setSettingsOpen(true), accessibilityLabel: "Settings" }),
+      RulesSheet && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RulesSheet, { visible: true, onDismiss: () => setRulesGame(null) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SettingsDialog, { visible: settingsOpen, onDismiss: () => setSettingsOpen(false), rotation, onShowHowToPlay: pack.guide ? openPack : void 0 })
   ] });
 }
+var SEAT_ONE_PICKER = "home-p1";
+var noPickerAlign = () => void 0;
+function hasRules(game) {
+  return !!(game.Rules || game.guide);
+}
+function RulesHost({ enabled, children }) {
+  return enabled ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper.Portal.Host, { children }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
+}
 function GameRow({ game, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
-  const well = (0, import_hud6.useWellColors)();
+  const well = (0, import_chrome5.useWellColors)();
   const GameIcon = game.icon;
   return (
     // The rules button sits beside the row's own button, laid over its end, not inside it: a button
     // inside a button is invalid on the web.
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native5.View, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native6.View, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_feedback_press3.Pressable, { onPress, style: [styles4.row, { backgroundColor: well.bg }], accessibilityRole: "button", accessibilityLabel: game.title, children: [
-        game.Preview ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PreviewBox, { game, width: ROW_PREVIEW_WIDTH, revealed: previewRevealed, dark, p1Color, p2Color }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native5.View, { style: [styles4.rowIcon, { backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameIcon, { size: ROW_ICON_SIZE, p1Color, p2Color, dark }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native5.View, { style: styles4.rowText, children: [
+        game.Preview ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PreviewBox, { game, width: ROW_PREVIEW_WIDTH, revealed: previewRevealed, dark, p1Color, p2Color }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native6.View, { style: [styles4.rowIcon, { backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }], children: GameIcon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameIcon, { size: ROW_ICON_SIZE, p1Color, p2Color, dark }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native6.View, { style: styles4.rowText, children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper.Text, { variant: "titleLarge", style: [styles4.rowTitle, { color: well.fg }], numberOfLines: 1, children: game.title }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper.Text, { variant: "bodyMedium", style: { color: well.fgMuted }, numberOfLines: 2, children: game.blurb })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_feedback_press3.Pressable, { onPress: onRules, style: styles4.rulesButton, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: `${game.title} rules`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper.Icon, { source: "information-outline", size: 22, color: well.fgMuted }) })
+      onRules && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_feedback_press3.Pressable, { onPress: onRules, style: styles4.rulesButton, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: `${game.title} rules`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper.Icon, { source: "information-outline", size: 22, color: well.fgMuted }) })
     ] })
   );
 }
 function GameTile({ game, width, previewWidth, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
-  const well = (0, import_hud6.useWellColors)();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native5.View, { style: { width }, children: [
+  const well = (0, import_chrome5.useWellColors)();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native6.View, { style: { width }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_feedback_press3.Pressable, { onPress, style: [styles4.tile, { backgroundColor: well.bg }], accessibilityRole: "button", accessibilityLabel: game.title, children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PreviewBox, { game, width: previewWidth, revealed: previewRevealed, dark, p1Color, p2Color }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper.Text, { variant: "titleMedium", style: [styles4.rowTitle, { color: well.fg }], numberOfLines: 1, children: game.title }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper.Text, { variant: "bodySmall", style: { color: well.fgMuted }, numberOfLines: 3, children: game.blurb })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_feedback_press3.Pressable, { onPress: onRules, style: styles4.tileRulesButton, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: `${game.title} rules`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper.Icon, { source: "information-outline", size: 20, color: "#FFFFFF" }) })
+    onRules && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_feedback_press3.Pressable, { onPress: onRules, style: styles4.tileRulesButton, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: `${game.title} rules`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper.Icon, { source: "information-outline", size: 20, color: "#FFFFFF" }) })
   ] });
 }
 function PreviewBox({ game, width, revealed, dark, p1Color, p2Color }) {
   const height = Math.round(width / PREVIEW_ASPECT);
   const { Preview, icon: GameIcon } = game;
   const iconSize = Math.min(height, ROW_ICON_SIZE);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native5.View, { style: [styles4.preview, { width, height, backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }], children: Preview ? revealed && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Preview, { width, height, p1Color, p2Color, dark }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native5.View, { style: [styles4.previewIcon, { width: iconSize, height: iconSize, borderRadius: iconSize * 0.22 }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameIcon, { size: iconSize, p1Color, p2Color, dark }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native6.View, { style: [styles4.preview, { width, height, backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }], children: Preview ? revealed && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Preview, { width, height, p1Color, p2Color, dark }) : GameIcon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native6.View, { style: [styles4.previewIcon, { width: iconSize, height: iconSize, borderRadius: iconSize * 0.22 }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameIcon, { size: iconSize, p1Color, p2Color, dark }) }) });
 }
 var ROW_ICON_SIZE = 56;
 var ICON_LIGHT_BG = "#FAFAFA";
 var ICON_DARK_BG = "#050505";
 var RULES_BUTTON_SPACE = 44;
-var styles4 = import_react_native5.StyleSheet.create({
+var styles4 = import_react_native6.StyleSheet.create({
   container: {
     flex: 1
   },
@@ -1149,6 +1262,15 @@ var styles4 = import_react_native5.StyleSheet.create({
   pickerOpen: {
     zIndex: 100
   },
+  // Seat 1's button on the theme's surface (over a backdrop), the same pill as the tiles' wells.
+  pill: {
+    borderRadius: 999
+  },
+  // Over the rows (and, wide, the grid), whose own stacking is unset, so a press on them reaches it on
+  // the web too, and under the raised button and left pane, so the menu's rows stay pressable.
+  pressAway: {
+    zIndex: 5
+  },
   // The preview's own rounding, clipping whatever it draws to the box.
   preview: {
     alignItems: "center",
@@ -1167,7 +1289,7 @@ var styles4 = import_react_native5.StyleSheet.create({
   row: {
     alignItems: "center",
     borderRadius: 12,
-    boxShadow: import_hud6.WELL_SHADOW,
+    boxShadow: import_chrome5.WELL_SHADOW,
     flexDirection: "row",
     gap: 14,
     padding: 14,
@@ -1199,7 +1321,7 @@ var styles4 = import_react_native5.StyleSheet.create({
   // The same well as a row, turned on its side.
   tile: {
     borderRadius: 12,
-    boxShadow: import_hud6.WELL_SHADOW,
+    boxShadow: import_chrome5.WELL_SHADOW,
     gap: 6,
     padding: HOME_TILE_PADDING
   },
@@ -1239,69 +1361,112 @@ var styles4 = import_react_native5.StyleSheet.create({
 
 // src/screens/ProfilesRoute.tsx
 var import_auto_paper6 = require("@rific/auto-paper");
-var import_profile7 = require("@tastic/profile");
+var import_chrome6 = require("@tastic/hud/chrome");
+var import_profile8 = require("@tastic/profile");
 var import_jsx_runtime15 = require("react/jsx-runtime");
+var ROSTER_MAX_WIDTH = 640;
+function useRosterAlign(open, contentWidth, contentHeight) {
+  const { usePickerAlign } = usePack();
+  return usePickerAlign(open, contentWidth, contentHeight, { maxContentWidth: ROSTER_MAX_WIDTH });
+}
 function ProfilesRoute() {
   const { profiles, createProfile, updateProfile, deleteProfile } = useProfiles();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_profile7.ProfilesScreen, { profiles, defaultColor: import_auto_paper6.defaultColors[0].value, onCreate: (patch) => createProfile(patch), onSave: (id, patch) => updateProfile(id, patch), onDelete: deleteProfile, onBack: import_core8.safeBack });
+  const { Backdrop, foreground, newProfileColor, usePickerAlign } = usePack();
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_chrome6.RotatedFrame, { rotatedSafeArea: true, portalHost: true, maxContentWidth: ROSTER_MAX_WIDTH, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_profile8.ProfilesScreen, { profiles, defaultColor: newProfileColor ?? import_auto_paper6.defaultColors[0].value, onCreate: (patch) => createProfile(patch), onSave: (id, patch) => updateProfile(id, patch), onDelete: deleteProfile, onBack: import_core8.safeBack, fg: foreground, bg: Backdrop ? "transparent" : void 0, useColorPickerAlign: usePickerAlign ? useRosterAlign : void 0 }) });
 }
 
 // src/screens/StatsScreen.tsx
 var import_auto_paper7 = require("@rific/auto-paper");
-var import_core13 = require("@tastic/core");
-var import_hud7 = require("@tastic/hud");
-var import_profile8 = require("@tastic/profile");
+var import_chrome7 = require("@tastic/hud/chrome");
+var import_profile9 = require("@tastic/profile");
 var import_react17 = require("react");
-var import_react_native6 = require("react-native");
+var import_react_native7 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
 var import_react_native_safe_area_context4 = require("react-native-safe-area-context");
 var import_react_redux10 = require("react-redux");
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var STATS = "stats";
+var ACHIEVEMENTS = "achievements";
 var TABS = [
-  { value: "stats", label: "Stats", icon: "chart-box-outline" },
-  { value: "achievements", label: "Achievements", icon: "trophy-outline" }
+  { value: STATS, label: "Stats", icon: "chart-box-outline" },
+  { value: ACHIEVEMENTS, label: "Achievements", icon: "trophy-outline" }
 ];
+var LABEL_WIDE_TAB = { flexBasis: "auto", flexGrow: 1, flexShrink: 1 };
+var NO_PACK_TABS = [];
 var EVERYONE = "__everyone__";
 var ALL_GAMES = "__all__";
 var PLAYER_PICKER_ID = "stats-player";
 var GAME_PICKER_ID = "stats-game";
+var STATS_MAX_WIDTH = 640;
 function StatsScreen() {
+  const pickerHost = (0, import_chrome7.usePopoverHost)();
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StatsPressAway, { host: pickerHost, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_chrome7.RotatedFrame, { rotatedSafeArea: true, portalHost: true, maxContentWidth: STATS_MAX_WIDTH, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StatsContent, { pickerHost }) }) });
+}
+function StatsPressAway({ host, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native7.View, { testID: "stats-press-away", style: styles5.screen, onStartShouldSetResponder: () => host.openId !== null, onResponderRelease: host.close, children });
+}
+var useNoPackReset = () => null;
+var noPickerAlign2 = () => void 0;
+function StatsContent({ pickerHost }) {
   const pack = usePack();
   const { dark, colors } = (0, import_auto_paper7.useAutoPaperTheme)();
-  const rotation = (0, import_core13.useRotation)();
-  const insets = (0, import_core13.rotateInsets)((0, import_react_native_safe_area_context4.useSafeAreaInsets)(), rotation);
-  const { profiles } = useProfiles();
+  const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
+  const { profiles, lastSelected } = useProfiles();
   const dispatch = (0, import_react_redux10.useDispatch)();
-  const pickerHost = (0, import_hud7.usePopoverHost)();
-  const [tab, setTab] = (0, import_react17.useState)("stats");
+  const fg = pack.foreground ?? colors.onBackground;
+  const [tab, setTab] = (0, import_react17.useState)(STATS);
   const [gameId, setGameId] = (0, import_react17.useState)(ALL_GAMES);
-  const [selectedProfileId, setSelectedProfileId] = (0, import_react17.useState)(null);
-  const profileId = selectedProfileId && profiles.some((p) => p.id === selectedProfileId) ? selectedProfileId : null;
+  const [selectedProfileId, setSelectedProfileId] = (0, import_react17.useState)(() => pack.guestStats ? lastSelected[1] ?? GUEST_PLAYER_ID : null);
+  const profileId = selectedProfileId && profiles.length > 0 && (pack.guestStats && selectedProfileId === GUEST_PLAYER_ID || profiles.some((p) => p.id === selectedProfileId)) ? selectedProfileId : null;
   const games = gameId === ALL_GAMES ? pack.games : pack.games.filter((g) => g.id === gameId);
-  const playerOptions = (0, import_react17.useMemo)(() => [{ value: EVERYONE, label: "Everyone", icon: "account-group" }, ...profiles.map((p) => ({ value: p.id, label: p.name, icon: "account", color: p.color }))], [profiles]);
+  const packTabs = pack.statsTabs ?? NO_PACK_TABS;
+  const packTab = packTabs.find((t) => t.value === tab);
+  const showGamePicker = !(tab === ACHIEVEMENTS && pack.AchievementList);
+  const playerOptions = (0, import_react17.useMemo)(() => [{ value: EVERYONE, label: "Everyone", icon: "account-group" }, ...pack.guestStats ? [{ value: GUEST_PLAYER_ID, label: "Guest", icon: "account-outline" }] : [], ...profiles.map((p) => ({ value: p.id, label: p.name, icon: "account", color: pack.previewColor ? pack.previewColor(p.color, dark) : p.color }))], [profiles, pack, dark]);
   const gameOptions = (0, import_react17.useMemo)(() => [{ value: ALL_GAMES, label: "All Games", icon: "view-grid-outline" }, ...pack.games.map((g) => ({ value: g.id, label: g.title }))], [pack.games]);
-  const resetScope = games.length === 1 ? games[0].title : "every game";
-  const onReset = () => games.forEach((g) => dispatch(g.resetStats()));
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core13.FakeLandscapeView, { style: styles5.rotatable, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_hud7.BaseStatsScreen, { title: tab === "stats" ? "Stats" : "Achievements", onBack: import_core8.safeBack, insets, onReset, resetLabel: games.length === 1 ? `Reset ${resetScope} Stats` : "Reset All Stats", resetConfirmTitle: "Reset Stats?", resetConfirmBody: `Erases every player's stats and achievements in ${resetScope}. This cannot be undone.`, rotation, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_hud7.PressAwayOverlay, { active: pickerHost.openId !== null, onPress: pickerHost.close, style: styles5.pressAway }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper2.SegmentedButtons, { value: tab, onValueChange: (value) => setTab(value), buttons: TABS, style: styles5.tabs }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native6.View, { style: [styles5.filters, pickerHost.openId !== null && styles5.filtersOpen], children: [
-      profiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_profile8.OptionPicker, { id: PLAYER_PICKER_ID, host: pickerHost, options: playerOptions, value: profileId ?? EVERYONE, onChange: (value) => setSelectedProfileId(value === EVERYONE ? null : value), color: colors.primary, dark, icon: profileId ? "account" : "account-group" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_profile8.OptionPicker, { id: GAME_PICKER_ID, host: pickerHost, options: gameOptions, value: gameId, onChange: setGameId, color: colors.primary, dark, icon: "view-grid-outline" })
+  const tabButtons = (0, import_react17.useMemo)(() => packTabs.length > 0 ? [{ value: STATS, label: "Stats" }, ...packTabs.map(({ value, label }) => ({ value, label })), { value: ACHIEVEMENTS, label: "Achievements" }].map((button) => ({ ...button, style: LABEL_WIDE_TAB })) : TABS, [packTabs]);
+  const title = tab === STATS ? "Stats" : tab === ACHIEVEMENTS ? "Achievements" : packTab?.label ?? "";
+  const usePackReset = pack.resetStats?.useReset ?? useNoPackReset;
+  const packReset = usePackReset();
+  const reset = resetFor(pack, packReset, profileId, profiles, games, () => games.forEach((g) => g.resetStats && dispatch(g.resetStats())));
+  const usePickerAlign = pack.usePickerAlign ?? noPickerAlign2;
+  const playerSize = (0, import_profile9.getOptionPickerContentSize)(playerOptions.length);
+  const gameSize = (0, import_profile9.getOptionPickerContentSize)(gameOptions.length);
+  const playerAlign = usePickerAlign(pickerHost.openId === PLAYER_PICKER_ID, playerSize.width, playerSize.height);
+  const gameAlign = usePickerAlign(pickerHost.openId === GAME_PICKER_ID, gameSize.width, gameSize.height);
+  const surface = pack.Backdrop ? { backgroundColor: colors.surface } : void 0;
+  const triggerStyle = pack.Backdrop ? [styles5.pill, surface] : void 0;
+  const PackTabContent = packTab?.Content;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_chrome7.BaseStatsScreen, { title, onBack: import_core8.safeBack, insets, onReset: reset.onReset, resetLabel: reset.label, resetConfirmTitle: reset.title, resetConfirmBody: reset.body, fg: pack.foreground, bg: pack.Backdrop ? "transparent" : void 0, rotation: 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_chrome7.PressAwayOverlay, { active: pickerHost.openId !== null, onPress: pickerHost.close, style: styles5.pressAway }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper2.SegmentedButtons, { value: tab, onValueChange: setTab, buttons: tabButtons, style: [styles5.tabs, surface] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native7.View, { style: [styles5.filters, pickerHost.openId !== null && styles5.filtersOpen], onStartShouldSetResponder: () => pickerHost.openId !== null, children: [
+      profiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_profile9.OptionPicker, { id: PLAYER_PICKER_ID, host: pickerHost, options: playerOptions, value: profileId ?? EVERYONE, onChange: (value) => setSelectedProfileId(value === EVERYONE ? null : value), color: colors.primary, dark, icon: profileId ? "account" : "account-group", alignOverride: playerAlign, triggerStyle }),
+      showGamePicker && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_profile9.OptionPicker, { id: GAME_PICKER_ID, host: pickerHost, options: gameOptions, value: gameId, onChange: setGameId, color: colors.primary, dark, icon: "view-grid-outline", alignOverride: gameAlign, triggerStyle })
     ] }),
-    tab === "stats" && pack.StatsSections && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(pack.StatsSections, { profileId, gameId: gameId === ALL_GAMES ? null : gameId }),
-    games.map((game) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GameStats, { game, tab, profileId, showTitle: games.length > 1 }, game.id))
-  ] }) });
+    tab === STATS && pack.StatsSections && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(pack.StatsSections, { profileId, gameId: gameId === ALL_GAMES ? null : gameId }),
+    PackTabContent && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PackTabContent, { profileId, gameId: gameId === ALL_GAMES ? null : gameId }),
+    tab === ACHIEVEMENTS && pack.AchievementList ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(pack.AchievementList, { profileId }) : (tab === STATS || tab === ACHIEVEMENTS) && games.map((game) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GameStats, { game, tab, profileId, showTitle: games.length > 1 && pack.statsGameTitles !== false, titleColor: fg }, game.id))
+  ] });
+}
+function resetFor(pack, packReset, profileId, profiles, games, resetGames) {
+  if (pack.resetStats && packReset) {
+    const name = profileId === GUEST_PLAYER_ID ? "Guest" : profileId ? profiles.find((p) => p.id === profileId)?.name ?? null : null;
+    return { onReset: () => packReset(profileId), ...pack.resetStats.labels(name) };
+  }
+  const scope = games.length === 1 ? games[0].title : "every game";
+  return { onReset: resetGames, label: games.length === 1 ? `Reset ${scope} Stats` : "Reset All Stats", title: "Reset Stats?", body: `Erases every player's stats and achievements in ${scope}. This cannot be undone.` };
 }
-function GameStats({ game, tab, profileId, showTitle }) {
-  const { colors } = (0, import_auto_paper7.useAutoPaperTheme)();
+function GameStats({ game, tab, profileId, showTitle, titleColor }) {
   const { StatsSections, AchievementList } = game;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native6.View, { style: styles5.game, children: [
-    showTitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper2.Text, { variant: "titleLarge", style: [styles5.gameTitle, { color: colors.onBackground }], children: game.title }),
-    tab === "stats" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StatsSections, { profileId }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AchievementList, { profileId })
+  const Sections = tab === STATS ? StatsSections : AchievementList;
+  if (!Sections) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native7.View, { style: styles5.game, children: [
+    showTitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper2.Text, { variant: "titleLarge", style: [styles5.gameTitle, { color: titleColor }], children: game.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Sections, { profileId })
   ] });
 }
-var styles5 = import_react_native6.StyleSheet.create({
+var styles5 = import_react_native7.StyleSheet.create({
   filters: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -1318,25 +1483,28 @@ var styles5 = import_react_native6.StyleSheet.create({
     fontWeight: "bold",
     marginTop: 8
   },
+  // A picker's button on the theme's surface (over a backdrop), the same pill as Home's.
+  pill: {
+    borderRadius: 999
+  },
   pressAway: {
     zIndex: 50
   },
-  // A real full-bleed box for FakeLandscapeView to size its turned content against.
-  rotatable: {
+  screen: {
     flex: 1
   },
-  // SegmentedButtons' own rounding.
+  // SegmentedButtons' own rounding, so a surface behind it is the same pill.
   tabs: {
     borderRadius: 20
   }
 });
 
 // src/components/imageGameIcon.tsx
-var import_react_native7 = require("react-native");
+var import_react_native8 = require("react-native");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function imageGameIcon(images) {
   return function ImageGameIcon({ size, dark }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native7.Image, { source: dark ? images.dark : images.light, style: { height: size, width: size }, accessibilityIgnoresInvertColors: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native8.Image, { source: dark ? images.dark : images.light, style: { height: size, width: size }, accessibilityIgnoresInvertColors: true });
   };
 }
 
@@ -1356,12 +1524,12 @@ var import_redux_persist = require("redux-persist");
 
 // src/redux/shellState.ts
 var import_auto_paper8 = require("@rific/auto-paper");
-var import_core14 = require("@rific/core");
+var import_core13 = require("@rific/core");
 var import_feedback_press4 = require("@rific/feedback-press");
-var import_profile9 = require("@tastic/profile");
+var import_profile10 = require("@tastic/profile");
 var initialSoundSettings = { ...import_feedback_press4.defaultSoundSettings, enabled: !__DEV__ };
 var appSoundReducer = (state = initialSoundSettings, action) => (0, import_feedback_press4.soundReducer)(state, action);
-function createShellReducers({ seatColors, appearance = "system" }) {
+function createShellReducers({ seatColors, appearance = "system", seatTheme }) {
   return {
     // Explicit primary/secondary triad (rather than a single seed expanded via harmony) so the pack's
     // identity is pinned exactly instead of drifting with whatever hue math a harmony offset would
@@ -1370,17 +1538,19 @@ function createShellReducers({ seatColors, appearance = "system" }) {
     // derived, not picked, via getThirdColor: the hue maximally distant from both (see
     // @rific/auto-paper's README "Explicit triad" section). The appearance is the pack's ('system',
     // createThemeReducer's own default, when it sets none).
-    theme: (0, import_auto_paper8.createThemeReducer)({ appearance, color: { primary: seatColors[1], secondary: seatColors[2], tertiary: (0, import_auto_paper8.getThirdColor)(seatColors[1], seatColors[2]) } }),
+    // A pack with its own seatTheme starts from what seat 1's default color makes of it instead (dark
+    // only when the pack's appearance is; hooks/useSeatColors.ts re-applies it with the live mode).
+    theme: (0, import_auto_paper8.createThemeReducer)(seatTheme ? { appearance, ...seatTheme(seatColors, appearance === "dark") } : { appearance, color: { primary: seatColors[1], secondary: seatColors[2], tertiary: (0, import_auto_paper8.getThirdColor)(seatColors[1], seatColors[2]) } }),
     haptic: import_feedback_press4.hapticReducer,
     sound: appSoundReducer,
     // @rific/core's Keep Awake setting (see Providers.tsx's KeepAwakeBridge), under the namespace its
     // REHYDRATE handling expects.
-    keepAwake: import_core14.keepAwakeReducer,
+    keepAwake: import_core13.keepAwakeReducer,
     // The shared App Group roster (see @tastic/profile's resolveInitialProfiles/
     // useSharedProfilesSync, wired in hooks/useProfiles.tsx) is layered on top of this as a separate
     // sync target - this slice persisting normally via redux-persist is what gives it local-fallback
     // behavior where the shared store isn't available, with no separate AsyncStorage path.
-    profiles: import_profile9.profilesReducer,
+    profiles: import_profile10.profilesReducer,
     profileSelection: profileSelectionSlice_default,
     // The loadout's "remember this color for next time" memory (guest, CPU, and each profile's pick
     // in this pack) - separate from `theme` above, which always reflects whatever's live right now.
@@ -1398,7 +1568,7 @@ var errorMiddleware = () => (next) => (action) => {
   if (!hasError(action)) return next(action);
   return action;
 };
-function createPackStore(pack, { keyPrefix, migrate }) {
+function createPackStore(pack, { keyPrefix, migrate, blacklist = [], serializableIgnoredPaths = [], middleware = [] }) {
   const gameReducers = Object.assign({}, ...pack.games.map((game) => game.reducers));
   const resumeReducers = pack.games.some((game) => game.resumable) ? { lastActiveGame: lastActiveGameSlice_default } : {};
   const rootReducer = (0, import_toolkit.combineReducers)({ ...createShellReducers(pack), ...resumeReducers, ...pack.reducers, ...gameReducers });
@@ -1416,7 +1586,7 @@ function createPackStore(pack, { keyPrefix, migrate }) {
       // failing to ever resolve at all isn't a failure mode worth a 5s failsafe for.
       timeout: 0,
       // liveplay is per-round state that must never survive a relaunch (see liveplaySlice.ts).
-      blacklist: ["liveplay"],
+      blacklist: ["liveplay", ...blacklist],
       migrate
     },
     rootReducer
@@ -1426,10 +1596,11 @@ function createPackStore(pack, { keyPrefix, migrate }) {
       const defaultMiddleware = getDefaultMiddleware({
         immutableCheck: false,
         serializableCheck: {
-          ignoredActions: [import_redux_persist.FLUSH, import_redux_persist.REHYDRATE, import_redux_persist.PAUSE, import_redux_persist.PERSIST, import_redux_persist.PURGE, import_redux_persist.REGISTER]
+          ignoredActions: [import_redux_persist.FLUSH, import_redux_persist.REHYDRATE, import_redux_persist.PAUSE, import_redux_persist.PERSIST, import_redux_persist.PURGE, import_redux_persist.REGISTER],
+          ignoredPaths: [...serializableIgnoredPaths]
         }
       });
-      return defaultMiddleware.concat(errorMiddleware);
+      return defaultMiddleware.concat(errorMiddleware, ...middleware);
     },
     reducer: persistedReducer
   });
@@ -1463,11 +1634,11 @@ function createGameGuideSlice(mountKey) {
 
 // src/redux/onProfileRemoved.ts
 var import_achievements = require("@tastic/achievements");
-var import_profile10 = require("@tastic/profile");
+var import_profile11 = require("@tastic/profile");
 function onProfileRemoved(reducer6, forget) {
   return (state, action) => {
     const next = reducer6(state, action);
-    return import_profile10.profilesActions.remove.match(action) ? forget(next, action.payload) : next;
+    return import_profile11.profilesActions.remove.match(action) ? forget(next, action.payload) : next;
   };
 }
 function forgetProfileAchievements(dropStats) {
@@ -1590,6 +1761,7 @@ function createPlayerSettings({ id, defaults, distinctControls }) {
 0 && (module.exports = {
   DEFAULT_APP_SETTINGS,
   DEFAULT_OPPONENT,
+  GUEST_PLAYER_ID,
   HomeScreen,
   LoadoutRoute,
   PREVIEW_ASPECT,