@tastic/shell 0.4.0 → 0.6.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,7 +946,6 @@ 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";
@@ -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,7 +1077,7 @@ 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;
@@ -1120,7 +1100,7 @@ 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__ */ 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: [
@@ -1142,7 +1122,7 @@ function HomeMenu() {
       /* @__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";
@@ -1231,6 +1211,9 @@ 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",
@@ -1277,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: {
@@ -1512,6 +1492,46 @@ function imageGameIcon(images) {
   };
 }
 
+// src/components/MatchChips.tsx
+import { useAutoPaperTheme as useAutoPaperTheme6 } from "@rific/auto-paper";
+import { IconButton as IconButton2 } from "@rific/feedback-press";
+import { useEffect as useEffect7 } from "react";
+import { Platform as Platform3, StyleSheet as StyleSheet6, useWindowDimensions as useWindowDimensions2 } from "react-native";
+import Animated2, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useSafeAreaInsets as useSafeAreaInsets4 } from "react-native-safe-area-context";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+var MATCH_CHIPS_DESKTOP_MIN_WIDTH = 768;
+var MATCH_CHIPS_FADE_MS = 150;
+var CHIP_SIZE = 48;
+var EDGE_PAD = 8;
+function MatchChips({ playing, faceToFace, centerLineY, onBack, onSettings }) {
+  const { width, height } = useWindowDimensions2();
+  const insets = useSafeAreaInsets4();
+  const { dark } = useAutoPaperTheme6();
+  const desktopWeb = Platform3.OS === "web" && width >= MATCH_CHIPS_DESKTOP_MIN_WIDTH;
+  const visible = desktopWeb || !playing;
+  const opacity = useSharedValue(visible ? 1 : 0);
+  useEffect7(() => {
+    opacity.value = withTiming(visible ? 1 : 0, { duration: MATCH_CHIPS_FADE_MS });
+  }, [visible]);
+  const fadeStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
+  const iconColor = dark ? "#FFFFFF" : "#000000";
+  const containerColor = dark ? "rgba(0,0,0,0.55)" : "rgba(255,255,255,0.55)";
+  const between = faceToFace && !desktopWeb;
+  const top = between ? (centerLineY ?? height / 2) - CHIP_SIZE / 2 : EDGE_PAD + insets.top;
+  const backSlot = { top, left: EDGE_PAD + insets.left };
+  const settingsSlot = { top, right: EDGE_PAD + insets.right };
+  const pointerEvents = visible ? "box-none" : "none";
+  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
+    /* @__PURE__ */ jsx18(Animated2.View, { pointerEvents, style: [styles6.slot, backSlot, fadeStyle], testID: "match-chips-back", children: /* @__PURE__ */ jsx18(IconButton2, { icon: "arrow-left", iconColor, containerColor, style: styles6.chip, size: 24, onPress: onBack, accessibilityLabel: "Back" }) }),
+    /* @__PURE__ */ jsx18(Animated2.View, { pointerEvents, style: [styles6.slot, settingsSlot, fadeStyle], testID: "match-chips-settings", children: /* @__PURE__ */ jsx18(IconButton2, { icon: "cog", iconColor, containerColor, style: styles6.chip, size: 24, onPress: onSettings, accessibilityLabel: "Settings" }) })
+  ] });
+}
+var styles6 = StyleSheet6.create({
+  chip: { margin: 0 },
+  slot: { position: "absolute" }
+});
+
 // src/hooks/useActiveRound.ts
 import { useSelector as useSelector8 } from "react-redux";
 function useActiveRound(game, defaults) {
@@ -1656,7 +1676,7 @@ function forgetProfileAchievements(dropStats) {
 // src/gameStats.tsx
 import { createAchievementsSlice, mapUnlocksBySeat, useAchievements } from "@tastic/achievements";
 import { createContext as createContext5, useCallback as useCallback11, useContext as useContext5, useMemo as useMemo8 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var SEATS = [1, 2];
 function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileStatsView }) {
   const { actions: actions6, reducer: sliceReducer } = createAchievementsSlice({
@@ -1689,7 +1709,7 @@ function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileS
       [recordOutcome]
     );
     const value = useMemo8(() => ({ stats, unlockedAchievements, record, resetAll }), [stats, unlockedAchievements, record, resetAll]);
-    return /* @__PURE__ */ jsx18(Context.Provider, { value, children });
+    return /* @__PURE__ */ jsx19(Context.Provider, { value, children });
   }
   function useStats() {
     const ctx = useContext5(Context);
@@ -1767,6 +1787,9 @@ export {
   GUEST_PLAYER_ID,
   HomeScreen,
   LoadoutRoute,
+  MATCH_CHIPS_DESKTOP_MIN_WIDTH,
+  MATCH_CHIPS_FADE_MS,
+  MatchChips,
   PREVIEW_ASPECT,
   PackProvider,
   PlayRoute,