@tastic/shell 0.5.0 → 0.7.0

package/dist/index.mjs

@@ -460,7 +460,7 @@ var PROFILES_HREF = "/profiles";
 import { defaultColors, getRgb, useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
 import { useOrientationState } from "@tastic/core";
 import { CornerActionButtons, PressAwayOverlay, usePopoverHost } from "@tastic/hud/chrome";
-import { PlayerSetupPanel, ReadyButton as ReadyButton2, SharedActionBand } from "@tastic/hud/lobby";
+import { PlayerSetupPanel, ReadyButton, SharedActionBand } from "@tastic/hud/lobby";
 import { DualZoneLayout, needsSharedNeutralZone, useDualZoneLayout } from "@tastic/split-screen";
 import { router as router2, useFocusEffect as useFocusEffect2 } from "expo-router";
 import { useCallback as useCallback9, useEffect as useEffect4, useMemo as useMemo5, useRef as useRef4, useState as useState4 } from "react";
@@ -469,80 +469,55 @@ import Animated from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDispatch as useDispatch9 } from "react-redux";
 
-// src/components/SeatTwoPanel.tsx
-import { ReadyButton, useZoneClampedAlign } from "@tastic/hud/lobby";
+// src/components/OpponentPicker.tsx
+import { useZoneClampedAlign } from "@tastic/hud/lobby";
 import { getOptionPickerContentSize, OptionPicker } from "@tastic/profile";
 import { useMemo as useMemo4 } from "react";
 import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "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 = useMemo4(() => {
     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 = 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 = getOptionPickerContentSize(options, colorSection);
   const useAlign = usePickerAlign ?? 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__ */ jsxs3(View2, { style: [styles2.panel, ownPopoverOpen && styles2.panelOpen], children: [
-    /* @__PURE__ */ jsx10(OptionPicker, { id: pickerId, host, options, value, onChange: handleChange, color: drawn, dark, icon, colorSection, alignOverride: align, triggerStyle }),
-    isPerson && secondPicker && /* @__PURE__ */ jsx10(View2, { style: [styles2.pickerRow, pickerRowOpen && styles2.pickerRowOpen], children: secondPicker }),
-    isPerson && showReadyButton && onToggleReady && /* @__PURE__ */ jsx10(ReadyButton, { color: drawn, ready: ready ?? false, onToggleReady })
-  ] });
+  return /* @__PURE__ */ jsx10(View2, { style: [styles2.button, host.openId === pickerId && styles2.buttonOpen], children: /* @__PURE__ */ jsx10(OptionPicker, { id: pickerId, host, options, value, onChange: handleChange, color: drawn, dark, icon, colorSection, alignOverride: align, triggerStyle }) });
 }
 var styles2 = StyleSheet2.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
   }
 });
@@ -582,18 +557,26 @@ function useAppSettings() {
 }
 
 // src/components/SettingsDialog.tsx
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 function SettingsDialog({ visible, onDismiss, onShowHowToPlay, children }) {
   const onUpdateError = useUpdateErrorToast2();
   const { settings, setSettings } = useAppSettings();
   const { otaVersion, SettingsSections, edgeGuard = true } = usePack();
   const edgeGuardProps = edgeGuard ? { deferBottomEdgeGestures: settings.deferBottomEdgeGestures, onDeferBottomEdgeGestures: (value) => setSettings({ deferBottomEdgeGestures: value }) } : {};
-  return /* @__PURE__ */ jsxs4(BaseSettingsDialog, { visible, onDismiss, version: otaVersion, ...edgeGuardProps, onUpdateError, onShowHowToPlay, children: [
+  return /* @__PURE__ */ jsxs3(BaseSettingsDialog, { visible, onDismiss, version: otaVersion, ...edgeGuardProps, onUpdateError, onShowHowToPlay, children: [
     children,
     SettingsSections && /* @__PURE__ */ jsx11(SettingsSections, {})
   ] });
 }
 
+// src/hooks/useAtComputer.ts
+import { useIsTouchPrimaryDevice as useIsTouchPrimaryDevice2 } from "@tastic/core";
+import { Platform as Platform3 } from "react-native";
+function useAtComputer() {
+  const touchPrimary = useIsTouchPrimaryDevice2();
+  return Platform3.OS === "web" && !touchPrimary;
+}
+
 // src/hooks/useOpponent.ts
 import { useCallback as useCallback7 } from "react";
 import { useDispatch as useDispatch7, useSelector as useSelector6 } from "react-redux";
@@ -747,8 +730,10 @@ var liveplayActions = actions5;
 var liveplaySlice_default = reducer5;
 
 // src/screens/LoadoutScreen.tsx
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs4 } from "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();
@@ -761,7 +746,9 @@ function LoadoutScreen({ game }) {
   const { openFor } = useGameGuide();
   const { profiles, lastSelected, selectProfile } = useProfiles();
   const { orientationMode } = useOrientationState();
-  const panelMode = p2IsHuman && !game.sideBySideWhenWide ? "faceToFace" : orientationMode;
+  const atComputer = useAtComputer();
+  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);
   const playersRowFade = panelFadeStyle;
   const [settingsOpen, setSettingsOpen] = useState4(false);
@@ -770,7 +757,7 @@ function LoadoutScreen({ game }) {
   const { p1Color, p2Color, handleP1ColorChange, handleP2ColorChange } = useSeatColors(p2IsHuman);
   const dispatch = useDispatch9();
   const handleP1ProfileSelect = useCallback9((profile) => selectProfile(1, profile?.id ?? null), [selectProfile]);
-  const handleP2ProfileSelect = useCallback9((profileId) => selectProfile(2, profileId), [selectProfile]);
+  const handleP2ProfileSelect = useCallback9((profile) => selectProfile(2, profile?.id ?? null), [selectProfile]);
   const [ready, setReady] = useState4({ 1: false, 2: false });
   useFocusEffect2(
     useCallback9(() => {
@@ -801,16 +788,16 @@ function LoadoutScreen({ game }) {
   const p1Drawn = seatPreview ? seatPreview(p1Color) : p1Color;
   const p2Drawn = seatPreview ? seatPreview(p2Color) : p2Color;
   const triggerStyle = useMemo5(() => 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 = 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 = usePopoverHost();
-  const p2PanelHost = usePopoverHost();
-  const p2Host = p2IsHuman ? p2PanelHost : controlsHost;
-  const anyPlayerPickerOpen = !!(controlsHost.openId?.startsWith("p1-") || controlsHost.openId?.startsWith("p2-"));
+  const p2Host = usePopoverHost();
+  const p1PickerOpen = controlsHost.openId?.startsWith("p1-") ?? false;
+  const p1ControlOpen = controlsHost.openId === P1_CONTROL_ID;
   const optionsRow = loadout.options({
     host: controlsHost,
     accentColor: themeColors.tertiary,
@@ -825,11 +812,23 @@ function LoadoutScreen({ game }) {
   const sharedControls = showMetaInSharedBand ? /* @__PURE__ */ jsx12(SharedActionBand, { onBack: 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__ */ jsx12(PlayerSetupPanel, { idPrefix: "p1", host: controlsHost, color: p1Color, onColorChange: handleP1ColorChange, swatches: 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: () => router2.push(PROFILES_HREF), previewValue: seatPreview, triggerStyle, useSeatPickerAlign: seatPickerAlign }, `p1-${layoutKey}`);
+  const p1Panel = /* @__PURE__ */ jsx12(PlayerSetupPanel, { idPrefix: "p1", host: controlsHost, color: p1Color, onColorChange: handleP1ColorChange, swatches: 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: () => router2.push(PROFILES_HREF), previewValue: seatPreview, triggerStyle, useSeatPickerAlign: seatPickerAlign }, `p1-${layoutKey}`);
+  const opponentPicker = game.seatTwo && /* @__PURE__ */ jsx12(OpponentPicker, { idPrefix: "p1", host: controlsHost, choices: game.seatTwo, seatTwo, onSeatTwoChange: changeSeatTwo, cpuDifficulty: loadout.cpuDifficulty, color: p2Color, onColorChange: handleP2ColorChange, swatches: 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__ */ jsxs4(View3, { style: [styles3.seatOne, !p2IsHuman && styles3.seatOneAlone, p1PickerOpen && styles3.raised], children: [
+    /* @__PURE__ */ jsxs4(View3, { style: [styles3.seatOneButtons, p1PickerOpen && styles3.raised], children: [
+      /* @__PURE__ */ jsxs4(Animated.View, { style: [styles3.playersRow, p1PickerOpen && styles3.raised, !p2IsHuman && playersRowFade], children: [
+        p1Panel,
+        opponentPicker
+      ] }),
+      p1Control && /* @__PURE__ */ jsx12(View3, { style: [styles3.controlRow, p1ControlOpen && styles3.raised], children: p1Control })
+    ] }),
+    /* @__PURE__ */ jsx12(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__ */ jsx12(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: 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__ */ jsxs5(View3, { style: [styles3.container, { backgroundColor: bg }], children: [
-    /* @__PURE__ */ jsxs5(View3, { style: styles3.frame, children: [
+  const p2Panel = p2IsHuman && /* @__PURE__ */ jsx12(PlayerSetupPanel, { idPrefix: "p2", host: p2Host, color: p2Color, onColorChange: handleP2ColorChange, swatches: 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__ */ jsxs4(View3, { style: [styles3.container, { backgroundColor: bg }], children: [
+    /* @__PURE__ */ jsxs4(View3, { style: styles3.frame, children: [
       /* @__PURE__ */ jsx12(PressAwayOverlay, { active: controlsHost.openId !== null, onPress: controlsHost.close }),
       p2ZoneStyle && /* @__PURE__ */ jsx12(PressAwayOverlay, { active: controlsHost.openId !== null || p2Host.openId !== null, onPress: p2Host.close, style: p2ZoneStyle }),
       !showMetaInSharedBand && /* @__PURE__ */ jsx12(CornerActionButtons, { onBack: safeBack, onSettings: () => setSettingsOpen(true), fg, insets }),
@@ -838,20 +837,16 @@ function LoadoutScreen({ game }) {
         {
           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__ */ jsxs5(View3, { style: styles3.stackedZone, children: [
+      ) : /* @__PURE__ */ jsxs4(View3, { style: styles3.stackedZone, children: [
         sharedControls,
-        /* @__PURE__ */ jsxs5(Animated.View, { style: [styles3.playersRow, anyPlayerPickerOpen && styles3.playersRowOpen, playersRowFade], children: [
-          p1Panel,
-          p2Panel
-        ] }),
-        /* @__PURE__ */ jsx12(ReadyButton2, { color: p1Drawn, ready: ready[1], onToggleReady: () => setReady((r) => ({ ...r, 1: !r[1] })), style: anyPlayerPickerOpen && styles3.readyButtonHidden })
+        seatOne
       ] })
     ] }),
     /* @__PURE__ */ jsx12(SettingsDialog, { visible: settingsOpen, onDismiss: () => setSettingsOpen(false), onShowHowToPlay: () => openFor(game.id) })
@@ -865,6 +860,12 @@ var styles3 = StyleSheet3.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",
@@ -891,21 +892,37 @@ var styles3 = StyleSheet3.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
@@ -1031,7 +1048,7 @@ function useHomeLayout() {
 }
 
 // src/screens/HomeScreen.tsx
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 function HomeScreen() {
   const pack = usePack();
   const { consumeResumeGame } = useLastActiveGame();
@@ -1099,19 +1116,19 @@ function HomeMenu() {
   const picker = /* @__PURE__ */ jsx14(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: () => router3.push(PROFILES_HREF), colorSection, alignOverride: pickerAlign, triggerStyle });
   const pressAway = /* @__PURE__ */ jsx14(PressAwayOverlay2, { active: pickerHost.openId !== null, onPress: pickerHost.close, style: styles4.pressAway });
   const RulesSheet = rulesGame?.Rules;
-  return /* @__PURE__ */ jsxs6(View4, { style: [styles4.container, { backgroundColor: bg }], children: [
-    /* @__PURE__ */ jsx14(View4, { style: styles4.frame, children: /* @__PURE__ */ jsxs6(RulesHost, { enabled: pack.games.some((game) => game.Rules), children: [
-      isWide ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs5(View4, { style: [styles4.container, { backgroundColor: bg }], children: [
+    /* @__PURE__ */ jsx14(View4, { style: styles4.frame, children: /* @__PURE__ */ jsxs5(RulesHost, { enabled: pack.games.some((game) => game.Rules), children: [
+      isWide ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
         pressAway,
-        /* @__PURE__ */ jsxs6(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: [
+        /* @__PURE__ */ jsxs5(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__ */ jsx14(View4, { style: [styles4.wideTabs, { width: layout.rightPaneWidth }], children: tabBar }),
           /* @__PURE__ */ jsx14(View4, { style: [styles4.grid, { width: layout.rightPaneWidth }], children: pack.games.map((game) => /* @__PURE__ */ jsx14(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__ */ jsxs6(View4, { 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__ */ jsxs5(View4, { 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__ */ jsx14(pack.HeroTitle, { words: pack.wordmark, color: fg, p1Color, p2Color, active: heroActive, fit: layout.heroFit }),
           /* @__PURE__ */ jsx14(View4, { style: styles4.widePicker, children: picker })
         ] })
-      ] }) : /* @__PURE__ */ jsxs6(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: [
+      ] }) : /* @__PURE__ */ jsxs5(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__ */ jsx14(pack.HeroTitle, { words: pack.wordmark, color: fg, p1Color, p2Color, active: heroActive }),
         /* @__PURE__ */ jsx14(View4, { style: [styles4.picker, pickerHost.openId !== null && styles4.pickerOpen], children: picker }),
@@ -1167,10 +1184,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__ */ jsxs6(View4, { style: hidden ? styles4.hidden : void 0, children: [
-      /* @__PURE__ */ jsxs6(Pressable, { onPress, style: [styles4.row, { backgroundColor: well.bg }], accessibilityRole: "button", accessibilityLabel: game.title, children: [
+    /* @__PURE__ */ jsxs5(View4, { style: hidden ? styles4.hidden : void 0, children: [
+      /* @__PURE__ */ jsxs5(Pressable, { onPress, style: [styles4.row, { backgroundColor: well.bg }], accessibilityRole: "button", accessibilityLabel: game.title, children: [
         game.Preview ? /* @__PURE__ */ jsx14(PreviewBox, { game, width: ROW_PREVIEW_WIDTH, revealed: previewRevealed, dark, p1Color, p2Color }) : /* @__PURE__ */ jsx14(View4, { style: [styles4.rowIcon, { backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }], children: GameIcon && /* @__PURE__ */ jsx14(GameIcon, { size: ROW_ICON_SIZE, p1Color, p2Color, dark }) }),
-        /* @__PURE__ */ jsxs6(View4, { style: styles4.rowText, children: [
+        /* @__PURE__ */ jsxs5(View4, { style: styles4.rowText, children: [
           /* @__PURE__ */ jsx14(Text, { variant: "titleLarge", style: [styles4.rowTitle, { color: well.fg }], numberOfLines: 1, children: game.title }),
           /* @__PURE__ */ jsx14(Text, { variant: "bodyMedium", style: { color: well.fgMuted }, numberOfLines: 2, children: game.blurb })
         ] })
@@ -1181,8 +1198,8 @@ function GameRow({ game, hidden, dark, p1Color, p2Color, previewRevealed, onPres
 }
 function GameTile({ game, hidden, width, previewWidth, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
   const well = useWellColors();
-  return /* @__PURE__ */ jsxs6(View4, { style: [{ width }, hidden && styles4.hidden], children: [
-    /* @__PURE__ */ jsxs6(Pressable, { onPress, style: [styles4.tile, { backgroundColor: well.bg }], accessibilityRole: "button", accessibilityLabel: game.title, children: [
+  return /* @__PURE__ */ jsxs5(View4, { style: [{ width }, hidden && styles4.hidden], children: [
+    /* @__PURE__ */ jsxs5(Pressable, { onPress, style: [styles4.tile, { backgroundColor: well.bg }], accessibilityRole: "button", accessibilityLabel: game.title, children: [
       /* @__PURE__ */ jsx14(PreviewBox, { game, width: previewWidth, revealed: previewRevealed, dark, p1Color, p2Color }),
       /* @__PURE__ */ jsx14(Text, { variant: "titleMedium", style: [styles4.rowTitle, { color: well.fg }], numberOfLines: 1, children: game.title }),
       /* @__PURE__ */ jsx14(Text, { variant: "bodySmall", style: { color: well.fgMuted }, numberOfLines: 3, children: game.blurb })
@@ -1368,7 +1385,7 @@ import { StyleSheet as StyleSheet5, View as View5 } from "react-native";
 import { SegmentedButtons as SegmentedButtons2, Text as Text2 } from "react-native-paper";
 import { useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-context";
 import { useDispatch as useDispatch10 } from "react-redux";
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
 var STATS = "stats";
 var ACHIEVEMENTS = "achievements";
 var TABS = [
@@ -1421,10 +1438,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__ */ jsxs7(BaseStatsScreen, { title, onBack: 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__ */ jsxs6(BaseStatsScreen, { title, onBack: 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__ */ jsx16(PressAwayOverlay3, { active: pickerHost.openId !== null, onPress: pickerHost.close, style: styles5.pressAway }),
     /* @__PURE__ */ jsx16(SegmentedButtons2, { value: tab, onValueChange: setTab, buttons: tabButtons, style: [styles5.tabs, surface] }),
-    /* @__PURE__ */ jsxs7(View5, { style: [styles5.filters, pickerHost.openId !== null && styles5.filtersOpen], onStartShouldSetResponder: () => pickerHost.openId !== null, children: [
+    /* @__PURE__ */ jsxs6(View5, { style: [styles5.filters, pickerHost.openId !== null && styles5.filtersOpen], onStartShouldSetResponder: () => pickerHost.openId !== null, children: [
       profiles.length > 0 && /* @__PURE__ */ jsx16(OptionPicker2, { 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__ */ jsx16(OptionPicker2, { id: GAME_PICKER_ID, host: pickerHost, options: gameOptions, value: gameId, onChange: setGameId, color: colors.primary, dark, icon: "view-grid-outline", alignOverride: gameAlign, triggerStyle })
     ] }),
@@ -1445,7 +1462,7 @@ function GameStats({ game, tab, profileId, showTitle, titleColor }) {
   const { StatsSections, AchievementList } = game;
   const Sections = tab === STATS ? StatsSections : AchievementList;
   if (!Sections) return null;
-  return /* @__PURE__ */ jsxs7(View5, { style: styles5.game, children: [
+  return /* @__PURE__ */ jsxs6(View5, { style: styles5.game, children: [
     showTitle && /* @__PURE__ */ jsx16(Text2, { variant: "titleLarge", style: [styles5.gameTitle, { color: titleColor }], children: game.title }),
     /* @__PURE__ */ jsx16(Sections, { profileId })
   ] });
@@ -1492,6 +1509,45 @@ function imageGameIcon(images) {
   };
 }
 
+// src/components/MatchChips.tsx
+import { useAutoPaperTheme as useAutoPaperTheme6 } from "@rific/auto-paper";
+import { IconButton as IconButton2 } from "@rific/feedback-press";
+import { useEffect as useEffect7 } from "react";
+import { StyleSheet as StyleSheet6, useWindowDimensions as useWindowDimensions2 } from "react-native";
+import Animated2, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useSafeAreaInsets as useSafeAreaInsets4 } from "react-native-safe-area-context";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs7 } from "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 } = useWindowDimensions2();
+  const insets = useSafeAreaInsets4();
+  const { dark } = useAutoPaperTheme6();
+  const atComputer = useAtComputer();
+  const visible = atComputer || !playing;
+  const opacity = useSharedValue(visible ? 1 : 0);
+  useEffect7(() => {
+    opacity.value = withTiming(visible ? 1 : 0, { duration: MATCH_CHIPS_FADE_MS });
+  }, [visible]);
+  const fadeStyle = 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__ */ jsxs7(Fragment5, { children: [
+    /* @__PURE__ */ jsx18(Animated2.View, { pointerEvents, style: [styles6.slot, backSlot, fadeStyle], testID: "match-chips-back", children: /* @__PURE__ */ jsx18(IconButton2, { icon: "arrow-left", iconColor, containerColor, style: styles6.chip, size: 24, onPress: onBack, accessibilityLabel: "Back" }) }),
+    /* @__PURE__ */ jsx18(Animated2.View, { pointerEvents, style: [styles6.slot, settingsSlot, fadeStyle], testID: "match-chips-settings", children: /* @__PURE__ */ jsx18(IconButton2, { icon: "cog", iconColor, containerColor, style: styles6.chip, size: 24, onPress: onSettings, accessibilityLabel: "Settings" }) })
+  ] });
+}
+var styles6 = StyleSheet6.create({
+  chip: { margin: 0 },
+  slot: { position: "absolute" }
+});
+
 // src/hooks/useActiveRound.ts
 import { useSelector as useSelector8 } from "react-redux";
 function useActiveRound(game, defaults) {
@@ -1636,7 +1692,7 @@ function forgetProfileAchievements(dropStats) {
 // src/gameStats.tsx
 import { createAchievementsSlice, mapUnlocksBySeat, useAchievements } from "@tastic/achievements";
 import { createContext as createContext5, useCallback as useCallback11, useContext as useContext5, useMemo as useMemo8 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var SEATS = [1, 2];
 function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileStatsView }) {
   const { actions: actions6, reducer: sliceReducer } = createAchievementsSlice({
@@ -1669,7 +1725,7 @@ function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileS
       [recordOutcome]
     );
     const value = useMemo8(() => ({ stats, unlockedAchievements, record, resetAll }), [stats, unlockedAchievements, record, resetAll]);
-    return /* @__PURE__ */ jsx18(Context.Provider, { value, children });
+    return /* @__PURE__ */ jsx19(Context.Provider, { value, children });
   }
   function useStats() {
     const ctx = useContext5(Context);
@@ -1747,6 +1803,8 @@ export {
   GUEST_PLAYER_ID,
   HomeScreen,
   LoadoutRoute,
+  MATCH_CHIPS_FADE_MS,
+  MatchChips,
   PREVIEW_ASPECT,
   PackProvider,
   PlayRoute,
@@ -1782,6 +1840,7 @@ export {
   seatTwoFor,
   useActiveRound,
   useAppSettings,
+  useAtComputer,
   useGameGuide,
   useOpponent,
   usePack,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/shell",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "The app around a pack of React Native games, two-seat or for one player: Home, the loadout, the stats screen, Profiles and Settings, the pack's Redux store and its root providers, driven by one PackDefinition",
   "keywords": [
     "react-native",
@@ -75,7 +75,7 @@
     "@react-native-masked-view/masked-view": "0.3.2",
     "@react-native/jest-preset": "^0.88.0",
     "@reduxjs/toolkit": "^2.14.0",
-    "@rific/auto-paper": "^0.13.4",
+    "@rific/auto-paper": "^0.14.0",
     "@rific/core": "^0.5.0",
     "@rific/feedback-press": "^0.13.1",
     "@rific/focus-chain": "^0.4.8",
@@ -84,10 +84,10 @@
     "@rific/toaster": "^0.12.0",
     "@rific/updater": "^0.8.0",
     "@tastic/achievements": "^0.6.0",
-    "@tastic/core": "^0.15.0",
+    "@tastic/core": "^0.16.0",
     "@tastic/edge-guard": "^0.1.5",
-    "@tastic/hud": "^0.27.1",
-    "@tastic/profile": "^0.17.0",
+    "@tastic/hud": "^0.28.0",
+    "@tastic/profile": "^0.18.0",
     "@tastic/split-screen": "^0.5.5",
     "@testing-library/react-native": "^14.1.0",
     "@types/jest": "30.0.0",
@@ -135,10 +135,10 @@
     "@rific/splash-gate": ">=0.2.3",
     "@rific/toaster": ">=0.10.1",
     "@tastic/achievements": ">=0.6.0",
-    "@tastic/core": ">=0.15.0",
+    "@tastic/core": ">=0.16.0",
     "@tastic/edge-guard": ">=0.1.5",
-    "@tastic/hud": ">=0.27.1",
-    "@tastic/profile": ">=0.16.2",
+    "@tastic/hud": ">=0.28.0",
+    "@tastic/profile": ">=0.18.0",
     "@tastic/split-screen": ">=0.5.5",
     "expo-blur": ">=58.0.4",
     "expo-constants": ">=58.0.12",

package/src/components/MatchChips.tsx

@@ -0,0 +1,72 @@
+import { useAutoPaperTheme } from '@rific/auto-paper'
+import { IconButton } from '@rific/feedback-press'
+import { useEffect } from 'react'
+import { StyleSheet, useWindowDimensions } from 'react-native'
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import { useAtComputer } from '../hooks/useAtComputer'
+
+// How long the chips take to fade out when play starts, and back in when it stops.
+export const MATCH_CHIPS_FADE_MS = 150
+// The chip's box: a 24 icon in IconButton's 48, with Paper's margin zeroed.
+const CHIP_SIZE = 48
+const EDGE_PAD = 8
+
+export interface MatchChipsProps {
+  /** Whether play is on right now (a live puck, a shot in flight, a round being ridden). While it is,
+   * the chips fade out and can't be pressed, so they never cover play; they come back the moment it
+   * stops (between points, a round's card, Game Over). Ignored at a computer, where they stay up. */
+  playing: boolean
+  /** Two players at opposite ends of one screen right now (2 Player face to face). The chips then sit
+   * on the side edges at the line between the players, rather than in the top corners, which are the
+   * far player's end. False for one human (vs CPU, solo) and for side by side. Ignored at a
+   * computer: both players share one upright screen there. */
+  faceToFace: boolean
+  /** Where that line between the players is, as a y in the window. Defaults to the window's middle;
+   * pass it when the board isn't centered (a band of score above it, say). */
+  centerLineY?: number
+  onBack: () => void
+  onSettings: () => void
+}
+
+/** The back and settings chips over a match, in every game of every pack: one rule for where they sit
+ * and when they show. The window's top corners (the same spot as hud's CornerActionButtons on every
+ * other screen), except 2 Player face to face, which puts them on the side edges at the line between
+ * the players; faded out while play is on, except at a computer (useAtComputer: the web without a
+ * touch-first screen), where they stay up in the page's corners. */
+export function MatchChips({ playing, faceToFace, centerLineY, onBack, onSettings }: MatchChipsProps) {
+  const { height } = useWindowDimensions()
+  const insets = useSafeAreaInsets()
+  const { dark } = useAutoPaperTheme()
+  const atComputer = useAtComputer()
+  const visible = atComputer || !playing
+  const opacity = useSharedValue(visible ? 1 : 0)
+  useEffect(() => {
+    opacity.value = withTiming(visible ? 1 : 0, { duration: MATCH_CHIPS_FADE_MS })
+  }, [visible]) // eslint-disable-line react-hooks/exhaustive-deps
+  const fadeStyle = 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 (
+    <>
+      <Animated.View pointerEvents={pointerEvents} style={[styles.slot, backSlot, fadeStyle]} testID='match-chips-back'>
+        <IconButton icon='arrow-left' iconColor={iconColor} containerColor={containerColor} style={styles.chip} size={24} onPress={onBack} accessibilityLabel='Back' />
+      </Animated.View>
+      <Animated.View pointerEvents={pointerEvents} style={[styles.slot, settingsSlot, fadeStyle]} testID='match-chips-settings'>
+        <IconButton icon='cog' iconColor={iconColor} containerColor={containerColor} style={styles.chip} size={24} onPress={onSettings} accessibilityLabel='Settings' />
+      </Animated.View>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  chip: { margin: 0 },
+  slot: { position: 'absolute' }
+})