@tastic/shell 0.3.1 → 0.5.0

package/src/screens/HomeScreen.tsx

@@ -1,12 +1,11 @@
 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'
-import { type ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
-import { AppState, type AppStateStatus, StyleSheet, View } from 'react-native'
-import { Icon, Portal, Text } from 'react-native-paper'
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { AppState, type AppStateStatus, type LayoutChangeEvent, type NativeScrollEvent, type NativeSyntheticEvent, type ScrollView, StyleSheet, View } from 'react-native'
+import { Icon, Portal, SegmentedButtons, Text } from 'react-native-paper'
 
 import { useGameGuide } from '../components/GuideHost'
 import { SettingsDialog } from '../components/SettingsDialog'
@@ -17,14 +16,15 @@ import { useProfiles } from '../hooks/useProfiles'
 import { useSeatColors } from '../hooks/useSeatColors'
 import { usePack } from '../PackContext'
 import { loadoutHref, playHref, PROFILES_HREF, STATS_HREF } from '../routes'
-import type { PackGameDefinition } from '../types'
+import type { HomeTab, PackGameDefinition } from '../types'
 import { HOME_GRID_GAP, HOME_LEFT_PANE_PICKER_GAP, HOME_TILE_PADDING, HOME_TOP_BAND, HOME_WIDE_PANE_GAP, PREVIEW_ASPECT, ROW_PREVIEW_WIDTH, useHomeLayout } from './homeLayout'
 
 // Home: who's playing (seat 1, the same seat 1 every loadout starts with), then every game in the
 // pack as a row in a fixed order, Solitaire's list: each game on its own well, its small app icon
 // (or its preview, GameDefinition.Preview) beside its name and blurb. A tap opens that game's
 // loadout, or its play screen in a game without one, after its How to Play cards the first time it's
-// picked. Seat 2 is chosen in the loadout, from seat 2's own button.
+// picked. Seat 2 is chosen in the loadout, from seat 2's own button. A pack with tabs
+// (PackDefinition.homeTabs) shows one tab's games at a time, from a switch over the rows.
 //
 // A cold launch that finds the player left the app inside a resumable game's play screen
 // (GameDefinition.resumable) goes straight back there instead, before the menu ever paints. The
@@ -52,7 +52,6 @@ export function HomeScreen() {
 
 function HomeMenu() {
   const pack = usePack()
-  const rotation = useRotation()
   const layout = useHomeLayout()
   const { insets } = layout
   const { dark, colors } = useAutoPaperTheme()
@@ -78,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)
@@ -94,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'
@@ -111,6 +110,18 @@ function HomeMenu() {
   const p1Drawn = previewColor ? previewColor(p1Color, dark) : p1Color
   const triggerStyle = useMemo(() => (pack.Backdrop ? [styles.pill, { backgroundColor: colors.surface }] : undefined), [pack.Backdrop, colors.surface])
 
+  // The pack's tabs (PackDefinition.homeTabs): one tab's games at a time, the same switch as the stats
+  // screen's tabs (on the theme's surface over a backdrop). The other tabs' games stay mounted, hidden, so
+  // a switch draws nothing new (their previews are already there). The tab is Home's own state, kept while
+  // Home is covered, since Home stays mounted under every screen it opens.
+  const tabs = pack.homeTabs && pack.homeTabs.length > 1 ? pack.homeTabs : null
+  const [tabLabel, setTabLabel] = useState(() => tabs?.[0].label ?? null)
+  const tab = tabs ? (tabs.find((t) => t.label === tabLabel) ?? tabs[0]) : null
+  const tabButtons = useMemo(() => tabs?.map(({ label }) => ({ value: label, label })) ?? [], [tabs])
+  const tabBar = tab && <SegmentedButtons value={tab.label} onValueChange={setTabLabel} buttons={tabButtons} style={[styles.tabs, pack.Backdrop && { backgroundColor: colors.surface }]} />
+  const columnClamp = useClampOnShrink()
+  const gridClamp = useClampOnShrink()
+
   // A game with nothing to set up (no useLoadout) opens straight to its play screen.
   const openGame = useCallback((game: PackGameDefinition) => openFirstTime(game.id, () => router.push(game.useLoadout ? loadoutHref(game.id) : playHref(game.id))), [openFirstTime])
 
@@ -137,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 ? (
             <>
@@ -149,10 +159,11 @@ function HomeMenu() {
             to the frame's right edge and the cog's gutter is its content's padding, so a web scrollbar
             sits at the window's edge. Both scrollers fade out at an edge while there is more past it
             (auto-paper's FadingScrollView, a mask, so whatever is behind shows through). */}
-              <FadingScrollView style={[styles.wideRightPane, { left: layout.paddingLeft + layout.leftPaneWidth + HOME_WIDE_PANE_GAP }]} contentContainerStyle={{ paddingTop: 16 + insets.top, paddingBottom: 16 + insets.bottom, paddingRight: layout.paddingRight }}>
+              <FadingScrollView {...(tab && gridClamp)} style={[styles.wideRightPane, { left: layout.paddingLeft + layout.leftPaneWidth + HOME_WIDE_PANE_GAP }]} contentContainerStyle={{ paddingTop: 16 + insets.top, paddingBottom: 16 + insets.bottom, paddingRight: layout.paddingRight }}>
+                {tabBar && <View style={[styles.wideTabs, { width: layout.rightPaneWidth }]}>{tabBar}</View>}
                 <View style={[styles.grid, { width: layout.rightPaneWidth }]}>
                   {pack.games.map((game) => (
-                    <GameTile key={game.id} game={game} width={layout.tileWidth} previewWidth={layout.previewWidth} previewRevealed={previewsRevealed} dark={dark} p1Color={p1Color} p2Color={p2Color} onPress={() => openGame(game)} onRules={hasRules(game) ? () => openRules(game) : undefined} />
+                    <GameTile key={game.id} game={game} hidden={isHidden(tab, game)} width={layout.tileWidth} previewWidth={layout.previewWidth} previewRevealed={previewsRevealed} dark={dark} p1Color={p1Color} p2Color={p2Color} onPress={() => openGame(game)} onRules={hasRules(game) ? () => openRules(game) : undefined} />
                   ))}
                 </View>
               </FadingScrollView>
@@ -165,7 +176,7 @@ function HomeMenu() {
               </View>
             </>
           ) : (
-            <FadingScrollView style={styles.scroll} contentContainerStyle={[styles.content, { paddingTop: 56 + insets.top, paddingBottom: 24 + insets.bottom, paddingLeft: 16 + insets.left, paddingRight: 16 + insets.right }]}>
+            <FadingScrollView {...(tab && columnClamp)} style={styles.scroll} contentContainerStyle={[styles.content, { paddingTop: 56 + insets.top, paddingBottom: 24 + insets.bottom, paddingLeft: 16 + insets.left, paddingRight: 16 + insets.right }]}>
               {pressAway}
               <pack.HeroTitle words={pack.wordmark} color={fg} p1Color={p1Color} p2Color={p2Color} active={heroActive} />
 
@@ -173,9 +184,11 @@ function HomeMenu() {
             tiles while its menu is open, so the menu paints over them. */}
               <View style={[styles.picker, pickerHost.openId !== null && styles.pickerOpen]}>{picker}</View>
 
+              {tabBar && <View style={styles.listWidth}>{tabBar}</View>}
+
               <View style={styles.list}>
                 {pack.games.map((game) => (
-                  <GameRow key={game.id} game={game} dark={dark} p1Color={p1Color} p2Color={p2Color} previewRevealed={previewsRevealed} onPress={() => openGame(game)} onRules={hasRules(game) ? () => openRules(game) : undefined} />
+                  <GameRow key={game.id} game={game} hidden={isHidden(tab, game)} dark={dark} p1Color={p1Color} p2Color={p2Color} previewRevealed={previewsRevealed} onPress={() => openGame(game)} onRules={hasRules(game) ? () => openRules(game) : undefined} />
                 ))}
               </View>
             </FadingScrollView>
@@ -185,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>
   )
 }
@@ -200,20 +213,58 @@ const SEAT_ONE_PICKER = 'home-p1'
 // No placement of the pack's own: hud places the menu itself.
 const noPickerAlign = () => undefined
 
+// A game the tab picked doesn't include: kept mounted, out of the layout and out of a screen reader's way.
+function isHidden(tab: HomeTab | null, game: PackGameDefinition): boolean {
+  return !!tab && !tab.includes(game)
+}
+
+// iOS leaves a scroller's offset past the end when its content shrinks (React Native's own TODO, T190695447
+// in RCTScrollViewComponentView.mm), so a switch to a shorter tab while scrolled down would leave blank space
+// under the last game until the next drag. This pulls it back in, as Android and the web do by themselves.
+// Spread onto one scroller (its ref and three events) only in a pack with tabs, the one way Home's content
+// shrinks. The ref is a callback so a scroller mounted afresh (a switch between the column and the grid)
+// starts from its real offset, 0, not the last one's.
+function useClampOnShrink() {
+  const view = useRef<ScrollView | null>(null)
+  const sizes = useRef({ viewport: 0, offset: 0 })
+  return useMemo(
+    () => ({
+      ref: (instance: ScrollView | null) => {
+        view.current = instance
+        sizes.current.offset = 0
+      },
+      onLayout: (e: LayoutChangeEvent) => {
+        sizes.current.viewport = e.nativeEvent.layout.height
+      },
+      onScroll: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+        sizes.current.offset = e.nativeEvent.contentOffset.y
+      },
+      onContentSizeChange: (_width: number, height: number) => {
+        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 })
+      }
+    }),
+    []
+  )
+}
+
 // Whether a tile has a rules button: a rules sheet or How to Play cards to show.
 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}</>
 }
 
 interface GameRowProps {
   game: PackGameDefinition
+  // Not in the tab picked (PackDefinition.homeTabs).
+  hidden: boolean
   dark: boolean
   p1Color: string
   p2Color: string
@@ -227,13 +278,13 @@ interface GameRowProps {
 // One game on its own well: its icon at app-icon size (the art was drawn as an app icon), or its
 // preview where it has one, its name and one-line blurb, and a rules button at the end that shows its
 // How to Play cards without opening the game.
-function GameRow({ game, dark, p1Color, p2Color, previewRevealed, onPress, onRules }: GameRowProps) {
+function GameRow({ game, hidden, dark, p1Color, p2Color, previewRevealed, onPress, onRules }: GameRowProps) {
   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.
-    <View>
+    <View style={hidden ? styles.hidden : undefined}>
       <Pressable onPress={onPress} style={[styles.row, { backgroundColor: well.bg }]} accessibilityRole='button' accessibilityLabel={game.title}>
         {game.Preview ? <PreviewBox game={game} width={ROW_PREVIEW_WIDTH} revealed={previewRevealed} dark={dark} p1Color={p1Color} p2Color={p2Color} /> : <View style={[styles.rowIcon, { backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }]}>{GameIcon && <GameIcon size={ROW_ICON_SIZE} p1Color={p1Color} p2Color={p2Color} dark={dark} />}</View>}
         <View style={styles.rowText}>
@@ -262,10 +313,10 @@ interface GameTileProps extends GameRowProps {
 // One game in the wide layout's grid: the row turned on its side, its preview (or icon) on top and its
 // name and blurb under it, since a row needs ~290pt, more than a grid column beside the hero has. The
 // rules button floats over the preview's corner, beside the tile's button rather than inside it.
-function GameTile({ game, width, previewWidth, dark, p1Color, p2Color, previewRevealed, onPress, onRules }: GameTileProps) {
+function GameTile({ game, hidden, width, previewWidth, dark, p1Color, p2Color, previewRevealed, onPress, onRules }: GameTileProps) {
   const well = useWellColors()
   return (
-    <View style={{ width }}>
+    <View style={[{ width }, hidden && styles.hidden]}>
       <Pressable onPress={onPress} style={[styles.tile, { backgroundColor: well.bg }]} accessibilityRole='button' accessibilityLabel={game.title}>
         <PreviewBox game={game} width={previewWidth} revealed={previewRevealed} dark={dark} p1Color={p1Color} p2Color={p2Color} />
         <Text variant='titleMedium' style={[styles.rowTitle, { color: well.fg }]} numberOfLines={1}>
@@ -331,18 +382,30 @@ 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',
     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'
   },
@@ -368,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: {
@@ -405,6 +465,10 @@ const styles = StyleSheet.create({
   scroll: {
     flex: 1
   },
+  // SegmentedButtons' own rounding, so a surface behind it is the same pill (the stats screen's tabs).
+  tabs: {
+    borderRadius: 20
+  },
   // The same well as a row, turned on its side.
   tile: {
     borderRadius: 12,
@@ -443,5 +507,9 @@ const styles = StyleSheet.create({
     position: 'absolute',
     right: 0,
     top: 0
+  },
+  // The tabs over the grid, a little further from it than the tiles are from each other.
+  wideTabs: {
+    marginBottom: 16
   }
 })

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

package/src/screens/StatsScreen.tsx

@@ -34,7 +34,7 @@ const ALL_GAMES = '__all__'
 const PLAYER_PICKER_ID = 'stats-player'
 const GAME_PICKER_ID = 'stats-game'
 
-// Widest the column gets in the wide layout (a phone held sideways, a desktop window): a list of stat
+// Widest the column gets in the wide layout (a landscape phone, a desktop window): a list of stat
 // rows stretched across an 874pt-wide screen reads badly. Upright it's never capped.
 const STATS_MAX_WIDTH = 640
 
@@ -45,9 +45,8 @@ const STATS_MAX_WIDTH = 640
 // can't be told apart. A pack for one player at a time (PackDefinition.guestStats) keeps a guest's
 // stats under GUEST_PLAYER_ID, offers Guest in the picker and opens on whoever is in seat 1.
 //
-// Turned with the phone in hud's RotatedFrame: its insets remapped onto the frame's edges, the reset
-// confirm portaled into a host inside the frame (so it's turned with it, at rotation 0), and the column
-// capped in the wide layout.
+// In hud's RotatedFrame, which nothing turns since @tastic/core 0.15: it hands the screen the safe-area
+// insets, hosts the reset confirm's portal inside the frame, and caps the column in the wide layout.
 export function StatsScreen() {
   const pickerHost = usePopoverHost()
   return (
@@ -81,7 +80,7 @@ const noPickerAlign = () => undefined
 function StatsContent({ pickerHost }: { pickerHost: PopoverHost }) {
   const pack = usePack()
   const { dark, colors } = useAutoPaperTheme()
-  // Already remapped onto the turned frame's edges by RotatedFrame's rotatedSafeArea.
+  // Handed over by RotatedFrame's rotatedSafeArea.
   const insets = useSafeAreaInsets()
   const { profiles, lastSelected } = useProfiles()
   const dispatch = useDispatch()

package/src/screens/homeLayout.ts

@@ -1,20 +1,19 @@
-import { clamp, rotateInsets, useRotatedWindowDimensions, useRotation } from '@tastic/core'
+import { clamp } from '@tastic/core'
+import { useWindowDimensions } from 'react-native'
 import { type EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context'
 
 // Home's geometry for a pack whose games have previews (GameDefinition.Preview), ported from
 // Solitaire's components/homeLayout.ts. Upright, Home is the one scrolling column every pack has: the
-// hero, seat 1's button, then a row per game, each row's preview at its start. Held sideways a phone
+// hero, seat 1's button, then a row per game, each row's preview at its start. A landscape phone
 // is only ~400pt tall, and that column would spend the whole height on the hero before showing a
-// single game, so a "wide" layout (any window whose ROTATED footprint is landscape: a phone held
-// sideways, an iPad, a desktop browser) splits it into two panes: the hero and seat 1's button on the
+// single game, so a "wide" layout (any window wider than tall: a landscape phone, a landscape iPad, a
+// desktop browser) splits it into two panes: the hero and seat 1's button on the
 // left, and a scrolling grid of game tiles on the right. The trophy (top-left) and cog (top-right)
 // corner buttons stay where they are; the right pane stops short of the cog so tiles never scroll
 // underneath it. A pack without previews keeps the column at every size.
 //
-// Everything here works in the ROTATED frame's own coordinates (Home's FakeLandscapeView): `width`/
-// `height` are the rotated footprint and `insets` are the safe-area insets already remapped onto the
-// frame's edges (rotateInsets). The rotated top/bottom insets are ~0 under a portrait-locked OS (a
-// phone held sideways only has left/right insets), so nothing here leans on them for breathing room.
+// A landscape phone's top and bottom insets are ~0 (only the sides have them), so nothing here leans
+// on them for breathing room.
 
 // Every preview's width / height: Solitaire's preview canvas (360 x 200), so its deals fit as drawn.
 export const PREVIEW_ASPECT = 360 / 200
@@ -52,15 +51,15 @@ const HOME_LEFT_PANE_BOTTOM_PADDING = 16
 const HOME_HERO_SIDE_ROOM = 16
 
 export interface HomeLayout {
-  // The rotated footprint is landscape: the two-pane layout is in effect (for a pack with previews).
+  // The window is landscape: the two-pane layout is in effect (for a pack with previews).
   isWide: boolean
-  // The window's footprint AFTER rotation.
+  // The window's size.
   windowWidth: number
   windowHeight: number
-  // Safe-area insets remapped onto the rotated frame's own edges (see @tastic/core's rotateInsets).
+  // The safe-area insets.
   insets: EdgeInsets
-  // Wide layout: padding on the two panes' row. Each side hugs ITS OWN inset (a phone held sideways
-  // has a large inset only on the island side), the trailing one also reserves the cog's gutter, and
+  // Wide layout: padding on the two panes' row. Each side hugs ITS OWN inset (a landscape phone has a
+  // large inset only on the island side), the trailing one also reserves the cog's gutter, and
   // both carry the equal margin left over once the content hits its cap. 0 upright.
   paddingLeft: number
   paddingRight: number
@@ -118,12 +117,9 @@ export function computeHomeLayout(windowWidth: number, windowHeight: number, ins
   }
 }
 
-// The live layout for the current window and rotation. Reads useRotatedWindowDimensions()/
-// rotateInsets() rather than raw useWindowDimensions()/useSafeAreaInsets(), so it describes the
-// footprint a rotated Home actually renders into (both are exact identities at 0deg).
+// The live layout for the current window.
 export function useHomeLayout(): HomeLayout {
-  const { width, height } = useRotatedWindowDimensions()
-  const rotation = useRotation()
-  const insets = rotateInsets(useSafeAreaInsets(), rotation)
+  const { width, height } = useWindowDimensions()
+  const insets = useSafeAreaInsets()
   return computeHomeLayout(width, height, insets)
 }