@tastic/shell 0.4.0 → 0.5.0

package/src/RootLayout.tsx

@@ -1,12 +1,11 @@
 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 { ReactNode, useCallback, useMemo } from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
@@ -19,7 +18,6 @@ import { GuideHost } from './components/GuideHost'
 import { Providers } from './components/Providers'
 import { Theme } from './components/Theme'
 import { UpdateDialog } from './components/UpdateDialog'
-import { useAppSettings } from './hooks/useAppSettings'
 import { LastActiveGameProvider } from './hooks/useLastActiveGame'
 import { ProfilesProvider, useProfiles } from './hooks/useProfiles'
 import { PackProvider, usePack } from './PackContext'
@@ -38,15 +36,13 @@ import type { PackDefinition, PackGameDefinition } from './types'
 // a play screen and wins (confirmed on-device in LightCycles, where it kicked the player back to the title
 // screen mid-round instead of turning their cycle). Web has no such OS-level gesture.
 //
-// useRotationAwareStatusBar (@tastic/core) hides the OS status bar whenever the content is rotated
-// off portrait. It does it through screen options because that is the only way left: an app linked
-// against the iOS 27 SDK can't set the status bar app-wide, which is all React Native's StatusBar
-// (and expo-status-bar) does on iOS, and with @tastic/core's config plugin on, every mounted
-// StatusBar logs an error. So nothing in the app mounts one (Theme passes auto-paper's Provider
-// statusBar={false}). No `locked` argument: OrientationBridge already freezes the reading it
-// follows. A play screen hides the bar for the whole round, whatever the angle (a screen's own
-// options win over screenOptions); index is listed first so it stays the stack's first route.
-// A game with keepStatusBar (Solitaire's) keeps the screen options' rotation-aware bar instead.
+// The status bar is set through screen options because that is the only way left: an app linked
+// against the iOS 27 SDK can't set the status bar app-wide, which is all React Native's StatusBar (and
+// expo-status-bar) does on iOS, and with UIViewControllerBasedStatusBarAppearance on (each app's
+// ios.infoPlist), every mounted StatusBar logs an error. So nothing in the app mounts one (Theme passes
+// auto-paper's Provider statusBar={false}). A play screen hides the bar for the whole round (a screen's
+// own options win over screenOptions); index is listed first so it stays the stack's first route. A
+// game with keepStatusBar (Solitaire's) keeps the stack's bar instead.
 const PLAY_OPTIONS = { statusBarHidden: true }
 const KEEP_STATUS_BAR_OPTIONS = {}
 
@@ -76,7 +72,7 @@ function AppStack() {
   const rootBackground = useThemedRootBackground(darkRoot, false)
   // The status bar's text follows the app's theme, not the phone's appearance (react-native-screens'
   // default `auto`), which drew dark text on a dark theme's black Home with the phone set to light.
-  const statusBar = useRotationAwareStatusBar({ style: darkRoot ? 'light' : 'dark' })
+  const statusBarStyle = darkRoot ? ('light' as const) : ('dark' as const)
   const packOptions = (pack.useScreenOptions ?? noScreenOptions)()
   // Over a backdrop every screen is transparent, and Android crossfades: its default push and pop hold
   // the outgoing screen opaque for ~450ms while the new one slides over it, which would show Home
@@ -96,7 +92,7 @@ function AppStack() {
   }, [darkRoot, navigationBackground])
   const stack = (
     <NavigationThemeProvider value={navigationTheme}>
-      <Stack screenOptions={{ ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }}>
+      <Stack screenOptions={{ ...rootBackground, statusBarStyle, ...backdropOptions, ...packOptions }}>
         <Stack.Screen name='index' />
         <Stack.Screen name='play/[game]' options={playOptions} />
       </Stack>
@@ -111,38 +107,6 @@ function AppStack() {
   )
 }
 
-// Wires the persisted Lock Orientation setting into @tastic/core's OrientationProvider. Its own
-// component because RootLayout renders the Redux store (inside Providers) and so can't call
-// useAppSettings() itself. Providers' PersistGate holds rendering until the store has rehydrated, so
-// lockInitialValue carries the saved lock from the very first render.
-//
-// freezeWhileLocked makes the lock app-wide: while appSettings.lockOrientation is on, the ONE shared
-// orientation reading freezes for every consumer (every screen, every board, hud dialogs, the
-// status bar), including anything that mounts after the lock, so no call site ever takes a `locked`
-// argument of its own (one would freeze on the pre-sensor default at mount). The Settings dialog
-// toggle only writes appSettings.lockOrientation, which reaches the provider as a changed
-// lockInitialValue; the provider reports the angle it froze on through onLockChange (`rotation`,
-// cleared on unlock), persisted as appSettings.lockedRotation and handed back here so a relaunch reopens
-// in the locked orientation instead of portrait.
-//
-// Mounted once, here, rather than per screen: one app-lifetime sensor subscription is what lets the
-// committed orientation survive navigation. deviceMotion is the app's own expo-sensors import, handed
-// in because @tastic/core never imports expo-sensors itself (apps without tilt tracking would
-// otherwise need it installed just to bundle).
-//
-// portraitWhileKeyboard (PackDefinition.portraitWhileKeyboard): the software keyboard can't turn with a
-// faked rotation, so a pack that has the player type sideways (a profile's name) reads portrait while
-// it's up.
-function OrientationBridge({ children }: { children: ReactNode }) {
-  const { settings, setSettings } = useAppSettings()
-  const { portraitWhileKeyboard } = usePack()
-  return (
-    <OrientationProvider deviceMotion={DeviceMotion} freezeWhileLocked lockInitialValue={{ locked: settings.lockOrientation, rotation: settings.lockedRotation }} onLockChange={(next) => setSettings({ lockOrientation: next.locked, lockedRotation: next.rotation })} portraitWhileKeyboard={portraitWhileKeyboard}>
-      {children}
-    </OrientationProvider>
-  )
-}
-
 // ProfilesProvider reconciles the local roster with the shared App Group one before `loaded` flips,
 // so a screen mounting earlier would read (and could persist) the wrong profiles. This holds
 // everything nested inside it, and the splash screen, until that's done, while ProfilesProvider sits
@@ -163,7 +127,7 @@ function GatedApp({ children }: { children: ReactNode }) {
 // either is ever shown. Must render inside Providers, whose FeedbackBridge provides the setting.
 //
 // A pack with its own Toaster gets no Paper here: with Paper the toaster draws through a Paper Portal,
-// which would take its toasts out of the turned frame PackToaster lays them in.
+// which would take its toasts out of the frame PackToaster lays them in.
 function HapticGatedToastProvider({ children }: { children: ReactNode }) {
   const { settings } = useHapticSettings()
   const { Toaster: PackToasterComponent } = usePack()
@@ -186,10 +150,10 @@ function RotatingToaster() {
   return <Toaster historyButton={null} clearButton={null} limit={3} renderFrame={renderFrame} />
 }
 
-// The pack's own toaster (PackDefinition.Toaster), laid over the whole app in a frame turned with the
-// phone: passThrough, so only a toast claims a touch over the stack, and rotatedSafeArea, so the
-// toaster's own safe-area reading lands on the frame's edges. The absoluteFill wrapper takes the frame
-// out of the layout beside the stack.
+// The pack's own toaster (PackDefinition.Toaster), laid over the whole app in hud's RotatedFrame, which
+// nothing turns since @tastic/core 0.15: passThrough, so only a toast claims a touch over the stack, and
+// rotatedSafeArea, so the toaster reads the safe area. The absoluteFill wrapper takes the frame out of
+// the layout beside the stack.
 function PackToaster({ Toaster: PackToasterComponent }: { Toaster: NonNullable<PackDefinition['Toaster']> }) {
   return (
     <View style={StyleSheet.absoluteFill} pointerEvents='box-none'>
@@ -243,24 +207,21 @@ export function RootLayout({ pack, store, persistor }: RootLayoutProps) {
                     <GameProviders games={pack.games}>
                       <PackRoot pack={pack}>
                         <GatedApp>
-                          <OrientationBridge>
-                            <HapticGatedToastProvider>
-                              {/* Wraps the stack (rather than sitting beside it like UpdateDialog)
+                          <HapticGatedToastProvider>
+                            {/* Wraps the stack (rather than sitting beside it like UpdateDialog)
                             because Home's tiles and the loadout's How to Play row reach it through
-                            context (see GuideHost). Inside the toast provider and OrientationBridge
-                            because the card renders through a Portal and rotates with the shared
-                            reading, and inside the gate so it mounts together with Home rather than
-                            before it. */}
-                              <GuideHost>
-                                <AppStack />
-                              </GuideHost>
-                              {/* historyButton/clearButton off: there's no toast history to open, and a
+                            context (see GuideHost). Inside the toast provider because the card renders
+                            through a Portal, and inside the gate so it mounts together with Home rather
+                            than before it. */}
+                            <GuideHost>
+                              <AppStack />
+                            </GuideHost>
+                            {/* historyButton/clearButton off: there's no toast history to open, and a
                             control row for it above the toast stack would go nowhere. limit pins the
                             package's current default (3) so a future toaster release can't change it. */}
-                              {pack.Toaster ? <PackToaster Toaster={pack.Toaster} /> : <RotatingToaster />}
-                              <UpdateDialog />
-                            </HapticGatedToastProvider>
-                          </OrientationBridge>
+                            {pack.Toaster ? <PackToaster Toaster={pack.Toaster} /> : <RotatingToaster />}
+                            <UpdateDialog />
+                          </HapticGatedToastProvider>
                         </GatedApp>
                       </PackRoot>
                     </GameProviders>

package/src/components/GuideHost.tsx

@@ -1,4 +1,4 @@
-import { useIsTouchPrimaryDevice, useRotation } from '@tastic/core'
+import { useIsTouchPrimaryDevice } from '@tastic/core'
 import { GuideProvider, useGuide } from '@tastic/hud/guide'
 import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { shallowEqual, useDispatch, useSelector, useStore } from 'react-redux'
@@ -38,9 +38,8 @@ interface Props {
 // the pack's own (PackDefinition.guide, cards that teach every game at once), or a game's. Each
 // game's cards come from its own registry entry (GameDefinition.guide), built from the live settings
 // and seat 2 so a replay after any loadout change describes the next match. Mounted around the stack
-// in RootLayout, inside the toast provider and OrientationBridge because the card renders through a
-// Portal and turns with the shared reading (`rotation`, the same one Home hands its Settings dialog),
-// and inside the profiles gate so it mounts together with Home.
+// in RootLayout, inside the toast provider because the card renders through a Portal, and inside the
+// profiles gate so it mounts together with Home.
 export function GuideHost({ children }: Props) {
   const pack = usePack()
   const [subject, setSubject] = useState(() => (pack.guide ? PACK_GUIDE : (pack.games.find((g) => g.guide)?.id ?? null)))
@@ -48,7 +47,6 @@ export function GuideHost({ children }: Props) {
   const game = subject === PACK_GUIDE ? undefined : pack.games.find((g) => g.id === subject)
   const gameGuide = game?.guide
 
-  const rotation = useRotation()
   const touch = useIsTouchPrimaryDevice()
   const seatTwo = useSelector((state: ShellState) => state.opponent.seatTwo)
   const input = useSelector((state: ShellState) => (gameGuide ? gameGuide.selectInput(state) : NO_INPUT), shallowEqual)
@@ -68,7 +66,7 @@ export function GuideHost({ children }: Props) {
   )
 
   return (
-    <GuideProvider steps={steps} currentVersion={(packGuide ?? gameGuide)?.version ?? 0} seenVersion={seenVersion} onSeen={onSeen} rotation={rotation}>
+    <GuideProvider steps={steps} currentVersion={(packGuide ?? gameGuide)?.version ?? 0} seenVersion={seenVersion} onSeen={onSeen}>
       <GameGuideBridge onPick={setSubject}>{children}</GameGuideBridge>
     </GuideProvider>
   )

package/src/components/SettingsDialog.tsx

@@ -1,5 +1,4 @@
 import { useUpdateErrorToast } from '@rific/toaster'
-import { ViewRotation } from '@tastic/core'
 import { BaseSettingsDialog } from '@tastic/hud/chrome'
 import type { ReactNode } from 'react'
 
@@ -9,11 +8,6 @@ import { usePack } from '../PackContext'
 export interface SettingsDialogProps {
   visible: boolean
   onDismiss: () => void
-  // Live physical-hold rotation (see @tastic/core's useRotation). BaseSettingsDialog lays the sheet
-  // out in its own frame turned by this (see @tastic/hud's RotatedFrame), so it reads right-side-up
-  // and fits the short edge however the phone is held. Defaults to 0 for a call site that doesn't
-  // track one.
-  rotation?: ViewRotation
   // Shows the How to Play row, which opens this game's cards (a loadout passes its game's opener).
   // Left out on Home, where each tile's rules button does it, and in a match, where opening
   // Settings pauses play.
@@ -23,12 +17,12 @@ export interface SettingsDialogProps {
   children?: ReactNode
 }
 
-// The pack-wide Settings dialog: everything the shell puts in it applies to every game (Lock
-// Orientation, Edge Guard, theme, sound, haptics, Keep Awake), so it reads and writes the app
+// The pack-wide Settings dialog: everything the shell puts in it applies to every game (Edge Guard,
+// theme, sound, haptics, Keep Awake), so it reads and writes the app
 // settings itself. Under those, a play screen's own rows and then the pack's own sections
 // (PackDefinition.SettingsSections), in every Settings dialog the pack opens. A pack with edgeGuard
 // false gets no Edge Guard row: hud draws it on iOS whenever its props are passed.
-export function SettingsDialog({ visible, onDismiss, rotation = 0, onShowHowToPlay, children }: SettingsDialogProps) {
+export function SettingsDialog({ visible, onDismiss, onShowHowToPlay, children }: SettingsDialogProps) {
   const onUpdateError = useUpdateErrorToast()
   const { settings, setSettings } = useAppSettings()
   // The pack's otaVersion (src/constants/release.ts, which the OTA tooling bumps).
@@ -36,7 +30,7 @@ export function SettingsDialog({ visible, onDismiss, rotation = 0, onShowHowToPl
   const edgeGuardProps = edgeGuard ? { deferBottomEdgeGestures: settings.deferBottomEdgeGestures, onDeferBottomEdgeGestures: (value: boolean) => setSettings({ deferBottomEdgeGestures: value }) } : {}
 
   return (
-    <BaseSettingsDialog visible={visible} onDismiss={onDismiss} rotation={rotation} version={otaVersion} lockOrientation={settings.lockOrientation} onLockOrientationChange={(value) => setSettings({ lockOrientation: value })} {...edgeGuardProps} onUpdateError={onUpdateError} onShowHowToPlay={onShowHowToPlay}>
+    <BaseSettingsDialog visible={visible} onDismiss={onDismiss} version={otaVersion} {...edgeGuardProps} onUpdateError={onUpdateError} onShowHowToPlay={onShowHowToPlay}>
       {children}
       {SettingsSections && <SettingsSections />}
     </BaseSettingsDialog>

package/src/components/Theme.tsx

@@ -61,8 +61,9 @@ export function Theme({ children }: Props) {
   // iOS/Android (the Settings sheet's and Rules' rows above Done, @tastic/profile's dropdown lists
   // above Manage); without it they just scroll with a hard edge. Web needs nothing.
   // statusBar={false}: auto-paper renders no React Native StatusBar (here or in Appbar.Header). The
-  // status bar is set per screen (_layout.tsx's useRotationAwareStatusBar), and with @tastic/core's
-  // config plugin on, a mounted StatusBar logs an error (a red box in a dev build).
+  // status bar is set through the stack's screen options (RootLayout's AppStack), and with
+  // UIViewControllerBasedStatusBarAppearance on (each app's ios.infoPlist), a mounted StatusBar logs an
+  // error (a red box in a dev build).
   // reanimated is what makes Dialog's own animatedStyle prop do anything (Metro won't pick up a
   // require()-in-try/catch from this package's ESM build, so the module is handed in); nothing else in
   // auto-paper reads it. fontFamily is the pack's (PackDefinition.fontFamily): set, it goes on every

package/src/components/UpdateDialog.tsx

@@ -1,5 +1,4 @@
 import { useUpdateErrorToast } from '@rific/toaster'
-import { useRotation } from '@tastic/core'
 import { UpdateDialog as SharedUpdateDialog } from '@tastic/hud/chrome'
 
 // Thin bridge onto the fleet-shared @tastic/hud UpdateDialog, which now owns the useUpdater()
@@ -8,6 +7,5 @@ import { UpdateDialog as SharedUpdateDialog } from '@tastic/hud/chrome'
 // directly in _layout.tsx) purely so this app's own onError -> toast wiring has one place to live.
 export function UpdateDialog() {
   const onError = useUpdateErrorToast()
-  const rotation = useRotation()
-  return <SharedUpdateDialog onError={onError} rotation={rotation} />
+  return <SharedUpdateDialog onError={onError} />
 }

package/src/hooks/useFrozenWhileHidden.ts

@@ -5,9 +5,9 @@ import { useState } from 'react'
 // Solitaire's components/useFrozenWhileHidden.ts as it was.
 //
 // Home holds its layout with it while another screen covers it (screens/HomeScreen.tsx): Home stays
-// mounted beneath every screen the stack pushes and keeps following the rotation, and crossing the
+// mounted beneath every screen the stack pushes and keeps following the window, and crossing the
 // upright/wide threshold swaps its whole tree (every tile, the hero, seat 1's button), invisible work
-// landing in the same commit as the covering screen's own rotation update. While covered the layout is
+// landing in the same commit as the covering screen's own update for the new window. While covered the layout is
 // held where it was; it catches up (one swap, visible) when Home is shown again.
 export function useFrozenWhileHidden<T>(value: T, hidden: boolean): T {
   // React's own sanctioned "adjust state during render" shape (see react.dev's guide of the same

package/src/redux/appSettingsSlice.ts

@@ -1,24 +1,13 @@
 import { createSettingsSlice } from '@rific/core'
-import type { ViewRotation } from '@tastic/core'
 
 // Settings that apply to the whole pack rather than one game. A game's own rules (board, score to
 // win, controls) live in that game's own settings slice.
 export interface AppSettings {
-  // Lock Orientation: RootLayout's OrientationBridge hands it to @tastic/core's OrientationProvider
-  // (freezeWhileLocked), which freezes the one shared orientation reading for every screen, every
-  // board, dialogs and the status bar alike. Off by default: all of those just follow however the
-  // device is actually being held.
-  lockOrientation: boolean
-  // The angle the lock is holding. Written by OrientationProvider's onLockChange (recorded on lock,
-  // cleared on unlock) and handed back as lockInitialValue, so a relaunch reopens in the locked
-  // orientation instead of portrait. Never set by the UI directly; absent while unlocked.
-  lockedRotation?: ViewRotation
   // Edge Guard's opt-in (see Providers.tsx's EdgeGuardBridge).
   deferBottomEdgeGestures: boolean
 }
 
 export const DEFAULT_APP_SETTINGS: AppSettings = {
-  lockOrientation: false,
   deferBottomEdgeGestures: false
 }
 

package/src/screens/HomeScreen.tsx

@@ -1,6 +1,5 @@
 import { defaultColors, FadingScrollView, useAutoPaperTheme } from '@rific/auto-paper'
 import { IconButton, Pressable } from '@rific/feedback-press'
-import { FakeLandscapeView, useRotation } from '@tastic/core'
 import { PressAwayOverlay, usePopoverHost, useWellColors, WELL_SHADOW } from '@tastic/hud/chrome'
 import { getProfilePickerContentSize, type Profile, ProfilePicker, type ProfilePickerColorSection } from '@tastic/profile'
 import { Redirect, router, useIsFocused } from 'expo-router'
@@ -53,7 +52,6 @@ export function HomeScreen() {
 
 function HomeMenu() {
   const pack = usePack()
-  const rotation = useRotation()
   const layout = useHomeLayout()
   const { insets } = layout
   const { dark, colors } = useAutoPaperTheme()
@@ -79,7 +77,7 @@ function HomeMenu() {
 
   // Tiles: while any game in the pack has a preview, a wide screen lays the games out as a grid beside
   // the hero (homeLayout.ts). Home stays mounted beneath every screen the stack pushes and keeps
-  // following the rotation, so while it's covered the layout is held where it was (see
+  // following the window, so while it's covered the layout is held where it was (see
   // useFrozenWhileHidden); it catches up when Home is shown again. Only the choice of layout is held:
   // the panes' numbers follow the window, unseen under the screen covering Home.
   const tiled = pack.games.some((game) => game.Preview)
@@ -95,13 +93,13 @@ function HomeMenu() {
     return () => cancelAnimationFrame(id)
   }, [tiled])
   // A popover is placed once, as it opens, from measurements of the frame it opens in. Turning the
-  // phone (or any resize) moves the frame under it, and switching between the column and the two panes
+  // device (or any resize) moves the frame under it, and switching between the column and the two panes
   // unmounts the very button it hangs off, which would leave the press-away overlay up with nothing to
   // dismiss. So every layout change closes it.
   const closePicker = pickerHost.close
   useEffect(() => {
     closePicker()
-  }, [isWide, rotation, layout.windowWidth, layout.windowHeight, closePicker])
+  }, [isWide, layout.windowWidth, layout.windowHeight, closePicker])
 
   // Over the pack's Backdrop Home draws nothing of its own behind the menu.
   const bg = pack.Backdrop ? 'transparent' : dark ? '#000000' : '#FFFFFF'
@@ -150,10 +148,9 @@ function HomeMenu() {
 
   return (
     <View style={[styles.container, { backgroundColor: bg }]}>
-      {/* Reads correctly however the phone is held: see @tastic/core's FakeLandscapeView. The
-      Settings dialog stays outside it: it renders through a Portal, turned by its own `rotation`. A
-      game's rules sheet renders inside it instead (see RulesHost). */}
-      <FakeLandscapeView style={styles.rotatable}>
+      {/* The Settings dialog stays outside this frame: it renders through a Portal. A game's rules
+      sheet renders inside it instead (see RulesHost). */}
+      <View style={styles.frame}>
         <RulesHost enabled={pack.games.some((game) => game.Rules)}>
           {isWide ? (
             <>
@@ -201,11 +198,11 @@ function HomeMenu() {
           <IconButton icon='cog' iconColor={fg} size={24} style={[styles.corner, { top: 8 + insets.top, right: 8 + insets.right }]} onPress={() => setSettingsOpen(true)} accessibilityLabel='Settings' />
           {RulesSheet && <RulesSheet visible onDismiss={() => setRulesGame(null)} />}
         </RulesHost>
-      </FakeLandscapeView>
+      </View>
 
       {/* Home's How to Play row replays the pack's own cards (PackDefinition.guide); without them each
       tile's rules button shows its game's. */}
-      <SettingsDialog visible={settingsOpen} onDismiss={() => setSettingsOpen(false)} rotation={rotation} onShowHowToPlay={pack.guide ? openPack : undefined} />
+      <SettingsDialog visible={settingsOpen} onDismiss={() => setSettingsOpen(false)} onShowHowToPlay={pack.guide ? openPack : undefined} />
     </View>
   )
 }
@@ -258,9 +255,8 @@ function hasRules(game: PackGameDefinition): boolean {
   return !!(game.Rules || game.guide)
 }
 
-// A game's rules sheet (GameDefinition.Rules) portals into a Paper host inside Home's turned frame, so
-// it's turned with the frame and laid out against it (a sheet laid out against the upright window ran
-// off a phone held sideways). Only in a pack with one: a pack without keeps the frame as it was.
+// A game's rules sheet (GameDefinition.Rules) portals into a Paper host inside Home's frame, so it's
+// laid out against Home's safe area. Only in a pack with one: a pack without keeps the frame as it was.
 function RulesHost({ enabled, children }: { enabled: boolean; children: ReactNode }) {
   return enabled ? <Portal.Host>{children}</Portal.Host> : <>{children}</>
 }
@@ -386,6 +382,9 @@ const styles = 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',
@@ -432,9 +431,6 @@ const styles = 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: {

package/src/screens/LoadoutScreen.tsx

@@ -1,12 +1,12 @@
 import { defaultColors, getRgb, useAutoPaperTheme } 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, SharedActionBand } from '@tastic/hud/lobby'
 import type { Profile } from '@tastic/profile'
 import { DualZoneLayout, needsSharedNeutralZone, useDualZoneLayout } from '@tastic/split-screen'
 import { router, useFocusEffect } from 'expo-router'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Platform, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
+import { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
 import Animated from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useDispatch } from 'react-redux'
@@ -24,11 +24,11 @@ import { liveplayActions } from '../redux/liveplaySlice'
 import { playHref, PROFILES_HREF } from '../routes'
 import { humanSeatsFor, type PackGameDefinition, roundModeFor, type Seat, type SeatTwo, seatTwoFor } from '../types'
 
-// The player-panel area: whenever a real device rotation changes orientationMode or which physical
-// side P1 lands on, the panels fade out, the layout underneath swaps while invisible, then they fade
-// back in - masking what would otherwise be an instant jump-cut as panels reflow or swap sides.
-// Short and symmetric on purpose: this is masking a reflow that already happened at the OS's own
-// pace, not a deliberate reveal.
+// The player-panel area: whenever the window changes shape (a tablet turning, a browser window
+// resized) and the panels go from face to face to side by side or back, they fade out, the layout
+// underneath swaps while invisible, then they fade back in - masking what would otherwise be an
+// instant jump-cut as panels reflow. Short and symmetric on purpose: this is masking a reflow that
+// already happened at the OS's own pace, not a deliberate reveal.
 const PANEL_SWAP_FADE_MS = 180
 
 // A game that has a loadout (GameDefinition.useLoadout): the loadout route sends any other straight
@@ -53,32 +53,24 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
   const { openFor } = useGameGuide()
 
   const { profiles, lastSelected, selectProfile } = useProfiles()
-  // orientationMode just follows the device's current physical tilt (see @tastic/core's
-  // useOrientationState), CPU games included - how you're holding the phone right now decides the
-  // panel arrangement, not a stored per-round choice. Lock Orientation pins it app-wide by freezing
-  // the shared reading itself (RootLayout's OrientationBridge), so this read takes no `locked`
-  // argument. The OS is portrait-locked; FakeLandscapeView below fakes the rest in JS.
-  const { orientationMode, p1OnRight, upsideDown, resolved: p1OnRightResolved } = useOrientationState()
+  // The window's shape (@tastic/core's useOrientationState): side by side in a window wider than tall,
+  // face to face otherwise. The OS turns the interface; a portrait-locked phone is always face to face.
+  const { orientationMode } = useOrientationState()
 
-  // The panel area's own layout lags one fade behind the live orientation above - see
-  // useDualZoneLayout's own comment. 2 Player seats its players the way the game's own board does
-  // (GameDefinition.twoPlayerSeats): face to face however the phone is held, P1 in the bottom half
-  // and P2 in the top, flipped for an upside-down hold where the game flips too, so each player gets
-  // the same half here and in the match. On the web a game may seat them side by side instead.
-  const fixedSeats = p2IsHuman && (!!game.twoPlayerSeats?.faceToFaceOnWeb || Platform.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)
+  // The panel area's own layout lags one fade behind the window above - see useDualZoneLayout's own
+  // comment. 2 Player seats its players the way the game's own board does: face to face (P1 in the
+  // bottom half, P2 in the top) in any window, unless the game seats them side by side in a wide one
+  // (GameDefinition.sideBySideWhenWide), P1 on the left, so each player gets the same half here and
+  // in the match. With one person the panels follow the window.
+  const panelMode = p2IsHuman && !game.sideBySideWhenWide ? 'faceToFace' : orientationMode
+  const { panelLayout, panelFadeStyle } = useDualZoneLayout(panelMode, false, true, false, PANEL_SWAP_FADE_MS)
   // split-screen types the fade as a style for any component (useAnimatedStyle's DefaultStyle). An app
   // whose types widen Text's style (Expo's react-native-web types, which a generated expo-env.d.ts pulls
   // in, make its cursor any string) can't hand that to Animated.View. It only ever sets opacity.
   const playersRowFade = panelFadeStyle as unknown as StyleProp<ViewStyle>
 
   const [settingsOpen, setSettingsOpen] = useState(false)
-  // Safe-area insets are relative to the device's fixed portrait frame; rotateInsets remaps them
-  // onto whichever edge they land on once FakeLandscapeView turns the content, so `top`/`left`/
-  // `right` below always mean the screen's real, visual edges.
-  const rotation = getViewRotation(panelLayout.orientationMode, panelLayout.p1OnRight, panelLayout.upsideDown)
-  const insets = rotateInsets(useSafeAreaInsets(), rotation)
+  const insets = useSafeAreaInsets()
   const { colors: themeColors, dark } = useAutoPaperTheme()
   const { p1Color, p2Color, handleP1ColorChange, handleP2ColorChange } = useSeatColors(p2IsHuman)
   const dispatch = useDispatch<Dispatch<Action>>()
@@ -142,9 +134,9 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
   const showMetaInSharedBand = needsSharedNeutralZone(panelLayout.orientationMode, humanSeats.length)
 
   // Where P2's own press-away zone lives on screen - matches panelLayout (what's actually painted
-  // right now, mid-fade included). Portrait puts P2's panel in the top half; landscape on whichever
-  // side isn't P1's. Only in 2 Player - otherwise seat 2 shares seat 1's host (see p2Host below).
-  const p2ZoneStyle = p2IsHuman ? (isPortrait ? styles.p2ZoneTop : panelLayout.p1OnRight ? styles.p2ZoneLeft : styles.p2ZoneRight) : null
+  // right now, mid-fade included). Portrait puts P2's panel in the top half; landscape on the right
+  // (P1 sits on the left). Only in 2 Player - otherwise seat 2 shares seat 1's host (see p2Host below).
+  const p2ZoneStyle = p2IsHuman ? (isPortrait ? styles.p2ZoneTop : styles.p2ZoneRight) : null
 
   // With one human, the one Ready button sits under both panels instead of in each.
   const showReadyButton = p2IsHuman
@@ -167,7 +159,6 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
 
   const optionsRow = loadout.options({
     host: controlsHost,
-    rotation,
     accentColor: themeColors.tertiary,
     mutedColor: fgMuted,
     onAccentColor: themeColors.onTertiary,
@@ -186,7 +177,7 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
     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 = <PlayerSetupPanel key={`p1-${layoutKey}`} idPrefix='p1' host={controlsHost} color={p1Color} onColorChange={handleP1ColorChange} swatches={defaultColors} takenColor={p2Exists ? p2Color : undefined} allowSwapTaken={mode === 'vsCpu'} colorCaption={pack.colorCaption} isHuman ready={ready[1]} onToggleReady={() => setReady((r) => ({ ...r, 1: !r[1] }))} dark={dark} showReadyButton={showReadyButton} secondPicker={p1Control} secondPickerId={p1Control ? 'p1-control' : undefined} profiles={profiles} selectedProfileId={lastSelected[1]} takenProfileId={p2IsHuman ? lastSelected[2] : null} guestLabel={pack.guestLabel ?? 'P1'} nullLabel={pack.nullLabel} onProfileSelect={handleP1ProfileSelect} onManageProfiles={() => router.push(PROFILES_HREF)} previewValue={seatPreview} triggerStyle={triggerStyle} useSeatPickerAlign={seatPickerAlign} />
   const p2Control = p2IsHuman ? loadout.seatControl(2, p2Host, { ...controlLook, seatColor: p2Drawn }) : undefined
@@ -195,10 +186,8 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
 
   return (
     <View style={[styles.container, { backgroundColor: bg }]}>
-      {/* Driven by panelLayout (the same committed, fade-masked state DualZoneLayout renders from),
-      so the rotation change and the panel swap land in the same fade-covered moment. The Settings
-      dialog stays outside: it renders through a Portal, turned by its own `rotation`. */}
-      <FakeLandscapeView orientationMode={panelLayout.orientationMode} p1OnRight={panelLayout.p1OnRight} upsideDown={panelLayout.upsideDown} style={styles.rotatable}>
+      {/* The Settings dialog stays outside this frame: it renders through a Portal. */}
+      <View style={styles.frame}>
         {/* Press-away overlays for the loadout's own menus. P1's covers the whole screen (their
         panel plus the match options read as theirs), while P2's covers only their half and, as a
         later sibling, takes priority there. P2's mounts whenever either host has a menu open, so it
@@ -225,15 +214,15 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
           <View style={styles.stackedZone}>
             {sharedControls}
             <Animated.View style={[styles.playersRow, anyPlayerPickerOpen && styles.playersRowOpen, playersRowFade]}>
-              {!isPortrait && panelLayout.p1OnRight ? p2Panel : p1Panel}
-              {!isPortrait && panelLayout.p1OnRight ? p1Panel : p2Panel}
+              {p1Panel}
+              {p2Panel}
             </Animated.View>
             <ReadyButton color={p1Drawn} ready={ready[1]} onToggleReady={() => setReady((r) => ({ ...r, 1: !r[1] }))} style={anyPlayerPickerOpen && styles.readyButtonHidden} />
           </View>
         )}
-      </FakeLandscapeView>
+      </View>
 
-      <SettingsDialog visible={settingsOpen} onDismiss={() => setSettingsOpen(false)} rotation={rotation} onShowHowToPlay={() => openFor(game.id)} />
+      <SettingsDialog visible={settingsOpen} onDismiss={() => setSettingsOpen(false)} onShowHowToPlay={() => openFor(game.id)} />
     </View>
   )
 }
@@ -249,12 +238,13 @@ const styles = 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,
@@ -289,14 +279,6 @@ const styles = 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

package/src/screens/ProfilesRoute.tsx

@@ -6,7 +6,7 @@ import { useProfiles } from '../hooks/useProfiles'
 import { safeBack } from '../navigation'
 import { usePack } from '../PackContext'
 
-// Widest the roster gets in the wide layout (a phone held sideways, a desktop window). Upright it's
+// Widest the roster gets in the wide layout (a landscape phone, a desktop window). Upright it's
 // never capped.
 const ROSTER_MAX_WIDTH = 640
 
@@ -14,10 +14,10 @@ const ROSTER_MAX_WIDTH = 640
 // stats and achievements in every game: each game's reducers listen for the removal (see
 // onProfileRemoved.ts).
 //
-// Turned with the phone like every other screen, in hud's RotatedFrame: ProfilesManager reads the
-// safe-area insets itself (the header's padding), so they're handed over remapped onto the frame's
-// edges (rotatedSafeArea); its delete confirm is a Paper Portal, which lands in a host inside the frame
-// and is turned with it (portalHost); and the roster's column is capped in the wide layout. Over a
+// In hud's RotatedFrame, which nothing turns since @tastic/core 0.15: ProfilesManager reads the
+// safe-area insets itself (the header's padding), handed over by rotatedSafeArea; its delete confirm is a
+// Paper Portal, which lands in a host inside the frame (portalHost); and the roster's column is capped in
+// the wide layout. Over a
 // pack's Backdrop the screen is transparent, drawn in the pack's foreground.
 // The pack's own placement for a profile's color swatch (PackDefinition.usePickerAlign), kept inside the
 // roster's capped column: the roster scrolls in it, which clips the menu at its edges. Handed to