@tastic/shell 0.6.0 → 0.8.0

package/src/components/OpponentPicker.tsx

@@ -0,0 +1,112 @@
+import type { SeedColor } from '@rific/auto-paper'
+import type { AlignResult, PopoverHost } from '@tastic/hud/chrome'
+import { type MenuOption, useZoneClampedAlign } from '@tastic/hud/lobby'
+import { getOptionPickerContentSize, OptionPicker, type OptionPickerOption, type ProfilePickerColorSection } from '@tastic/profile'
+import { useMemo } from 'react'
+import { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
+
+import type { SeatTwo } from '../types'
+
+// Player 1's say over seat 2 (Jay, 2026-11-07): one button on player 1's side, beside their own
+// seat button, in every mode. It lists the CPU's levels (or one CPU row for a CPU with none), Solo
+// (seat 2 empty, 'nobody') where the game has a solo mode, and Player, which hands seat 2 to a person,
+// each kind of choice behind a divider (Jay, 2026-11-07): the loadout splits face
+// to face and player 2 gets their own seat button (hud's PlayerSetupPanel, Player 2 or a profile,
+// never the CPU). Player 1 keeps this button, so they're the one who takes the seat back for the CPU.
+//
+// The CPU's color is this button's Color row, as it was seat 2's: a CPU has no button of its own. A
+// person's color is on their own button and Solo has none, so the row is only here for the CPU.
+//
+// Built on @tastic/profile's OptionPicker, so it opens, places itself and closes like the seat
+// buttons beside it. It opens under `${idPrefix}-opponent` on player 1's host, so the loadout counts
+// it as one of player 1's menus.
+
+const CPU_PREFIX = 'cpu:'
+const NOBODY = 'nobody'
+const PERSON = 'person'
+
+const PERSON_ICON = 'account-outline'
+const NOBODY_ICON = 'account-off-outline'
+const CPU_ICON = 'robot'
+
+export function getOpponentPopoverId(idPrefix: string): string {
+  return `${idPrefix}-opponent`
+}
+
+export interface OpponentPickerProps {
+  // Player 1's prefix: this button is one of their menus.
+  idPrefix: string
+  host: PopoverHost
+  // Seat 2's choices in this game (GameDefinition.seatTwo), in menu order.
+  choices: readonly SeatTwo[]
+  seatTwo: SeatTwo
+  onSeatTwoChange: (seatTwo: SeatTwo) => void
+  // The CPU's levels (GameLoadout.cpuDifficulty), or undefined for a CPU with none: one CPU row then.
+  cpuDifficulty?: { value: string; options: MenuOption<string>[]; onChange: (value: string) => void }
+  // Seat 2's color: the button's chip, and the CPU's Color row.
+  color: string
+  onColorChange: (hex: string) => void
+  swatches: SeedColor[]
+  takenColor?: string
+  allowSwapTaken?: boolean
+  dark: boolean
+  // How seat 2's color is drawn (PackDefinition.previewColor), as PlayerSetupPanel's own previewValue:
+  // `color` and what onColorChange receives stay the saved values.
+  previewValue?: (hex: string) => string
+  // The button's trigger style (a surface behind its pill over the pack's backdrop).
+  triggerStyle?: StyleProp<ViewStyle>
+  // A placement hook of the pack's own for the menu, in place of the zone clamp (PlayerSetupPanel's
+  // useSeatPickerAlign): left unset inside a split-screen zone, and the same one for the button's life.
+  usePickerAlign?: (open: boolean, contentWidth: number, contentHeight: number) => AlignResult
+}
+
+export function OpponentPicker({ idPrefix, host, choices, seatTwo, onSeatTwoChange, cpuDifficulty, color, onColorChange, swatches, takenColor, allowSwapTaken, dark, previewValue, triggerStyle, usePickerAlign }: OpponentPickerProps) {
+  const drawn = previewValue ? previewValue(color) : color
+
+  const cpuOptions = cpuDifficulty?.options
+  const options = useMemo<OptionPickerOption<string>[]>(() => {
+    const list: OptionPickerOption<string>[] = []
+    if (choices.includes('cpu')) list.push(...(cpuOptions ? cpuOptions.map((o) => ({ value: `${CPU_PREFIX}${o.value}`, label: o.label, icon: o.icon })) : [{ value: CPU_PREFIX, label: 'CPU', icon: CPU_ICON }]))
+    if (choices.includes('nobody')) list.push({ value: NOBODY, label: 'Solo', icon: NOBODY_ICON, dividerBefore: true })
+    if (choices.includes('person')) list.push({ value: PERSON, label: 'Player', icon: PERSON_ICON, dividerBefore: true })
+    return list
+  }, [choices, cpuOptions])
+
+  const value = seatTwo === 'cpu' ? `${CPU_PREFIX}${cpuDifficulty?.value ?? ''}` : seatTwo === 'nobody' ? NOBODY : PERSON
+  const icon = seatTwo === 'cpu' ? CPU_ICON : seatTwo === 'nobody' ? NOBODY_ICON : PERSON_ICON
+
+  const handleChange = (next: string) => {
+    if (next.startsWith(CPU_PREFIX)) {
+      cpuDifficulty?.onChange(next.slice(CPU_PREFIX.length))
+      onSeatTwoChange('cpu')
+    } else {
+      onSeatTwoChange(next === NOBODY ? 'nobody' : 'person')
+    }
+  }
+
+  const colorSection: ProfilePickerColorSection | undefined = seatTwo === 'cpu' ? { value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, previewValue } : undefined
+
+  const pickerId = getOpponentPopoverId(idPrefix)
+  const size = getOptionPickerContentSize(options, colorSection)
+  // Kept inside player 1's half in 2 Player, like their own seat button, or placed by the pack's own
+  // hook where it's given one.
+  const useAlign = usePickerAlign ?? useZoneClampedAlign
+  const align = useAlign(host.openId === pickerId, size.width, size.height)
+
+  return (
+    <View style={[styles.button, host.openId === pickerId && styles.buttonOpen]}>
+      <OptionPicker id={pickerId} host={host} options={options} value={value} onChange={handleChange} color={drawn} dark={dark} icon={icon} colorSection={colorSection} alignOverride={align} triggerStyle={triggerStyle} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  // Its own column, so a row of seat buttons doesn't stretch the pill to the tallest of them.
+  button: {
+    alignItems: 'center'
+  },
+  // A popover escaping this button needs the button itself elevated to paint above a later sibling.
+  buttonOpen: {
+    zIndex: 100
+  }
+})

package/src/components/SettingsDialog.tsx

@@ -17,20 +17,25 @@ export interface SettingsDialogProps {
   children?: ReactNode
 }
 
+// A pack without rules to put first (PackDefinition.useSettingsRules).
+const noSettingsRules = () => null
+
 // The pack-wide Settings dialog: everything the shell puts in it applies to every game (Edge Guard,
 // theme, sound, haptics, Keep Awake), so it reads and writes the app
-// settings itself. Under those, a play screen's own rows and then the pack's own sections
+// settings itself. Above those, the rules of the game it's opened in (PackDefinition.useSettingsRules);
+// under them, a play screen's own rows and then the pack's own sections
 // (PackDefinition.SettingsSections), in every Settings dialog the pack opens. A pack with edgeGuard
 // false gets no Edge Guard row: hud draws it on iOS whenever its props are passed.
 export function SettingsDialog({ visible, onDismiss, onShowHowToPlay, children }: SettingsDialogProps) {
   const onUpdateError = useUpdateErrorToast()
   const { settings, setSettings } = useAppSettings()
   // The pack's otaVersion (src/constants/release.ts, which the OTA tooling bumps).
-  const { otaVersion, SettingsSections, edgeGuard = true } = usePack()
+  const { otaVersion, SettingsSections, edgeGuard = true, useSettingsRules = noSettingsRules } = usePack()
+  const rules = useSettingsRules()
   const edgeGuardProps = edgeGuard ? { deferBottomEdgeGestures: settings.deferBottomEdgeGestures, onDeferBottomEdgeGestures: (value: boolean) => setSettings({ deferBottomEdgeGestures: value }) } : {}
 
   return (
-    <BaseSettingsDialog visible={visible} onDismiss={onDismiss} version={otaVersion} {...edgeGuardProps} onUpdateError={onUpdateError} onShowHowToPlay={onShowHowToPlay}>
+    <BaseSettingsDialog visible={visible} onDismiss={onDismiss} version={otaVersion} {...edgeGuardProps} onUpdateError={onUpdateError} onShowHowToPlay={onShowHowToPlay} leading={rules}>
       {children}
       {SettingsSections && <SettingsSections />}
     </BaseSettingsDialog>

package/src/hooks/useAtComputer.ts

@@ -0,0 +1,13 @@
+import { useIsTouchPrimaryDevice } from '@tastic/core'
+import { Platform } from 'react-native'
+
+// Whether this is a computer: the web without a touch-first screen (@tastic/core's
+// useIsTouchPrimaryDevice). There two players
+// share one upright screen at one keyboard, whatever the window's shape, so 2 Player sits side by side
+// (Jay, 2026-11-07: face to face only on a phone or tablet, natively or in its browser) and the match
+// chips stay up in the page's corners. The loadout (GameDefinition.sideBySideAtComputer), MatchChips,
+// and a pack's own match seating all read this one test.
+export function useAtComputer(): boolean {
+  const touchPrimary = useIsTouchPrimaryDevice()
+  return Platform.OS === 'web' && !touchPrimary
+}

package/src/index.ts

@@ -15,10 +15,11 @@ export { StatsScreen } from './screens/StatsScreen'
 // What a game's own screens use.
 export { useGameGuide } from './components/GuideHost'
 export { imageGameIcon } from './components/imageGameIcon'
-export { MATCH_CHIPS_DESKTOP_MIN_WIDTH, MATCH_CHIPS_FADE_MS, MatchChips, type MatchChipsProps } from './components/MatchChips'
+export { MATCH_CHIPS_FADE_MS, MatchChips, type MatchChipsProps } from './components/MatchChips'
 export { SettingsDialog, type SettingsDialogProps } from './components/SettingsDialog'
 export { useActiveRound } from './hooks/useActiveRound'
 export { useAppSettings } from './hooks/useAppSettings'
+export { useAtComputer } from './hooks/useAtComputer'
 export { useOpponent } from './hooks/useOpponent'
 export { ProfilesProvider, useProfiles } from './hooks/useProfiles'
 export { useSeatColors } from './hooks/useSeatColors'

package/src/redux/opponentSlice.ts

@@ -2,7 +2,7 @@ import { createSettingsSlice } from '@rific/core'
 
 import type { SeatTwo } from '../types'
 
-// Who sits in seat 2, for the whole pack: picked from seat 2's own button in any game's loadout and
+// Who sits in seat 2, for the whole pack: picked from player 1's opponent button in any game's loadout and
 // kept from one game to the next and across relaunches, since it's usually the same two people.
 // A fresh install starts on the CPU, so one person (App Review included) can tap a game and play.
 // A game without 'nobody' among its seat-2 choices treats a saved 'nobody' as the CPU (see

package/src/screens/HomeScreen.tsx

@@ -23,7 +23,7 @@ import { HOME_GRID_GAP, HOME_LEFT_PANE_PICKER_GAP, HOME_TILE_PADDING, HOME_TOP_B
 // 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. A pack with tabs
+// picked. Seat 2 is chosen in the loadout, from player 1's opponent 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

package/src/screens/LoadoutScreen.tsx

@@ -13,8 +13,9 @@ import { useDispatch } from 'react-redux'
 import type { Action, Dispatch } from 'redux'
 
 import { useGameGuide } from '../components/GuideHost'
-import { SeatTwoPanel } from '../components/SeatTwoPanel'
+import { OpponentPicker } from '../components/OpponentPicker'
 import { SettingsDialog } from '../components/SettingsDialog'
+import { useAtComputer } from '../hooks/useAtComputer'
 import { useOpponent } from '../hooks/useOpponent'
 import { useProfiles } from '../hooks/useProfiles'
 import { useSeatColors } from '../hooks/useSeatColors'
@@ -31,13 +32,18 @@ import { humanSeatsFor, type PackGameDefinition, roundModeFor, type Seat, type S
 // already happened at the OS's own pace, not a deliberate reveal.
 const PANEL_SWAP_FADE_MS = 180
 
+// The popover ids a game's seat controls open under (GameLoadout.seatControl).
+const P1_CONTROL_ID = 'p1-control'
+const P2_CONTROL_ID = 'p2-control'
+
 // A game that has a loadout (GameDefinition.useLoadout): the loadout route sends any other straight
 // to its play screen.
 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
-// options, and Ready. Remounted per game (the route keys it by id), so a game's useLoadout hook only
+// nobody, picked on player 1's opponent button beside their seat button, or no button in a game for
+// one player), the game's own match options, and Ready. A person in seat 2 gets their own seat button
+// (Player 2 or a profile) in their half; only player 1 can hand the seat back to the CPU. 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()
@@ -57,12 +63,16 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
   // face to face otherwise. The OS turns the interface; a portrait-locked phone is always face to face.
   const { orientationMode } = useOrientationState()
 
+  // A computer: the web without a touch-first screen (see GameDefinition.sideBySideAtComputer).
+  const atComputer = useAtComputer()
   // 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
+  // comment. 2 Player seats its players the way the game's own match does: face to face (P1 in the
+  // bottom half, P2 in the top) in any window, unless the game seats them side by side at a computer
+  // (GameDefinition.sideBySideAtComputer) or in a wide window (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 twoPlayerMode = game.sideBySideAtComputer && atComputer ? 'sideBySide' : game.sideBySideWhenWide ? orientationMode : 'faceToFace'
+  const panelMode = p2IsHuman ? twoPlayerMode : 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
@@ -75,10 +85,11 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
   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).
+  // A seat's color follows its newly selected profile (useSeatColors). Picking the other seat's
+  // profile swaps the two (see @tastic/profile's select): only reachable from seat 1 with one person,
+  // since 2 Player marks each seat's profile taken in the other's menu.
   const handleP1ProfileSelect = useCallback((profile: Profile | null) => selectProfile(1, profile?.id ?? null), [selectProfile])
-  const handleP2ProfileSelect = useCallback((profileId: string | null) => selectProfile(2, profileId), [selectProfile])
+  const handleP2ProfileSelect = useCallback((profile: Profile | null) => selectProfile(2, profile?.id ?? null), [selectProfile])
 
   const [ready, setReady] = useState<Record<Seat, boolean>>({ 1: false, 2: false })
 
@@ -127,6 +138,9 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
   const p1Drawn = seatPreview ? seatPreview(p1Color) : p1Color
   const p2Drawn = seatPreview ? seatPreview(p2Color) : p2Color
   const triggerStyle = useMemo(() => (pack.Backdrop ? [styles.pill, { backgroundColor: themeColors.surface }] : undefined), [pack.Backdrop, themeColors.surface])
+  // Ready too: a pill on the surface, filled in the seat's color once ready, over a backdrop, where the
+  // outline in a muted seat color read dim (Solitaire's felt); the outline on a plain screen.
+  const readySurface = pack.Backdrop ? themeColors.surface : undefined
 
   const isPortrait = panelLayout.orientationMode === 'faceToFace'
   // See @tastic/split-screen's needsSharedNeutralZone: whether back/settings/randomize/reset fold
@@ -135,27 +149,25 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
 
   // 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 the right
-  // (P1 sits on the left). Only in 2 Player - otherwise seat 2 shares seat 1's host (see p2Host below).
+  // (P1 sits on the left). Only in 2 Player: with one person there's no seat 2 button.
   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
   // The seat buttons' menus are placed by the pack where it places them itself (PackDefinition.
   // usePickerAlign), as on Home, but only in the one-human row: 2 Player's halves keep each menu in
   // its own player's half (hud's useZoneClampedAlign, the panels' own). The panels are keyed by layout,
   // so a placement hook never changes under a mounted panel.
   const seatPickerAlign = p2IsHuman ? undefined : pack.usePickerAlign
   const layoutKey = p2IsHuman ? 'zones' : 'row'
-  // 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.
+  // Player 1's buttons (their seat's, the opponent's and their controls) and the match options share
+  // one host - they sit in the same near/bottom zone, and one person drives them all. 2 Player gives
+  // player 2 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 p2Host = usePopoverHost()
+  // Player 1's menus: their seat button's, the opponent button's and their controls'. With one
+  // person, player 1's Ready button fades out while one is open (a menu can't fully cover it).
+  const p1PickerOpen = controlsHost.openId?.startsWith('p1-') ?? false
+  const p1ControlOpen = controlsHost.openId === P1_CONTROL_ID
 
   const optionsRow = loadout.options({
     host: controlsHost,
@@ -179,10 +191,29 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
 
   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} />
+  // Seat 1's button alone: player 1's controls and Ready sit under the row it shares with the
+  // opponent button, centered under both.
+  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 dark={dark} showReadyButton={false} 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} />
+  // Who sits in seat 2, player 1's to pick in every mode. A game for one player (no seatTwo) has none:
+  // seat 1's button stands alone.
+  const opponentPicker = game.seatTwo && <OpponentPicker key={`opponent-${layoutKey}`} idPrefix='p1' host={controlsHost} choices={game.seatTwo} seatTwo={seatTwo} onSeatTwoChange={changeSeatTwo} cpuDifficulty={loadout.cpuDifficulty} color={p2Color} onColorChange={handleP2ColorChange} swatches={defaultColors} takenColor={p1Color} allowSwapTaken={mode === 'vsCpu'} dark={dark} previewValue={seatPreview} triggerStyle={triggerStyle} usePickerAlign={seatPickerAlign} />
+  const toggleP1Ready = () => setReady((r) => ({ ...r, 1: !r[1] }))
+  const seatOne = (
+    <View style={[styles.seatOne, !p2IsHuman && styles.seatOneAlone, p1PickerOpen && styles.raised]}>
+      <View style={[styles.seatOneButtons, p1PickerOpen && styles.raised]}>
+        <Animated.View style={[styles.playersRow, p1PickerOpen && styles.raised, !p2IsHuman && playersRowFade]}>
+          {p1Panel}
+          {opponentPicker}
+        </Animated.View>
+        {p1Control && <View style={[styles.controlRow, p1ControlOpen && styles.raised]}>{p1Control}</View>}
+      </View>
+      <ReadyButton color={p1Drawn} ready={ready[1]} onToggleReady={toggleP1Ready} surfaceColor={readySurface} dark={dark} style={!p2IsHuman && p1PickerOpen && styles.readyButtonHidden} />
+    </View>
+  )
+  // A person in seat 2: their own seat button (Player 2 or a profile, never the CPU), controls and
+  // Ready, in their half.
   const p2Control = p2IsHuman ? loadout.seatControl(2, p2Host, { ...controlLook, seatColor: p2Drawn }) : undefined
-  // A game for one player (no seatTwo) has no seat 2 button: seat 1's panel stands alone.
-  const p2Panel = game.seatTwo && <SeatTwoPanel key={`p2-${layoutKey}`} 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} previewValue={seatPreview} triggerStyle={triggerStyle} usePickerAlign={seatPickerAlign} />
+  const p2Panel = p2IsHuman && <PlayerSetupPanel key='p2-zones' idPrefix='p2' host={p2Host} color={p2Color} onColorChange={handleP2ColorChange} swatches={defaultColors} takenColor={p1Color} colorCaption={pack.colorCaption} isHuman ready={ready[2]} onToggleReady={() => setReady((r) => ({ ...r, 2: !r[2] }))} dark={dark} secondPicker={p2Control} secondPickerId={p2Control ? P2_CONTROL_ID : undefined} profiles={profiles} selectedProfileId={lastSelected[2]} takenProfileId={lastSelected[1]} guestLabel={pack.guestLabel ?? 'P2'} nullLabel={pack.nullLabel} onProfileSelect={handleP2ProfileSelect} previewValue={seatPreview} triggerStyle={triggerStyle} readySurfaceColor={readySurface} />
 
   return (
     <View style={[styles.container, { backgroundColor: bg }]}>
@@ -201,23 +232,19 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
           <DualZoneLayout
             panelLayout={panelLayout}
             panelFadeStyle={panelFadeStyle}
-            p1={p1Panel}
+            p1={seatOne}
             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}
+            p1Elevated={p1PickerOpen}
             p2Elevated={p2Host.openId !== null}
             sharedElevated={optionsPopoverOpen}
           />
         ) : (
           <View style={styles.stackedZone}>
             {sharedControls}
-            <Animated.View style={[styles.playersRow, anyPlayerPickerOpen && styles.playersRowOpen, playersRowFade]}>
-              {p1Panel}
-              {p2Panel}
-            </Animated.View>
-            <ReadyButton color={p1Drawn} ready={ready[1]} onToggleReady={() => setReady((r) => ({ ...r, 1: !r[1] }))} style={anyPlayerPickerOpen && styles.readyButtonHidden} />
+            {seatOne}
           </View>
         )}
       </View>
@@ -238,6 +265,12 @@ const styles = StyleSheet.create({
   container: {
     flex: 1
   },
+  // Player 1's controls, under their row of buttons.
+  controlRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 12
+  },
   // A real full-bleed box to size the absolutely-positioned children against.
   frame: {
     alignItems: 'center',
@@ -264,21 +297,37 @@ const styles = StyleSheet.create({
   pill: {
     borderRadius: 999
   },
-  // 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).
+  // Seat 1's button and the opponent button read as one evenly spaced row of buttons, at
+  // PlayerSetupPanel's own pickerRow gap (12).
   playersRow: {
     flexDirection: 'row',
     gap: 12
   },
-  playersRowOpen: {
+  // Lifts whichever piece of player 1's has a menu open above its later siblings (each View is its
+  // own stacking context on the web).
+  raised: {
     zIndex: 100
   },
-  // See anyPlayerPickerOpen: opacity 0 (not display:'none') keeps the button's layout space, and
+  // See p1PickerOpen: 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'
   },
+  // Player 1's column: their row of buttons and controls, then Ready, at PlayerSetupPanel's own
+  // rhythm in their half of 2 Player.
+  seatOne: {
+    alignItems: 'center',
+    gap: 12
+  },
+  // With one person, Ready sits as far under the buttons as the match options sit above them.
+  seatOneAlone: {
+    gap: 28
+  },
+  seatOneButtons: {
+    alignItems: 'center',
+    gap: 12
+  },
   stackedZone: {
     alignItems: 'center',
     gap: 28

package/src/types.ts

@@ -73,8 +73,8 @@ export interface GameLoadout {
   // A human seat's controls picker (shot style, keys), or undefined when the game has none.
   seatControl: (seat: Seat, host: PopoverHost, look: SeatControlLook) => ReactNode | undefined
   // Seat 2's CPU difficulty, saved per game since each game's CPU plays differently. Left out by a
-  // game with no seat 2 (GameDefinition.seatTwo), or whose CPU has no levels: seat 2's menu then
-  // offers one plain CPU.
+  // game with no seat 2 (GameDefinition.seatTwo), or whose CPU has no levels: player 1's opponent
+  // menu then offers one plain CPU.
   cpuDifficulty?: { value: string; options: MenuOption<string>[]; onChange: (value: string) => void }
 }
 
@@ -146,13 +146,20 @@ export interface GameDefinition {
   // with the preview at their start, and a grid beside the hero on a wide screen. A game without one
   // keeps its icon there. What it draws is the game's own.
   Preview?: ComponentType<GamePreviewProps>
-  // Seat 2's choices in this game, in menu order. 'nobody' only where the game has a solo mode.
-  // Left out by a game for one player only: its loadout has no seat 2 button and every round is solo.
+  // Seat 2's choices in this game, in the order player 1's opponent menu lists them ('person' is its
+  // Player row). 'nobody' only where the game has a solo mode. Left out by a game for one player only:
+  // its loadout has no opponent button and every round is solo.
   seatTwo?: readonly SeatTwo[]
   // The 2 Player loadout seats its players side by side (P1 on the left) in a window wider than tall,
   // to match a game whose board does the same there. Unset, they sit face to face in any window (P1 at
   // the bottom). Only read in 2 Player, so a game without 'person' among its seatTwo choices leaves it out.
   sideBySideWhenWide?: boolean
+  // The 2 Player loadout seats its players side by side (P1 on the left) at a computer, whatever the
+  // window's shape: two people at one keyboard sit side by side, where the game's match seats them the
+  // same way. A computer is the web without a touch-first screen (@tastic/core's
+  // useIsTouchPrimaryDevice). On a phone or
+  // tablet, natively or in its browser, sideBySideWhenWide decides as before. Only read in 2 Player.
+  sideBySideAtComputer?: boolean
   // The store keys this game mounts (settings, achievements, guide), merged into the pack's store.
   reducers: Record<string, Reducer>
   // Mounted at the app root for the game's lifetime (its stats and achievements context). Left out by
@@ -285,6 +292,11 @@ export interface PackDefinition {
   // The pack's own Settings sections (how cards look, how play is helped along), in every Settings
   // dialog under the shell's own rows and any a play screen adds. Their values live in `reducers`.
   SettingsSections?: ComponentType
+  // What goes FIRST in every Settings dialog the pack opens, above the shell's own rows: the rules of
+  // the game the dialog is opened in (Solitaire finds it from the route), which someone opening
+  // Settings from a game is most likely there for. Null where there is nothing to put first (Home), and
+  // the dialog is then as it was. A hook, called on every render of the dialog.
+  useSettingsRules?: () => ReactNode
   // Store keys of the pack's own, beside the shell's and each game's (GameDefinition.reducers): what
   // SettingsSections saves, or anything else that belongs to every game. Never a key the shell or a
   // game already mounts.

package/src/components/SeatTwoPanel.tsx

@@ -1,144 +0,0 @@
-import type { SeedColor } from '@rific/auto-paper'
-import type { AlignResult, PopoverHost } from '@tastic/hud/chrome'
-import { type MenuOption, ReadyButton, useZoneClampedAlign } from '@tastic/hud/lobby'
-import { getOptionPickerContentSize, OptionPicker, type OptionPickerOption, type Profile, type ProfilePickerColorSection } from '@tastic/profile'
-import { ReactNode, useMemo } from 'react'
-import { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
-
-import type { SeatTwo } from '../types'
-
-// Seat 2's one button: who sits there (a CPU at a difficulty, nobody where the game has a solo
-// mode, a guest, or a profile) and, on top, the seat's Color row. It replaces the choice between
-// One Player and Two Player that Home used to ask before the loadout: picking a person here is what
-// makes the round 2 Player, and the loadout turns to face both players.
-//
-// Built on @tastic/profile's OptionPicker, so it opens, places itself and closes like seat 1's
-// ProfilePicker beside it; written so it can move into @tastic/hud's PlayerSetupPanel once the pack
-// layout's shell moves into the shared packages (see the PuckTastic plan). Laid out like
-// PlayerSetupPanel: the seat button, a person's controls picker under it, and their Ready button.
-
-const CPU_PREFIX = 'cpu:'
-const PROFILE_PREFIX = 'profile:'
-const NOBODY = 'nobody'
-const GUEST = 'guest'
-
-const GUEST_ICON = 'account-outline'
-const NOBODY_ICON = 'account-off-outline'
-const CPU_ICON = 'robot'
-
-export function getSeatTwoPopoverId(idPrefix: string): string {
-  return `${idPrefix}-seat`
-}
-
-export interface SeatTwoPanelProps {
-  idPrefix: string
-  host: PopoverHost
-  // Seat 2's choices in this game (GameDefinition.seatTwo), in menu order.
-  choices: readonly SeatTwo[]
-  seatTwo: SeatTwo
-  onSeatTwoChange: (seatTwo: SeatTwo) => void
-  // The CPU's levels (GameLoadout.cpuDifficulty), or undefined for a CPU with none: one CPU row then.
-  cpuDifficulty?: { value: string; options: MenuOption<string>[]; onChange: (value: string) => void }
-  profiles: Profile[]
-  selectedProfileId: string | null
-  // Seat 1's profile: picking it here swaps the two seats (see @tastic/profile's select).
-  onProfileSelect: (profileId: string | null) => void
-  color: string
-  onColorChange: (hex: string) => void
-  swatches: SeedColor[]
-  takenColor?: string
-  allowSwapTaken?: boolean
-  // Shown under the Color row while a profile is in the seat (its pick is kept for this pack only).
-  colorCaption?: string
-  dark: boolean
-  // A person's controls picker (see GameLoadout.seatControl).
-  secondPicker?: ReactNode
-  secondPickerId?: string
-  ready?: boolean
-  onToggleReady?: () => void
-  showReadyButton?: boolean
-  // How the seat's color, and each profile's in the menu, is drawn (PackDefinition.previewColor), as
-  // PlayerSetupPanel's own previewValue: `color` and what onColorChange receives stay the saved values.
-  previewValue?: (hex: string) => string
-  // The button's trigger style (a surface behind its pill over the pack's backdrop).
-  triggerStyle?: StyleProp<ViewStyle>
-  // A placement hook of the pack's own for the menu, in place of the zone clamp (PlayerSetupPanel's
-  // useSeatPickerAlign): left unset inside a split-screen zone, and the same one for the panel's life.
-  usePickerAlign?: (open: boolean, contentWidth: number, contentHeight: number) => AlignResult
-}
-
-export function SeatTwoPanel({ idPrefix, host, choices, seatTwo, onSeatTwoChange, cpuDifficulty, profiles, selectedProfileId, onProfileSelect, color, onColorChange, swatches, takenColor, allowSwapTaken, colorCaption, dark, secondPicker, secondPickerId, ready, onToggleReady, showReadyButton = true, previewValue, triggerStyle, usePickerAlign }: SeatTwoPanelProps) {
-  const isPerson = seatTwo === 'person'
-  const drawn = previewValue ? previewValue(color) : color
-  const selectedProfile = isPerson ? (profiles.find((p) => p.id === selectedProfileId) ?? null) : null
-
-  const cpuOptions = cpuDifficulty?.options
-  const options = useMemo<OptionPickerOption<string>[]>(() => {
-    const list: OptionPickerOption<string>[] = []
-    if (choices.includes('cpu')) list.push(...(cpuOptions ? cpuOptions.map((o) => ({ value: `${CPU_PREFIX}${o.value}`, label: o.label, icon: o.icon })) : [{ value: CPU_PREFIX, label: 'CPU', icon: CPU_ICON }]))
-    if (choices.includes('nobody')) list.push({ value: NOBODY, label: 'Nobody', icon: NOBODY_ICON })
-    if (choices.includes('person')) {
-      list.push({ value: GUEST, label: 'Player 2', icon: GUEST_ICON })
-      list.push(...[...profiles].sort((a, b) => a.name.localeCompare(b.name)).map((p) => ({ value: `${PROFILE_PREFIX}${p.id}`, label: p.name, icon: 'account', color: previewValue ? previewValue(p.color) : p.color })))
-    }
-    return list
-  }, [choices, cpuOptions, profiles, previewValue])
-
-  const value = seatTwo === 'cpu' ? `${CPU_PREFIX}${cpuDifficulty?.value ?? ''}` : seatTwo === 'nobody' ? NOBODY : selectedProfile ? `${PROFILE_PREFIX}${selectedProfile.id}` : GUEST
-  const icon = seatTwo === 'cpu' ? CPU_ICON : seatTwo === 'nobody' ? NOBODY_ICON : selectedProfile ? 'account' : GUEST_ICON
-
-  const handleChange = (next: string) => {
-    if (next.startsWith(CPU_PREFIX)) {
-      cpuDifficulty?.onChange(next.slice(CPU_PREFIX.length))
-      onSeatTwoChange('cpu')
-    } else if (next === NOBODY) {
-      onSeatTwoChange('nobody')
-    } else {
-      onProfileSelect(next.startsWith(PROFILE_PREFIX) ? next.slice(PROFILE_PREFIX.length) : null)
-      onSeatTwoChange('person')
-    }
-  }
-
-  // Nobody has no color to pick: there's nothing of theirs on the board.
-  const colorSection: ProfilePickerColorSection | undefined = seatTwo === 'nobody' ? undefined : { value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, caption: selectedProfile ? colorCaption : undefined, previewValue }
-
-  const pickerId = getSeatTwoPopoverId(idPrefix)
-  const size = getOptionPickerContentSize(options.length, colorSection)
-  // Kept inside this player's half in 2 Player, like PlayerSetupPanel's own seat button, or placed by
-  // the pack's own hook where it's given one.
-  const useAlign = usePickerAlign ?? useZoneClampedAlign
-  const align = useAlign(host.openId === pickerId, size.width, size.height)
-
-  const ownPopoverOpen = host.openId?.startsWith(`${idPrefix}-`) ?? false
-  const pickerRowOpen = secondPickerId !== undefined && host.openId === secondPickerId
-
-  return (
-    <View style={[styles.panel, ownPopoverOpen && styles.panelOpen]}>
-      <OptionPicker id={pickerId} host={host} options={options} value={value} onChange={handleChange} color={drawn} dark={dark} icon={icon} colorSection={colorSection} alignOverride={align} triggerStyle={triggerStyle} />
-      {isPerson && secondPicker && <View style={[styles.pickerRow, pickerRowOpen && styles.pickerRowOpen]}>{secondPicker}</View>}
-      {isPerson && showReadyButton && onToggleReady && <ReadyButton color={drawn} ready={ready ?? false} onToggleReady={onToggleReady} />}
-    </View>
-  )
-}
-
-// The same rhythm and stacking as @tastic/hud's PlayerSetupPanel, so seat 2 lines up with seat 1.
-const styles = StyleSheet.create({
-  panel: {
-    alignItems: 'center',
-    gap: 12
-  },
-  // A popover escaping this panel needs the panel itself elevated to paint above a later sibling.
-  panelOpen: {
-    zIndex: 100
-  },
-  pickerRow: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    gap: 12
-  },
-  // Lifts the controls picker's popover above the Ready button below it (each View is its own
-  // stacking context on the web).
-  pickerRowOpen: {
-    zIndex: 100
-  }
-})