@tastic/shell 0.5.0 → 0.7.0

package/dist/index.js

@@ -35,6 +35,8 @@ __export(index_exports, {
   GUEST_PLAYER_ID: () => GUEST_PLAYER_ID,
   HomeScreen: () => HomeScreen,
   LoadoutRoute: () => LoadoutRoute,
+  MATCH_CHIPS_FADE_MS: () => MATCH_CHIPS_FADE_MS,
+  MatchChips: () => MatchChips,
   PREVIEW_ASPECT: () => PREVIEW_ASPECT,
   PackProvider: () => PackProvider,
   PlayRoute: () => PlayRoute,
@@ -64,12 +66,13 @@ __export(index_exports, {
   profileSelectionActions: () => profileSelectionActions,
   profileSelectionReducer: () => profileSelectionSlice_default,
   roundModeFor: () => roundModeFor,
-  safeBack: () => import_core7.safeBack,
+  safeBack: () => import_core8.safeBack,
   seatColorsActions: () => seatColorsActions,
   seatPlayerKey: () => seatPlayerKey,
   seatTwoFor: () => seatTwoFor,
   useActiveRound: () => useActiveRound,
   useAppSettings: () => useAppSettings,
+  useAtComputer: () => useAtComputer,
   useGameGuide: () => useGameGuide,
   useOpponent: () => useOpponent,
   usePack: () => usePack,
@@ -522,7 +525,7 @@ var styles = import_react_native2.StyleSheet.create({
 // src/screens/GameRoute.tsx
 var import_expo_router5 = require("expo-router");
 var import_react14 = require("react");
-var import_react_native5 = require("react-native");
+var import_react_native6 = require("react-native");
 
 // src/routes.ts
 var playHref = (game) => ({ pathname: "/play/[game]", params: { game } });
@@ -532,91 +535,66 @@ var PROFILES_HREF = "/profiles";
 
 // src/screens/LoadoutScreen.tsx
 var import_auto_paper4 = require("@rific/auto-paper");
-var import_core9 = require("@tastic/core");
+var import_core10 = require("@tastic/core");
 var import_chrome4 = require("@tastic/hud/chrome");
 var import_lobby2 = require("@tastic/hud/lobby");
 var import_split_screen = require("@tastic/split-screen");
 var import_expo_router4 = require("expo-router");
 var import_react13 = require("react");
-var import_react_native4 = require("react-native");
+var import_react_native5 = require("react-native");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_react_redux9 = require("react-redux");
 
-// src/components/SeatTwoPanel.tsx
+// src/components/OpponentPicker.tsx
 var import_lobby = require("@tastic/hud/lobby");
 var import_profile4 = require("@tastic/profile");
 var import_react9 = require("react");
 var import_react_native3 = require("react-native");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var CPU_PREFIX = "cpu:";
-var PROFILE_PREFIX = "profile:";
 var NOBODY = "nobody";
-var GUEST = "guest";
-var GUEST_ICON = "account-outline";
+var PERSON = "person";
+var PERSON_ICON = "account-outline";
 var NOBODY_ICON = "account-off-outline";
 var CPU_ICON = "robot";
-function getSeatTwoPopoverId(idPrefix) {
-  return `${idPrefix}-seat`;
+function getOpponentPopoverId(idPrefix) {
+  return `${idPrefix}-opponent`;
 }
-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 }) {
-  const isPerson = seatTwo === "person";
+function OpponentPicker({ idPrefix, host, choices, seatTwo, onSeatTwoChange, cpuDifficulty, color, onColorChange, swatches, takenColor, allowSwapTaken, dark, previewValue, triggerStyle, usePickerAlign }) {
   const drawn = previewValue ? previewValue(color) : color;
-  const selectedProfile = isPerson ? profiles.find((p) => p.id === selectedProfileId) ?? null : null;
   const cpuOptions = cpuDifficulty?.options;
   const options = (0, import_react9.useMemo)(() => {
     const list = [];
     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 })));
-    }
+    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, 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;
+  }, [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) => {
     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");
+      onSeatTwoChange(next === NOBODY ? "nobody" : "person");
     }
   };
-  const colorSection = seatTwo === "nobody" ? void 0 : { value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, caption: selectedProfile ? colorCaption : void 0, previewValue };
-  const pickerId = getSeatTwoPopoverId(idPrefix);
-  const size = (0, import_profile4.getOptionPickerContentSize)(options.length, colorSection);
+  const colorSection = seatTwo === "cpu" ? { value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, previewValue } : void 0;
+  const pickerId = getOpponentPopoverId(idPrefix);
+  const size = (0, import_profile4.getOptionPickerContentSize)(options, colorSection);
   const useAlign = usePickerAlign ?? import_lobby.useZoneClampedAlign;
   const align = useAlign(host.openId === pickerId, size.width, size.height);
-  const ownPopoverOpen = host.openId?.startsWith(`${idPrefix}-`) ?? false;
-  const pickerRowOpen = secondPickerId !== void 0 && host.openId === secondPickerId;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native3.View, { style: [styles2.panel, ownPopoverOpen && styles2.panelOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_profile4.OptionPicker, { id: pickerId, host, options, value, onChange: handleChange, color: drawn, dark, icon, colorSection, alignOverride: align, triggerStyle }),
-    isPerson && secondPicker && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native3.View, { style: [styles2.pickerRow, pickerRowOpen && styles2.pickerRowOpen], children: secondPicker }),
-    isPerson && showReadyButton && onToggleReady && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lobby.ReadyButton, { color: drawn, ready: ready ?? false, onToggleReady })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native3.View, { style: [styles2.button, host.openId === pickerId && styles2.buttonOpen], children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_profile4.OptionPicker, { id: pickerId, host, options, value, onChange: handleChange, color: drawn, dark, icon, colorSection, alignOverride: align, triggerStyle }) });
 }
 var styles2 = import_react_native3.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
+  // Its own column, so a row of seat buttons doesn't stretch the pill to the tallest of them.
+  button: {
+    alignItems: "center"
   },
-  // Lifts the controls picker's popover above the Ready button below it (each View is its own
-  // stacking context on the web).
-  pickerRowOpen: {
+  // A popover escaping this button needs the button itself elevated to paint above a later sibling.
+  buttonOpen: {
     zIndex: 100
   }
 });
@@ -668,14 +646,22 @@ function SettingsDialog({ visible, onDismiss, onShowHowToPlay, children }) {
   ] });
 }
 
+// src/hooks/useAtComputer.ts
+var import_core6 = require("@tastic/core");
+var import_react_native4 = require("react-native");
+function useAtComputer() {
+  const touchPrimary = (0, import_core6.useIsTouchPrimaryDevice)();
+  return import_react_native4.Platform.OS === "web" && !touchPrimary;
+}
+
 // src/hooks/useOpponent.ts
 var import_react11 = require("react");
 var import_react_redux7 = require("react-redux");
 
 // src/redux/opponentSlice.ts
-var import_core6 = require("@rific/core");
+var import_core7 = require("@rific/core");
 var DEFAULT_OPPONENT = { seatTwo: "cpu" };
-var { actions: actions4, reducer: reducer4 } = (0, import_core6.createSettingsSlice)("opponent", {
+var { actions: actions4, reducer: reducer4 } = (0, import_core7.createSettingsSlice)("opponent", {
   initialState: DEFAULT_OPPONENT
 });
 var opponentActions = actions4;
@@ -808,13 +794,13 @@ function useSeatColors(p2IsHuman) {
 }
 
 // src/navigation.ts
-var import_core7 = require("@rific/core");
+var import_core8 = require("@rific/core");
 var import_expo_router3 = require("expo-router");
-(0, import_core7.configureNavigation)({ router: import_expo_router3.router });
+(0, import_core8.configureNavigation)({ router: import_expo_router3.router });
 
 // src/redux/liveplaySlice.ts
-var import_core8 = require("@rific/core");
-var { actions: actions5, reducer: reducer5 } = (0, import_core8.createSettingsSlice)("liveplay", {
+var import_core9 = require("@rific/core");
+var { actions: actions5, reducer: reducer5 } = (0, import_core9.createSettingsSlice)("liveplay", {
   initialState: { activelyPlaying: false, activeRound: null }
 });
 var liveplayActions = actions5;
@@ -823,6 +809,8 @@ var liveplaySlice_default = reducer5;
 // src/screens/LoadoutScreen.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var PANEL_SWAP_FADE_MS = 180;
+var P1_CONTROL_ID = "p1-control";
+var P2_CONTROL_ID = "p2-control";
 function LoadoutScreen({ game }) {
   const pack = usePack();
   const { seatTwo: savedSeatTwo, setSeatTwo } = useOpponent();
@@ -834,8 +822,10 @@ function LoadoutScreen({ game }) {
   const loadout = game.useLoadout(mode);
   const { openFor } = useGameGuide();
   const { profiles, lastSelected, selectProfile } = useProfiles();
-  const { orientationMode } = (0, import_core9.useOrientationState)();
-  const panelMode = p2IsHuman && !game.sideBySideWhenWide ? "faceToFace" : orientationMode;
+  const { orientationMode } = (0, import_core10.useOrientationState)();
+  const atComputer = useAtComputer();
+  const twoPlayerMode = game.sideBySideAtComputer && atComputer ? "sideBySide" : game.sideBySideWhenWide ? orientationMode : "faceToFace";
+  const panelMode = p2IsHuman ? twoPlayerMode : orientationMode;
   const { panelLayout, panelFadeStyle } = (0, import_split_screen.useDualZoneLayout)(panelMode, false, true, false, PANEL_SWAP_FADE_MS);
   const playersRowFade = panelFadeStyle;
   const [settingsOpen, setSettingsOpen] = (0, import_react13.useState)(false);
@@ -844,7 +834,7 @@ function LoadoutScreen({ game }) {
   const { p1Color, p2Color, handleP1ColorChange, handleP2ColorChange } = useSeatColors(p2IsHuman);
   const dispatch = (0, import_react_redux9.useDispatch)();
   const handleP1ProfileSelect = (0, import_react13.useCallback)((profile) => selectProfile(1, profile?.id ?? null), [selectProfile]);
-  const handleP2ProfileSelect = (0, import_react13.useCallback)((profileId) => selectProfile(2, profileId), [selectProfile]);
+  const handleP2ProfileSelect = (0, import_react13.useCallback)((profile) => selectProfile(2, profile?.id ?? null), [selectProfile]);
   const [ready, setReady] = (0, import_react13.useState)({ 1: false, 2: false });
   (0, import_expo_router4.useFocusEffect)(
     (0, import_react13.useCallback)(() => {
@@ -875,16 +865,16 @@ function LoadoutScreen({ game }) {
   const p1Drawn = seatPreview ? seatPreview(p1Color) : p1Color;
   const p2Drawn = seatPreview ? seatPreview(p2Color) : p2Color;
   const triggerStyle = (0, import_react13.useMemo)(() => pack.Backdrop ? [styles3.pill, { backgroundColor: themeColors.surface }] : void 0, [pack.Backdrop, themeColors.surface]);
+  const readySurface = pack.Backdrop ? themeColors.surface : void 0;
   const isPortrait = panelLayout.orientationMode === "faceToFace";
   const showMetaInSharedBand = (0, import_split_screen.needsSharedNeutralZone)(panelLayout.orientationMode, humanSeats.length);
   const p2ZoneStyle = p2IsHuman ? isPortrait ? styles3.p2ZoneTop : styles3.p2ZoneRight : null;
-  const showReadyButton = p2IsHuman;
   const seatPickerAlign = p2IsHuman ? void 0 : pack.usePickerAlign;
   const layoutKey = p2IsHuman ? "zones" : "row";
   const controlsHost = (0, import_chrome4.usePopoverHost)();
-  const p2PanelHost = (0, import_chrome4.usePopoverHost)();
-  const p2Host = p2IsHuman ? p2PanelHost : controlsHost;
-  const anyPlayerPickerOpen = !!(controlsHost.openId?.startsWith("p1-") || controlsHost.openId?.startsWith("p2-"));
+  const p2Host = (0, import_chrome4.usePopoverHost)();
+  const p1PickerOpen = controlsHost.openId?.startsWith("p1-") ?? false;
+  const p1ControlOpen = controlsHost.openId === P1_CONTROL_ID;
   const optionsRow = loadout.options({
     host: controlsHost,
     accentColor: themeColors.tertiary,
@@ -896,36 +886,44 @@ function LoadoutScreen({ game }) {
     onReset: showMetaInSharedBand ? void 0 : loadout.reset
   });
   const optionsPopoverOpen = controlsHost.openId !== null && loadout.optionIds.includes(controlsHost.openId);
-  const sharedControls = showMetaInSharedBand ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lobby2.SharedActionBand, { onBack: import_core7.safeBack, onSettings: () => setSettingsOpen(true), onRandomize: loadout.randomize, onReset: loadout.reset, fg, popoverOpen: optionsPopoverOpen, children: optionsRow }) : optionsRow;
+  const sharedControls = showMetaInSharedBand ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lobby2.SharedActionBand, { onBack: import_core8.safeBack, onSettings: () => setSettingsOpen(true), onRandomize: loadout.randomize, onReset: loadout.reset, fg, popoverOpen: optionsPopoverOpen, children: optionsRow }) : optionsRow;
   const controlLook = { accentColor: themeColors.tertiary, mutedColor: fgMuted, dark };
   const p1Control = loadout.seatControl(1, controlsHost, { ...controlLook, seatColor: p1Drawn });
-  const p1Panel = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lobby2.PlayerSetupPanel, { idPrefix: "p1", host: controlsHost, color: p1Color, onColorChange: handleP1ColorChange, swatches: import_auto_paper4.defaultColors, takenColor: p2Exists ? p2Color : void 0, allowSwapTaken: mode === "vsCpu", colorCaption: pack.colorCaption, isHuman: true, ready: ready[1], onToggleReady: () => setReady((r) => ({ ...r, 1: !r[1] })), dark, showReadyButton, secondPicker: p1Control, secondPickerId: p1Control ? "p1-control" : void 0, profiles, selectedProfileId: lastSelected[1], takenProfileId: p2IsHuman ? lastSelected[2] : null, guestLabel: pack.guestLabel ?? "P1", nullLabel: pack.nullLabel, onProfileSelect: handleP1ProfileSelect, onManageProfiles: () => import_expo_router4.router.push(PROFILES_HREF), previewValue: seatPreview, triggerStyle, useSeatPickerAlign: seatPickerAlign }, `p1-${layoutKey}`);
+  const p1Panel = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lobby2.PlayerSetupPanel, { idPrefix: "p1", host: controlsHost, color: p1Color, onColorChange: handleP1ColorChange, swatches: import_auto_paper4.defaultColors, takenColor: p2Exists ? p2Color : void 0, allowSwapTaken: mode === "vsCpu", colorCaption: pack.colorCaption, isHuman: true, dark, showReadyButton: false, profiles, selectedProfileId: lastSelected[1], takenProfileId: p2IsHuman ? lastSelected[2] : null, guestLabel: pack.guestLabel ?? "P1", nullLabel: pack.nullLabel, onProfileSelect: handleP1ProfileSelect, onManageProfiles: () => import_expo_router4.router.push(PROFILES_HREF), previewValue: seatPreview, triggerStyle, useSeatPickerAlign: seatPickerAlign }, `p1-${layoutKey}`);
+  const opponentPicker = game.seatTwo && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(OpponentPicker, { idPrefix: "p1", host: controlsHost, choices: game.seatTwo, seatTwo, onSeatTwoChange: changeSeatTwo, cpuDifficulty: loadout.cpuDifficulty, color: p2Color, onColorChange: handleP2ColorChange, swatches: import_auto_paper4.defaultColors, takenColor: p1Color, allowSwapTaken: mode === "vsCpu", dark, previewValue: seatPreview, triggerStyle, usePickerAlign: seatPickerAlign }, `opponent-${layoutKey}`);
+  const toggleP1Ready = () => setReady((r) => ({ ...r, 1: !r[1] }));
+  const seatOne = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native5.View, { style: [styles3.seatOne, !p2IsHuman && styles3.seatOneAlone, p1PickerOpen && styles3.raised], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native5.View, { style: [styles3.seatOneButtons, p1PickerOpen && styles3.raised], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native_reanimated2.default.View, { style: [styles3.playersRow, p1PickerOpen && styles3.raised, !p2IsHuman && playersRowFade], children: [
+        p1Panel,
+        opponentPicker
+      ] }),
+      p1Control && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native5.View, { style: [styles3.controlRow, p1ControlOpen && styles3.raised], children: p1Control })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lobby2.ReadyButton, { color: p1Drawn, ready: ready[1], onToggleReady: toggleP1Ready, surfaceColor: readySurface, dark, style: !p2IsHuman && p1PickerOpen && styles3.readyButtonHidden })
+  ] });
   const p2Control = p2IsHuman ? loadout.seatControl(2, p2Host, { ...controlLook, seatColor: p2Drawn }) : void 0;
-  const p2Panel = game.seatTwo && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SeatTwoPanel, { idPrefix: "p2", host: p2Host, choices: game.seatTwo, seatTwo, onSeatTwoChange: changeSeatTwo, cpuDifficulty: loadout.cpuDifficulty, profiles, selectedProfileId: lastSelected[2], onProfileSelect: handleP2ProfileSelect, color: p2Color, onColorChange: handleP2ColorChange, swatches: import_auto_paper4.defaultColors, takenColor: p1Color, allowSwapTaken: mode === "vsCpu", colorCaption: pack.colorCaption, dark, secondPicker: p2Control, secondPickerId: p2Control ? "p2-control" : void 0, ready: ready[2], onToggleReady: () => setReady((r) => ({ ...r, 2: !r[2] })), showReadyButton, previewValue: seatPreview, triggerStyle, usePickerAlign: seatPickerAlign }, `p2-${layoutKey}`);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native4.View, { style: [styles3.container, { backgroundColor: bg }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native4.View, { style: styles3.frame, children: [
+  const p2Panel = p2IsHuman && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lobby2.PlayerSetupPanel, { idPrefix: "p2", host: p2Host, color: p2Color, onColorChange: handleP2ColorChange, swatches: import_auto_paper4.defaultColors, takenColor: p1Color, colorCaption: pack.colorCaption, isHuman: true, ready: ready[2], onToggleReady: () => setReady((r) => ({ ...r, 2: !r[2] })), dark, secondPicker: p2Control, secondPickerId: p2Control ? P2_CONTROL_ID : void 0, profiles, selectedProfileId: lastSelected[2], takenProfileId: lastSelected[1], guestLabel: pack.guestLabel ?? "P2", nullLabel: pack.nullLabel, onProfileSelect: handleP2ProfileSelect, previewValue: seatPreview, triggerStyle, readySurfaceColor: readySurface }, "p2-zones");
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native5.View, { style: [styles3.container, { backgroundColor: bg }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native5.View, { style: styles3.frame, children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_chrome4.PressAwayOverlay, { active: controlsHost.openId !== null, onPress: controlsHost.close }),
       p2ZoneStyle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_chrome4.PressAwayOverlay, { active: controlsHost.openId !== null || p2Host.openId !== null, onPress: p2Host.close, style: p2ZoneStyle }),
-      !showMetaInSharedBand && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_chrome4.CornerActionButtons, { onBack: import_core7.safeBack, onSettings: () => setSettingsOpen(true), fg, insets }),
+      !showMetaInSharedBand && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_chrome4.CornerActionButtons, { onBack: import_core8.safeBack, onSettings: () => setSettingsOpen(true), fg, insets }),
       p2IsHuman ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_split_screen.DualZoneLayout,
         {
           panelLayout,
           panelFadeStyle,
-          p1: p1Panel,
+          p1: seatOne,
           p2: p2Panel,
           shared: sharedControls,
-          p1Elevated: controlsHost.openId?.startsWith("p1-") ?? false,
+          p1Elevated: p1PickerOpen,
           p2Elevated: p2Host.openId !== null,
           sharedElevated: optionsPopoverOpen
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native4.View, { style: styles3.stackedZone, children: [
+      ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native5.View, { style: styles3.stackedZone, children: [
         sharedControls,
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native_reanimated2.default.View, { style: [styles3.playersRow, anyPlayerPickerOpen && styles3.playersRowOpen, playersRowFade], children: [
-          p1Panel,
-          p2Panel
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lobby2.ReadyButton, { color: p1Drawn, ready: ready[1], onToggleReady: () => setReady((r) => ({ ...r, 1: !r[1] })), style: anyPlayerPickerOpen && styles3.readyButtonHidden })
+        seatOne
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SettingsDialog, { visible: settingsOpen, onDismiss: () => setSettingsOpen(false), onShowHowToPlay: () => openFor(game.id) })
@@ -935,10 +933,16 @@ function halfOf(color) {
   const rgb = (0, import_auto_paper4.getRgb)(color);
   return rgb ? `rgba(${rgb.r},${rgb.g},${rgb.b},0.5)` : void 0;
 }
-var styles3 = import_react_native4.StyleSheet.create({
+var styles3 = import_react_native5.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",
@@ -965,21 +969,37 @@ var styles3 = import_react_native4.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
@@ -1012,7 +1032,7 @@ function useResumePoint(gameId) {
     if (!gameId) return;
     setLastActiveGame(gameId);
     return () => {
-      if (import_react_native5.AppState.currentState === "active") clearLastActiveGame();
+      if (import_react_native6.AppState.currentState === "active") clearLastActiveGame();
     };
   }, [gameId, setLastActiveGame, clearLastActiveGame]);
 }
@@ -1024,7 +1044,7 @@ var import_chrome5 = require("@tastic/hud/chrome");
 var import_profile7 = require("@tastic/profile");
 var import_expo_router6 = require("expo-router");
 var import_react16 = require("react");
-var import_react_native7 = require("react-native");
+var import_react_native8 = require("react-native");
 var import_react_native_paper = require("react-native-paper");
 
 // src/hooks/useFrozenWhileHidden.ts
@@ -1044,8 +1064,8 @@ function useFrozenWhileHidden(value, hidden) {
 }
 
 // src/screens/homeLayout.ts
-var import_core10 = require("@tastic/core");
-var import_react_native6 = require("react-native");
+var import_core11 = require("@tastic/core");
+var import_react_native7 = require("react-native");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 var PREVIEW_ASPECT = 360 / 200;
 var ROW_PREVIEW_WIDTH = 92;
@@ -1074,9 +1094,9 @@ function computeHomeLayout(windowWidth, windowHeight, insets) {
   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;
-  const leftPaneWidth = Math.min((0, import_core10.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 leftPaneWidth = Math.min((0, import_core11.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 = (0, import_core10.clamp)(Math.floor((rightPaneWidth + HOME_GRID_GAP) / (HOME_MIN_TILE_WIDTH + HOME_GRID_GAP)), 1, HOME_MAX_COLUMNS);
+  const columns = (0, import_core11.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);
   const heroFit = {
@@ -1099,7 +1119,7 @@ function computeHomeLayout(windowWidth, windowHeight, insets) {
   };
 }
 function useHomeLayout() {
-  const { width, height } = (0, import_react_native6.useWindowDimensions)();
+  const { width, height } = (0, import_react_native7.useWindowDimensions)();
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   return computeHomeLayout(width, height, insets);
 }
@@ -1129,9 +1149,9 @@ function HomeMenu() {
   const [settingsOpen, setSettingsOpen] = (0, import_react16.useState)(false);
   const [rulesGame, setRulesGame] = (0, import_react16.useState)(null);
   const isFocused = (0, import_expo_router6.useIsFocused)();
-  const [appState, setAppState] = (0, import_react16.useState)(import_react_native7.AppState.currentState);
+  const [appState, setAppState] = (0, import_react16.useState)(import_react_native8.AppState.currentState);
   (0, import_react16.useEffect)(() => {
-    const subscription = import_react_native7.AppState.addEventListener("change", setAppState);
+    const subscription = import_react_native8.AppState.addEventListener("change", setAppState);
     return () => subscription.remove();
   }, []);
   const heroActive = isFocused && appState === "active";
@@ -1173,24 +1193,24 @@ function HomeMenu() {
   const picker = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_profile7.ProfilePicker, { idPrefix: SEAT_ONE_PICKER, host: pickerHost, profiles, selectedId: lastSelected[1], color: p1Drawn, dark, guestLabel: pack.guestLabel ?? "P1", nullLabel: pack.nullLabel, onSelect: (profile) => selectProfile(1, profile?.id ?? null), onManage: () => import_expo_router6.router.push(PROFILES_HREF), colorSection, alignOverride: pickerAlign, triggerStyle });
   const pressAway = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_chrome5.PressAwayOverlay, { active: pickerHost.openId !== null, onPress: pickerHost.close, style: styles4.pressAway });
   const RulesSheet = rulesGame?.Rules;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native7.View, { style: [styles4.container, { backgroundColor: bg }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.View, { style: styles4.frame, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(RulesHost, { enabled: pack.games.some((game) => game.Rules), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native8.View, { style: [styles4.container, { backgroundColor: bg }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native8.View, { style: styles4.frame, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(RulesHost, { enabled: pack.games.some((game) => game.Rules), children: [
       isWide ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
         pressAway,
         /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_auto_paper5.FadingScrollView, { ...tab && gridClamp, style: [styles4.wideRightPane, { left: layout.paddingLeft + layout.leftPaneWidth + HOME_WIDE_PANE_GAP }], contentContainerStyle: { paddingTop: 16 + insets.top, paddingBottom: 16 + insets.bottom, paddingRight: layout.paddingRight }, children: [
-          tabBar && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.View, { style: [styles4.wideTabs, { width: layout.rightPaneWidth }], children: tabBar }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.View, { style: [styles4.grid, { width: layout.rightPaneWidth }], children: pack.games.map((game) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameTile, { game, hidden: isHidden(tab, game), width: layout.tileWidth, previewWidth: layout.previewWidth, previewRevealed: previewsRevealed, dark, p1Color, p2Color, onPress: () => openGame(game), onRules: hasRules(game) ? () => openRules(game) : void 0 }, game.id)) })
+          tabBar && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native8.View, { style: [styles4.wideTabs, { width: layout.rightPaneWidth }], children: tabBar }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native8.View, { style: [styles4.grid, { width: layout.rightPaneWidth }], children: pack.games.map((game) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameTile, { game, hidden: isHidden(tab, game), width: layout.tileWidth, previewWidth: layout.previewWidth, previewRevealed: previewsRevealed, dark, p1Color, p2Color, onPress: () => openGame(game), onRules: hasRules(game) ? () => openRules(game) : void 0 }, game.id)) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native7.View, { style: [styles4.wideLeftPane, { left: layout.paddingLeft, width: layout.leftPaneWidth, paddingTop: HOME_TOP_BAND + insets.top, paddingBottom: 16 + insets.bottom }, pickerHost.openId !== null && styles4.pickerOpen], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native8.View, { style: [styles4.wideLeftPane, { left: layout.paddingLeft, width: layout.leftPaneWidth, paddingTop: HOME_TOP_BAND + insets.top, paddingBottom: 16 + insets.bottom }, pickerHost.openId !== null && styles4.pickerOpen], children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(pack.HeroTitle, { words: pack.wordmark, color: fg, p1Color, p2Color, active: heroActive, fit: layout.heroFit }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.View, { style: styles4.widePicker, children: picker })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native8.View, { style: styles4.widePicker, children: picker })
         ] })
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_auto_paper5.FadingScrollView, { ...tab && columnClamp, style: styles4.scroll, contentContainerStyle: [styles4.content, { paddingTop: 56 + insets.top, paddingBottom: 24 + insets.bottom, paddingLeft: 16 + insets.left, paddingRight: 16 + insets.right }], children: [
         pressAway,
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(pack.HeroTitle, { words: pack.wordmark, color: fg, p1Color, p2Color, active: heroActive }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.View, { style: [styles4.picker, pickerHost.openId !== null && styles4.pickerOpen], children: picker }),
-        tabBar && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.View, { style: styles4.listWidth, children: tabBar }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.View, { style: styles4.list, children: pack.games.map((game) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameRow, { game, hidden: isHidden(tab, game), dark, p1Color, p2Color, previewRevealed: previewsRevealed, onPress: () => openGame(game), onRules: hasRules(game) ? () => openRules(game) : void 0 }, game.id)) })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native8.View, { style: [styles4.picker, pickerHost.openId !== null && styles4.pickerOpen], children: picker }),
+        tabBar && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native8.View, { style: styles4.listWidth, children: tabBar }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native8.View, { style: styles4.list, children: pack.games.map((game) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameRow, { game, hidden: isHidden(tab, game), dark, p1Color, p2Color, previewRevealed: previewsRevealed, onPress: () => openGame(game), onRules: hasRules(game) ? () => openRules(game) : void 0 }, game.id)) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_feedback_press3.IconButton, { icon: "trophy", iconColor: fg, size: 24, style: [styles4.corner, { top: 8 + insets.top, left: 8 + insets.left }], onPress: () => import_expo_router6.router.push(STATS_HREF), accessibilityLabel: "Stats & Achievements" }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_feedback_press3.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles4.corner, { top: 8 + insets.top, right: 8 + insets.right }], onPress: () => setSettingsOpen(true), accessibilityLabel: "Settings" }),
@@ -1241,10 +1261,10 @@ function GameRow({ game, hidden, dark, p1Color, p2Color, previewRevealed, onPres
   return (
     // The rules button sits beside the row's own button, laid over its end, not inside it: a button
     // inside a button is invalid on the web.
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native7.View, { style: hidden ? styles4.hidden : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native8.View, { style: hidden ? styles4.hidden : void 0, children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_feedback_press3.Pressable, { onPress, style: [styles4.row, { backgroundColor: well.bg }], accessibilityRole: "button", accessibilityLabel: game.title, children: [
-        game.Preview ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PreviewBox, { game, width: ROW_PREVIEW_WIDTH, revealed: previewRevealed, dark, p1Color, p2Color }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.View, { style: [styles4.rowIcon, { backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }], children: GameIcon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameIcon, { size: ROW_ICON_SIZE, p1Color, p2Color, dark }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native7.View, { style: styles4.rowText, children: [
+        game.Preview ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PreviewBox, { game, width: ROW_PREVIEW_WIDTH, revealed: previewRevealed, dark, p1Color, p2Color }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native8.View, { style: [styles4.rowIcon, { backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }], children: GameIcon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameIcon, { size: ROW_ICON_SIZE, p1Color, p2Color, dark }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native8.View, { style: styles4.rowText, children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper.Text, { variant: "titleLarge", style: [styles4.rowTitle, { color: well.fg }], numberOfLines: 1, children: game.title }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper.Text, { variant: "bodyMedium", style: { color: well.fgMuted }, numberOfLines: 2, children: game.blurb })
         ] })
@@ -1255,7 +1275,7 @@ function GameRow({ game, hidden, dark, p1Color, p2Color, previewRevealed, onPres
 }
 function GameTile({ game, hidden, width, previewWidth, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
   const well = (0, import_chrome5.useWellColors)();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native7.View, { style: [{ width }, hidden && styles4.hidden], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native8.View, { style: [{ width }, hidden && styles4.hidden], children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_feedback_press3.Pressable, { onPress, style: [styles4.tile, { backgroundColor: well.bg }], accessibilityRole: "button", accessibilityLabel: game.title, children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PreviewBox, { game, width: previewWidth, revealed: previewRevealed, dark, p1Color, p2Color }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper.Text, { variant: "titleMedium", style: [styles4.rowTitle, { color: well.fg }], numberOfLines: 1, children: game.title }),
@@ -1268,13 +1288,13 @@ function PreviewBox({ game, width, revealed, dark, p1Color, p2Color }) {
   const height = Math.round(width / PREVIEW_ASPECT);
   const { Preview, icon: GameIcon } = game;
   const iconSize = Math.min(height, ROW_ICON_SIZE);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.View, { style: [styles4.preview, { width, height, backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }], children: Preview ? revealed && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Preview, { width, height, p1Color, p2Color, dark }) : GameIcon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native7.View, { style: [styles4.previewIcon, { width: iconSize, height: iconSize, borderRadius: iconSize * 0.22 }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameIcon, { size: iconSize, p1Color, p2Color, dark }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native8.View, { style: [styles4.preview, { width, height, backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }], children: Preview ? revealed && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Preview, { width, height, p1Color, p2Color, dark }) : GameIcon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native8.View, { style: [styles4.previewIcon, { width: iconSize, height: iconSize, borderRadius: iconSize * 0.22 }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameIcon, { size: iconSize, p1Color, p2Color, dark }) }) });
 }
 var ROW_ICON_SIZE = 56;
 var ICON_LIGHT_BG = "#FAFAFA";
 var ICON_DARK_BG = "#050505";
 var RULES_BUTTON_SPACE = 44;
-var styles4 = import_react_native7.StyleSheet.create({
+var styles4 = import_react_native8.StyleSheet.create({
   container: {
     flex: 1
   },
@@ -1430,7 +1450,7 @@ function useRosterAlign(open, contentWidth, contentHeight) {
 function ProfilesRoute() {
   const { profiles, createProfile, updateProfile, deleteProfile } = useProfiles();
   const { Backdrop, foreground, newProfileColor, usePickerAlign } = usePack();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_chrome6.RotatedFrame, { rotatedSafeArea: true, portalHost: true, maxContentWidth: ROSTER_MAX_WIDTH, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_profile8.ProfilesScreen, { profiles, defaultColor: newProfileColor ?? import_auto_paper6.defaultColors[0].value, onCreate: (patch) => createProfile(patch), onSave: (id, patch) => updateProfile(id, patch), onDelete: deleteProfile, onBack: import_core7.safeBack, fg: foreground, bg: Backdrop ? "transparent" : void 0, useColorPickerAlign: usePickerAlign ? useRosterAlign : void 0 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_chrome6.RotatedFrame, { rotatedSafeArea: true, portalHost: true, maxContentWidth: ROSTER_MAX_WIDTH, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_profile8.ProfilesScreen, { profiles, defaultColor: newProfileColor ?? import_auto_paper6.defaultColors[0].value, onCreate: (patch) => createProfile(patch), onSave: (id, patch) => updateProfile(id, patch), onDelete: deleteProfile, onBack: import_core8.safeBack, fg: foreground, bg: Backdrop ? "transparent" : void 0, useColorPickerAlign: usePickerAlign ? useRosterAlign : void 0 }) });
 }
 
 // src/screens/StatsScreen.tsx
@@ -1438,7 +1458,7 @@ var import_auto_paper7 = require("@rific/auto-paper");
 var import_chrome7 = require("@tastic/hud/chrome");
 var import_profile9 = require("@tastic/profile");
 var import_react17 = require("react");
-var import_react_native8 = require("react-native");
+var import_react_native9 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
 var import_react_native_safe_area_context4 = require("react-native-safe-area-context");
 var import_react_redux10 = require("react-redux");
@@ -1461,7 +1481,7 @@ function StatsScreen() {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StatsPressAway, { host: pickerHost, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_chrome7.RotatedFrame, { rotatedSafeArea: true, portalHost: true, maxContentWidth: STATS_MAX_WIDTH, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StatsContent, { pickerHost }) }) });
 }
 function StatsPressAway({ host, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native8.View, { testID: "stats-press-away", style: styles5.screen, onStartShouldSetResponder: () => host.openId !== null, onResponderRelease: host.close, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native9.View, { testID: "stats-press-away", style: styles5.screen, onStartShouldSetResponder: () => host.openId !== null, onResponderRelease: host.close, children });
 }
 var useNoPackReset = () => null;
 var noPickerAlign2 = () => void 0;
@@ -1495,10 +1515,10 @@ function StatsContent({ pickerHost }) {
   const surface = pack.Backdrop ? { backgroundColor: colors.surface } : void 0;
   const triggerStyle = pack.Backdrop ? [styles5.pill, surface] : void 0;
   const PackTabContent = packTab?.Content;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_chrome7.BaseStatsScreen, { title, onBack: import_core7.safeBack, insets, onReset: reset.onReset, resetLabel: reset.label, resetConfirmTitle: reset.title, resetConfirmBody: reset.body, fg: pack.foreground, bg: pack.Backdrop ? "transparent" : void 0, rotation: 0, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_chrome7.BaseStatsScreen, { title, onBack: import_core8.safeBack, insets, onReset: reset.onReset, resetLabel: reset.label, resetConfirmTitle: reset.title, resetConfirmBody: reset.body, fg: pack.foreground, bg: pack.Backdrop ? "transparent" : void 0, rotation: 0, children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_chrome7.PressAwayOverlay, { active: pickerHost.openId !== null, onPress: pickerHost.close, style: styles5.pressAway }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper2.SegmentedButtons, { value: tab, onValueChange: setTab, buttons: tabButtons, style: [styles5.tabs, surface] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native8.View, { style: [styles5.filters, pickerHost.openId !== null && styles5.filtersOpen], onStartShouldSetResponder: () => pickerHost.openId !== null, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native9.View, { style: [styles5.filters, pickerHost.openId !== null && styles5.filtersOpen], onStartShouldSetResponder: () => pickerHost.openId !== null, children: [
       profiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_profile9.OptionPicker, { id: PLAYER_PICKER_ID, host: pickerHost, options: playerOptions, value: profileId ?? EVERYONE, onChange: (value) => setSelectedProfileId(value === EVERYONE ? null : value), color: colors.primary, dark, icon: profileId ? "account" : "account-group", alignOverride: playerAlign, triggerStyle }),
       showGamePicker && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_profile9.OptionPicker, { id: GAME_PICKER_ID, host: pickerHost, options: gameOptions, value: gameId, onChange: setGameId, color: colors.primary, dark, icon: "view-grid-outline", alignOverride: gameAlign, triggerStyle })
     ] }),
@@ -1519,12 +1539,12 @@ function GameStats({ game, tab, profileId, showTitle, titleColor }) {
   const { StatsSections, AchievementList } = game;
   const Sections = tab === STATS ? StatsSections : AchievementList;
   if (!Sections) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native8.View, { style: styles5.game, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native9.View, { style: styles5.game, children: [
     showTitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper2.Text, { variant: "titleLarge", style: [styles5.gameTitle, { color: titleColor }], children: game.title }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Sections, { profileId })
   ] });
 }
-var styles5 = import_react_native8.StyleSheet.create({
+var styles5 = import_react_native9.StyleSheet.create({
   filters: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -1558,14 +1578,53 @@ var styles5 = import_react_native8.StyleSheet.create({
 });
 
 // src/components/imageGameIcon.tsx
-var import_react_native9 = require("react-native");
+var import_react_native10 = require("react-native");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function imageGameIcon(images) {
   return function ImageGameIcon({ size, dark }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native9.Image, { source: dark ? images.dark : images.light, style: { height: size, width: size }, accessibilityIgnoresInvertColors: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native10.Image, { source: dark ? images.dark : images.light, style: { height: size, width: size }, accessibilityIgnoresInvertColors: true });
   };
 }
 
+// src/components/MatchChips.tsx
+var import_auto_paper8 = require("@rific/auto-paper");
+var import_feedback_press4 = require("@rific/feedback-press");
+var import_react18 = require("react");
+var import_react_native11 = require("react-native");
+var import_react_native_reanimated3 = __toESM(require("react-native-reanimated"));
+var import_react_native_safe_area_context5 = require("react-native-safe-area-context");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var MATCH_CHIPS_FADE_MS = 150;
+var CHIP_SIZE = 48;
+var EDGE_PAD = 8;
+function MatchChips({ playing, faceToFace, centerLineY, onBack, onSettings }) {
+  const { height } = (0, import_react_native11.useWindowDimensions)();
+  const insets = (0, import_react_native_safe_area_context5.useSafeAreaInsets)();
+  const { dark } = (0, import_auto_paper8.useAutoPaperTheme)();
+  const atComputer = useAtComputer();
+  const visible = atComputer || !playing;
+  const opacity = (0, import_react_native_reanimated3.useSharedValue)(visible ? 1 : 0);
+  (0, import_react18.useEffect)(() => {
+    opacity.value = (0, import_react_native_reanimated3.withTiming)(visible ? 1 : 0, { duration: MATCH_CHIPS_FADE_MS });
+  }, [visible]);
+  const fadeStyle = (0, import_react_native_reanimated3.useAnimatedStyle)(() => ({ opacity: opacity.value }));
+  const iconColor = dark ? "#FFFFFF" : "#000000";
+  const containerColor = dark ? "rgba(0,0,0,0.55)" : "rgba(255,255,255,0.55)";
+  const between = faceToFace && !atComputer;
+  const top = between ? (centerLineY ?? height / 2) - CHIP_SIZE / 2 : EDGE_PAD + insets.top;
+  const backSlot = { top, left: EDGE_PAD + insets.left };
+  const settingsSlot = { top, right: EDGE_PAD + insets.right };
+  const pointerEvents = visible ? "box-none" : "none";
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_reanimated3.default.View, { pointerEvents, style: [styles6.slot, backSlot, fadeStyle], testID: "match-chips-back", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_feedback_press4.IconButton, { icon: "arrow-left", iconColor, containerColor, style: styles6.chip, size: 24, onPress: onBack, accessibilityLabel: "Back" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_reanimated3.default.View, { pointerEvents, style: [styles6.slot, settingsSlot, fadeStyle], testID: "match-chips-settings", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_feedback_press4.IconButton, { icon: "cog", iconColor, containerColor, style: styles6.chip, size: 24, onPress: onSettings, accessibilityLabel: "Settings" }) })
+  ] });
+}
+var styles6 = import_react_native11.StyleSheet.create({
+  chip: { margin: 0 },
+  slot: { position: "absolute" }
+});
+
 // src/hooks/useActiveRound.ts
 var import_react_redux11 = require("react-redux");
 function useActiveRound(game, defaults) {
@@ -1581,12 +1640,12 @@ var import_toolkit = require("@reduxjs/toolkit");
 var import_redux_persist = require("redux-persist");
 
 // src/redux/shellState.ts
-var import_auto_paper8 = require("@rific/auto-paper");
-var import_core11 = require("@rific/core");
-var import_feedback_press4 = require("@rific/feedback-press");
+var import_auto_paper9 = require("@rific/auto-paper");
+var import_core12 = require("@rific/core");
+var import_feedback_press5 = require("@rific/feedback-press");
 var import_profile10 = require("@tastic/profile");
-var initialSoundSettings = { ...import_feedback_press4.defaultSoundSettings, enabled: !__DEV__ };
-var appSoundReducer = (state = initialSoundSettings, action) => (0, import_feedback_press4.soundReducer)(state, action);
+var initialSoundSettings = { ...import_feedback_press5.defaultSoundSettings, enabled: !__DEV__ };
+var appSoundReducer = (state = initialSoundSettings, action) => (0, import_feedback_press5.soundReducer)(state, action);
 function createShellReducers({ seatColors, appearance = "system", seatTheme }) {
   return {
     // Explicit primary/secondary triad (rather than a single seed expanded via harmony) so the pack's
@@ -1598,12 +1657,12 @@ function createShellReducers({ seatColors, appearance = "system", seatTheme }) {
     // createThemeReducer's own default, when it sets none).
     // A pack with its own seatTheme starts from what seat 1's default color makes of it instead (dark
     // only when the pack's appearance is; hooks/useSeatColors.ts re-applies it with the live mode).
-    theme: (0, import_auto_paper8.createThemeReducer)(seatTheme ? { appearance, ...seatTheme(seatColors, appearance === "dark") } : { appearance, color: { primary: seatColors[1], secondary: seatColors[2], tertiary: (0, import_auto_paper8.getThirdColor)(seatColors[1], seatColors[2]) } }),
-    haptic: import_feedback_press4.hapticReducer,
+    theme: (0, import_auto_paper9.createThemeReducer)(seatTheme ? { appearance, ...seatTheme(seatColors, appearance === "dark") } : { appearance, color: { primary: seatColors[1], secondary: seatColors[2], tertiary: (0, import_auto_paper9.getThirdColor)(seatColors[1], seatColors[2]) } }),
+    haptic: import_feedback_press5.hapticReducer,
     sound: appSoundReducer,
     // @rific/core's Keep Awake setting (see Providers.tsx's KeepAwakeBridge), under the namespace its
     // REHYDRATE handling expects.
-    keepAwake: import_core11.keepAwakeReducer,
+    keepAwake: import_core12.keepAwakeReducer,
     // The shared App Group roster (see @tastic/profile's resolveInitialProfiles/
     // useSharedProfilesSync, wired in hooks/useProfiles.tsx) is layered on top of this as a separate
     // sync target - this slice persisting normally via redux-persist is what gives it local-fallback
@@ -1709,8 +1768,8 @@ function forgetProfileAchievements(dropStats) {
 
 // src/gameStats.tsx
 var import_achievements2 = require("@tastic/achievements");
-var import_react18 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var SEATS = [1, 2];
 function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileStatsView }) {
   const { actions: actions6, reducer: sliceReducer } = (0, import_achievements2.createAchievementsSlice)({
@@ -1727,7 +1786,7 @@ function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileS
   };
   const reducer6 = onProfileRemoved(sliceReducer, forgetProfileAchievements(dropProfileStats));
   const profileViews = (stats) => Object.fromEntries(Object.entries(stats.profiles).map(([profileId, bucket]) => [profileId, getProfileStatsView(bucket)]));
-  const Context = (0, import_react18.createContext)(null);
+  const Context = (0, import_react19.createContext)(null);
   function Provider({ children }) {
     const { stats, unlockedAchievements, recordOutcome, resetAll } = (0, import_achievements2.useAchievements)({
       catalog,
@@ -1735,18 +1794,18 @@ function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileS
       actions: actions6,
       profileViews
     });
-    const record = (0, import_react18.useCallback)(
+    const record = (0, import_react19.useCallback)(
       (update, profileIds) => {
         const result = recordOutcome(update);
         return { device: result.device, profiles: (0, import_achievements2.mapUnlocksBySeat)(SEATS, profileIds, result.profiles) };
       },
       [recordOutcome]
     );
-    const value = (0, import_react18.useMemo)(() => ({ stats, unlockedAchievements, record, resetAll }), [stats, unlockedAchievements, record, resetAll]);
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Context.Provider, { value, children });
+    const value = (0, import_react19.useMemo)(() => ({ stats, unlockedAchievements, record, resetAll }), [stats, unlockedAchievements, record, resetAll]);
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Context.Provider, { value, children });
   }
   function useStats() {
-    const ctx = (0, import_react18.useContext)(Context);
+    const ctx = (0, import_react19.useContext)(Context);
     if (!ctx) throw new Error(`The ${key} stats are read within their game's Provider`);
     return ctx;
   }
@@ -1754,7 +1813,7 @@ function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileS
 }
 
 // src/playerSettings.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_react_redux12 = require("react-redux");
 var SEATS2 = [1, 2];
 function seatPlayerKey(selection, seat) {
@@ -1798,8 +1857,8 @@ function createPlayerSettings({ id, defaults, distinctControls }) {
     const saved = (0, import_react_redux12.useSelector)((state) => state[settingsKey]);
     const controls = (0, import_react_redux12.useSelector)((state) => state[controlsKey]);
     const dispatch = (0, import_react_redux12.useDispatch)();
-    const settings = (0, import_react19.useMemo)(() => compose(saved, controls, selection, seatTwoIsPerson), [saved, controls, selection, seatTwoIsPerson]);
-    const setSettings = (0, import_react19.useCallback)(
+    const settings = (0, import_react20.useMemo)(() => compose(saved, controls, selection, seatTwoIsPerson), [saved, controls, selection, seatTwoIsPerson]);
+    const setSettings = (0, import_react20.useCallback)(
       (next) => {
         const { controlScheme, ...changes } = next;
         if (Object.keys(changes).length > 0) dispatch(patch(seatPlayerKey(selection, 1), changes));
@@ -1822,6 +1881,8 @@ function createPlayerSettings({ id, defaults, distinctControls }) {
   GUEST_PLAYER_ID,
   HomeScreen,
   LoadoutRoute,
+  MATCH_CHIPS_FADE_MS,
+  MatchChips,
   PREVIEW_ASPECT,
   PackProvider,
   PlayRoute,
@@ -1857,6 +1918,7 @@ function createPlayerSettings({ id, defaults, distinctControls }) {
   seatTwoFor,
   useActiveRound,
   useAppSettings,
+  useAtComputer,
   useGameGuide,
   useOpponent,
   usePack,