@tastic/shell 0.3.1 → 0.5.0

package/dist/index.mjs

@@ -25,13 +25,12 @@ function usePackGame(id) {
 import { useAutoPaperTheme } from "@rific/auto-paper";
 import { useHapticSettings } from "@rific/feedback-press";
 import { Toaster, ToastProvider } from "@rific/toaster";
-import { OrientationProvider, useRotationAwareStatusBar, useThemedRootBackground } from "@tastic/core";
+import { useThemedRootBackground } from "@tastic/core";
 import { RotatedFrame } from "@tastic/hud/chrome";
 import { ProfileColorProvider } from "@tastic/profile";
 import * as Haptics from "expo-haptics";
 import { DarkTheme, DefaultTheme, Stack, ThemeProvider as NavigationThemeProvider } from "expo-router";
-import { DeviceMotion } from "expo-sensors";
-import { useCallback as useCallback6, useMemo as useMemo3 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo3 } from "react";
 import { Platform as Platform2, StyleSheet, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import * as RNPaper2 from "react-native-paper";
@@ -60,7 +59,7 @@ function Fonts({ children }) {
 }
 
 // src/components/GuideHost.tsx
-import { useIsTouchPrimaryDevice, useRotation } from "@tastic/core";
+import { useIsTouchPrimaryDevice } from "@tastic/core";
 import { GuideProvider, useGuide } from "@tastic/hud/guide";
 import { createContext as createContext2, useCallback, useContext as useContext2, useEffect, useMemo, useRef, useState } from "react";
 import { shallowEqual, useDispatch, useSelector, useStore } from "react-redux";
@@ -89,7 +88,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 = useRotation();
   const touch = useIsTouchPrimaryDevice();
   const seatTwo = useSelector((state) => state.opponent.seatTwo);
   const input = useSelector((state) => gameGuide ? gameGuide.selectInput(state) : NO_INPUT, shallowEqual);
@@ -104,7 +102,7 @@ function GuideHost({ children }) {
     },
     [dispatch, packGuide, gameGuide]
   );
-  return /* @__PURE__ */ jsx3(GuideProvider, { steps, currentVersion: (packGuide ?? gameGuide)?.version ?? 0, seenVersion, onSeen, rotation, children: /* @__PURE__ */ jsx3(GameGuideBridge, { onPick: setSubject, children }) });
+  return /* @__PURE__ */ jsx3(GuideProvider, { steps, currentVersion: (packGuide ?? gameGuide)?.version ?? 0, seenVersion, onSeen, children: /* @__PURE__ */ jsx3(GameGuideBridge, { onPick: setSubject, children }) });
 }
 function GameGuideBridge({ onPick, children }) {
   const pack = usePack();
@@ -227,62 +225,29 @@ function Theme({ children }) {
 
 // src/components/UpdateDialog.tsx
 import { useUpdateErrorToast } from "@rific/toaster";
-import { useRotation as useRotation2 } from "@tastic/core";
 import { UpdateDialog as SharedUpdateDialog } from "@tastic/hud/chrome";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function UpdateDialog() {
   const onError = useUpdateErrorToast();
-  const rotation = useRotation2();
-  return /* @__PURE__ */ jsx6(SharedUpdateDialog, { onError, rotation });
-}
-
-// src/hooks/useAppSettings.ts
-import { useCallback as useCallback4 } from "react";
-import { useDispatch as useDispatch4, useSelector as useSelector4 } from "react-redux";
-
-// src/redux/appSettingsSlice.ts
-import { createSettingsSlice } from "@rific/core";
-var DEFAULT_APP_SETTINGS = {
-  lockOrientation: false,
-  deferBottomEdgeGestures: false
-};
-var { actions, reducer } = createSettingsSlice("appSettings", {
-  initialState: DEFAULT_APP_SETTINGS,
-  initializeMode: "merge",
-  fieldSetters: []
-});
-var appSettingsActions = actions;
-var appSettingsSlice_default = reducer;
-
-// src/hooks/useAppSettings.ts
-function useAppSettings() {
-  const settings = useSelector4((state) => state.appSettings);
-  const dispatch = useDispatch4();
-  const setSettings = useCallback4(
-    (patch) => {
-      dispatch(appSettingsActions.initialize(patch));
-    },
-    [dispatch]
-  );
-  return { settings, setSettings };
+  return /* @__PURE__ */ jsx6(SharedUpdateDialog, { onError });
 }
 
 // src/hooks/useLastActiveGame.tsx
 import { createContext as createContext3, useContext as useContext3, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
-import { useDispatch as useDispatch5, useStore as useStore2 } from "react-redux";
+import { useDispatch as useDispatch4, useStore as useStore2 } from "react-redux";
 
 // src/redux/lastActiveGameSlice.ts
-import { createSettingsSlice as createSettingsSlice2 } from "@rific/core";
-var { actions: actions2, reducer: reducer2 } = createSettingsSlice2("lastActiveGame", { initialState: { gameId: null } });
-var lastActiveGameActions = actions2;
-var lastActiveGameSlice_default = reducer2;
+import { createSettingsSlice } from "@rific/core";
+var { actions, reducer } = createSettingsSlice("lastActiveGame", { initialState: { gameId: null } });
+var lastActiveGameActions = actions;
+var lastActiveGameSlice_default = reducer;
 
 // src/hooks/useLastActiveGame.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
 var LastActiveGameContext = createContext3(null);
 function LastActiveGameProvider({ children }) {
   const store = useStore2();
-  const dispatch = useDispatch5();
+  const dispatch = useDispatch4();
   const [initial] = useState2(() => store.getState().lastActiveGame?.gameId ?? null);
   const pendingResume = useRef2(initial);
   const persisted = useRef2(initial);
@@ -321,24 +286,24 @@ function useLastActiveGame() {
 
 // src/hooks/useProfiles.tsx
 import { createProfileRecord, profilesActions, resolveInitialProfiles, useSharedProfilesSync } from "@tastic/profile";
-import { createContext as createContext4, useCallback as useCallback5, useContext as useContext4, useEffect as useEffect2, useState as useState3 } from "react";
-import { useDispatch as useDispatch6, useSelector as useSelector5 } from "react-redux";
+import { createContext as createContext4, useCallback as useCallback4, useContext as useContext4, useEffect as useEffect2, useState as useState3 } from "react";
+import { useDispatch as useDispatch5, useSelector as useSelector4 } from "react-redux";
 
 // src/redux/profileSelectionSlice.ts
 import { createProfileSelectionSlice } from "@tastic/profile";
 var defaultProfileSelectionState = { 1: null, 2: null };
-var { actions: actions3, reducer: reducer3 } = createProfileSelectionSlice("pack", defaultProfileSelectionState);
-var profileSelectionActions = actions3;
-var profileSelectionSlice_default = reducer3;
+var { actions: actions2, reducer: reducer2 } = createProfileSelectionSlice("pack", defaultProfileSelectionState);
+var profileSelectionActions = actions2;
+var profileSelectionSlice_default = reducer2;
 
 // src/hooks/useProfiles.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
 var SHARED_GROUP_ID = "group.com.infinitetoken.tastic";
 var ProfilesContext = createContext4(null);
 function ProfilesProvider({ children }) {
-  const profiles = useSelector5((state) => state.profiles);
-  const lastSelected = useSelector5((state) => state.profileSelection);
-  const dispatch = useDispatch6();
+  const profiles = useSelector4((state) => state.profiles);
+  const lastSelected = useSelector4((state) => state.profileSelection);
+  const dispatch = useDispatch5();
   const [loaded, setLoaded] = useState3(false);
   useEffect2(() => {
     let cancelled = false;
@@ -354,7 +319,7 @@ function ProfilesProvider({ children }) {
   }, []);
   const { syncToShared } = useSharedProfilesSync({
     groupId: SHARED_GROUP_ID,
-    onRemoteChange: useCallback5(
+    onRemoteChange: useCallback4(
       (remote) => {
         dispatch(profilesActions.setAll(remote));
         dispatch(profileSelectionActions.pruneToRoster(remote.map((p) => p.id)));
@@ -362,7 +327,7 @@ function ProfilesProvider({ children }) {
       [dispatch]
     )
   });
-  const createProfile = useCallback5(
+  const createProfile = useCallback4(
     (input) => {
       const record = createProfileRecord(input);
       dispatch(profilesActions.add(record));
@@ -371,14 +336,14 @@ function ProfilesProvider({ children }) {
     },
     [profiles, dispatch, syncToShared]
   );
-  const updateProfile = useCallback5(
+  const updateProfile = useCallback4(
     (id, patch) => {
       dispatch(profilesActions.update({ id, patch }));
       syncToShared(profiles.map((p) => p.id === id ? { ...p, ...patch, updatedAt: Date.now() } : p));
     },
     [profiles, dispatch, syncToShared]
   );
-  const deleteProfile = useCallback5(
+  const deleteProfile = useCallback4(
     (id) => {
       dispatch(profilesActions.remove(id));
       syncToShared(profiles.filter((p) => p.id !== id));
@@ -386,7 +351,7 @@ function ProfilesProvider({ children }) {
     },
     [profiles, dispatch, syncToShared]
   );
-  const selectProfile = useCallback5(
+  const selectProfile = useCallback4(
     (seat, profileId) => {
       dispatch(profileSelectionActions.select({ profileId, seat }));
     },
@@ -412,10 +377,10 @@ function AppStack() {
   const { dark } = useAutoPaperTheme();
   const darkRoot = Backdrop ? true : dark;
   const rootBackground = useThemedRootBackground(darkRoot, false);
-  const statusBar = useRotationAwareStatusBar({ style: darkRoot ? "light" : "dark" });
+  const statusBarStyle = darkRoot ? "light" : "dark";
   const packOptions = (pack.useScreenOptions ?? noScreenOptions)();
   const backdropOptions = Backdrop ? { contentStyle: TRANSPARENT_CONTENT, animation: Platform2.select({ android: "fade" }) } : void 0;
-  const playOptions = useCallback6(
+  const playOptions = useCallback5(
     ({ route }) => {
       const id = route.params?.game;
       return pack.games.some((g) => g.id === id && g.keepStatusBar) ? KEEP_STATUS_BAR_OPTIONS : PLAY_OPTIONS;
@@ -427,7 +392,7 @@ function AppStack() {
     const base = darkRoot ? DarkTheme : DefaultTheme;
     return { ...base, colors: { ...base.colors, background: navigationBackground } };
   }, [darkRoot, navigationBackground]);
-  const stack = /* @__PURE__ */ jsx9(NavigationThemeProvider, { value: navigationTheme, children: /* @__PURE__ */ jsxs2(Stack, { screenOptions: { ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }, children: [
+  const stack = /* @__PURE__ */ jsx9(NavigationThemeProvider, { value: navigationTheme, children: /* @__PURE__ */ jsxs2(Stack, { screenOptions: { ...rootBackground, statusBarStyle, ...backdropOptions, ...packOptions }, children: [
     /* @__PURE__ */ jsx9(Stack.Screen, { name: "index" }),
     /* @__PURE__ */ jsx9(Stack.Screen, { name: "play/[game]", options: playOptions })
   ] }) });
@@ -437,11 +402,6 @@ function AppStack() {
     stack
   ] });
 }
-function OrientationBridge({ children }) {
-  const { settings, setSettings } = useAppSettings();
-  const { portraitWhileKeyboard } = usePack();
-  return /* @__PURE__ */ jsx9(OrientationProvider, { deviceMotion: 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__ */ jsx9(SplashGate, { gate: "profiles", ready: loaded, children });
@@ -452,7 +412,7 @@ function HapticGatedToastProvider({ children }) {
   return /* @__PURE__ */ jsx9(ToastProvider, { haptics: settings.vibrate ? Haptics : void 0, paper: PackToasterComponent ? void 0 : RNPaper2, children });
 }
 function RotatingToaster() {
-  const renderFrame = useCallback6(
+  const renderFrame = useCallback5(
     (toasts) => /* @__PURE__ */ jsx9(RotatedFrame, { rotatedSafeArea: true, passThrough: true, children: toasts }),
     []
   );
@@ -466,7 +426,7 @@ function GameProviders({ games, children }) {
 }
 function PreviewColors({ previewColor, children }) {
   const { dark } = useAutoPaperTheme();
-  const preview = useCallback6((hex) => previewColor(hex, dark), [previewColor, dark]);
+  const preview = useCallback5((hex) => previewColor(hex, dark), [previewColor, dark]);
   return /* @__PURE__ */ jsx9(ProfileColorProvider, { preview, children });
 }
 function PackRoot({ pack, children }) {
@@ -475,11 +435,11 @@ function PackRoot({ pack, children }) {
   return previewColor ? /* @__PURE__ */ jsx9(PreviewColors, { previewColor, children: inner }) : /* @__PURE__ */ jsx9(Fragment3, { children: inner });
 }
 function RootLayout({ pack, store, persistor }) {
-  return /* @__PURE__ */ jsx9(GestureHandlerRootView, { style: styles.root, children: /* @__PURE__ */ jsx9(SafeAreaProvider, { children: /* @__PURE__ */ jsx9(PackProvider, { pack, children: /* @__PURE__ */ jsx9(Fonts, { children: /* @__PURE__ */ jsx9(Providers, { store, persistor, children: /* @__PURE__ */ jsx9(Theme, { children: /* @__PURE__ */ jsx9(ProfilesProvider, { children: /* @__PURE__ */ jsx9(LastActiveGameProvider, { children: /* @__PURE__ */ jsx9(GameProviders, { games: pack.games, children: /* @__PURE__ */ jsx9(PackRoot, { pack, children: /* @__PURE__ */ jsx9(GatedApp, { children: /* @__PURE__ */ jsx9(OrientationBridge, { children: /* @__PURE__ */ jsxs2(HapticGatedToastProvider, { children: [
+  return /* @__PURE__ */ jsx9(GestureHandlerRootView, { style: styles.root, children: /* @__PURE__ */ jsx9(SafeAreaProvider, { children: /* @__PURE__ */ jsx9(PackProvider, { pack, children: /* @__PURE__ */ jsx9(Fonts, { children: /* @__PURE__ */ jsx9(Providers, { store, persistor, children: /* @__PURE__ */ jsx9(Theme, { children: /* @__PURE__ */ jsx9(ProfilesProvider, { children: /* @__PURE__ */ jsx9(LastActiveGameProvider, { children: /* @__PURE__ */ jsx9(GameProviders, { games: pack.games, children: /* @__PURE__ */ jsx9(PackRoot, { pack, children: /* @__PURE__ */ jsx9(GatedApp, { children: /* @__PURE__ */ jsxs2(HapticGatedToastProvider, { children: [
     /* @__PURE__ */ jsx9(GuideHost, { children: /* @__PURE__ */ jsx9(AppStack, {}) }),
     pack.Toaster ? /* @__PURE__ */ jsx9(PackToaster, { Toaster: pack.Toaster }) : /* @__PURE__ */ jsx9(RotatingToaster, {}),
     /* @__PURE__ */ jsx9(UpdateDialog, {})
-  ] }) }) }) }) }) }) }) }) }) }) }) }) });
+  ] }) }) }) }) }) }) }) }) }) }) }) });
 }
 var styles = StyleSheet.create({
   root: { flex: 1 }
@@ -498,13 +458,13 @@ var PROFILES_HREF = "/profiles";
 
 // src/screens/LoadoutScreen.tsx
 import { defaultColors, getRgb, useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
-import { FakeLandscapeView, getViewRotation, rotateInsets, useOrientationState } from "@tastic/core";
+import { useOrientationState } from "@tastic/core";
 import { CornerActionButtons, PressAwayOverlay, usePopoverHost } from "@tastic/hud/chrome";
 import { PlayerSetupPanel, ReadyButton as ReadyButton2, SharedActionBand } from "@tastic/hud/lobby";
 import { DualZoneLayout, needsSharedNeutralZone, useDualZoneLayout } from "@tastic/split-screen";
 import { router as router2, useFocusEffect as useFocusEffect2 } from "expo-router";
 import { useCallback as useCallback9, useEffect as useEffect4, useMemo as useMemo5, useRef as useRef4, useState as useState4 } from "react";
-import { Platform as Platform3, StyleSheet as StyleSheet3, View as View3 } from "react-native";
+import { StyleSheet as StyleSheet3, View as View3 } from "react-native";
 import Animated from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDispatch as useDispatch9 } from "react-redux";
@@ -590,13 +550,45 @@ var styles2 = StyleSheet2.create({
 // src/components/SettingsDialog.tsx
 import { useUpdateErrorToast as useUpdateErrorToast2 } from "@rific/toaster";
 import { BaseSettingsDialog } from "@tastic/hud/chrome";
+
+// src/hooks/useAppSettings.ts
+import { useCallback as useCallback6 } from "react";
+import { useDispatch as useDispatch6, useSelector as useSelector5 } from "react-redux";
+
+// src/redux/appSettingsSlice.ts
+import { createSettingsSlice as createSettingsSlice2 } from "@rific/core";
+var DEFAULT_APP_SETTINGS = {
+  deferBottomEdgeGestures: false
+};
+var { actions: actions3, reducer: reducer3 } = createSettingsSlice2("appSettings", {
+  initialState: DEFAULT_APP_SETTINGS,
+  initializeMode: "merge",
+  fieldSetters: []
+});
+var appSettingsActions = actions3;
+var appSettingsSlice_default = reducer3;
+
+// src/hooks/useAppSettings.ts
+function useAppSettings() {
+  const settings = useSelector5((state) => state.appSettings);
+  const dispatch = useDispatch6();
+  const setSettings = useCallback6(
+    (patch) => {
+      dispatch(appSettingsActions.initialize(patch));
+    },
+    [dispatch]
+  );
+  return { settings, setSettings };
+}
+
+// src/components/SettingsDialog.tsx
 import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
-function SettingsDialog({ visible, onDismiss, rotation = 0, onShowHowToPlay, children }) {
+function SettingsDialog({ visible, onDismiss, onShowHowToPlay, children }) {
   const onUpdateError = useUpdateErrorToast2();
   const { settings, setSettings } = useAppSettings();
   const { otaVersion, SettingsSections, edgeGuard = true } = usePack();
   const edgeGuardProps = edgeGuard ? { deferBottomEdgeGestures: settings.deferBottomEdgeGestures, onDeferBottomEdgeGestures: (value) => setSettings({ deferBottomEdgeGestures: value }) } : {};
-  return /* @__PURE__ */ jsxs4(BaseSettingsDialog, { visible, onDismiss, rotation, version: otaVersion, lockOrientation: settings.lockOrientation, onLockOrientationChange: (value) => setSettings({ lockOrientation: value }), ...edgeGuardProps, onUpdateError, onShowHowToPlay, children: [
+  return /* @__PURE__ */ jsxs4(BaseSettingsDialog, { visible, onDismiss, version: otaVersion, ...edgeGuardProps, onUpdateError, onShowHowToPlay, children: [
     children,
     SettingsSections && /* @__PURE__ */ jsx11(SettingsSections, {})
   ] });
@@ -768,14 +760,12 @@ function LoadoutScreen({ game }) {
   const loadout = game.useLoadout(mode);
   const { openFor } = useGameGuide();
   const { profiles, lastSelected, selectProfile } = useProfiles();
-  const { orientationMode, p1OnRight, upsideDown, resolved: p1OnRightResolved } = useOrientationState();
-  const fixedSeats = p2IsHuman && (!!game.twoPlayerSeats?.faceToFaceOnWeb || Platform3.OS !== "web");
-  const fixedUpsideDown = !!game.twoPlayerSeats?.followUpsideDown && orientationMode === "faceToFace" && upsideDown;
-  const { panelLayout, panelFadeStyle } = useDualZoneLayout(fixedSeats ? "faceToFace" : orientationMode, fixedSeats ? true : p1OnRight, fixedSeats || p1OnRightResolved, fixedSeats ? fixedUpsideDown : upsideDown, PANEL_SWAP_FADE_MS);
+  const { orientationMode } = useOrientationState();
+  const panelMode = p2IsHuman && !game.sideBySideWhenWide ? "faceToFace" : orientationMode;
+  const { panelLayout, panelFadeStyle } = useDualZoneLayout(panelMode, false, true, false, PANEL_SWAP_FADE_MS);
   const playersRowFade = panelFadeStyle;
   const [settingsOpen, setSettingsOpen] = useState4(false);
-  const rotation = getViewRotation(panelLayout.orientationMode, panelLayout.p1OnRight, panelLayout.upsideDown);
-  const insets = rotateInsets(useSafeAreaInsets(), rotation);
+  const insets = useSafeAreaInsets();
   const { colors: themeColors, dark } = useAutoPaperTheme3();
   const { p1Color, p2Color, handleP1ColorChange, handleP2ColorChange } = useSeatColors(p2IsHuman);
   const dispatch = useDispatch9();
@@ -813,7 +803,7 @@ function LoadoutScreen({ game }) {
   const triggerStyle = useMemo5(() => pack.Backdrop ? [styles3.pill, { backgroundColor: themeColors.surface }] : void 0, [pack.Backdrop, themeColors.surface]);
   const isPortrait = panelLayout.orientationMode === "faceToFace";
   const showMetaInSharedBand = 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";
@@ -823,7 +813,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,
@@ -834,13 +823,13 @@ function LoadoutScreen({ game }) {
   });
   const optionsPopoverOpen = controlsHost.openId !== null && loadout.optionIds.includes(controlsHost.openId);
   const sharedControls = showMetaInSharedBand ? /* @__PURE__ */ jsx12(SharedActionBand, { onBack: 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 controlLook = { accentColor: themeColors.tertiary, mutedColor: fgMuted, dark };
   const p1Control = loadout.seatControl(1, controlsHost, { ...controlLook, seatColor: p1Drawn });
   const p1Panel = /* @__PURE__ */ jsx12(PlayerSetupPanel, { idPrefix: "p1", host: controlsHost, color: p1Color, onColorChange: handleP1ColorChange, swatches: 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: () => router2.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__ */ jsx12(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: 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__ */ jsxs5(View3, { style: [styles3.container, { backgroundColor: bg }], children: [
-    /* @__PURE__ */ jsxs5(FakeLandscapeView, { orientationMode: panelLayout.orientationMode, p1OnRight: panelLayout.p1OnRight, upsideDown: panelLayout.upsideDown, style: styles3.rotatable, children: [
+    /* @__PURE__ */ jsxs5(View3, { style: styles3.frame, children: [
       /* @__PURE__ */ jsx12(PressAwayOverlay, { active: controlsHost.openId !== null, onPress: controlsHost.close }),
       p2ZoneStyle && /* @__PURE__ */ jsx12(PressAwayOverlay, { active: controlsHost.openId !== null || p2Host.openId !== null, onPress: p2Host.close, style: p2ZoneStyle }),
       !showMetaInSharedBand && /* @__PURE__ */ jsx12(CornerActionButtons, { onBack: safeBack, onSettings: () => setSettingsOpen(true), fg, insets }),
@@ -859,13 +848,13 @@ function LoadoutScreen({ game }) {
       ) : /* @__PURE__ */ jsxs5(View3, { style: styles3.stackedZone, children: [
         sharedControls,
         /* @__PURE__ */ jsxs5(Animated.View, { style: [styles3.playersRow, anyPlayerPickerOpen && styles3.playersRowOpen, playersRowFade], children: [
-          !isPortrait && panelLayout.p1OnRight ? p2Panel : p1Panel,
-          !isPortrait && panelLayout.p1OnRight ? p1Panel : p2Panel
+          p1Panel,
+          p2Panel
         ] }),
         /* @__PURE__ */ jsx12(ReadyButton2, { color: p1Drawn, ready: ready[1], onToggleReady: () => setReady((r) => ({ ...r, 1: !r[1] })), style: anyPlayerPickerOpen && styles3.readyButtonHidden })
       ] })
     ] }),
-    /* @__PURE__ */ jsx12(SettingsDialog, { visible: settingsOpen, onDismiss: () => setSettingsOpen(false), rotation, onShowHowToPlay: () => openFor(game.id) })
+    /* @__PURE__ */ jsx12(SettingsDialog, { visible: settingsOpen, onDismiss: () => setSettingsOpen(false), onShowHowToPlay: () => openFor(game.id) })
   ] });
 }
 function halfOf(color) {
@@ -876,12 +865,13 @@ var styles3 = StyleSheet3.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,
@@ -916,14 +906,6 @@ var styles3 = StyleSheet3.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
@@ -964,13 +946,12 @@ function useResumePoint(gameId) {
 // src/screens/HomeScreen.tsx
 import { defaultColors as defaultColors2, FadingScrollView, useAutoPaperTheme as useAutoPaperTheme4 } from "@rific/auto-paper";
 import { IconButton, Pressable } from "@rific/feedback-press";
-import { FakeLandscapeView as FakeLandscapeView2, useRotation as useRotation4 } from "@tastic/core";
 import { PressAwayOverlay as PressAwayOverlay2, usePopoverHost as usePopoverHost2, useWellColors, WELL_SHADOW } from "@tastic/hud/chrome";
 import { getProfilePickerContentSize, ProfilePicker } from "@tastic/profile";
 import { Redirect as Redirect2, router as router3, useIsFocused } from "expo-router";
-import { useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo6, useState as useState6 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef5, useState as useState6 } from "react";
 import { AppState as AppState2, StyleSheet as StyleSheet4, View as View4 } from "react-native";
-import { Icon, Portal, Text } from "react-native-paper";
+import { Icon, Portal, SegmentedButtons, Text } from "react-native-paper";
 
 // src/hooks/useFrozenWhileHidden.ts
 import { useState as useState5 } from "react";
@@ -989,7 +970,8 @@ function useFrozenWhileHidden(value, hidden) {
 }
 
 // src/screens/homeLayout.ts
-import { clamp, rotateInsets as rotateInsets2, useRotatedWindowDimensions, useRotation as useRotation3 } from "@tastic/core";
+import { clamp } from "@tastic/core";
+import { useWindowDimensions } from "react-native";
 import { useSafeAreaInsets as useSafeAreaInsets2 } from "react-native-safe-area-context";
 var PREVIEW_ASPECT = 360 / 200;
 var ROW_PREVIEW_WIDTH = 92;
@@ -1043,9 +1025,8 @@ function computeHomeLayout(windowWidth, windowHeight, insets) {
   };
 }
 function useHomeLayout() {
-  const { width, height } = useRotatedWindowDimensions();
-  const rotation = useRotation3();
-  const insets = rotateInsets2(useSafeAreaInsets2(), rotation);
+  const { width, height } = useWindowDimensions();
+  const insets = useSafeAreaInsets2();
   return computeHomeLayout(width, height, insets);
 }
 
@@ -1067,7 +1048,6 @@ function HomeScreen() {
 }
 function HomeMenu() {
   const pack = usePack();
-  const rotation = useRotation4();
   const layout = useHomeLayout();
   const { insets } = layout;
   const { dark, colors } = useAutoPaperTheme4();
@@ -1097,12 +1077,19 @@ function HomeMenu() {
   const closePicker = pickerHost.close;
   useEffect6(() => {
     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 = useMemo6(() => 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] = useState6(() => tabs?.[0].label ?? null);
+  const tab = tabs ? tabs.find((t) => t.label === tabLabel) ?? tabs[0] : null;
+  const tabButtons = useMemo6(() => tabs?.map(({ label }) => ({ value: label, label })) ?? [], [tabs]);
+  const tabBar = tab && /* @__PURE__ */ jsx14(SegmentedButtons, { value: tab.label, onValueChange: setTabLabel, buttons: tabButtons, style: [styles4.tabs, pack.Backdrop && { backgroundColor: colors.surface }] });
+  const columnClamp = useClampOnShrink();
+  const gridClamp = useClampOnShrink();
   const openGame = useCallback10((game) => openFirstTime(game.id, () => router3.push(game.useLoadout ? loadoutHref(game.id) : playHref(game.id))), [openFirstTime]);
   const openRules = useCallback10((game) => game.Rules ? setRulesGame(game) : openFor(game.id), [openFor]);
   const colorSection = { value: p1Color, onChange: handleP1ColorChange, swatches: defaultColors2, caption: selectedProfile ? pack.colorCaption : void 0, previewValue: previewColor ? (hex) => previewColor(hex, dark) : void 0 };
@@ -1113,42 +1100,74 @@ function HomeMenu() {
   const pressAway = /* @__PURE__ */ jsx14(PressAwayOverlay2, { active: pickerHost.openId !== null, onPress: pickerHost.close, style: styles4.pressAway });
   const RulesSheet = rulesGame?.Rules;
   return /* @__PURE__ */ jsxs6(View4, { style: [styles4.container, { backgroundColor: bg }], children: [
-    /* @__PURE__ */ jsx14(FakeLandscapeView2, { style: styles4.rotatable, children: /* @__PURE__ */ jsxs6(RulesHost, { enabled: pack.games.some((game) => game.Rules), children: [
+    /* @__PURE__ */ jsx14(View4, { style: styles4.frame, children: /* @__PURE__ */ jsxs6(RulesHost, { enabled: pack.games.some((game) => game.Rules), children: [
       isWide ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
         pressAway,
-        /* @__PURE__ */ jsx14(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__ */ jsx14(View4, { style: [styles4.grid, { width: layout.rightPaneWidth }], children: pack.games.map((game) => /* @__PURE__ */ jsx14(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__ */ jsxs6(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__ */ jsx14(View4, { style: [styles4.wideTabs, { width: layout.rightPaneWidth }], children: tabBar }),
+          /* @__PURE__ */ jsx14(View4, { style: [styles4.grid, { width: layout.rightPaneWidth }], children: pack.games.map((game) => /* @__PURE__ */ jsx14(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__ */ jsxs6(View4, { 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__ */ jsx14(pack.HeroTitle, { words: pack.wordmark, color: fg, p1Color, p2Color, active: heroActive, fit: layout.heroFit }),
           /* @__PURE__ */ jsx14(View4, { style: styles4.widePicker, children: picker })
         ] })
-      ] }) : /* @__PURE__ */ jsxs6(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__ */ jsxs6(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__ */ jsx14(pack.HeroTitle, { words: pack.wordmark, color: fg, p1Color, p2Color, active: heroActive }),
         /* @__PURE__ */ jsx14(View4, { style: [styles4.picker, pickerHost.openId !== null && styles4.pickerOpen], children: picker }),
-        /* @__PURE__ */ jsx14(View4, { style: styles4.list, children: pack.games.map((game) => /* @__PURE__ */ jsx14(GameRow, { game, dark, p1Color, p2Color, previewRevealed: previewsRevealed, onPress: () => openGame(game), onRules: hasRules(game) ? () => openRules(game) : void 0 }, game.id)) })
+        tabBar && /* @__PURE__ */ jsx14(View4, { style: styles4.listWidth, children: tabBar }),
+        /* @__PURE__ */ jsx14(View4, { style: styles4.list, children: pack.games.map((game) => /* @__PURE__ */ jsx14(GameRow, { game, hidden: isHidden(tab, game), dark, p1Color, p2Color, previewRevealed: previewsRevealed, onPress: () => openGame(game), onRules: hasRules(game) ? () => openRules(game) : void 0 }, game.id)) })
       ] }),
       /* @__PURE__ */ jsx14(IconButton, { icon: "trophy", iconColor: fg, size: 24, style: [styles4.corner, { top: 8 + insets.top, left: 8 + insets.left }], onPress: () => router3.push(STATS_HREF), accessibilityLabel: "Stats & Achievements" }),
       /* @__PURE__ */ jsx14(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__ */ jsx14(RulesSheet, { visible: true, onDismiss: () => setRulesGame(null) })
     ] }) }),
-    /* @__PURE__ */ jsx14(SettingsDialog, { visible: settingsOpen, onDismiss: () => setSettingsOpen(false), rotation, onShowHowToPlay: pack.guide ? openPack : void 0 })
+    /* @__PURE__ */ jsx14(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 = useRef5(null);
+  const sizes = useRef5({ viewport: 0, offset: 0 });
+  return useMemo6(
+    () => ({
+      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__ */ jsx14(Portal.Host, { children }) : /* @__PURE__ */ jsx14(Fragment4, { children });
 }
-function GameRow({ game, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
+function GameRow({ game, hidden, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
   const well = 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__ */ jsxs6(View4, { children: [
+    /* @__PURE__ */ jsxs6(View4, { style: hidden ? styles4.hidden : void 0, children: [
       /* @__PURE__ */ jsxs6(Pressable, { onPress, style: [styles4.row, { backgroundColor: well.bg }], accessibilityRole: "button", accessibilityLabel: game.title, children: [
         game.Preview ? /* @__PURE__ */ jsx14(PreviewBox, { game, width: ROW_PREVIEW_WIDTH, revealed: previewRevealed, dark, p1Color, p2Color }) : /* @__PURE__ */ jsx14(View4, { style: [styles4.rowIcon, { backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }], children: GameIcon && /* @__PURE__ */ jsx14(GameIcon, { size: ROW_ICON_SIZE, p1Color, p2Color, dark }) }),
         /* @__PURE__ */ jsxs6(View4, { style: styles4.rowText, children: [
@@ -1160,9 +1179,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 = useWellColors();
-  return /* @__PURE__ */ jsxs6(View4, { style: { width }, children: [
+  return /* @__PURE__ */ jsxs6(View4, { style: [{ width }, hidden && styles4.hidden], children: [
     /* @__PURE__ */ jsxs6(Pressable, { onPress, style: [styles4.tile, { backgroundColor: well.bg }], accessibilityRole: "button", accessibilityLabel: game.title, children: [
       /* @__PURE__ */ jsx14(PreviewBox, { game, width: previewWidth, revealed: previewRevealed, dark, p1Color, p2Color }),
       /* @__PURE__ */ jsx14(Text, { variant: "titleMedium", style: [styles4.rowTitle, { color: well.fg }], numberOfLines: 1, children: game.title }),
@@ -1192,18 +1211,30 @@ var styles4 = StyleSheet4.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"
   },
@@ -1229,9 +1260,6 @@ var styles4 = StyleSheet4.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: {
@@ -1266,6 +1294,10 @@ var styles4 = StyleSheet4.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,
@@ -1304,6 +1336,10 @@ var styles4 = StyleSheet4.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
   }
 });
 
@@ -1329,7 +1365,7 @@ import { BaseStatsScreen, PressAwayOverlay as PressAwayOverlay3, RotatedFrame as
 import { getOptionPickerContentSize as getOptionPickerContentSize2, OptionPicker as OptionPicker2 } from "@tastic/profile";
 import { useMemo as useMemo7, useState as useState7 } from "react";
 import { StyleSheet as StyleSheet5, View as View5 } from "react-native";
-import { SegmentedButtons, Text as Text2 } from "react-native-paper";
+import { SegmentedButtons as SegmentedButtons2, Text as Text2 } from "react-native-paper";
 import { useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-context";
 import { useDispatch as useDispatch10 } from "react-redux";
 import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -1387,7 +1423,7 @@ function StatsContent({ pickerHost }) {
   const PackTabContent = packTab?.Content;
   return /* @__PURE__ */ jsxs7(BaseStatsScreen, { title, onBack: 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__ */ jsx16(PressAwayOverlay3, { active: pickerHost.openId !== null, onPress: pickerHost.close, style: styles5.pressAway }),
-    /* @__PURE__ */ jsx16(SegmentedButtons, { value: tab, onValueChange: setTab, buttons: tabButtons, style: [styles5.tabs, surface] }),
+    /* @__PURE__ */ jsx16(SegmentedButtons2, { value: tab, onValueChange: setTab, buttons: tabButtons, style: [styles5.tabs, surface] }),
     /* @__PURE__ */ jsxs7(View5, { style: [styles5.filters, pickerHost.openId !== null && styles5.filtersOpen], onStartShouldSetResponder: () => pickerHost.openId !== null, children: [
       profiles.length > 0 && /* @__PURE__ */ jsx16(OptionPicker2, { 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__ */ jsx16(OptionPicker2, { id: GAME_PICKER_ID, host: pickerHost, options: gameOptions, value: gameId, onChange: setGameId, color: colors.primary, dark, icon: "view-grid-outline", alignOverride: gameAlign, triggerStyle })