@tastic/shell 0.1.1 → 0.2.1

package/src/screens/HomeScreen.tsx

@@ -1,12 +1,12 @@
-import { defaultColors, useAutoPaperTheme } from '@rific/auto-paper'
+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'
-import { type Profile, ProfilePicker } from '@tastic/profile'
+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 { useCallback, useEffect, useState } from 'react'
-import { AppState, type AppStateStatus, ScrollView, StyleSheet, View } from 'react-native'
-import { Icon, Text } from 'react-native-paper'
+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 { useGameGuide } from '../components/GuideHost'
 import { SettingsDialog } from '../components/SettingsDialog'
@@ -16,7 +16,8 @@ import { useOpponent } from '../hooks/useOpponent'
 import { useProfiles } from '../hooks/useProfiles'
 import { useSeatColors } from '../hooks/useSeatColors'
 import { usePack } from '../PackContext'
-import type { GameDefinition } from '../types'
+import { loadoutHref, playHref, PROFILES_HREF, STATS_HREF } from '../routes'
+import type { 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
@@ -26,10 +27,13 @@ import { HOME_GRID_GAP, HOME_LEFT_PANE_PICKER_GAP, HOME_TILE_PADDING, HOME_TOP_B
 // picked. Seat 2 is chosen in the loadout, from seat 2's own button.
 //
 // 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.
+// (GameDefinition.resumable) goes straight back there instead, before the menu ever paints. The
+// pack's own How to Play (PackDefinition.guide) shows by itself on a first launch, held back while
+// that launch is about to drop into a game: it must never open over a game in progress.
 export function HomeScreen() {
   const pack = usePack()
   const { consumeResumeGame } = useLastActiveGame()
+  const { autoShowPack } = useGameGuide()
   // A one-shot cold-launch decision, read exactly once at this instance's mount (see
   // hooks/useLastActiveGame.tsx), never a live value this screen re-renders from. Reading it live made
   // every Home in the stack swap its whole menu for a Redirect while a game was on top and rebuild it
@@ -39,7 +43,10 @@ export function HomeScreen() {
     const id = consumeResumeGame()
     return pack.games.find((g) => g.id === id && g.resumable) ?? null
   })
-  if (resumeGame) return <Redirect href={{ pathname: '/play/[game]', params: { game: resumeGame.id } }} />
+  useEffect(() => {
+    if (!resumeGame) autoShowPack()
+  }, [resumeGame, autoShowPack])
+  if (resumeGame) return <Redirect href={playHref(resumeGame.id)} />
   return <HomeMenu />
 }
 
@@ -48,9 +55,11 @@ function HomeMenu() {
   const rotation = useRotation()
   const layout = useHomeLayout()
   const { insets } = layout
-  const { dark } = useAutoPaperTheme()
-  const { openFirstTime, openFor } = useGameGuide()
+  const { dark, colors } = useAutoPaperTheme()
+  const { openFirstTime, openFor, openPack } = useGameGuide()
   const [settingsOpen, setSettingsOpen] = useState(false)
+  // The game whose rules sheet (GameDefinition.Rules) is open.
+  const [rulesGame, setRulesGame] = useState<PackGameDefinition | null>(null)
   const isFocused = useIsFocused()
   const [appState, setAppState] = useState<AppStateStatus>(AppState.currentState)
   useEffect(() => {
@@ -84,82 +93,135 @@ function HomeMenu() {
     const id = requestAnimationFrame(() => setPreviewsRevealed(true))
     return () => cancelAnimationFrame(id)
   }, [tiled])
-  // A popover is placed once, as it opens. 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 the switch closes it.
+  // 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
+  // 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, closePicker])
+  }, [isWide, rotation, layout.windowWidth, layout.windowHeight, closePicker])
 
-  const bg = dark ? '#000000' : '#FFFFFF'
-  const fg = dark ? '#FFFFFF' : '#000000'
+  // Over the pack's Backdrop Home draws nothing of its own behind the menu.
+  const bg = pack.Backdrop ? 'transparent' : dark ? '#000000' : '#FFFFFF'
+  const fg = pack.foreground ?? (dark ? '#FFFFFF' : '#000000')
+  // Seat 1's color as the pack draws profile colors (PackDefinition.previewColor), and the button on
+  // the theme's surface over a backdrop, so neither washes out on it.
+  const { previewColor } = pack
+  const p1Drawn = previewColor ? previewColor(p1Color, dark) : p1Color
+  const triggerStyle = useMemo(() => (pack.Backdrop ? [styles.pill, { backgroundColor: colors.surface }] : undefined), [pack.Backdrop, colors.surface])
 
   // A game with nothing to set up (no useLoadout) opens straight to its play screen.
-  const openGame = useCallback((game: GameDefinition) => openFirstTime(game.id, () => router.push(game.useLoadout ? { pathname: '/loadout/[game]', params: { game: game.id } } : { pathname: '/play/[game]', params: { game: game.id } })), [openFirstTime])
+  const openGame = useCallback((game: PackGameDefinition) => openFirstTime(game.id, () => router.push(game.useLoadout ? loadoutHref(game.id) : playHref(game.id))), [openFirstTime])
+
+  // A tile's rules button: the game's rules sheet where it has one, else its How to Play cards.
+  const openRules = useCallback((game: PackGameDefinition) => (game.Rules ? setRulesGame(game) : openFor(game.id)), [openFor])
+
+  const colorSection: ProfilePickerColorSection = { value: p1Color, onChange: handleP1ColorChange, swatches: defaultColors, caption: selectedProfile ? pack.colorCaption : undefined, previewValue: previewColor ? (hex: string) => previewColor(hex, dark) : undefined }
+  // The pack's own placement for the menu (PackDefinition.usePickerAlign), sized from the same rows
+  // and color page the picker draws; hud's own without one. The pack never changes while it runs.
+  const usePickerAlign = pack.usePickerAlign ?? noPickerAlign
+  const pickerSize = getProfilePickerContentSize(profiles.length, true, colorSection)
+  const pickerAlign = usePickerAlign(pickerHost.openId === `${SEAT_ONE_PICKER}-profile`, pickerSize.width, pickerSize.height)
+
+  const picker = <ProfilePicker idPrefix={SEAT_ONE_PICKER} host={pickerHost} profiles={profiles} selectedId={lastSelected[1]} color={p1Drawn} dark={dark} guestLabel={pack.guestLabel ?? 'P1'} nullLabel={pack.nullLabel} onSelect={(profile: Profile | null) => selectProfile(1, profile?.id ?? null)} onManage={() => router.push(PROFILES_HREF)} colorSection={colorSection} alignOverride={pickerAlign} triggerStyle={triggerStyle} />
 
-  const picker = <ProfilePicker idPrefix='home-p1' host={pickerHost} profiles={profiles} selectedId={lastSelected[1]} color={p1Color} dark={dark} guestLabel='P1' onSelect={(profile: Profile | null) => selectProfile(1, profile?.id ?? null)} onManage={() => router.push('/profiles')} colorSection={{ value: p1Color, onChange: handleP1ColorChange, swatches: defaultColors, caption: selectedProfile ? pack.colorCaption : undefined }} />
+  // Closes seat 1's menu on a press anywhere but the menu and its button. Where it's mounted matters on
+  // a phone, where zIndex only orders the children of one parent: the menu lives inside the scroller in
+  // the upright layout, so the overlay goes there too, under the button's wrapper (raised while the menu
+  // is open) and over the rows. As the frame's first child it sat under the whole scroller, and a press
+  // on a row played the game. In the wide layout the left pane is itself the frame's child, so the
+  // overlay stays there, under the pane and over the grid.
+  const pressAway = <PressAwayOverlay active={pickerHost.openId !== null} onPress={pickerHost.close} style={styles.pressAway} />
+  const RulesSheet = rulesGame?.Rules
 
   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`. */}
+      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}>
-        <PressAwayOverlay active={pickerHost.openId !== null} onPress={pickerHost.close} />
-        {isWide ? (
-          <>
-            {/* Right pane: the game grid, scrolling on its own beside the left pane. The scroller runs
+        <RulesHost enabled={pack.games.some((game) => game.Rules)}>
+          {isWide ? (
+            <>
+              {pressAway}
+              {/* Right pane: the game grid, scrolling on its own beside the left pane. The scroller runs
             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. */}
-            <ScrollView style={[styles.wideRightPane, { left: layout.paddingLeft + layout.leftPaneWidth + HOME_WIDE_PANE_GAP }]} contentContainerStyle={{ paddingTop: 16 + insets.top, paddingBottom: 16 + insets.bottom, paddingRight: layout.paddingRight }}>
-              <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={() => openFor(game.id)} />
-                ))}
-              </View>
-            </ScrollView>
-            {/* Left pane: the hero, then seat 1's button, centred as one group under the corner
+            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 }}>
+                <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} />
+                  ))}
+                </View>
+              </FadingScrollView>
+              {/* Left pane: the hero, then seat 1's button, centred as one group under the corner
             buttons' band. A later sibling of the grid, lifted while seat 1's menu is open so the menu
             paints over the tiles. box-none: only its controls claim taps. */}
-            <View style={[styles.wideLeftPane, { left: layout.paddingLeft, width: layout.leftPaneWidth, paddingTop: HOME_TOP_BAND + insets.top, paddingBottom: 16 + insets.bottom }, pickerHost.openId !== null && styles.pickerOpen]}>
-              <pack.HeroTitle words={pack.wordmark} color={fg} p1Color={p1Color} p2Color={p2Color} active={heroActive} fit={layout.heroFit} />
-              <View style={styles.widePicker}>{picker}</View>
-            </View>
-          </>
-        ) : (
-          <ScrollView style={styles.scroll} contentContainerStyle={[styles.content, { paddingTop: 56 + insets.top, paddingBottom: 24 + insets.bottom, paddingLeft: 16 + insets.left, paddingRight: 16 + insets.right }]}>
-            <pack.HeroTitle words={pack.wordmark} color={fg} p1Color={p1Color} p2Color={p2Color} active={heroActive} />
+              <View style={[styles.wideLeftPane, { left: layout.paddingLeft, width: layout.leftPaneWidth, paddingTop: HOME_TOP_BAND + insets.top, paddingBottom: 16 + insets.bottom }, pickerHost.openId !== null && styles.pickerOpen]}>
+                <pack.HeroTitle words={pack.wordmark} color={fg} p1Color={p1Color} p2Color={p2Color} active={heroActive} fit={layout.heroFit} />
+                <View style={styles.widePicker}>{picker}</View>
+              </View>
+            </>
+          ) : (
+            <FadingScrollView 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} />
 
-            {/* Who's playing: seat 1's button, the same one each loadout starts with. Lifted above the
+              {/* Who's playing: seat 1's button, the same one each loadout starts with. Lifted above the
             tiles while its menu is open, so the menu paints over them. */}
-            <View style={[styles.picker, pickerHost.openId !== null && styles.pickerOpen]}>{picker}</View>
+              <View style={[styles.picker, pickerHost.openId !== null && styles.pickerOpen]}>{picker}</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={() => openFor(game.id)} />
-              ))}
-            </View>
-          </ScrollView>
-        )}
+              <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} />
+                ))}
+              </View>
+            </FadingScrollView>
+          )}
 
-        <IconButton icon='trophy' iconColor={fg} size={24} style={[styles.corner, { top: 8 + insets.top, left: 8 + insets.left }]} onPress={() => router.push('/stats')} accessibilityLabel='Stats & Achievements' />
-        <IconButton icon='cog' iconColor={fg} size={24} style={[styles.corner, { top: 8 + insets.top, right: 8 + insets.right }]} onPress={() => setSettingsOpen(true)} accessibilityLabel='Settings' />
+          <IconButton icon='trophy' iconColor={fg} size={24} style={[styles.corner, { top: 8 + insets.top, left: 8 + insets.left }]} onPress={() => router.push(STATS_HREF)} accessibilityLabel='Stats & Achievements' />
+          <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>
 
-      <SettingsDialog visible={settingsOpen} onDismiss={() => setSettingsOpen(false)} rotation={rotation} />
+      {/* 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} />
     </View>
   )
 }
 
+// Seat 1's button's popover id prefix (its menu is `${SEAT_ONE_PICKER}-profile`).
+const SEAT_ONE_PICKER = 'home-p1'
+
+// No placement of the pack's own: hud places the menu itself.
+const noPickerAlign = () => undefined
+
+// 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.
+function RulesHost({ enabled, children }: { enabled: boolean; children: ReactNode }) {
+  return enabled ? <Portal.Host>{children}</Portal.Host> : <>{children}</>
+}
+
 interface GameRowProps {
-  game: GameDefinition
+  game: PackGameDefinition
   dark: boolean
   p1Color: string
   p2Color: string
   // Whether Home has painted once, so a preview may draw (see previewsRevealed).
   previewRevealed: boolean
   onPress: () => void
-  onRules: () => void
+  // Undefined for a game with no rules sheet and no How to Play cards: no rules button.
+  onRules?: () => void
 }
 
 // One game on its own well: its icon at app-icon size (the art was drawn as an app icon), or its
@@ -173,13 +235,7 @@ function GameRow({ game, dark, p1Color, p2Color, previewRevealed, onPress, onRul
     // inside a button is invalid on the web.
     <View>
       <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 size={ROW_ICON_SIZE} p1Color={p1Color} p2Color={p2Color} dark={dark} />
-          </View>
-        )}
+        {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}>
           <Text variant='titleLarge' style={[styles.rowTitle, { color: well.fg }]} numberOfLines={1}>
             {game.title}
@@ -189,9 +245,11 @@ function GameRow({ game, dark, p1Color, p2Color, previewRevealed, onPress, onRul
           </Text>
         </View>
       </Pressable>
-      <Pressable onPress={onRules} style={styles.rulesButton} hitSlop={12} accessibilityRole='button' accessibilityLabel={`${game.title} rules`}>
-        <Icon source='information-outline' size={22} color={well.fgMuted} />
-      </Pressable>
+      {onRules && (
+        <Pressable onPress={onRules} style={styles.rulesButton} hitSlop={12} accessibilityRole='button' accessibilityLabel={`${game.title} rules`}>
+          <Icon source='information-outline' size={22} color={well.fgMuted} />
+        </Pressable>
+      )}
     </View>
   )
 }
@@ -217,15 +275,17 @@ function GameTile({ game, width, previewWidth, dark, p1Color, p2Color, previewRe
           {game.blurb}
         </Text>
       </Pressable>
-      <Pressable onPress={onRules} style={styles.tileRulesButton} hitSlop={12} accessibilityRole='button' accessibilityLabel={`${game.title} rules`}>
-        <Icon source='information-outline' size={20} color='#FFFFFF' />
-      </Pressable>
+      {onRules && (
+        <Pressable onPress={onRules} style={styles.tileRulesButton} hitSlop={12} accessibilityRole='button' accessibilityLabel={`${game.title} rules`}>
+          <Icon source='information-outline' size={20} color='#FFFFFF' />
+        </Pressable>
+      )}
     </View>
   )
 }
 
 interface PreviewBoxProps {
-  game: GameDefinition
+  game: PackGameDefinition
   width: number
   revealed: boolean
   dark: boolean
@@ -241,13 +301,13 @@ function PreviewBox({ game, width, revealed, dark, p1Color, p2Color }: PreviewBo
   const iconSize = Math.min(height, ROW_ICON_SIZE)
   return (
     <View style={[styles.preview, { width, height, backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }]}>
-      {Preview ? (
-        revealed && <Preview width={width} height={height} p1Color={p1Color} p2Color={p2Color} dark={dark} />
-      ) : (
-        <View style={[styles.previewIcon, { width: iconSize, height: iconSize, borderRadius: iconSize * 0.22 }]}>
-          <GameIcon size={iconSize} p1Color={p1Color} p2Color={p2Color} dark={dark} />
-        </View>
-      )}
+      {Preview
+        ? revealed && <Preview width={width} height={height} p1Color={p1Color} p2Color={p2Color} dark={dark} />
+        : GameIcon && (
+            <View style={[styles.previewIcon, { width: iconSize, height: iconSize, borderRadius: iconSize * 0.22 }]}>
+              <GameIcon size={iconSize} p1Color={p1Color} p2Color={p2Color} dark={dark} />
+            </View>
+          )}
     </View>
   )
 }
@@ -289,6 +349,15 @@ const styles = StyleSheet.create({
   pickerOpen: {
     zIndex: 100
   },
+  // Seat 1's button on the theme's surface (over a backdrop), the same pill as the tiles' wells.
+  pill: {
+    borderRadius: 999
+  },
+  // Over the rows (and, wide, the grid), whose own stacking is unset, so a press on them reaches it on
+  // the web too, and under the raised button and left pane, so the menu's rows stay pressable.
+  pressAway: {
+    zIndex: 5
+  },
   // The preview's own rounding, clipping whatever it draws to the box.
   preview: {
     alignItems: 'center',

package/src/screens/LoadoutScreen.tsx

@@ -1,11 +1,12 @@
 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 { 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, StyleSheet, View } from 'react-native'
+import { Platform, 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'
@@ -20,7 +21,8 @@ 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'
+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
@@ -31,7 +33,7 @@ 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'>>
+export type LoadoutGame = PackGameDefinition & Required<Pick<PackGameDefinition, '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
@@ -66,6 +68,10 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
   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)
+  // 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
@@ -113,7 +119,7 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
   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 } })
+    router.push(playHref(game.id))
   }, [ready, humanSeats, game.id, mode, dispatch])
 
   const bg = dark ? '#000000' : '#FFFFFF'
@@ -166,7 +172,7 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
 
   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 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_HREF)} />
   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} />
@@ -202,7 +208,7 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
         ) : (
           <View style={styles.stackedZone}>
             {sharedControls}
-            <Animated.View style={[styles.playersRow, anyPlayerPickerOpen && styles.playersRowOpen, panelFadeStyle]}>
+            <Animated.View style={[styles.playersRow, anyPlayerPickerOpen && styles.playersRowOpen, playersRowFade]}>
               {!isPortrait && panelLayout.p1OnRight ? p2Panel : p1Panel}
               {!isPortrait && panelLayout.p1OnRight ? p1Panel : p2Panel}
             </Animated.View>

package/src/screens/ProfilesRoute.tsx

@@ -1,14 +1,39 @@
 import { defaultColors } from '@rific/auto-paper'
+import { type AlignResult, RotatedFrame } from '@tastic/hud/chrome'
 import { ProfilesScreen } from '@tastic/profile'
 
 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
+// never capped.
+const ROSTER_MAX_WIDTH = 640
 
 // 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).
+//
+// 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
+// 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
+// ProfilesScreen only where the pack has one.
+function useRosterAlign(open: boolean, contentWidth: number, contentHeight: number): AlignResult {
+  const { usePickerAlign } = usePack()
+  return usePickerAlign!(open, contentWidth, contentHeight, { maxContentWidth: ROSTER_MAX_WIDTH })
+}
+
 export function ProfilesRoute() {
   const { profiles, createProfile, updateProfile, deleteProfile } = useProfiles()
+  const { Backdrop, foreground, newProfileColor, usePickerAlign } = usePack()
 
-  return <ProfilesScreen profiles={profiles} defaultColor={defaultColors[0].value} onCreate={(patch) => createProfile(patch)} onSave={(id, patch) => updateProfile(id, patch)} onDelete={deleteProfile} onBack={safeBack} />
+  return (
+    <RotatedFrame rotatedSafeArea portalHost maxContentWidth={ROSTER_MAX_WIDTH}>
+      <ProfilesScreen profiles={profiles} defaultColor={newProfileColor ?? defaultColors[0].value} onCreate={(patch) => createProfile(patch)} onSave={(id, patch) => updateProfile(id, patch)} onDelete={deleteProfile} onBack={safeBack} fg={foreground} bg={Backdrop ? 'transparent' : undefined} useColorPickerAlign={usePickerAlign ? useRosterAlign : undefined} />
+    </RotatedFrame>
+  )
 }