@tastic/shell 0.3.1 → 0.5.0

package/dist/index.js

@@ -64,7 +64,7 @@ __export(index_exports, {
   profileSelectionActions: () => profileSelectionActions,
   profileSelectionReducer: () => profileSelectionSlice_default,
   roundModeFor: () => roundModeFor,
-  safeBack: () => import_core8.safeBack,
+  safeBack: () => import_core7.safeBack,
   seatColorsActions: () => seatColorsActions,
   seatPlayerKey: () => seatPlayerKey,
   seatTwoFor: () => seatTwoFor,
@@ -99,13 +99,12 @@ function usePackGame(id) {
 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_core4 = require("@tastic/core");
 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");
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_react_native2 = require("react-native");
 var import_react_native_gesture_handler = require("react-native-gesture-handler");
 var RNPaper2 = __toESM(require("react-native-paper"));
@@ -163,7 +162,6 @@ function GuideHost({ children }) {
   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) => gameGuide ? gameGuide.selectInput(state) : NO_INPUT, import_react_redux.shallowEqual);
@@ -178,7 +176,7 @@ function GuideHost({ children }) {
     },
     [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 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_guide.GuideProvider, { steps, currentVersion: (packGuide ?? gameGuide)?.version ?? 0, seenVersion, onSeen, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GameGuideBridge, { onPick: setSubject, children }) });
 }
 function GameGuideBridge({ onPick, children }) {
   const pack = usePack();
@@ -301,66 +299,33 @@ function Theme({ children }) {
 
 // src/components/UpdateDialog.tsx
 var import_toaster = require("@rific/toaster");
-var import_core3 = require("@tastic/core");
 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_chrome.UpdateDialog, { onError, rotation });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_chrome.UpdateDialog, { onError });
 }
 
-// src/hooks/useAppSettings.ts
+// src/hooks/useLastActiveGame.tsx
 var import_react6 = require("react");
 var import_react_redux4 = require("react-redux");
 
-// src/redux/appSettingsSlice.ts
-var import_core4 = require("@rific/core");
-var DEFAULT_APP_SETTINGS = {
-  lockOrientation: false,
-  deferBottomEdgeGestures: false
-};
-var { actions, reducer } = (0, import_core4.createSettingsSlice)("appSettings", {
-  initialState: DEFAULT_APP_SETTINGS,
-  initializeMode: "merge",
-  fieldSetters: []
-});
-var appSettingsActions = actions;
-var appSettingsSlice_default = reducer;
-
-// src/hooks/useAppSettings.ts
-function useAppSettings() {
-  const settings = (0, import_react_redux4.useSelector)((state) => state.appSettings);
-  const dispatch = (0, import_react_redux4.useDispatch)();
-  const setSettings = (0, import_react6.useCallback)(
-    (patch) => {
-      dispatch(appSettingsActions.initialize(patch));
-    },
-    [dispatch]
-  );
-  return { settings, setSettings };
-}
-
-// src/hooks/useLastActiveGame.tsx
-var import_react7 = require("react");
-var import_react_redux5 = require("react-redux");
-
 // src/redux/lastActiveGameSlice.ts
-var import_core5 = require("@rific/core");
-var { actions: actions2, reducer: reducer2 } = (0, import_core5.createSettingsSlice)("lastActiveGame", { initialState: { gameId: null } });
-var lastActiveGameActions = actions2;
-var lastActiveGameSlice_default = reducer2;
+var import_core3 = require("@rific/core");
+var { actions, reducer } = (0, import_core3.createSettingsSlice)("lastActiveGame", { initialState: { gameId: null } });
+var lastActiveGameActions = actions;
+var lastActiveGameSlice_default = reducer;
 
 // src/hooks/useLastActiveGame.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var LastActiveGameContext = (0, import_react7.createContext)(null);
+var LastActiveGameContext = (0, import_react6.createContext)(null);
 function LastActiveGameProvider({ children }) {
-  const store = (0, import_react_redux5.useStore)();
-  const dispatch = (0, import_react_redux5.useDispatch)();
-  const [initial] = (0, import_react7.useState)(() => store.getState().lastActiveGame?.gameId ?? null);
-  const pendingResume = (0, import_react7.useRef)(initial);
-  const persisted = (0, import_react7.useRef)(initial);
-  const value = (0, import_react7.useMemo)(
+  const store = (0, import_react_redux4.useStore)();
+  const dispatch = (0, import_react_redux4.useDispatch)();
+  const [initial] = (0, import_react6.useState)(() => store.getState().lastActiveGame?.gameId ?? null);
+  const pendingResume = (0, import_react6.useRef)(initial);
+  const persisted = (0, import_react6.useRef)(initial);
+  const value = (0, import_react6.useMemo)(
     () => ({
       consumeResumeGame: () => {
         const game = pendingResume.current;
@@ -388,33 +353,33 @@ function LastActiveGameProvider({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LastActiveGameContext.Provider, { value, children });
 }
 function useLastActiveGame() {
-  const ctx = (0, import_react7.useContext)(LastActiveGameContext);
+  const ctx = (0, import_react6.useContext)(LastActiveGameContext);
   if (!ctx) throw new Error("useLastActiveGame must be used within a LastActiveGameProvider");
   return ctx;
 }
 
 // src/hooks/useProfiles.tsx
 var import_profile2 = require("@tastic/profile");
-var import_react8 = require("react");
-var import_react_redux6 = require("react-redux");
+var import_react7 = require("react");
+var import_react_redux5 = require("react-redux");
 
 // src/redux/profileSelectionSlice.ts
 var import_profile = require("@tastic/profile");
 var defaultProfileSelectionState = { 1: null, 2: null };
-var { actions: actions3, reducer: reducer3 } = (0, import_profile.createProfileSelectionSlice)("pack", defaultProfileSelectionState);
-var profileSelectionActions = actions3;
-var profileSelectionSlice_default = reducer3;
+var { actions: actions2, reducer: reducer2 } = (0, import_profile.createProfileSelectionSlice)("pack", defaultProfileSelectionState);
+var profileSelectionActions = actions2;
+var profileSelectionSlice_default = reducer2;
 
 // src/hooks/useProfiles.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var SHARED_GROUP_ID = "group.com.infinitetoken.tastic";
-var ProfilesContext = (0, import_react8.createContext)(null);
+var ProfilesContext = (0, import_react7.createContext)(null);
 function ProfilesProvider({ children }) {
-  const profiles = (0, import_react_redux6.useSelector)((state) => state.profiles);
-  const lastSelected = (0, import_react_redux6.useSelector)((state) => state.profileSelection);
-  const dispatch = (0, import_react_redux6.useDispatch)();
-  const [loaded, setLoaded] = (0, import_react8.useState)(false);
-  (0, import_react8.useEffect)(() => {
+  const profiles = (0, import_react_redux5.useSelector)((state) => state.profiles);
+  const lastSelected = (0, import_react_redux5.useSelector)((state) => state.profileSelection);
+  const dispatch = (0, import_react_redux5.useDispatch)();
+  const [loaded, setLoaded] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     let cancelled = false;
     (0, import_profile2.resolveInitialProfiles)(SHARED_GROUP_ID, profiles).then((resolved) => {
       if (cancelled) return;
@@ -428,7 +393,7 @@ function ProfilesProvider({ children }) {
   }, []);
   const { syncToShared } = (0, import_profile2.useSharedProfilesSync)({
     groupId: SHARED_GROUP_ID,
-    onRemoteChange: (0, import_react8.useCallback)(
+    onRemoteChange: (0, import_react7.useCallback)(
       (remote) => {
         dispatch(import_profile2.profilesActions.setAll(remote));
         dispatch(profileSelectionActions.pruneToRoster(remote.map((p) => p.id)));
@@ -436,7 +401,7 @@ function ProfilesProvider({ children }) {
       [dispatch]
     )
   });
-  const createProfile = (0, import_react8.useCallback)(
+  const createProfile = (0, import_react7.useCallback)(
     (input) => {
       const record = (0, import_profile2.createProfileRecord)(input);
       dispatch(import_profile2.profilesActions.add(record));
@@ -445,14 +410,14 @@ function ProfilesProvider({ children }) {
     },
     [profiles, dispatch, syncToShared]
   );
-  const updateProfile = (0, import_react8.useCallback)(
+  const updateProfile = (0, import_react7.useCallback)(
     (id, patch) => {
       dispatch(import_profile2.profilesActions.update({ id, patch }));
       syncToShared(profiles.map((p) => p.id === id ? { ...p, ...patch, updatedAt: Date.now() } : p));
     },
     [profiles, dispatch, syncToShared]
   );
-  const deleteProfile = (0, import_react8.useCallback)(
+  const deleteProfile = (0, import_react7.useCallback)(
     (id) => {
       dispatch(import_profile2.profilesActions.remove(id));
       syncToShared(profiles.filter((p) => p.id !== id));
@@ -460,7 +425,7 @@ function ProfilesProvider({ children }) {
     },
     [profiles, dispatch, syncToShared]
   );
-  const selectProfile = (0, import_react8.useCallback)(
+  const selectProfile = (0, import_react7.useCallback)(
     (seat, profileId) => {
       dispatch(profileSelectionActions.select({ profileId, seat }));
     },
@@ -469,7 +434,7 @@ function ProfilesProvider({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ProfilesContext.Provider, { value: { profiles, lastSelected, loaded, createProfile, updateProfile, deleteProfile, selectProfile }, children });
 }
 function useProfiles() {
-  const ctx = (0, import_react8.useContext)(ProfilesContext);
+  const ctx = (0, import_react7.useContext)(ProfilesContext);
   if (!ctx) throw new Error("useProfiles must be used within a ProfilesProvider");
   return ctx;
 }
@@ -485,11 +450,11 @@ function AppStack() {
   const { Backdrop } = pack;
   const { dark } = (0, import_auto_paper2.useAutoPaperTheme)();
   const darkRoot = Backdrop ? true : dark;
-  const rootBackground = (0, import_core6.useThemedRootBackground)(darkRoot, false);
-  const statusBar = (0, import_core6.useRotationAwareStatusBar)({ style: darkRoot ? "light" : "dark" });
+  const rootBackground = (0, import_core4.useThemedRootBackground)(darkRoot, false);
+  const statusBarStyle = darkRoot ? "light" : "dark";
   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)(
+  const playOptions = (0, import_react8.useCallback)(
     ({ route }) => {
       const id = route.params?.game;
       return pack.games.some((g) => g.id === id && g.keepStatusBar) ? KEEP_STATUS_BAR_OPTIONS : PLAY_OPTIONS;
@@ -497,11 +462,11 @@ function AppStack() {
     [pack.games]
   );
   const navigationBackground = Backdrop ? TRANSPARENT_CONTENT.backgroundColor : rootBackground.contentStyle.backgroundColor;
-  const navigationTheme = (0, import_react9.useMemo)(() => {
+  const navigationTheme = (0, import_react8.useMemo)(() => {
     const base = darkRoot ? import_expo_router.DarkTheme : import_expo_router.DefaultTheme;
     return { ...base, colors: { ...base.colors, background: navigationBackground } };
   }, [darkRoot, navigationBackground]);
-  const stack = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_router.ThemeProvider, { value: navigationTheme, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_expo_router.Stack, { screenOptions: { ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }, children: [
+  const stack = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_router.ThemeProvider, { value: navigationTheme, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_expo_router.Stack, { screenOptions: { ...rootBackground, statusBarStyle, ...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: playOptions })
   ] }) });
@@ -511,11 +476,6 @@ function AppStack() {
     stack
   ] });
 }
-function OrientationBridge({ children }) {
-  const { settings, setSettings } = useAppSettings();
-  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();
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SplashGate, { gate: "profiles", ready: loaded, children });
@@ -526,7 +486,7 @@ function HapticGatedToastProvider({ children }) {
   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)(
+  const renderFrame = (0, import_react8.useCallback)(
     (toasts) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_chrome2.RotatedFrame, { rotatedSafeArea: true, passThrough: true, children: toasts }),
     []
   );
@@ -540,7 +500,7 @@ function GameProviders({ games, children }) {
 }
 function PreviewColors({ previewColor, children }) {
   const { dark } = (0, import_auto_paper2.useAutoPaperTheme)();
-  const preview = (0, import_react9.useCallback)((hex) => previewColor(hex, dark), [previewColor, dark]);
+  const preview = (0, import_react8.useCallback)((hex) => previewColor(hex, dark), [previewColor, dark]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_profile3.ProfileColorProvider, { preview, children });
 }
 function PackRoot({ pack, children }) {
@@ -549,11 +509,11 @@ function PackRoot({ pack, 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)(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: [
+  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.jsxs)(HapticGatedToastProvider, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GuideHost, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AppStack, {}) }),
     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 }
@@ -572,7 +532,7 @@ var PROFILES_HREF = "/profiles";
 
 // src/screens/LoadoutScreen.tsx
 var import_auto_paper4 = require("@rific/auto-paper");
-var import_core10 = require("@tastic/core");
+var import_core9 = require("@tastic/core");
 var import_chrome4 = require("@tastic/hud/chrome");
 var import_lobby2 = require("@tastic/hud/lobby");
 var import_split_screen = require("@tastic/split-screen");
@@ -586,7 +546,7 @@ var import_react_redux9 = require("react-redux");
 // src/components/SeatTwoPanel.tsx
 var import_lobby = require("@tastic/hud/lobby");
 var import_profile4 = require("@tastic/profile");
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_react_native3 = require("react-native");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var CPU_PREFIX = "cpu:";
@@ -604,7 +564,7 @@ function SeatTwoPanel({ idPrefix, host, choices, seatTwo, onSeatTwoChange, cpuDi
   const drawn = previewValue ? previewValue(color) : color;
   const selectedProfile = isPerson ? profiles.find((p) => p.id === selectedProfileId) ?? null : null;
   const cpuOptions = cpuDifficulty?.options;
-  const options = (0, import_react10.useMemo)(() => {
+  const options = (0, import_react9.useMemo)(() => {
     const list = [];
     if (choices.includes("cpu")) list.push(...cpuOptions ? cpuOptions.map((o) => ({ value: `${CPU_PREFIX}${o.value}`, label: o.label, icon: o.icon })) : [{ value: CPU_PREFIX, label: "CPU", icon: CPU_ICON }]);
     if (choices.includes("nobody")) list.push({ value: NOBODY, label: "Nobody", icon: NOBODY_ICON });
@@ -664,13 +624,45 @@ var styles2 = import_react_native3.StyleSheet.create({
 // src/components/SettingsDialog.tsx
 var import_toaster3 = require("@rific/toaster");
 var import_chrome3 = require("@tastic/hud/chrome");
+
+// src/hooks/useAppSettings.ts
+var import_react10 = require("react");
+var import_react_redux6 = require("react-redux");
+
+// src/redux/appSettingsSlice.ts
+var import_core5 = require("@rific/core");
+var DEFAULT_APP_SETTINGS = {
+  deferBottomEdgeGestures: false
+};
+var { actions: actions3, reducer: reducer3 } = (0, import_core5.createSettingsSlice)("appSettings", {
+  initialState: DEFAULT_APP_SETTINGS,
+  initializeMode: "merge",
+  fieldSetters: []
+});
+var appSettingsActions = actions3;
+var appSettingsSlice_default = reducer3;
+
+// src/hooks/useAppSettings.ts
+function useAppSettings() {
+  const settings = (0, import_react_redux6.useSelector)((state) => state.appSettings);
+  const dispatch = (0, import_react_redux6.useDispatch)();
+  const setSettings = (0, import_react10.useCallback)(
+    (patch) => {
+      dispatch(appSettingsActions.initialize(patch));
+    },
+    [dispatch]
+  );
+  return { settings, setSettings };
+}
+
+// src/components/SettingsDialog.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function SettingsDialog({ visible, onDismiss, rotation = 0, onShowHowToPlay, children }) {
+function SettingsDialog({ visible, onDismiss, onShowHowToPlay, children }) {
   const onUpdateError = (0, import_toaster3.useUpdateErrorToast)();
   const { settings, setSettings } = useAppSettings();
   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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_chrome3.BaseSettingsDialog, { visible, onDismiss, version: otaVersion, ...edgeGuardProps, onUpdateError, onShowHowToPlay, children: [
     children,
     SettingsSections && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SettingsSections, {})
   ] });
@@ -681,9 +673,9 @@ var import_react11 = require("react");
 var import_react_redux7 = require("react-redux");
 
 // src/redux/opponentSlice.ts
-var import_core7 = require("@rific/core");
+var import_core6 = require("@rific/core");
 var DEFAULT_OPPONENT = { seatTwo: "cpu" };
-var { actions: actions4, reducer: reducer4 } = (0, import_core7.createSettingsSlice)("opponent", {
+var { actions: actions4, reducer: reducer4 } = (0, import_core6.createSettingsSlice)("opponent", {
   initialState: DEFAULT_OPPONENT
 });
 var opponentActions = actions4;
@@ -816,13 +808,13 @@ function useSeatColors(p2IsHuman) {
 }
 
 // src/navigation.ts
-var import_core8 = require("@rific/core");
+var import_core7 = require("@rific/core");
 var import_expo_router3 = require("expo-router");
-(0, import_core8.configureNavigation)({ router: import_expo_router3.router });
+(0, import_core7.configureNavigation)({ router: import_expo_router3.router });
 
 // src/redux/liveplaySlice.ts
-var import_core9 = require("@rific/core");
-var { actions: actions5, reducer: reducer5 } = (0, import_core9.createSettingsSlice)("liveplay", {
+var import_core8 = require("@rific/core");
+var { actions: actions5, reducer: reducer5 } = (0, import_core8.createSettingsSlice)("liveplay", {
   initialState: { activelyPlaying: false, activeRound: null }
 });
 var liveplayActions = actions5;
@@ -842,14 +834,12 @@ function LoadoutScreen({ game }) {
   const loadout = game.useLoadout(mode);
   const { openFor } = useGameGuide();
   const { profiles, lastSelected, selectProfile } = useProfiles();
-  const { orientationMode, p1OnRight, upsideDown, resolved: p1OnRightResolved } = (0, import_core10.useOrientationState)();
-  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 { orientationMode } = (0, import_core9.useOrientationState)();
+  const panelMode = p2IsHuman && !game.sideBySideWhenWide ? "faceToFace" : orientationMode;
+  const { panelLayout, panelFadeStyle } = (0, import_split_screen.useDualZoneLayout)(panelMode, false, true, false, 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);
+  const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
   const { colors: themeColors, dark } = (0, import_auto_paper4.useAutoPaperTheme)();
   const { p1Color, p2Color, handleP1ColorChange, handleP2ColorChange } = useSeatColors(p2IsHuman);
   const dispatch = (0, import_react_redux9.useDispatch)();
@@ -887,7 +877,7 @@ function LoadoutScreen({ game }) {
   const triggerStyle = (0, import_react13.useMemo)(() => pack.Backdrop ? [styles3.pill, { backgroundColor: themeColors.surface }] : void 0, [pack.Backdrop, themeColors.surface]);
   const isPortrait = panelLayout.orientationMode === "faceToFace";
   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 p2ZoneStyle = p2IsHuman ? isPortrait ? styles3.p2ZoneTop : styles3.p2ZoneRight : null;
   const showReadyButton = p2IsHuman;
   const seatPickerAlign = p2IsHuman ? void 0 : pack.usePickerAlign;
   const layoutKey = p2IsHuman ? "zones" : "row";
@@ -897,7 +887,6 @@ function LoadoutScreen({ game }) {
   const anyPlayerPickerOpen = !!(controlsHost.openId?.startsWith("p1-") || controlsHost.openId?.startsWith("p2-"));
   const optionsRow = loadout.options({
     host: controlsHost,
-    rotation,
     accentColor: themeColors.tertiary,
     mutedColor: fgMuted,
     onAccentColor: themeColors.onTertiary,
@@ -907,17 +896,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_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 sharedControls = showMetaInSharedBand ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lobby2.SharedActionBand, { onBack: import_core7.safeBack, onSettings: () => setSettingsOpen(true), onRandomize: loadout.randomize, onReset: loadout.reset, fg, popoverOpen: optionsPopoverOpen, children: optionsRow }) : optionsRow;
+  const controlLook = { accentColor: themeColors.tertiary, mutedColor: fgMuted, dark };
   const p1Control = loadout.seatControl(1, controlsHost, { ...controlLook, seatColor: p1Drawn });
   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: pack.guestLabel ?? "P1", nullLabel: pack.nullLabel, onProfileSelect: handleP1ProfileSelect, onManageProfiles: () => import_expo_router4.router.push(PROFILES_HREF), previewValue: seatPreview, triggerStyle, useSeatPickerAlign: seatPickerAlign }, `p1-${layoutKey}`);
   const p2Control = p2IsHuman ? loadout.seatControl(2, p2Host, { ...controlLook, seatColor: p2Drawn }) : 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, previewValue: seatPreview, triggerStyle, usePickerAlign: seatPickerAlign }, `p2-${layoutKey}`);
   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.jsxs)(import_react_native4.View, { style: styles3.frame, children: [
       /* @__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 }),
+      !showMetaInSharedBand && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_chrome4.CornerActionButtons, { onBack: import_core7.safeBack, onSettings: () => setSettingsOpen(true), fg, insets }),
       p2IsHuman ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_split_screen.DualZoneLayout,
         {
@@ -933,13 +922,13 @@ 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, playersRowFade], children: [
-          !isPortrait && panelLayout.p1OnRight ? p2Panel : p1Panel,
-          !isPortrait && panelLayout.p1OnRight ? p1Panel : p2Panel
+          p1Panel,
+          p2Panel
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lobby2.ReadyButton, { color: p1Drawn, 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) })
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SettingsDialog, { visible: settingsOpen, onDismiss: () => setSettingsOpen(false), onShowHowToPlay: () => openFor(game.id) })
   ] });
 }
 function halfOf(color) {
@@ -950,12 +939,13 @@ var styles3 = import_react_native4.StyleSheet.create({
   container: {
     flex: 1
   },
-  p2ZoneLeft: {
-    bottom: 0,
-    left: 0,
-    position: "absolute",
-    top: 0,
-    width: "50%"
+  // A real full-bleed box to size the absolutely-positioned children against.
+  frame: {
+    alignItems: "center",
+    flex: 1,
+    gap: 32,
+    justifyContent: "center",
+    paddingHorizontal: 16
   },
   p2ZoneRight: {
     bottom: 0,
@@ -990,14 +980,6 @@ var styles3 = import_react_native4.StyleSheet.create({
     opacity: 0,
     pointerEvents: "none"
   },
-  // A real full-bleed box for FakeLandscapeView to size its absolutely-positioned children against.
-  rotatable: {
-    alignItems: "center",
-    flex: 1,
-    gap: 32,
-    justifyContent: "center",
-    paddingHorizontal: 16
-  },
   stackedZone: {
     alignItems: "center",
     gap: 28
@@ -1038,12 +1020,11 @@ function useResumePoint(gameId) {
 // src/screens/HomeScreen.tsx
 var import_auto_paper5 = require("@rific/auto-paper");
 var import_feedback_press3 = require("@rific/feedback-press");
-var import_core12 = require("@tastic/core");
 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_native6 = require("react-native");
+var import_react_native7 = require("react-native");
 var import_react_native_paper = require("react-native-paper");
 
 // src/hooks/useFrozenWhileHidden.ts
@@ -1063,7 +1044,8 @@ function useFrozenWhileHidden(value, hidden) {
 }
 
 // src/screens/homeLayout.ts
-var import_core11 = require("@tastic/core");
+var import_core10 = require("@tastic/core");
+var import_react_native6 = require("react-native");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 var PREVIEW_ASPECT = 360 / 200;
 var ROW_PREVIEW_WIDTH = 92;
@@ -1092,9 +1074,9 @@ function computeHomeLayout(windowWidth, windowHeight, insets) {
   const inner = Math.max(0, usable - HOME_WIDE_EDGE_PADDING - HOME_WIDE_RIGHT_GUTTER);
   const content = Math.min(inner, HOME_WIDE_MAX_CONTENT_WIDTH);
   const slack = (inner - content) / 2;
-  const leftPaneWidth = Math.min((0, import_core11.clamp)(Math.round(HOME_LEFT_PANE_FRACTION * content), HOME_LEFT_PANE_MIN, HOME_LEFT_PANE_MAX), Math.max(0, content - HOME_WIDE_PANE_GAP - HOME_MIN_TILE_WIDTH));
+  const leftPaneWidth = Math.min((0, import_core10.clamp)(Math.round(HOME_LEFT_PANE_FRACTION * content), HOME_LEFT_PANE_MIN, HOME_LEFT_PANE_MAX), Math.max(0, content - HOME_WIDE_PANE_GAP - HOME_MIN_TILE_WIDTH));
   const rightPaneWidth = Math.max(0, content - HOME_WIDE_PANE_GAP - leftPaneWidth);
-  const columns = (0, import_core11.clamp)(Math.floor((rightPaneWidth + HOME_GRID_GAP) / (HOME_MIN_TILE_WIDTH + HOME_GRID_GAP)), 1, HOME_MAX_COLUMNS);
+  const columns = (0, import_core10.clamp)(Math.floor((rightPaneWidth + HOME_GRID_GAP) / (HOME_MIN_TILE_WIDTH + HOME_GRID_GAP)), 1, HOME_MAX_COLUMNS);
   const tileWidth = Math.max(0, Math.floor((rightPaneWidth - (columns - 1) * HOME_GRID_GAP) / columns));
   const previewWidth = Math.max(0, tileWidth - 2 * HOME_TILE_PADDING);
   const heroFit = {
@@ -1117,9 +1099,8 @@ function computeHomeLayout(windowWidth, windowHeight, insets) {
   };
 }
 function useHomeLayout() {
-  const { width, height } = (0, import_core11.useRotatedWindowDimensions)();
-  const rotation = (0, import_core11.useRotation)();
-  const insets = (0, import_core11.rotateInsets)((0, import_react_native_safe_area_context3.useSafeAreaInsets)(), rotation);
+  const { width, height } = (0, import_react_native6.useWindowDimensions)();
+  const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   return computeHomeLayout(width, height, insets);
 }
 
@@ -1141,7 +1122,6 @@ function HomeScreen() {
 }
 function HomeMenu() {
   const pack = usePack();
-  const rotation = (0, import_core12.useRotation)();
   const layout = useHomeLayout();
   const { insets } = layout;
   const { dark, colors } = (0, import_auto_paper5.useAutoPaperTheme)();
@@ -1149,9 +1129,9 @@ function HomeMenu() {
   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_native6.AppState.currentState);
+  const [appState, setAppState] = (0, import_react16.useState)(import_react_native7.AppState.currentState);
   (0, import_react16.useEffect)(() => {
-    const subscription = import_react_native6.AppState.addEventListener("change", setAppState);
+    const subscription = import_react_native7.AppState.addEventListener("change", setAppState);
     return () => subscription.remove();
   }, []);
   const heroActive = isFocused && appState === "active";
@@ -1171,12 +1151,19 @@ function HomeMenu() {
   const closePicker = pickerHost.close;
   (0, import_react16.useEffect)(() => {
     closePicker();
-  }, [isWide, rotation, layout.windowWidth, layout.windowHeight, closePicker]);
+  }, [isWide, 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 tabs = pack.homeTabs && pack.homeTabs.length > 1 ? pack.homeTabs : null;
+  const [tabLabel, setTabLabel] = (0, import_react16.useState)(() => tabs?.[0].label ?? null);
+  const tab = tabs ? tabs.find((t) => t.label === tabLabel) ?? tabs[0] : null;
+  const tabButtons = (0, import_react16.useMemo)(() => tabs?.map(({ label }) => ({ value: label, label })) ?? [], [tabs]);
+  const tabBar = tab && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper.SegmentedButtons, { value: tab.label, onValueChange: setTabLabel, buttons: tabButtons, style: [styles4.tabs, pack.Backdrop && { backgroundColor: colors.surface }] });
+  const columnClamp = useClampOnShrink();
+  const gridClamp = useClampOnShrink();
   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 };
@@ -1186,46 +1173,78 @@ function HomeMenu() {
   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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native7.View, { style: [styles4.container, { backgroundColor: bg }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.View, { style: styles4.frame, 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: [
         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.jsxs)(import_auto_paper5.FadingScrollView, { ...tab && gridClamp, 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: [
+          tabBar && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.View, { style: [styles4.wideTabs, { width: layout.rightPaneWidth }], children: tabBar }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.View, { style: [styles4.grid, { width: layout.rightPaneWidth }], children: pack.games.map((game) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameTile, { game, hidden: isHidden(tab, 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_native7.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_native6.View, { style: styles4.widePicker, children: picker })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.View, { style: styles4.widePicker, children: picker })
         ] })
-      ] }) : /* @__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: [
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_auto_paper5.FadingScrollView, { ...tab && columnClamp, 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_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_react_native7.View, { style: [styles4.picker, pickerHost.openId !== null && styles4.pickerOpen], children: picker }),
+        tabBar && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.View, { style: styles4.listWidth, children: tabBar }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.View, { style: styles4.list, children: pack.games.map((game) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameRow, { game, hidden: isHidden(tab, 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_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 })
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SettingsDialog, { visible: settingsOpen, onDismiss: () => setSettingsOpen(false), onShowHowToPlay: pack.guide ? openPack : void 0 })
   ] });
 }
 var SEAT_ONE_PICKER = "home-p1";
 var noPickerAlign = () => void 0;
+function isHidden(tab, game) {
+  return !!tab && !tab.includes(game);
+}
+function useClampOnShrink() {
+  const view = (0, import_react16.useRef)(null);
+  const sizes = (0, import_react16.useRef)({ viewport: 0, offset: 0 });
+  return (0, import_react16.useMemo)(
+    () => ({
+      ref: (instance) => {
+        view.current = instance;
+        sizes.current.offset = 0;
+      },
+      onLayout: (e) => {
+        sizes.current.viewport = e.nativeEvent.layout.height;
+      },
+      onScroll: (e) => {
+        sizes.current.offset = e.nativeEvent.contentOffset.y;
+      },
+      onContentSizeChange: (_width, height) => {
+        const end = Math.max(0, height - sizes.current.viewport);
+        if (sizes.current.offset <= end) return;
+        sizes.current.offset = end;
+        view.current?.scrollTo({ y: end, animated: false });
+      }
+    }),
+    []
+  );
+}
 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 }) {
+function GameRow({ game, hidden, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
   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_native6.View, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native7.View, { style: hidden ? styles4.hidden : void 0, 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_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: [
+        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_native7.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_native7.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 })
         ] })
@@ -1234,9 +1253,9 @@ function GameRow({ game, dark, p1Color, p2Color, previewRevealed, onPress, onRul
     ] })
   );
 }
-function GameTile({ game, width, previewWidth, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
+function GameTile({ game, hidden, width, previewWidth, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
   const well = (0, import_chrome5.useWellColors)();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native6.View, { style: { width }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native7.View, { style: [{ width }, hidden && styles4.hidden], 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 }),
@@ -1249,13 +1268,13 @@ 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_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 }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.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_native7.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_native6.StyleSheet.create({
+var styles4 = import_react_native7.StyleSheet.create({
   container: {
     flex: 1
   },
@@ -1266,18 +1285,30 @@ var styles4 = import_react_native6.StyleSheet.create({
   corner: {
     position: "absolute"
   },
+  frame: {
+    flex: 1
+  },
   // The wide layout's tiles: wrapped rows of tiles the layout sizes to fill the pane's width.
   grid: {
     flexDirection: "row",
     flexWrap: "wrap",
     gap: HOME_GRID_GAP
   },
+  // Out of the layout (a grid closes up around it) and hidden from screen readers.
+  hidden: {
+    display: "none"
+  },
   // Solitaire's list: one column, never wider than a phone's, centred on a wide screen.
   list: {
     gap: 14,
     maxWidth: 480,
     width: "100%"
   },
+  // The list's width, for the tabs over it.
+  listWidth: {
+    maxWidth: 480,
+    width: "100%"
+  },
   picker: {
     alignItems: "center"
   },
@@ -1303,9 +1334,6 @@ var styles4 = import_react_native6.StyleSheet.create({
   previewIcon: {
     overflow: "hidden"
   },
-  rotatable: {
-    flex: 1
-  },
   // A well (@tastic/hud's wellSurface): the theme's surface on MD3's level-1 shadow, the same surface
   // as Solitaire's game rows, the stats screen's sections and every dialog.
   row: {
@@ -1340,6 +1368,10 @@ var styles4 = import_react_native6.StyleSheet.create({
   scroll: {
     flex: 1
   },
+  // SegmentedButtons' own rounding, so a surface behind it is the same pill (the stats screen's tabs).
+  tabs: {
+    borderRadius: 20
+  },
   // The same well as a row, turned on its side.
   tile: {
     borderRadius: 12,
@@ -1378,6 +1410,10 @@ var styles4 = import_react_native6.StyleSheet.create({
     position: "absolute",
     right: 0,
     top: 0
+  },
+  // The tabs over the grid, a little further from it than the tiles are from each other.
+  wideTabs: {
+    marginBottom: 16
   }
 });
 
@@ -1394,7 +1430,7 @@ function useRosterAlign(open, contentWidth, contentHeight) {
 function ProfilesRoute() {
   const { profiles, createProfile, updateProfile, deleteProfile } = useProfiles();
   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 }) });
+  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_core7.safeBack, fg: foreground, bg: Backdrop ? "transparent" : void 0, useColorPickerAlign: usePickerAlign ? useRosterAlign : void 0 }) });
 }
 
 // src/screens/StatsScreen.tsx
@@ -1402,7 +1438,7 @@ var import_auto_paper7 = require("@rific/auto-paper");
 var import_chrome7 = require("@tastic/hud/chrome");
 var import_profile9 = require("@tastic/profile");
 var import_react17 = require("react");
-var import_react_native7 = require("react-native");
+var import_react_native8 = 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");
@@ -1425,7 +1461,7 @@ function StatsScreen() {
   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 });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native8.View, { testID: "stats-press-away", style: styles5.screen, onStartShouldSetResponder: () => host.openId !== null, onResponderRelease: host.close, children });
 }
 var useNoPackReset = () => null;
 var noPickerAlign2 = () => void 0;
@@ -1459,10 +1495,10 @@ function StatsContent({ pickerHost }) {
   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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_chrome7.BaseStatsScreen, { title, onBack: import_core7.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: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native8.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 })
     ] }),
@@ -1483,12 +1519,12 @@ function GameStats({ game, tab, profileId, showTitle, titleColor }) {
   const { StatsSections, AchievementList } = game;
   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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native8.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_native7.StyleSheet.create({
+var styles5 = import_react_native8.StyleSheet.create({
   filters: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -1522,11 +1558,11 @@ var styles5 = import_react_native7.StyleSheet.create({
 });
 
 // src/components/imageGameIcon.tsx
-var import_react_native8 = require("react-native");
+var import_react_native9 = 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_native8.Image, { source: dark ? images.dark : images.light, style: { height: size, width: size }, accessibilityIgnoresInvertColors: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native9.Image, { source: dark ? images.dark : images.light, style: { height: size, width: size }, accessibilityIgnoresInvertColors: true });
   };
 }
 
@@ -1546,7 +1582,7 @@ var import_redux_persist = require("redux-persist");
 
 // src/redux/shellState.ts
 var import_auto_paper8 = require("@rific/auto-paper");
-var import_core13 = require("@rific/core");
+var import_core11 = require("@rific/core");
 var import_feedback_press4 = require("@rific/feedback-press");
 var import_profile10 = require("@tastic/profile");
 var initialSoundSettings = { ...import_feedback_press4.defaultSoundSettings, enabled: !__DEV__ };
@@ -1567,7 +1603,7 @@ function createShellReducers({ seatColors, appearance = "system", seatTheme }) {
     sound: appSoundReducer,
     // @rific/core's Keep Awake setting (see Providers.tsx's KeepAwakeBridge), under the namespace its
     // REHYDRATE handling expects.
-    keepAwake: import_core13.keepAwakeReducer,
+    keepAwake: import_core11.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