@tastic/shell 0.0.0-stage → 0.1.0

package/src/screens/LoadoutScreen.tsx

@@ -0,0 +1,271 @@
+import { defaultColors, useAutoPaperTheme } from '@rific/auto-paper'
+import { FakeLandscapeView, getViewRotation, rotateInsets, useOrientationState } from '@tastic/core'
+import { CornerActionButtons, PlayerSetupPanel, PressAwayOverlay, ReadyButton, SharedActionBand, usePopoverHost } from '@tastic/hud'
+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, StyleSheet, View } from 'react-native'
+import Animated from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useDispatch } from 'react-redux'
+import type { Action, Dispatch } from 'redux'
+
+import { useGameGuide } from '../components/GuideHost'
+import { SeatTwoPanel } from '../components/SeatTwoPanel'
+import { SettingsDialog } from '../components/SettingsDialog'
+import { useOpponent } from '../hooks/useOpponent'
+import { useProfiles } from '../hooks/useProfiles'
+import { useSeatColors } from '../hooks/useSeatColors'
+import { safeBack } from '../navigation'
+import { usePack } from '../PackContext'
+import { liveplayActions } from '../redux/liveplaySlice'
+import { type GameDefinition, humanSeatsFor, 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.
+const PANEL_SWAP_FADE_MS = 180
+
+// A game that has a loadout (GameDefinition.useLoadout): the loadout route sends any other straight
+// to its play screen.
+export type LoadoutGame = GameDefinition & Required<Pick<GameDefinition, 'useLoadout'>>
+
+// Every game's loadout: seat 1 (the player picked on Home), seat 2 (the CPU, a second person, or
+// nobody, from seat 2's own button, or no button in a game for one player), the game's own match
+// options, and Ready. Remounted per game (the route keys it by id), so a game's useLoadout hook only
+// ever runs for that one game.
+export function LoadoutScreen({ game }: { game: LoadoutGame }) {
+  const pack = usePack()
+  const { seatTwo: savedSeatTwo, setSeatTwo } = useOpponent()
+  const seatTwo = seatTwoFor(savedSeatTwo, game.seatTwo)
+  const mode = roundModeFor(seatTwo)
+  const humanSeats = useMemo(() => humanSeatsFor(mode), [mode])
+  const p2IsHuman = mode === 'twoPlayer'
+  // A CPU takes a seat on the board; nobody doesn't (solo).
+  const p2Exists = mode !== 'solo'
+
+  const loadout = game.useLoadout(mode)
+  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 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)
+
+  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 { colors: themeColors, dark } = useAutoPaperTheme()
+  const { p1Color, p2Color, handleP1ColorChange, handleP2ColorChange } = useSeatColors(p2IsHuman)
+  const dispatch = useDispatch<Dispatch<Action>>()
+
+  // A seat's color follows its newly selected profile through the profile-color effect above.
+  // Picking the other seat's profile swaps the two (see @tastic/profile's select).
+  const handleP1ProfileSelect = useCallback((profile: Profile | null) => selectProfile(1, profile?.id ?? null), [selectProfile])
+  const handleP2ProfileSelect = useCallback((profileId: string | null) => selectProfile(2, profileId), [selectProfile])
+
+  const [ready, setReady] = useState<Record<Seat, boolean>>({ 1: false, 2: false })
+
+  // Every time this screen (re)gains focus - arrival from Home, or coming back from a match - Ready
+  // starts false again. Without this, popping back to a loadout whose players both left it Ready
+  // would immediately re-trigger the all-ready effect below and bounce straight back into the match.
+  useFocusEffect(
+    useCallback(() => {
+      setReady({ 1: false, 2: false })
+    }, [setReady])
+  )
+  // A change of who's in seat 2 starts Ready over too: otherwise player 1, ready and waiting on
+  // player 2, would be launched into a match the moment seat 2 switched to the CPU.
+  const changeSeatTwo = useCallback(
+    (next: SeatTwo) => {
+      setReady({ 1: false, 2: false })
+      setSeatTwo(next)
+    },
+    [setSeatTwo, setReady]
+  )
+
+  // Read through a ref rather than listed as a dependency of the effect below: this screen stays
+  // mounted (and still all Ready) under the play screen, so a settings change made there would
+  // otherwise re-run that effect and push a second match.
+  const roundSettingsRef = useRef(loadout.roundSettings)
+  useEffect(() => {
+    roundSettingsRef.current = loadout.roundSettings
+  }, [loadout.roundSettings])
+
+  useEffect(() => {
+    if (!humanSeats.every((s) => ready[s])) return
+    dispatch(liveplayActions.setActiveRound({ game: game.id, mode, settings: roundSettingsRef.current }))
+    router.push({ pathname: '/play/[game]', params: { game: game.id } })
+  }, [ready, humanSeats, game.id, mode, dispatch])
+
+  const bg = dark ? '#000000' : '#FFFFFF'
+  const fg = dark ? '#FFFFFF' : '#000000'
+  const fgMuted = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)'
+
+  const isPortrait = panelLayout.orientationMode === 'faceToFace'
+  // See @tastic/split-screen's needsSharedNeutralZone: whether back/settings/randomize/reset fold
+  // into one band between the two players instead of sitting in the corners.
+  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
+
+  // With one human, the one Ready button sits under both panels instead of in each.
+  const showReadyButton = p2IsHuman
+  // P1's panel and the match options share one host - they sit in the same near/bottom zone. With
+  // one human, seat 2's panel joins it too (one person drives both, so two open menus at once would
+  // be clutter). 2 Player gives P2 their own host so two people can pick at once, each press-away
+  // zone closing only its own player's menu.
+  const controlsHost = usePopoverHost()
+  const p2PanelHost = usePopoverHost()
+  const p2Host = p2IsHuman ? p2PanelHost : controlsHost
+  // The one-human Ready button is centered under the whole row, not under either seat button, so an
+  // open seat menu can't fully cover it; it fades out while one is open instead.
+  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,
+    dark,
+    // Left out (the row's own actions unrendered) whenever the shared band below carries them.
+    onRandomize: showMetaInSharedBand ? undefined : loadout.randomize,
+    onReset: showMetaInSharedBand ? undefined : loadout.reset
+  })
+
+  const optionsPopoverOpen = controlsHost.openId !== null && loadout.optionIds.includes(controlsHost.openId)
+  const sharedControls = showMetaInSharedBand ? (
+    <SharedActionBand onBack={safeBack} onSettings={() => setSettingsOpen(true)} onRandomize={loadout.randomize} onReset={loadout.reset} fg={fg} popoverOpen={optionsPopoverOpen}>
+      {optionsRow}
+    </SharedActionBand>
+  ) : (
+    optionsRow
+  )
+
+  const controlLook = { accentColor: themeColors.tertiary, mutedColor: fgMuted, dark, rotation }
+  const p1Control = loadout.seatControl(1, controlsHost, { ...controlLook, seatColor: p1Color })
+  const p1Panel = <PlayerSetupPanel 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='P1' onProfileSelect={handleP1ProfileSelect} onManageProfiles={() => router.push('/profiles')} />
+  const p2Control = p2IsHuman ? loadout.seatControl(2, p2Host, { ...controlLook, seatColor: p2Color }) : undefined
+  // A game for one player (no seatTwo) has no seat 2 button: seat 1's panel stands alone.
+  const p2Panel = game.seatTwo && <SeatTwoPanel idPrefix='p2' host={p2Host} choices={game.seatTwo} seatTwo={seatTwo} onSeatTwoChange={changeSeatTwo} cpuDifficulty={loadout.cpuDifficulty} profiles={profiles} selectedProfileId={lastSelected[2]} onProfileSelect={handleP2ProfileSelect} color={p2Color} onColorChange={handleP2ColorChange} swatches={defaultColors} takenColor={p1Color} allowSwapTaken={mode === 'vsCpu'} colorCaption={pack.colorCaption} dark={dark} secondPicker={p2Control} secondPickerId={p2Control ? 'p2-control' : undefined} ready={ready[2]} onToggleReady={() => setReady((r) => ({ ...r, 2: !r[2] }))} showReadyButton={showReadyButton} />
+
+  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}>
+        {/* 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
+        always shields P2's half from P1's press-away. */}
+        <PressAwayOverlay active={controlsHost.openId !== null} onPress={controlsHost.close} />
+        {p2ZoneStyle && <PressAwayOverlay active={controlsHost.openId !== null || p2Host.openId !== null} onPress={p2Host.close} style={p2ZoneStyle} />}
+
+        {!showMetaInSharedBand && <CornerActionButtons onBack={safeBack} onSettings={() => setSettingsOpen(true)} fg={fg} insets={insets} />}
+
+        {p2IsHuman ? (
+          <DualZoneLayout
+            panelLayout={panelLayout}
+            panelFadeStyle={panelFadeStyle}
+            p1={p1Panel}
+            p2={p2Panel}
+            shared={sharedControls}
+            // A zone can't self-elevate above a later sibling zone; these lift whichever zone has a
+            // menu open (see DualZoneLayout's p1Elevated/p2Elevated/sharedElevated doc).
+            p1Elevated={controlsHost.openId?.startsWith('p1-') ?? false}
+            p2Elevated={p2Host.openId !== null}
+            sharedElevated={optionsPopoverOpen}
+          />
+        ) : (
+          <View style={styles.stackedZone}>
+            {sharedControls}
+            <Animated.View style={[styles.playersRow, anyPlayerPickerOpen && styles.playersRowOpen, panelFadeStyle]}>
+              {!isPortrait && panelLayout.p1OnRight ? p2Panel : p1Panel}
+              {!isPortrait && panelLayout.p1OnRight ? p1Panel : p2Panel}
+            </Animated.View>
+            <ReadyButton color={p1Color} ready={ready[1]} onToggleReady={() => setReady((r) => ({ ...r, 1: !r[1] }))} style={anyPlayerPickerOpen && styles.readyButtonHidden} />
+          </View>
+        )}
+      </FakeLandscapeView>
+
+      <SettingsDialog visible={settingsOpen} onDismiss={() => setSettingsOpen(false)} rotation={rotation} onShowHowToPlay={() => openFor(game.id)} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  p2ZoneLeft: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    top: 0,
+    width: '50%'
+  },
+  p2ZoneRight: {
+    bottom: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    width: '50%'
+  },
+  p2ZoneTop: {
+    height: '50%',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0
+  },
+  // The one-human row: seat 1's panel and seat 2's button read as one evenly spaced row of buttons,
+  // at PlayerSetupPanel's own pickerRow gap (12).
+  playersRow: {
+    flexDirection: 'row',
+    gap: 12
+  },
+  playersRowOpen: {
+    zIndex: 100
+  },
+  // See anyPlayerPickerOpen: opacity 0 (not display:'none') keeps the button's layout space, and
+  // pointerEvents:'none' keeps the sliver an open menu doesn't cover from being a hidden tap target.
+  readyButtonHidden: {
+    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

@@ -0,0 +1,14 @@
+import { defaultColors } from '@rific/auto-paper'
+import { ProfilesScreen } from '@tastic/profile'
+
+import { useProfiles } from '../hooks/useProfiles'
+import { safeBack } from '../navigation'
+
+// The Profiles screen (Manage, from either seat 1 button). Deleting a profile also removes its
+// stats and achievements in every game: each game's reducers listen for the removal (see
+// onProfileRemoved.ts).
+export function ProfilesRoute() {
+  const { profiles, createProfile, updateProfile, deleteProfile } = useProfiles()
+
+  return <ProfilesScreen profiles={profiles} defaultColor={defaultColors[0].value} onCreate={(patch) => createProfile(patch)} onSave={(id, patch) => updateProfile(id, patch)} onDelete={deleteProfile} onBack={safeBack} />
+}

package/src/screens/StatsScreen.tsx

@@ -0,0 +1,133 @@
+import { useAutoPaperTheme } from '@rific/auto-paper'
+import { FakeLandscapeView, rotateInsets, useRotation } from '@tastic/core'
+import { BaseStatsScreen, PressAwayOverlay, usePopoverHost } from '@tastic/hud'
+import { OptionPicker, type OptionPickerOption } from '@tastic/profile'
+import { useMemo, useState } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { SegmentedButtons, Text } from 'react-native-paper'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useDispatch } from 'react-redux'
+
+import { useProfiles } from '../hooks/useProfiles'
+import { safeBack } from '../navigation'
+import { usePack } from '../PackContext'
+import type { GameDefinition } from '../types'
+
+// Two tabs, as on Solitaire's stats screen: a page with every game's stats above the achievements
+// would leave the achievements out of sight at the bottom.
+type StatsTab = 'stats' | 'achievements'
+const TABS = [
+  { value: 'stats', label: 'Stats', icon: 'chart-box-outline' },
+  { value: 'achievements', label: 'Achievements', icon: 'trophy-outline' }
+]
+
+// The pickers' values for Everyone and All Games (neither is ever a profile or game id).
+const EVERYONE = '__everyone__'
+const ALL_GAMES = '__all__'
+
+const PLAYER_PICKER_ID = 'stats-player'
+const GAME_PICKER_ID = 'stats-game'
+
+// Every game's stats and achievements on one screen, filtered by player (Everyone, or one profile)
+// and by game (All Games, or one), like Solitaire's. Each game keeps its own stats and its own
+// achievements; this screen only shows them side by side. With two seats there's no one player to
+// open on, so it opens on Everyone. Guests count only toward Everyone: two guests in one match can't
+// be told apart.
+export function StatsScreen() {
+  const pack = usePack()
+  const { dark, colors } = useAutoPaperTheme()
+  // Turned with the phone like every other screen: rotateInsets remaps the device's raw safe-area
+  // reading onto the edges they land on once FakeLandscapeView turns the content.
+  const rotation = useRotation()
+  const insets = rotateInsets(useSafeAreaInsets(), rotation)
+  const { profiles } = useProfiles()
+  const dispatch = useDispatch()
+  const pickerHost = usePopoverHost()
+
+  const [tab, setTab] = useState<StatsTab>('stats')
+  const [gameId, setGameId] = useState<string>(ALL_GAMES)
+  // Self-heals to Everyone if the selected profile is deleted while this screen is mounted.
+  const [selectedProfileId, setSelectedProfileId] = useState<string | null>(null)
+  const profileId = selectedProfileId && profiles.some((p) => p.id === selectedProfileId) ? selectedProfileId : null
+
+  const games = gameId === ALL_GAMES ? pack.games : pack.games.filter((g) => g.id === gameId)
+
+  const playerOptions = useMemo<OptionPickerOption<string>[]>(() => [{ value: EVERYONE, label: 'Everyone', icon: 'account-group' }, ...profiles.map((p) => ({ value: p.id, label: p.name, icon: 'account', color: p.color }))], [profiles])
+  const gameOptions = useMemo<OptionPickerOption<string>[]>(() => [{ value: ALL_GAMES, label: 'All Games', icon: 'view-grid-outline' }, ...pack.games.map((g) => ({ value: g.id, label: g.title }))], [pack.games])
+
+  // Reset clears every player's stats and achievements in the games shown (one game, or all of them).
+  const resetScope = games.length === 1 ? games[0].title : 'every game'
+  const onReset = () => games.forEach((g) => dispatch(g.resetStats()))
+
+  return (
+    <FakeLandscapeView style={styles.rotatable}>
+      <BaseStatsScreen title={tab === 'stats' ? 'Stats' : 'Achievements'} onBack={safeBack} insets={insets} onReset={onReset} resetLabel={games.length === 1 ? `Reset ${resetScope} Stats` : 'Reset All Stats'} resetConfirmTitle='Reset Stats?' resetConfirmBody={`Erases every player's stats and achievements in ${resetScope}. This cannot be undone.`} rotation={rotation}>
+        {/* Inside the page, not before it: BaseStatsScreen paints an opaque full-screen container that
+        would hide a tap catcher placed underneath it. Over the stat sections and under the open
+        filters (pressAway's zIndex sits below filtersOpen's), so a tap anywhere on the page but a
+        menu closes it. */}
+        <PressAwayOverlay active={pickerHost.openId !== null} onPress={pickerHost.close} style={styles.pressAway} />
+        <SegmentedButtons value={tab} onValueChange={(value) => setTab(value as StatsTab)} buttons={TABS} style={styles.tabs} />
+
+        <View style={[styles.filters, pickerHost.openId !== null && styles.filtersOpen]}>
+          {profiles.length > 0 && <OptionPicker id={PLAYER_PICKER_ID} host={pickerHost} options={playerOptions} value={profileId ?? EVERYONE} onChange={(value) => setSelectedProfileId(value === EVERYONE ? null : value)} color={colors.primary} dark={dark} icon={profileId ? 'account' : 'account-group'} />}
+          <OptionPicker id={GAME_PICKER_ID} host={pickerHost} options={gameOptions} value={gameId} onChange={setGameId} color={colors.primary} dark={dark} icon='view-grid-outline' />
+        </View>
+
+        {/* The pack's own section across its games (a calendar of play), first on the Stats tab: it
+        follows both filters, so narrowed to one game it shows that game's part. */}
+        {tab === 'stats' && pack.StatsSections && <pack.StatsSections profileId={profileId} gameId={gameId === ALL_GAMES ? null : gameId} />}
+
+        {games.map((game) => (
+          <GameStats key={game.id} game={game} tab={tab} profileId={profileId} showTitle={games.length > 1} />
+        ))}
+      </BaseStatsScreen>
+    </FakeLandscapeView>
+  )
+}
+
+// One game's part of the page: its own sections, under its name when more than one game is shown.
+function GameStats({ game, tab, profileId, showTitle }: { game: GameDefinition; tab: StatsTab; profileId: string | null; showTitle: boolean }) {
+  const { colors } = useAutoPaperTheme()
+  const { StatsSections, AchievementList } = game
+  return (
+    <View style={styles.game}>
+      {showTitle && (
+        <Text variant='titleLarge' style={[styles.gameTitle, { color: colors.onBackground }]}>
+          {game.title}
+        </Text>
+      )}
+      {tab === 'stats' ? <StatsSections profileId={profileId} /> : <AchievementList profileId={profileId} />}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  filters: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 12,
+    justifyContent: 'center'
+  },
+  filtersOpen: {
+    zIndex: 100
+  },
+  game: {
+    gap: 16
+  },
+  gameTitle: {
+    fontWeight: 'bold',
+    marginTop: 8
+  },
+  pressAway: {
+    zIndex: 50
+  },
+  // A real full-bleed box for FakeLandscapeView to size its turned content against.
+  rotatable: {
+    flex: 1
+  },
+  // SegmentedButtons' own rounding.
+  tabs: {
+    borderRadius: 20
+  }
+})

package/src/screens/homeLayout.ts

@@ -0,0 +1,129 @@
+import { clamp, rotateInsets, useRotatedWindowDimensions, useRotation } from '@tastic/core'
+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
+// 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
+// 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.
+
+// Every preview's width / height: Solitaire's preview canvas (360 x 200), so its deals fit as drawn.
+export const PREVIEW_ASPECT = 360 / 200
+// A preview's width at the start of an upright row, where every other pack's icon sits.
+export const ROW_PREVIEW_WIDTH = 92
+
+// Wide layout: gap between the safe edge and the left pane.
+export const HOME_WIDE_EDGE_PADDING = 16
+// Wide layout: gap between the two panes.
+export const HOME_WIDE_PANE_GAP = 16
+// Wide layout: width reserved on the trailing side for the cog corner button (8pt margin, a 40pt
+// IconButton, 8pt of air) ON TOP of the trailing safe-area inset.
+export const HOME_WIDE_RIGHT_GUTTER = 56
+// Cap on the two panes' combined width on a very wide window; past it the leftover is split into
+// equal empty margins on both sides.
+export const HOME_WIDE_MAX_CONTENT_WIDTH = 1100
+export const HOME_LEFT_PANE_FRACTION = 0.38
+export const HOME_LEFT_PANE_MIN = 260
+export const HOME_LEFT_PANE_MAX = 340
+// Gap between grid tiles (both axes).
+export const HOME_GRID_GAP = 12
+// Narrowest a wide-layout tile may get before the grid drops a column, and the most columns it uses.
+export const HOME_MIN_TILE_WIDTH = 140
+export const HOME_MAX_COLUMNS = 3
+// Padding inside a wide-layout tile around its preview and text.
+export const HOME_TILE_PADDING = 10
+// Vertical band the corner buttons occupy at the top of a pane (8pt margin + 40pt button + 8pt air).
+export const HOME_TOP_BAND = 56
+// What the left pane stacks under the hero: seat 1's button (44, a 32pt chip in a pill padded 6pt)
+// and the gap above it, and the pane's own bottom padding.
+export const HOME_LEFT_PANE_PICKER_HEIGHT = 44
+export const HOME_LEFT_PANE_PICKER_GAP = 12
+const HOME_LEFT_PANE_BOTTOM_PADDING = 16
+// The hero keeps this much clear of the left pane's sides.
+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).
+  isWide: boolean
+  // The window's footprint AFTER rotation.
+  windowWidth: number
+  windowHeight: number
+  // Safe-area insets remapped onto the rotated frame's own edges (see @tastic/core's rotateInsets).
+  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
+  // both carry the equal margin left over once the content hits its cap. 0 upright.
+  paddingLeft: number
+  paddingRight: number
+  leftPaneWidth: number
+  rightPaneWidth: number
+  columns: number
+  // Outer width of one wide-layout tile, and of the preview inside it.
+  tileWidth: number
+  previewWidth: number
+  // The box the hero has to fit in beside the grid (HeroTitleProps.fit); undefined upright.
+  heroFit: { width: number; height: number } | undefined
+}
+
+// Pure form of useHomeLayout, for tests.
+export function computeHomeLayout(windowWidth: number, windowHeight: number, insets: EdgeInsets): HomeLayout {
+  const isWide = windowWidth > windowHeight
+  if (!isWide) {
+    return { isWide, windowWidth, windowHeight, insets, paddingLeft: 0, paddingRight: 0, leftPaneWidth: 0, rightPaneWidth: 0, columns: 1, tileWidth: 0, previewWidth: 0, heroFit: undefined }
+  }
+
+  const usable = windowWidth - insets.left - insets.right
+  const inner = Math.max(0, usable - HOME_WIDE_EDGE_PADDING - HOME_WIDE_RIGHT_GUTTER)
+  const content = Math.min(inner, HOME_WIDE_MAX_CONTENT_WIDTH)
+  const slack = (inner - content) / 2
+
+  // The left pane is a fraction of the content (within its own floor/ceiling), but never so wide that
+  // the grid is left without room for at least one tile: a tiny window degrades to one narrow column,
+  // never a negative width.
+  const leftPaneWidth = Math.min(clamp(Math.round(HOME_LEFT_PANE_FRACTION * content), HOME_LEFT_PANE_MIN, HOME_LEFT_PANE_MAX), Math.max(0, content - HOME_WIDE_PANE_GAP - HOME_MIN_TILE_WIDTH))
+  const rightPaneWidth = Math.max(0, content - HOME_WIDE_PANE_GAP - leftPaneWidth)
+  const columns = clamp(Math.floor((rightPaneWidth + HOME_GRID_GAP) / (HOME_MIN_TILE_WIDTH + HOME_GRID_GAP)), 1, HOME_MAX_COLUMNS)
+  const tileWidth = Math.max(0, Math.floor((rightPaneWidth - (columns - 1) * HOME_GRID_GAP) / columns))
+  const previewWidth = Math.max(0, tileWidth - 2 * HOME_TILE_PADDING)
+
+  // The hero gets the pane's width and whatever height the pane has left once the corner buttons'
+  // band, seat 1's button and the bottom padding are taken: how it shrinks to fit is the pack's own.
+  const heroFit = {
+    width: Math.max(0, leftPaneWidth - HOME_HERO_SIDE_ROOM),
+    height: Math.max(0, windowHeight - insets.top - insets.bottom - HOME_TOP_BAND - HOME_LEFT_PANE_PICKER_GAP - HOME_LEFT_PANE_PICKER_HEIGHT - HOME_LEFT_PANE_BOTTOM_PADDING)
+  }
+
+  return {
+    isWide,
+    windowWidth,
+    windowHeight,
+    insets,
+    paddingLeft: insets.left + HOME_WIDE_EDGE_PADDING + slack,
+    paddingRight: insets.right + HOME_WIDE_RIGHT_GUTTER + slack,
+    leftPaneWidth,
+    rightPaneWidth,
+    columns,
+    tileWidth,
+    previewWidth,
+    heroFit
+  }
+}
+
+// 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).
+export function useHomeLayout(): HomeLayout {
+  const { width, height } = useRotatedWindowDimensions()
+  const rotation = useRotation()
+  const insets = rotateInsets(useSafeAreaInsets(), rotation)
+  return computeHomeLayout(width, height, insets)
+}

package/src/splashGate.ts

@@ -0,0 +1,3 @@
+import { createGate } from '@rific/splash-gate'
+
+export const { markReady: markSplashReady, useReady: useSplashReady, pendingGates: pendingSplashGates, Gate: SplashGate } = createGate(['theme', 'fonts', 'profiles'] as const)