@tastic/shell 0.2.1 → 0.3.1

package/README.md

@@ -18,7 +18,9 @@ package ecosystem, on [`@tastic/hud`](https://github.com/jayrdeaton/react-native
 
 - **`RootLayout`**: the root of the app (gesture root, safe area, fonts, Redux and its persist gate,
   the theme, profiles, every game's own provider, the splash gates, the shared orientation reading,
-  toasts, How to Play, the OTA update dialog) around expo-router's stack.
+  toasts, How to Play, the OTA update dialog) around expo-router's stack. The stack follows the app's
+  own theme, not the phone's light or dark appearance: the status bar's text, the root window and the
+  navigation theme's background (what shows in a sliding screen's corners during a push or pop).
 - **Screens** for the routes: `HomeScreen` (the pack's hero, seat 1's button, a row per game, or a
   grid of preview tiles on a wide screen), `LoadoutRoute` and `PlayRoute` (`loadout/[game]`,
   `play/[game]`), `ProfilesRoute` and `StatsScreen`.
@@ -109,25 +111,25 @@ PuckTastic and DuelTastic draw what they always did:
 
 | Field | |
 | --- | --- |
-| `Backdrop?` | A table drawn once behind the whole stack (Solitaire's felt). The stack's two layers go transparent (the screens' `contentStyle` and the navigation theme's `colors.background`, which React Navigation paints around every screen), the root window stays dark so light mode doesn't flash white on a push, Android's push and pop crossfade (its default holds the outgoing screen opaque), and Home, the stats screen and Profiles draw transparent, with their buttons and tabs on the theme's surface. |
-| `foreground?` | The color of what those three screens draw straight on the background (the hero, the corner buttons, headers). Unset is black or white with the theme. |
+| `Backdrop?` | A table drawn once behind the whole stack (Solitaire's felt). The stack's two layers go transparent (the screens' `contentStyle` and the navigation theme's `colors.background`, which React Navigation paints around every screen), the root window stays dark so light mode doesn't flash white on a push, Android's push and pop crossfade (its default holds the outgoing screen opaque), and Home, each loadout, the stats screen and Profiles draw transparent, with their buttons and tabs on the theme's surface. |
+| `foreground?` | The color of what those screens draw straight on the background (the hero, the corner buttons, headers), and at half strength a loadout's muted options. Unset is black or white with the theme. |
 | `Provider?` | Mounted once around How to Play and the stack, inside the store, the theme, profiles and every game's `Provider` (one stats context across the pack's games). |
-| `useScreenOptions?` | A hook returning stack screen options (`StackScreenOptions`), merged after the shell's own (a light status bar, Reduce Motion's crossfade). |
+| `useScreenOptions?` | A hook returning stack screen options (`StackScreenOptions`), merged after the shell's own (a status bar style of the pack's own, Reduce Motion's crossfade). The shell's already follow the app's theme, and stay dark over a `Backdrop`. |
 | `useFeedbackSounds?` | A hook returning the two sounds every button plays (`FeedbackSounds`: `selection`, `notification`), in place of the shell's two wavs. |
 | `Toaster?` | The pack's own toaster, drawn in a frame turned with the phone (with the safe-area insets turned onto its edges) in place of the shell's. The toast provider is given no Paper, so nothing portals it out of the frame. |
 | `portraitWhileKeyboard?` | Every screen reads upright while the software keyboard is up (`@tastic/core`'s `OrientationProvider`), for naming a profile sideways. |
 | `edgeGuard?` | `false` leaves Edge Guard out of Settings (no edge controls, no Edge Guard plugin). |
 | `seatTheme?` | `(colors, dark) => ({ color, harmony })`: the theme the seats' colors make (a muted seed from seat 1's color), applied whenever they or dark mode change and as a fresh install's theme, in place of a triad of the raw colors. With it, `useSeatColors` reads each seat's color from where it's remembered (`seatColors`) rather than from the theme. |
-| `previewColor?` | `(hex, dark) => string`: how every profile color is drawn (seat 1's button and swatches, each `ProfileChip`), mounted as `@tastic/profile`'s `ProfileColorProvider`. Saved colors stay as picked. |
+| `previewColor?` | `(hex, dark) => string`: how every profile color is drawn (the seat buttons and their swatches on Home and in the loadouts, a loadout's Ready button and seat controls, each `ProfileChip`), mounted as `@tastic/profile`'s `ProfileColorProvider`. Saved colors stay as picked. |
 | `guide?` | The pack's own How to Play (`PackGuide`: `version`, `selectVersionSeen`, `markSeen`, `getSteps({ touch })`), for cards that teach every game at once: shown on Home's first launch (never while a cold launch resumes a game), replayed from Home's Settings, never in a play screen. Its seen version is a key of the pack's own. |
-| `guestLabel?`, `nullLabel?` | Seat 1's button: the chip's label for a guest (default `'P1'`) and the guest row's in its menu. |
+| `guestLabel?`, `nullLabel?` | Seat 1's button on Home and in every loadout: the chip's label for a guest (default `'P1'`) and the guest row's in its menu. |
 | `guestStats?` | The stats screen keeps a guest's stats under `GUEST_PLAYER_ID` (`'guest'`): a Guest entry between Everyone and the profiles once a profile exists, and the screen opens on seat 1's player. Without it the screen opens on Everyone, where guests count. |
 | `AchievementList?` | One achievement list across the pack's games, on the Achievements tab, with the game picker hidden there. |
 | `statsTabs?` | Tabs of the pack's own between Stats and Achievements (`PackStatsTab`: `value`, `label`, `Content`, handed both filters). With them every tab is as wide as its label, with no icons, so three fit a phone. |
 | `resetStats?` | The stats screen's Reset where the pack resets stats itself (`PackStatsReset`: a `useReset` hook returning `(profileId) => void`, and the `labels` for a player's name, Guest, or `null` for Everyone). It follows the player picker, not the game picker. |
 | `statsGameTitles?` | `false` leaves each game's name off its sections on All Games, where the sections name it. |
 | `newProfileColor?` | A new profile's starting color on Profiles. Unset is auto-paper's first swatch. |
-| `usePickerAlign?` | `(open, contentWidth, contentHeight, options?) => AlignResult` (`PickerAlign`), a hook: where seat 1's menu on Home, the stats screen's two pickers and a profile's color swatch open. hud's own placement measures a turned button against the upright window, so with the phone held sideways it can run a menu off the screen (seen on the iOS simulator, 2026-10-29); a pack whose screens turn hands in a frame-aware one (Solitaire's `useFrameAutoAlign`). Profiles passes `{ maxContentWidth: 640 }`, its roster's column. Unset is hud's placement. |
+| `usePickerAlign?` | `(open, contentWidth, contentHeight, options?) => AlignResult` (`PickerAlign`), a hook: where seat 1's menu on Home, both seat buttons' menus in a loadout's one-human row (2 Player keeps each menu in its own player's half), the stats screen's two pickers and a profile's color swatch open. hud's own placement measures a turned button against the upright window, so with the phone held sideways it can run a menu off the screen (seen on the iOS simulator, 2026-10-29); a pack whose screens turn hands in a frame-aware one (Solitaire's `useFrameAutoAlign`). Profiles passes `{ maxContentWidth: 640 }`, its roster's column. Unset is hud's placement. |
 
 ### `GameDefinition`
 
@@ -204,7 +206,7 @@ became a package (the lower of the two where they differ).
 | `@rific/feedback-press` | >=0.13.1 | haptic and sound settings, the UI sounds |
 | `@rific/toaster` | >=0.10.1 | toasts (DuelTastic runs 0.12, PuckTastic 0.10) |
 | `@tastic/core` | >=0.14.0 | orientation, rotation, the status bar and root background |
-| `@tastic/hud` | >=0.26.0 | Settings, the stats screen, the loadout's panels (its Skia-free `/lobby` entry, new in 0.26.0), How to Play |
+| `@tastic/hud` | >=0.27.1 | Settings, the stats screen, the loadout's panels (its Skia-free `/lobby` entry, new in 0.26.0; 0.27.1's options for a pack drawn on its own backdrop), How to Play |
 | `@tastic/profile` | >=0.16.2 | profiles, the seat buttons, seat colors |
 | `@tastic/achievements` | >=0.6.0 | `createGameStats`, `forgetProfileAchievements` |
 | `@tastic/split-screen` | >=0.5.5 | the 2 Player loadout's two halves |

package/dist/index.js

@@ -484,8 +484,9 @@ function AppStack() {
   const pack = usePack();
   const { Backdrop } = pack;
   const { dark } = (0, import_auto_paper2.useAutoPaperTheme)();
-  const rootBackground = (0, import_core6.useThemedRootBackground)(Backdrop ? true : dark, false);
-  const statusBar = (0, import_core6.useRotationAwareStatusBar)();
+  const darkRoot = Backdrop ? true : dark;
+  const rootBackground = (0, import_core6.useThemedRootBackground)(darkRoot, false);
+  const statusBar = (0, import_core6.useRotationAwareStatusBar)({ style: darkRoot ? "light" : "dark" });
   const packOptions = (pack.useScreenOptions ?? noScreenOptions)();
   const backdropOptions = Backdrop ? { contentStyle: TRANSPARENT_CONTENT, animation: import_react_native2.Platform.select({ android: "fade" }) } : void 0;
   const playOptions = (0, import_react9.useCallback)(
@@ -495,15 +496,19 @@ function AppStack() {
     },
     [pack.games]
   );
-  const navigationTheme = (0, import_react9.useMemo)(() => Backdrop ? { ...import_expo_router.DarkTheme, colors: { ...import_expo_router.DarkTheme.colors, background: "transparent" } } : null, [Backdrop]);
-  const stack = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_expo_router.Stack, { screenOptions: { ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }, children: [
+  const navigationBackground = Backdrop ? TRANSPARENT_CONTENT.backgroundColor : rootBackground.contentStyle.backgroundColor;
+  const navigationTheme = (0, import_react9.useMemo)(() => {
+    const base = darkRoot ? import_expo_router.DarkTheme : import_expo_router.DefaultTheme;
+    return { ...base, colors: { ...base.colors, background: navigationBackground } };
+  }, [darkRoot, navigationBackground]);
+  const stack = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_router.ThemeProvider, { value: navigationTheme, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_expo_router.Stack, { screenOptions: { ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_router.Stack.Screen, { name: "index" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_router.Stack.Screen, { name: "play/[game]", options: playOptions })
-  ] });
-  if (!Backdrop || !navigationTheme) return stack;
+  ] }) });
+  if (!Backdrop) return stack;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native2.View, { style: styles.root, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Backdrop, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_expo_router.ThemeProvider, { value: navigationTheme, children: stack })
+    stack
   ] });
 }
 function OrientationBridge({ children }) {
@@ -594,8 +599,9 @@ var CPU_ICON = "robot";
 function getSeatTwoPopoverId(idPrefix) {
   return `${idPrefix}-seat`;
 }
-function SeatTwoPanel({ idPrefix, host, choices, seatTwo, onSeatTwoChange, cpuDifficulty, profiles, selectedProfileId, onProfileSelect, color, onColorChange, swatches, takenColor, allowSwapTaken, colorCaption, dark, secondPicker, secondPickerId, ready, onToggleReady, showReadyButton = true }) {
+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";
+  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_react10.useMemo)(() => {
@@ -604,10 +610,10 @@ function SeatTwoPanel({ idPrefix, host, choices, seatTwo, onSeatTwoChange, cpuDi
     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: p.color })));
+      list.push(...[...profiles].sort((a, b) => a.name.localeCompare(b.name)).map((p) => ({ value: `${PROFILE_PREFIX}${p.id}`, label: p.name, icon: "account", color: previewValue ? previewValue(p.color) : p.color })));
     }
     return list;
-  }, [choices, cpuOptions, profiles]);
+  }, [choices, cpuOptions, profiles, previewValue]);
   const value = seatTwo === "cpu" ? `${CPU_PREFIX}${cpuDifficulty?.value ?? ""}` : seatTwo === "nobody" ? NOBODY : selectedProfile ? `${PROFILE_PREFIX}${selectedProfile.id}` : GUEST;
   const icon = seatTwo === "cpu" ? CPU_ICON : seatTwo === "nobody" ? NOBODY_ICON : selectedProfile ? "account" : GUEST_ICON;
   const handleChange = (next) => {
@@ -621,16 +627,17 @@ function SeatTwoPanel({ idPrefix, host, choices, seatTwo, onSeatTwoChange, cpuDi
       onSeatTwoChange("person");
     }
   };
-  const colorSection = seatTwo === "nobody" ? void 0 : { value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, caption: selectedProfile ? colorCaption : void 0 };
+  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 align = (0, import_lobby.useZoneClampedAlign)(host.openId === pickerId, size.width, size.height);
+  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, dark, icon, colorSection, alignOverride: align }),
+    /* @__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, ready: ready ?? false, onToggleReady })
+    isPerson && showReadyButton && onToggleReady && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lobby.ReadyButton, { color: drawn, ready: ready ?? false, onToggleReady })
   ] });
 }
 var styles2 = import_react_native3.StyleSheet.create({
@@ -870,13 +877,20 @@ function LoadoutScreen({ game }) {
     dispatch(liveplayActions.setActiveRound({ game: game.id, mode, settings: roundSettingsRef.current }));
     import_expo_router4.router.push(playHref(game.id));
   }, [ready, humanSeats, game.id, mode, dispatch]);
-  const bg = dark ? "#000000" : "#FFFFFF";
-  const fg = dark ? "#FFFFFF" : "#000000";
-  const fgMuted = dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
+  const bg = pack.Backdrop ? "transparent" : dark ? "#000000" : "#FFFFFF";
+  const fg = pack.foreground ?? (dark ? "#FFFFFF" : "#000000");
+  const fgMuted = (pack.foreground && halfOf(pack.foreground)) ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  const { previewColor } = pack;
+  const seatPreview = (0, import_react13.useMemo)(() => previewColor ? (hex) => previewColor(hex, dark) : void 0, [previewColor, dark]);
+  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 isPortrait = panelLayout.orientationMode === "faceToFace";
   const showMetaInSharedBand = (0, import_split_screen.needsSharedNeutralZone)(panelLayout.orientationMode, humanSeats.length);
   const p2ZoneStyle = p2IsHuman ? isPortrait ? styles3.p2ZoneTop : panelLayout.p1OnRight ? styles3.p2ZoneLeft : 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;
@@ -895,10 +909,10 @@ function LoadoutScreen({ game }) {
   const optionsPopoverOpen = controlsHost.openId !== null && loadout.optionIds.includes(controlsHost.openId);
   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, rotation };
-  const p1Control = loadout.seatControl(1, controlsHost, { ...controlLook, seatColor: p1Color });
-  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: "P1", onProfileSelect: handleP1ProfileSelect, onManageProfiles: () => import_expo_router4.router.push(PROFILES_HREF) });
-  const p2Control = p2IsHuman ? loadout.seatControl(2, p2Host, { ...controlLook, seatColor: p2Color }) : 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 });
+  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 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_core10.FakeLandscapeView, { orientationMode: panelLayout.orientationMode, p1OnRight: panelLayout.p1OnRight, upsideDown: panelLayout.upsideDown, style: styles3.rotatable, children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_chrome4.PressAwayOverlay, { active: controlsHost.openId !== null, onPress: controlsHost.close }),
@@ -922,12 +936,16 @@ function LoadoutScreen({ game }) {
           !isPortrait && panelLayout.p1OnRight ? p2Panel : p1Panel,
           !isPortrait && panelLayout.p1OnRight ? p1Panel : p2Panel
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lobby2.ReadyButton, { color: p1Color, ready: ready[1], onToggleReady: () => setReady((r) => ({ ...r, 1: !r[1] })), style: anyPlayerPickerOpen && styles3.readyButtonHidden })
+        /* @__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 })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SettingsDialog, { visible: settingsOpen, onDismiss: () => setSettingsOpen(false), rotation, onShowHowToPlay: () => openFor(game.id) })
   ] });
 }
+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({
   container: {
     flex: 1
@@ -953,6 +971,10 @@ var styles3 = import_react_native4.StyleSheet.create({
     right: 0,
     top: 0
   },
+  // A seat button's trigger on a surface over the pack's backdrop, as Home's.
+  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).
   playersRow: {

package/dist/index.mjs

@@ -29,7 +29,7 @@ import { OrientationProvider, useRotationAwareStatusBar, useThemedRootBackground
 import { RotatedFrame } from "@tastic/hud/chrome";
 import { ProfileColorProvider } from "@tastic/profile";
 import * as Haptics from "expo-haptics";
-import { DarkTheme, Stack, ThemeProvider as NavigationThemeProvider } from "expo-router";
+import { DarkTheme, DefaultTheme, Stack, ThemeProvider as NavigationThemeProvider } from "expo-router";
 import { DeviceMotion } from "expo-sensors";
 import { useCallback as useCallback6, useMemo as useMemo3 } from "react";
 import { Platform as Platform2, StyleSheet, View } from "react-native";
@@ -410,8 +410,9 @@ function AppStack() {
   const pack = usePack();
   const { Backdrop } = pack;
   const { dark } = useAutoPaperTheme();
-  const rootBackground = useThemedRootBackground(Backdrop ? true : dark, false);
-  const statusBar = useRotationAwareStatusBar();
+  const darkRoot = Backdrop ? true : dark;
+  const rootBackground = useThemedRootBackground(darkRoot, false);
+  const statusBar = useRotationAwareStatusBar({ style: darkRoot ? "light" : "dark" });
   const packOptions = (pack.useScreenOptions ?? noScreenOptions)();
   const backdropOptions = Backdrop ? { contentStyle: TRANSPARENT_CONTENT, animation: Platform2.select({ android: "fade" }) } : void 0;
   const playOptions = useCallback6(
@@ -421,15 +422,19 @@ function AppStack() {
     },
     [pack.games]
   );
-  const navigationTheme = useMemo3(() => Backdrop ? { ...DarkTheme, colors: { ...DarkTheme.colors, background: "transparent" } } : null, [Backdrop]);
-  const stack = /* @__PURE__ */ jsxs2(Stack, { screenOptions: { ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }, children: [
+  const navigationBackground = Backdrop ? TRANSPARENT_CONTENT.backgroundColor : rootBackground.contentStyle.backgroundColor;
+  const navigationTheme = useMemo3(() => {
+    const base = darkRoot ? DarkTheme : DefaultTheme;
+    return { ...base, colors: { ...base.colors, background: navigationBackground } };
+  }, [darkRoot, navigationBackground]);
+  const stack = /* @__PURE__ */ jsx9(NavigationThemeProvider, { value: navigationTheme, children: /* @__PURE__ */ jsxs2(Stack, { screenOptions: { ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }, children: [
     /* @__PURE__ */ jsx9(Stack.Screen, { name: "index" }),
     /* @__PURE__ */ jsx9(Stack.Screen, { name: "play/[game]", options: playOptions })
-  ] });
-  if (!Backdrop || !navigationTheme) return stack;
+  ] }) });
+  if (!Backdrop) return stack;
   return /* @__PURE__ */ jsxs2(View, { style: styles.root, children: [
     /* @__PURE__ */ jsx9(Backdrop, {}),
-    /* @__PURE__ */ jsx9(NavigationThemeProvider, { value: navigationTheme, children: stack })
+    stack
   ] });
 }
 function OrientationBridge({ children }) {
@@ -492,7 +497,7 @@ var STATS_HREF = "/stats";
 var PROFILES_HREF = "/profiles";
 
 // src/screens/LoadoutScreen.tsx
-import { defaultColors, useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
+import { defaultColors, getRgb, useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
 import { FakeLandscapeView, getViewRotation, rotateInsets, useOrientationState } from "@tastic/core";
 import { CornerActionButtons, PressAwayOverlay, usePopoverHost } from "@tastic/hud/chrome";
 import { PlayerSetupPanel, ReadyButton as ReadyButton2, SharedActionBand } from "@tastic/hud/lobby";
@@ -520,8 +525,9 @@ var CPU_ICON = "robot";
 function getSeatTwoPopoverId(idPrefix) {
   return `${idPrefix}-seat`;
 }
-function SeatTwoPanel({ idPrefix, host, choices, seatTwo, onSeatTwoChange, cpuDifficulty, profiles, selectedProfileId, onProfileSelect, color, onColorChange, swatches, takenColor, allowSwapTaken, colorCaption, dark, secondPicker, secondPickerId, ready, onToggleReady, showReadyButton = true }) {
+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";
+  const drawn = previewValue ? previewValue(color) : color;
   const selectedProfile = isPerson ? profiles.find((p) => p.id === selectedProfileId) ?? null : null;
   const cpuOptions = cpuDifficulty?.options;
   const options = useMemo4(() => {
@@ -530,10 +536,10 @@ function SeatTwoPanel({ idPrefix, host, choices, seatTwo, onSeatTwoChange, cpuDi
     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: p.color })));
+      list.push(...[...profiles].sort((a, b) => a.name.localeCompare(b.name)).map((p) => ({ value: `${PROFILE_PREFIX}${p.id}`, label: p.name, icon: "account", color: previewValue ? previewValue(p.color) : p.color })));
     }
     return list;
-  }, [choices, cpuOptions, profiles]);
+  }, [choices, cpuOptions, profiles, previewValue]);
   const value = seatTwo === "cpu" ? `${CPU_PREFIX}${cpuDifficulty?.value ?? ""}` : seatTwo === "nobody" ? NOBODY : selectedProfile ? `${PROFILE_PREFIX}${selectedProfile.id}` : GUEST;
   const icon = seatTwo === "cpu" ? CPU_ICON : seatTwo === "nobody" ? NOBODY_ICON : selectedProfile ? "account" : GUEST_ICON;
   const handleChange = (next) => {
@@ -547,16 +553,17 @@ function SeatTwoPanel({ idPrefix, host, choices, seatTwo, onSeatTwoChange, cpuDi
       onSeatTwoChange("person");
     }
   };
-  const colorSection = seatTwo === "nobody" ? void 0 : { value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, caption: selectedProfile ? colorCaption : void 0 };
+  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 align = useZoneClampedAlign(host.openId === pickerId, size.width, size.height);
+  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, dark, icon, colorSection, alignOverride: align }),
+    /* @__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, ready: ready ?? false, onToggleReady })
+    isPerson && showReadyButton && onToggleReady && /* @__PURE__ */ jsx10(ReadyButton, { color: drawn, ready: ready ?? false, onToggleReady })
   ] });
 }
 var styles2 = StyleSheet2.create({
@@ -796,13 +803,20 @@ function LoadoutScreen({ game }) {
     dispatch(liveplayActions.setActiveRound({ game: game.id, mode, settings: roundSettingsRef.current }));
     router2.push(playHref(game.id));
   }, [ready, humanSeats, game.id, mode, dispatch]);
-  const bg = dark ? "#000000" : "#FFFFFF";
-  const fg = dark ? "#FFFFFF" : "#000000";
-  const fgMuted = dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
+  const bg = pack.Backdrop ? "transparent" : dark ? "#000000" : "#FFFFFF";
+  const fg = pack.foreground ?? (dark ? "#FFFFFF" : "#000000");
+  const fgMuted = (pack.foreground && halfOf(pack.foreground)) ?? (dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)");
+  const { previewColor } = pack;
+  const seatPreview = useMemo5(() => previewColor ? (hex) => previewColor(hex, dark) : void 0, [previewColor, dark]);
+  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 isPortrait = panelLayout.orientationMode === "faceToFace";
   const showMetaInSharedBand = needsSharedNeutralZone(panelLayout.orientationMode, humanSeats.length);
   const p2ZoneStyle = p2IsHuman ? isPortrait ? styles3.p2ZoneTop : panelLayout.p1OnRight ? styles3.p2ZoneLeft : 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;
@@ -821,10 +835,10 @@ function LoadoutScreen({ game }) {
   const optionsPopoverOpen = controlsHost.openId !== null && loadout.optionIds.includes(controlsHost.openId);
   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, rotation };
-  const p1Control = loadout.seatControl(1, controlsHost, { ...controlLook, seatColor: p1Color });
-  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: "P1", onProfileSelect: handleP1ProfileSelect, onManageProfiles: () => router2.push(PROFILES_HREF) });
-  const p2Control = p2IsHuman ? loadout.seatControl(2, p2Host, { ...controlLook, seatColor: p2Color }) : 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 });
+  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 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(FakeLandscapeView, { orientationMode: panelLayout.orientationMode, p1OnRight: panelLayout.p1OnRight, upsideDown: panelLayout.upsideDown, style: styles3.rotatable, children: [
       /* @__PURE__ */ jsx12(PressAwayOverlay, { active: controlsHost.openId !== null, onPress: controlsHost.close }),
@@ -848,12 +862,16 @@ function LoadoutScreen({ game }) {
           !isPortrait && panelLayout.p1OnRight ? p2Panel : p1Panel,
           !isPortrait && panelLayout.p1OnRight ? p1Panel : p2Panel
         ] }),
-        /* @__PURE__ */ jsx12(ReadyButton2, { color: p1Color, ready: ready[1], onToggleReady: () => setReady((r) => ({ ...r, 1: !r[1] })), style: anyPlayerPickerOpen && styles3.readyButtonHidden })
+        /* @__PURE__ */ jsx12(ReadyButton2, { color: p1Drawn, ready: ready[1], onToggleReady: () => setReady((r) => ({ ...r, 1: !r[1] })), style: anyPlayerPickerOpen && styles3.readyButtonHidden })
       ] })
     ] }),
     /* @__PURE__ */ jsx12(SettingsDialog, { visible: settingsOpen, onDismiss: () => setSettingsOpen(false), rotation, onShowHowToPlay: () => openFor(game.id) })
   ] });
 }
+function halfOf(color) {
+  const rgb = getRgb(color);
+  return rgb ? `rgba(${rgb.r},${rgb.g},${rgb.b},0.5)` : void 0;
+}
 var styles3 = StyleSheet3.create({
   container: {
     flex: 1
@@ -879,6 +897,10 @@ var styles3 = StyleSheet3.create({
     right: 0,
     top: 0
   },
+  // A seat button's trigger on a surface over the pack's backdrop, as Home's.
+  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).
   playersRow: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/shell",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "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",
@@ -86,7 +86,7 @@
     "@tastic/achievements": "^0.6.0",
     "@tastic/core": "^0.14.0",
     "@tastic/edge-guard": "^0.1.5",
-    "@tastic/hud": "^0.26.0",
+    "@tastic/hud": "^0.27.1",
     "@tastic/profile": "^0.17.0",
     "@tastic/split-screen": "^0.5.5",
     "@testing-library/react-native": "^14.1.0",
@@ -138,7 +138,7 @@
     "@tastic/achievements": ">=0.6.0",
     "@tastic/core": ">=0.14.0",
     "@tastic/edge-guard": ">=0.1.5",
-    "@tastic/hud": ">=0.26.0",
+    "@tastic/hud": ">=0.27.1",
     "@tastic/profile": ">=0.16.2",
     "@tastic/split-screen": ">=0.5.5",
     "expo-blur": ">=58.0.4",

package/src/RootLayout.tsx

@@ -5,7 +5,7 @@ import { OrientationProvider, useRotationAwareStatusBar, useThemedRootBackground
 import { RotatedFrame } from '@tastic/hud/chrome'
 import { ProfileColorProvider } from '@tastic/profile'
 import * as Haptics from 'expo-haptics'
-import { DarkTheme, Stack, ThemeProvider as NavigationThemeProvider } from 'expo-router'
+import { DarkTheme, DefaultTheme, Stack, ThemeProvider as NavigationThemeProvider } from 'expo-router'
 import { DeviceMotion } from 'expo-sensors'
 import { ReactNode, useCallback, useMemo } from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
@@ -50,13 +50,16 @@ import type { PackDefinition, PackGameDefinition } from './types'
 const PLAY_OPTIONS = { statusBarHidden: true }
 const KEEP_STATUS_BAR_OPTIONS = {}
 
-// A pack's Backdrop (PackDefinition.Backdrop) is drawn once behind the whole stack and has to show
-// through two layers: each screen's contentStyle, and the layers React Navigation paints its theme's
-// `colors.background` on around every screen (the ScreenStack's container on native, each screen's
-// wrapper on the web). contentStyle alone left an opaque light grey slab over Solitaire's felt on the
-// web. Nothing else reads the navigation theme (headers are hidden; Paper has its own). Built only for
-// a pack with a backdrop, as it renders: never at import, where a pack's tests may stand in for
-// expo-router without a DarkTheme.
+// The navigation theme is the root background too. React Navigation paints its theme's
+// `colors.background` on the layers around every screen (the ScreenStack's container on native, each
+// screen's wrapper on the web), and expo-router hands its container no theme, so that was always
+// DefaultTheme's light grey: on iOS it showed in a sliding screen's rounded corners during every push and
+// pop, whatever the app's theme. So the stack always gets a theme whose background is the root
+// background's own color, and a pack's Backdrop (PackDefinition.Backdrop), drawn once behind the whole
+// stack, gets a transparent one so it shows through both layers (contentStyle alone left an opaque light
+// grey slab over Solitaire's felt on the web). Nothing else reads the navigation theme (headers are
+// hidden; Paper has its own). Built as the stack renders, never at import, where a pack's tests may stand
+// in for expo-router without its themes.
 const TRANSPARENT_CONTENT = { backgroundColor: 'transparent' }
 
 // The pack's own screen options (PackDefinition.useScreenOptions), as a hook every pack calls: an
@@ -67,10 +70,13 @@ function AppStack() {
   const pack = usePack()
   const { Backdrop } = pack
   const { dark } = useAutoPaperTheme()
-  // Over a backdrop the root window stays dark whatever the mode: a backdrop is a dark table (the
-  // felt), and a light root window would flash white around it during a push or pop.
-  const rootBackground = useThemedRootBackground(Backdrop ? true : dark, false)
-  const statusBar = useRotationAwareStatusBar()
+  // Over a backdrop the root stays dark whatever the mode: a backdrop is a dark table (the felt), and a
+  // light root window would flash white around it during a push or pop.
+  const darkRoot = Backdrop ? true : dark
+  const rootBackground = useThemedRootBackground(darkRoot, false)
+  // The status bar's text follows the app's theme, not the phone's appearance (react-native-screens'
+  // default `auto`), which drew dark text on a dark theme's black Home with the phone set to light.
+  const statusBar = useRotationAwareStatusBar({ style: darkRoot ? 'light' : 'dark' })
   const packOptions = (pack.useScreenOptions ?? noScreenOptions)()
   // Over a backdrop every screen is transparent, and Android crossfades: its default push and pop hold
   // the outgoing screen opaque for ~450ms while the new one slides over it, which would show Home
@@ -83,18 +89,24 @@ function AppStack() {
     },
     [pack.games]
   )
-  const navigationTheme = useMemo(() => (Backdrop ? { ...DarkTheme, colors: { ...DarkTheme.colors, background: 'transparent' } } : null), [Backdrop])
+  const navigationBackground = Backdrop ? TRANSPARENT_CONTENT.backgroundColor : rootBackground.contentStyle.backgroundColor
+  const navigationTheme = useMemo(() => {
+    const base = darkRoot ? DarkTheme : DefaultTheme
+    return { ...base, colors: { ...base.colors, background: navigationBackground } }
+  }, [darkRoot, navigationBackground])
   const stack = (
-    <Stack screenOptions={{ ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }}>
-      <Stack.Screen name='index' />
-      <Stack.Screen name='play/[game]' options={playOptions} />
-    </Stack>
+    <NavigationThemeProvider value={navigationTheme}>
+      <Stack screenOptions={{ ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }}>
+        <Stack.Screen name='index' />
+        <Stack.Screen name='play/[game]' options={playOptions} />
+      </Stack>
+    </NavigationThemeProvider>
   )
-  if (!Backdrop || !navigationTheme) return stack
+  if (!Backdrop) return stack
   return (
     <View style={styles.root}>
       <Backdrop />
-      <NavigationThemeProvider value={navigationTheme}>{stack}</NavigationThemeProvider>
+      {stack}
     </View>
   )
 }

package/src/components/SeatTwoPanel.tsx

@@ -1,9 +1,9 @@
 import type { SeedColor } from '@rific/auto-paper'
-import type { PopoverHost } from '@tastic/hud/chrome'
+import type { AlignResult, PopoverHost } from '@tastic/hud/chrome'
 import { type MenuOption, ReadyButton, useZoneClampedAlign } from '@tastic/hud/lobby'
 import { getOptionPickerContentSize, OptionPicker, type OptionPickerOption, type Profile, type ProfilePickerColorSection } from '@tastic/profile'
 import { ReactNode, useMemo } from 'react'
-import { StyleSheet, View } from 'react-native'
+import { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
 
 import type { SeatTwo } from '../types'
 
@@ -57,10 +57,19 @@ export interface SeatTwoPanelProps {
   ready?: boolean
   onToggleReady?: () => void
   showReadyButton?: boolean
+  // How the seat's color, and each profile's in the menu, is drawn (PackDefinition.previewColor), as
+  // PlayerSetupPanel's own previewValue: `color` and what onColorChange receives stay the saved values.
+  previewValue?: (hex: string) => string
+  // The button's trigger style (a surface behind its pill over the pack's backdrop).
+  triggerStyle?: StyleProp<ViewStyle>
+  // A placement hook of the pack's own for the menu, in place of the zone clamp (PlayerSetupPanel's
+  // useSeatPickerAlign): left unset inside a split-screen zone, and the same one for the panel's life.
+  usePickerAlign?: (open: boolean, contentWidth: number, contentHeight: number) => AlignResult
 }
 
-export function SeatTwoPanel({ idPrefix, host, choices, seatTwo, onSeatTwoChange, cpuDifficulty, profiles, selectedProfileId, onProfileSelect, color, onColorChange, swatches, takenColor, allowSwapTaken, colorCaption, dark, secondPicker, secondPickerId, ready, onToggleReady, showReadyButton = true }: SeatTwoPanelProps) {
+export function SeatTwoPanel({ idPrefix, host, choices, seatTwo, onSeatTwoChange, cpuDifficulty, profiles, selectedProfileId, onProfileSelect, color, onColorChange, swatches, takenColor, allowSwapTaken, colorCaption, dark, secondPicker, secondPickerId, ready, onToggleReady, showReadyButton = true, previewValue, triggerStyle, usePickerAlign }: SeatTwoPanelProps) {
   const isPerson = seatTwo === 'person'
+  const drawn = previewValue ? previewValue(color) : color
   const selectedProfile = isPerson ? (profiles.find((p) => p.id === selectedProfileId) ?? null) : null
 
   const cpuOptions = cpuDifficulty?.options
@@ -70,10 +79,10 @@ export function SeatTwoPanel({ idPrefix, host, choices, seatTwo, onSeatTwoChange
     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: p.color })))
+      list.push(...[...profiles].sort((a, b) => a.name.localeCompare(b.name)).map((p) => ({ value: `${PROFILE_PREFIX}${p.id}`, label: p.name, icon: 'account', color: previewValue ? previewValue(p.color) : p.color })))
     }
     return list
-  }, [choices, cpuOptions, profiles])
+  }, [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
@@ -91,21 +100,23 @@ export function SeatTwoPanel({ idPrefix, host, choices, seatTwo, onSeatTwoChange
   }
 
   // Nobody has no color to pick: there's nothing of theirs on the board.
-  const colorSection: ProfilePickerColorSection | undefined = seatTwo === 'nobody' ? undefined : { value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, caption: selectedProfile ? colorCaption : undefined }
+  const colorSection: ProfilePickerColorSection | undefined = seatTwo === 'nobody' ? undefined : { value: color, onChange: onColorChange, swatches, takenValue: takenColor, allowSwapTaken, caption: selectedProfile ? colorCaption : undefined, previewValue }
 
   const pickerId = getSeatTwoPopoverId(idPrefix)
   const size = getOptionPickerContentSize(options.length, colorSection)
-  // Kept inside this player's half in 2 Player, like PlayerSetupPanel's own seat button.
-  const align = useZoneClampedAlign(host.openId === pickerId, size.width, size.height)
+  // Kept inside this player's half in 2 Player, like PlayerSetupPanel's own seat button, or placed by
+  // the pack's own hook where it's given one.
+  const useAlign = usePickerAlign ?? useZoneClampedAlign
+  const align = useAlign(host.openId === pickerId, size.width, size.height)
 
   const ownPopoverOpen = host.openId?.startsWith(`${idPrefix}-`) ?? false
   const pickerRowOpen = secondPickerId !== undefined && host.openId === secondPickerId
 
   return (
     <View style={[styles.panel, ownPopoverOpen && styles.panelOpen]}>
-      <OptionPicker id={pickerId} host={host} options={options} value={value} onChange={handleChange} color={color} dark={dark} icon={icon} colorSection={colorSection} alignOverride={align} />
+      <OptionPicker id={pickerId} host={host} options={options} value={value} onChange={handleChange} color={drawn} dark={dark} icon={icon} colorSection={colorSection} alignOverride={align} triggerStyle={triggerStyle} />
       {isPerson && secondPicker && <View style={[styles.pickerRow, pickerRowOpen && styles.pickerRowOpen]}>{secondPicker}</View>}
-      {isPerson && showReadyButton && onToggleReady && <ReadyButton color={color} ready={ready ?? false} onToggleReady={onToggleReady} />}
+      {isPerson && showReadyButton && onToggleReady && <ReadyButton color={drawn} ready={ready ?? false} onToggleReady={onToggleReady} />}
     </View>
   )
 }

package/src/screens/LoadoutScreen.tsx

@@ -1,4 +1,4 @@
-import { defaultColors, useAutoPaperTheme } from '@rific/auto-paper'
+import { defaultColors, getRgb, useAutoPaperTheme } from '@rific/auto-paper'
 import { FakeLandscapeView, getViewRotation, rotateInsets, useOrientationState } from '@tastic/core'
 import { CornerActionButtons, PressAwayOverlay, usePopoverHost } from '@tastic/hud/chrome'
 import { PlayerSetupPanel, ReadyButton, SharedActionBand } from '@tastic/hud/lobby'
@@ -122,9 +122,19 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
     router.push(playHref(game.id))
   }, [ready, humanSeats, game.id, mode, dispatch])
 
-  const bg = dark ? '#000000' : '#FFFFFF'
-  const fg = dark ? '#FFFFFF' : '#000000'
-  const fgMuted = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)'
+  // Over the pack's Backdrop the loadout draws nothing of its own behind its controls, in the pack's
+  // foreground, as Home does.
+  const bg = pack.Backdrop ? 'transparent' : dark ? '#000000' : '#FFFFFF'
+  const fg = pack.foreground ?? (dark ? '#FFFFFF' : '#000000')
+  const fgMuted = (pack.foreground && halfOf(pack.foreground)) ?? (dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)')
+  // Each seat's color as the pack draws profile colors (PackDefinition.previewColor), and the seat
+  // buttons on the theme's surface over a backdrop, as Home's seat 1 button is. The saved colors stay
+  // what the Color rows pick and compare.
+  const { previewColor } = pack
+  const seatPreview = useMemo(() => (previewColor ? (hex: string) => previewColor(hex, dark) : undefined), [previewColor, dark])
+  const p1Drawn = seatPreview ? seatPreview(p1Color) : p1Color
+  const p2Drawn = seatPreview ? seatPreview(p2Color) : p2Color
+  const triggerStyle = useMemo(() => (pack.Backdrop ? [styles.pill, { backgroundColor: themeColors.surface }] : undefined), [pack.Backdrop, themeColors.surface])
 
   const isPortrait = panelLayout.orientationMode === 'faceToFace'
   // See @tastic/split-screen's needsSharedNeutralZone: whether back/settings/randomize/reset fold
@@ -138,6 +148,12 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
 
   // With one human, the one Ready button sits under both panels instead of in each.
   const showReadyButton = p2IsHuman
+  // The seat buttons' menus are placed by the pack where it places them itself (PackDefinition.
+  // usePickerAlign), as on Home, but only in the one-human row: 2 Player's halves keep each menu in
+  // its own player's half (hud's useZoneClampedAlign, the panels' own). The panels are keyed by layout,
+  // so a placement hook never changes under a mounted panel.
+  const seatPickerAlign = p2IsHuman ? undefined : pack.usePickerAlign
+  const layoutKey = p2IsHuman ? 'zones' : 'row'
   // P1's panel and the match options share one host - they sit in the same near/bottom zone. With
   // one human, seat 2's panel joins it too (one person drives both, so two open menus at once would
   // be clutter). 2 Player gives P2 their own host so two people can pick at once, each press-away
@@ -171,11 +187,11 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
   )
 
   const controlLook = { accentColor: themeColors.tertiary, mutedColor: fgMuted, dark, rotation }
-  const p1Control = loadout.seatControl(1, controlsHost, { ...controlLook, seatColor: p1Color })
-  const p1Panel = <PlayerSetupPanel idPrefix='p1' host={controlsHost} color={p1Color} onColorChange={handleP1ColorChange} swatches={defaultColors} takenColor={p2Exists ? p2Color : undefined} allowSwapTaken={mode === 'vsCpu'} colorCaption={pack.colorCaption} isHuman ready={ready[1]} onToggleReady={() => setReady((r) => ({ ...r, 1: !r[1] }))} dark={dark} showReadyButton={showReadyButton} secondPicker={p1Control} secondPickerId={p1Control ? 'p1-control' : undefined} profiles={profiles} selectedProfileId={lastSelected[1]} takenProfileId={p2IsHuman ? lastSelected[2] : null} guestLabel='P1' onProfileSelect={handleP1ProfileSelect} onManageProfiles={() => router.push(PROFILES_HREF)} />
-  const p2Control = p2IsHuman ? loadout.seatControl(2, p2Host, { ...controlLook, seatColor: p2Color }) : undefined
+  const p1Control = loadout.seatControl(1, controlsHost, { ...controlLook, seatColor: p1Drawn })
+  const p1Panel = <PlayerSetupPanel key={`p1-${layoutKey}`} idPrefix='p1' host={controlsHost} color={p1Color} onColorChange={handleP1ColorChange} swatches={defaultColors} takenColor={p2Exists ? p2Color : undefined} allowSwapTaken={mode === 'vsCpu'} colorCaption={pack.colorCaption} isHuman ready={ready[1]} onToggleReady={() => setReady((r) => ({ ...r, 1: !r[1] }))} dark={dark} showReadyButton={showReadyButton} secondPicker={p1Control} secondPickerId={p1Control ? 'p1-control' : undefined} profiles={profiles} selectedProfileId={lastSelected[1]} takenProfileId={p2IsHuman ? lastSelected[2] : null} guestLabel={pack.guestLabel ?? 'P1'} nullLabel={pack.nullLabel} onProfileSelect={handleP1ProfileSelect} onManageProfiles={() => router.push(PROFILES_HREF)} previewValue={seatPreview} triggerStyle={triggerStyle} useSeatPickerAlign={seatPickerAlign} />
+  const p2Control = p2IsHuman ? loadout.seatControl(2, p2Host, { ...controlLook, seatColor: p2Drawn }) : undefined
   // A game for one player (no seatTwo) has no seat 2 button: seat 1's panel stands alone.
-  const p2Panel = game.seatTwo && <SeatTwoPanel idPrefix='p2' host={p2Host} choices={game.seatTwo} seatTwo={seatTwo} onSeatTwoChange={changeSeatTwo} cpuDifficulty={loadout.cpuDifficulty} profiles={profiles} selectedProfileId={lastSelected[2]} onProfileSelect={handleP2ProfileSelect} color={p2Color} onColorChange={handleP2ColorChange} swatches={defaultColors} takenColor={p1Color} allowSwapTaken={mode === 'vsCpu'} colorCaption={pack.colorCaption} dark={dark} secondPicker={p2Control} secondPickerId={p2Control ? 'p2-control' : undefined} ready={ready[2]} onToggleReady={() => setReady((r) => ({ ...r, 2: !r[2] }))} showReadyButton={showReadyButton} />
+  const p2Panel = game.seatTwo && <SeatTwoPanel key={`p2-${layoutKey}`} idPrefix='p2' host={p2Host} choices={game.seatTwo} seatTwo={seatTwo} onSeatTwoChange={changeSeatTwo} cpuDifficulty={loadout.cpuDifficulty} profiles={profiles} selectedProfileId={lastSelected[2]} onProfileSelect={handleP2ProfileSelect} color={p2Color} onColorChange={handleP2ColorChange} swatches={defaultColors} takenColor={p1Color} allowSwapTaken={mode === 'vsCpu'} colorCaption={pack.colorCaption} dark={dark} secondPicker={p2Control} secondPickerId={p2Control ? 'p2-control' : undefined} ready={ready[2]} onToggleReady={() => setReady((r) => ({ ...r, 2: !r[2] }))} showReadyButton={showReadyButton} previewValue={seatPreview} triggerStyle={triggerStyle} usePickerAlign={seatPickerAlign} />
 
   return (
     <View style={[styles.container, { backgroundColor: bg }]}>
@@ -212,7 +228,7 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
               {!isPortrait && panelLayout.p1OnRight ? p2Panel : p1Panel}
               {!isPortrait && panelLayout.p1OnRight ? p1Panel : p2Panel}
             </Animated.View>
-            <ReadyButton color={p1Color} ready={ready[1]} onToggleReady={() => setReady((r) => ({ ...r, 1: !r[1] }))} style={anyPlayerPickerOpen && styles.readyButtonHidden} />
+            <ReadyButton color={p1Drawn} ready={ready[1]} onToggleReady={() => setReady((r) => ({ ...r, 1: !r[1] }))} style={anyPlayerPickerOpen && styles.readyButtonHidden} />
           </View>
         )}
       </FakeLandscapeView>
@@ -222,6 +238,13 @@ export function LoadoutScreen({ game }: { game: LoadoutGame }) {
   )
 }
 
+// A foreground at half strength: the loadout's muted text and icons, drawn on the pack's backdrop.
+// Undefined for a color it can't read.
+function halfOf(color: string): string | undefined {
+  const rgb = getRgb(color)
+  return rgb ? `rgba(${rgb.r},${rgb.g},${rgb.b},0.5)` : undefined
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1
@@ -247,6 +270,10 @@ const styles = StyleSheet.create({
     right: 0,
     top: 0
   },
+  // A seat button's trigger on a surface over the pack's backdrop, as Home's.
+  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).
   playersRow: {

package/src/types.ts

@@ -288,10 +288,12 @@ export interface PackDefinition {
   StatsSections?: ComponentType<PackStatsSectionsProps>
 
   // A table drawn once behind the whole stack (a felt), seen through every screen: the stack's own
-  // layers go transparent, and Home, the stats screen and Profiles draw on it in `foreground`.
+  // layers go transparent, and Home, each loadout, the stats screen and Profiles draw on it in
+  // `foreground`, with their buttons on the theme's surface.
   Backdrop?: ComponentType
-  // The text and icon color of what Home, the stats screen and Profiles draw straight on the screen's
-  // background (the hero, the corner buttons, headers). Unset is black or white with the theme.
+  // The text and icon color of what Home, the loadouts, the stats screen and Profiles draw straight on
+  // the screen's background (the hero, the corner buttons, headers; a loadout's options at half of
+  // it). Unset is black or white with the theme.
   foreground?: string
   // Mounted once around How to Play and the stack, inside the store, Theme, ProfilesProvider and every
   // game's Provider: a context of the pack's own (one stats context across its games).
@@ -313,14 +315,15 @@ export interface PackDefinition {
   // dark mode change and as a fresh install's theme, in place of a triad of the raw seat colors. With it,
   // each seat's color is read from the seat colors rather than from the theme.
   seatTheme?: (colors: Record<Seat, string>, dark: boolean) => Pick<ThemeSettings, 'color' | 'harmony'>
-  // How every profile color is drawn (the button's chip, the swatches, each ProfileChip): mounted as
-  // @tastic/profile's ProfileColorProvider. The saved colors stay as picked.
+  // How every profile color is drawn (the seat buttons' chips on Home and in the loadouts, their
+  // swatches, a loadout's Ready button, each ProfileChip): mounted as @tastic/profile's
+  // ProfileColorProvider. The saved colors stay as picked.
   previewColor?: (hex: string, dark: boolean) => string
   // The pack's own How to Play: shown on Home's first launch (held back while a cold launch resumes a
   // game) and from Home's Settings, never in a play screen.
   guide?: PackGuide
-  // Seat 1's button: the chip's label for a guest (default 'P1') and the guest row's in its menu
-  // (default @tastic/profile's).
+  // Seat 1's button, on Home and in every loadout: the chip's label for a guest (default 'P1') and the
+  // guest row's in its menu (default @tastic/profile's).
   guestLabel?: string
   nullLabel?: string
   // The stats screen keeps a guest's stats under GUEST_PLAYER_ID: a Guest entry in the player picker
@@ -336,7 +339,8 @@ export interface PackDefinition {
   statsGameTitles?: boolean
   // A new profile's starting color on Profiles. Unset is auto-paper's first swatch.
   newProfileColor?: string
-  // Where a picker's menu opens (its alignOverride) on Home (seat 1's button), the stats screen (its two
+  // Where a picker's menu opens (its alignOverride) on Home (seat 1's button), a loadout's one-human row
+  // (both seat buttons; 2 Player keeps each menu in its own player's half), the stats screen (its two
   // pickers) and Profiles (a profile's color swatch). hud's own placement measures a turned button
   // against the upright window, so with the phone held sideways it can pick the side with no room and
   // run the menu off the screen (Solitaire's useFrameAutoAlign places it in the turned frame instead).