@tastic/shell 0.3.0 → 0.4.0

package/README.md

@@ -18,9 +18,11 @@ 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]`,
+  grid of preview tiles on a wide screen, split into tabs where the pack has them), `LoadoutRoute` and `PlayRoute` (`loadout/[game]`,
   `play/[game]`), `ProfilesRoute` and `StatsScreen`.
 - **The store**: `createPackStore(pack, { keyPrefix, migrate, blacklist, serializableIgnoredPaths,
   middleware })` builds one persisted store from the shell's keys (theme, haptics, sound, Keep Awake,
@@ -112,7 +114,7 @@ PuckTastic and DuelTastic draw what they always did:
 | `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. |
@@ -128,6 +130,7 @@ PuckTastic and DuelTastic draw what they always did:
 | `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, 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. |
+| `homeTabs?` | Tabs splitting Home's games (`HomeTab`: a `label`, and `includes(game)`, which of the pack's games it shows, in the pack's order): a switch under seat 1's button, or over the grid on a wide screen, on the theme's surface over a `Backdrop`, showing one tab's games at a time. It opens on the first tab and keeps the one picked while Home is covered or turns. The other tabs' games stay mounted, hidden, so a switch draws nothing new. A game no tab includes isn't on Home. Unset, or a single tab, shows every game with no switch. Solitaire's: Solitaire (no `seatTwo`) and Two Player. |
 
 ### `GameDefinition`
 

package/dist/index.d.mts

@@ -252,6 +252,10 @@ interface PackStatsSectionsProps {
     profileId: string | null;
     gameId: string | null;
 }
+interface HomeTab {
+    label: string;
+    includes: (game: PackGameDefinition) => boolean;
+}
 type StackScreenOptions = Exclude<NonNullable<ComponentProps<typeof Stack>['screenOptions']>, (...args: never[]) => unknown>;
 interface FeedbackSounds {
     selection: () => void;
@@ -275,6 +279,7 @@ interface PackDefinition {
     wordmark: readonly [string, string];
     colorCaption: string;
     games: readonly PackGameDefinition[];
+    homeTabs?: readonly HomeTab[];
     seatColors: Record<Seat, string>;
     appearance?: ThemeAppearance;
     HeroTitle: ComponentType<HeroTitleProps>;
@@ -556,4 +561,4 @@ declare function createPlayerSettings<S extends WithControls<C>, C>({ id, defaul
     };
 };
 
-export { type ActiveRound, type AppSettings, DEFAULT_APP_SETTINGS, DEFAULT_OPPONENT, type FeedbackSounds, GUEST_PLAYER_ID, type GameDefinition, type GameGuide, type GameGuideState, type GameIconProps, type GameLoadout, type GamePreviewProps, type GameRulesProps, type GuidelessGameDefinition, type HeroTitleProps, HomeScreen, type LiveplaySliceState, type LoadoutOptionsProps, LoadoutRoute, type OpponentState, PREVIEW_ASPECT, type PackDefinition, type PackGameDefinition, type PackGuide, PackProvider, type PackStatsReset, type PackStatsSectionsProps, type PackStatsTab, type PackStore, type PackStoreConfig, type PackStoreSource, type PickerAlign, PlayRoute, type PlayerControlsState, type PlayerSettingsState, type ProfileSelectionState, ProfilesProvider, ProfilesRoute, type RecordResult, RootLayout, type RoundMode, type Seat, type SeatColorsState, type SeatControlLook, type SeatTwo, SettingsDialog, type SettingsDialogProps, type ShellState, type StackScreenOptions, StatsScreen, appSettingsActions, reducer$1 as appSettingsReducer, createGameGuideSlice, createGameStats, createPackStore, createPlayerSettings, createSeatColorsReducer, createShellReducers, defaultProfileSelectionState, defaultSeatColorsState, forgetProfileAchievements, humanSeatsFor, imageGameIcon, liveplayActions, reducer$3 as liveplayReducer, onProfileRemoved, opponentActions, reducer$2 as opponentReducer, profileSelectionActions, reducer as profileSelectionReducer, roundModeFor, seatColorsActions, seatPlayerKey, seatTwoFor, useActiveRound, useAppSettings, useGameGuide, useOpponent, usePack, usePackGame, useProfiles, useSeatColors };
+export { type ActiveRound, type AppSettings, DEFAULT_APP_SETTINGS, DEFAULT_OPPONENT, type FeedbackSounds, GUEST_PLAYER_ID, type GameDefinition, type GameGuide, type GameGuideState, type GameIconProps, type GameLoadout, type GamePreviewProps, type GameRulesProps, type GuidelessGameDefinition, type HeroTitleProps, HomeScreen, type HomeTab, type LiveplaySliceState, type LoadoutOptionsProps, LoadoutRoute, type OpponentState, PREVIEW_ASPECT, type PackDefinition, type PackGameDefinition, type PackGuide, PackProvider, type PackStatsReset, type PackStatsSectionsProps, type PackStatsTab, type PackStore, type PackStoreConfig, type PackStoreSource, type PickerAlign, PlayRoute, type PlayerControlsState, type PlayerSettingsState, type ProfileSelectionState, ProfilesProvider, ProfilesRoute, type RecordResult, RootLayout, type RoundMode, type Seat, type SeatColorsState, type SeatControlLook, type SeatTwo, SettingsDialog, type SettingsDialogProps, type ShellState, type StackScreenOptions, StatsScreen, appSettingsActions, reducer$1 as appSettingsReducer, createGameGuideSlice, createGameStats, createPackStore, createPlayerSettings, createSeatColorsReducer, createShellReducers, defaultProfileSelectionState, defaultSeatColorsState, forgetProfileAchievements, humanSeatsFor, imageGameIcon, liveplayActions, reducer$3 as liveplayReducer, onProfileRemoved, opponentActions, reducer$2 as opponentReducer, profileSelectionActions, reducer as profileSelectionReducer, roundModeFor, seatColorsActions, seatPlayerKey, seatTwoFor, useActiveRound, useAppSettings, useGameGuide, useOpponent, usePack, usePackGame, useProfiles, useSeatColors };

package/dist/index.d.ts

@@ -252,6 +252,10 @@ interface PackStatsSectionsProps {
     profileId: string | null;
     gameId: string | null;
 }
+interface HomeTab {
+    label: string;
+    includes: (game: PackGameDefinition) => boolean;
+}
 type StackScreenOptions = Exclude<NonNullable<ComponentProps<typeof Stack>['screenOptions']>, (...args: never[]) => unknown>;
 interface FeedbackSounds {
     selection: () => void;
@@ -275,6 +279,7 @@ interface PackDefinition {
     wordmark: readonly [string, string];
     colorCaption: string;
     games: readonly PackGameDefinition[];
+    homeTabs?: readonly HomeTab[];
     seatColors: Record<Seat, string>;
     appearance?: ThemeAppearance;
     HeroTitle: ComponentType<HeroTitleProps>;
@@ -556,4 +561,4 @@ declare function createPlayerSettings<S extends WithControls<C>, C>({ id, defaul
     };
 };
 
-export { type ActiveRound, type AppSettings, DEFAULT_APP_SETTINGS, DEFAULT_OPPONENT, type FeedbackSounds, GUEST_PLAYER_ID, type GameDefinition, type GameGuide, type GameGuideState, type GameIconProps, type GameLoadout, type GamePreviewProps, type GameRulesProps, type GuidelessGameDefinition, type HeroTitleProps, HomeScreen, type LiveplaySliceState, type LoadoutOptionsProps, LoadoutRoute, type OpponentState, PREVIEW_ASPECT, type PackDefinition, type PackGameDefinition, type PackGuide, PackProvider, type PackStatsReset, type PackStatsSectionsProps, type PackStatsTab, type PackStore, type PackStoreConfig, type PackStoreSource, type PickerAlign, PlayRoute, type PlayerControlsState, type PlayerSettingsState, type ProfileSelectionState, ProfilesProvider, ProfilesRoute, type RecordResult, RootLayout, type RoundMode, type Seat, type SeatColorsState, type SeatControlLook, type SeatTwo, SettingsDialog, type SettingsDialogProps, type ShellState, type StackScreenOptions, StatsScreen, appSettingsActions, reducer$1 as appSettingsReducer, createGameGuideSlice, createGameStats, createPackStore, createPlayerSettings, createSeatColorsReducer, createShellReducers, defaultProfileSelectionState, defaultSeatColorsState, forgetProfileAchievements, humanSeatsFor, imageGameIcon, liveplayActions, reducer$3 as liveplayReducer, onProfileRemoved, opponentActions, reducer$2 as opponentReducer, profileSelectionActions, reducer as profileSelectionReducer, roundModeFor, seatColorsActions, seatPlayerKey, seatTwoFor, useActiveRound, useAppSettings, useGameGuide, useOpponent, usePack, usePackGame, useProfiles, useSeatColors };
+export { type ActiveRound, type AppSettings, DEFAULT_APP_SETTINGS, DEFAULT_OPPONENT, type FeedbackSounds, GUEST_PLAYER_ID, type GameDefinition, type GameGuide, type GameGuideState, type GameIconProps, type GameLoadout, type GamePreviewProps, type GameRulesProps, type GuidelessGameDefinition, type HeroTitleProps, HomeScreen, type HomeTab, type LiveplaySliceState, type LoadoutOptionsProps, LoadoutRoute, type OpponentState, PREVIEW_ASPECT, type PackDefinition, type PackGameDefinition, type PackGuide, PackProvider, type PackStatsReset, type PackStatsSectionsProps, type PackStatsTab, type PackStore, type PackStoreConfig, type PackStoreSource, type PickerAlign, PlayRoute, type PlayerControlsState, type PlayerSettingsState, type ProfileSelectionState, ProfilesProvider, ProfilesRoute, type RecordResult, RootLayout, type RoundMode, type Seat, type SeatColorsState, type SeatControlLook, type SeatTwo, SettingsDialog, type SettingsDialogProps, type ShellState, type StackScreenOptions, StatsScreen, appSettingsActions, reducer$1 as appSettingsReducer, createGameGuideSlice, createGameStats, createPackStore, createPlayerSettings, createSeatColorsReducer, createShellReducers, defaultProfileSelectionState, defaultSeatColorsState, forgetProfileAchievements, humanSeatsFor, imageGameIcon, liveplayActions, reducer$3 as liveplayReducer, onProfileRemoved, opponentActions, reducer$2 as opponentReducer, profileSelectionActions, reducer as profileSelectionReducer, roundModeFor, seatColorsActions, seatPlayerKey, seatTwoFor, useActiveRound, useAppSettings, useGameGuide, useOpponent, usePack, usePackGame, useProfiles, useSeatColors };

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 }) {
@@ -1172,6 +1177,13 @@ function HomeMenu() {
   const { previewColor } = pack;
   const p1Drawn = previewColor ? previewColor(p1Color, dark) : p1Color;
   const triggerStyle = (0, import_react16.useMemo)(() => pack.Backdrop ? [styles4.pill, { backgroundColor: colors.surface }] : void 0, [pack.Backdrop, colors.surface]);
+  const tabs = pack.homeTabs && pack.homeTabs.length > 1 ? pack.homeTabs : null;
+  const [tabLabel, setTabLabel] = (0, import_react16.useState)(() => tabs?.[0].label ?? null);
+  const tab = tabs ? tabs.find((t) => t.label === tabLabel) ?? tabs[0] : null;
+  const tabButtons = (0, import_react16.useMemo)(() => tabs?.map(({ label }) => ({ value: label, label })) ?? [], [tabs]);
+  const tabBar = tab && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper.SegmentedButtons, { value: tab.label, onValueChange: setTabLabel, buttons: tabButtons, style: [styles4.tabs, pack.Backdrop && { backgroundColor: colors.surface }] });
+  const columnClamp = useClampOnShrink();
+  const gridClamp = useClampOnShrink();
   const openGame = (0, import_react16.useCallback)((game) => openFirstTime(game.id, () => import_expo_router6.router.push(game.useLoadout ? loadoutHref(game.id) : playHref(game.id))), [openFirstTime]);
   const openRules = (0, import_react16.useCallback)((game) => game.Rules ? setRulesGame(game) : openFor(game.id), [openFor]);
   const colorSection = { value: p1Color, onChange: handleP1ColorChange, swatches: import_auto_paper5.defaultColors, caption: selectedProfile ? pack.colorCaption : void 0, previewValue: previewColor ? (hex) => previewColor(hex, dark) : void 0 };
@@ -1185,16 +1197,20 @@ function HomeMenu() {
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core12.FakeLandscapeView, { style: styles4.rotatable, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(RulesHost, { enabled: pack.games.some((game) => game.Rules), children: [
       isWide ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
         pressAway,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_auto_paper5.FadingScrollView, { 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__ */ (0, import_jsx_runtime14.jsx)(import_react_native6.View, { style: [styles4.grid, { width: layout.rightPaneWidth }], children: pack.games.map((game) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameTile, { game, width: layout.tileWidth, previewWidth: layout.previewWidth, previewRevealed: previewsRevealed, dark, p1Color, p2Color, onPress: () => openGame(game), onRules: hasRules(game) ? () => openRules(game) : void 0 }, game.id)) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_auto_paper5.FadingScrollView, { ...tab && gridClamp, style: [styles4.wideRightPane, { left: layout.paddingLeft + layout.leftPaneWidth + HOME_WIDE_PANE_GAP }], contentContainerStyle: { paddingTop: 16 + insets.top, paddingBottom: 16 + insets.bottom, paddingRight: layout.paddingRight }, children: [
+          tabBar && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native6.View, { style: [styles4.wideTabs, { width: layout.rightPaneWidth }], children: tabBar }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native6.View, { style: [styles4.grid, { width: layout.rightPaneWidth }], children: pack.games.map((game) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameTile, { game, hidden: isHidden(tab, game), width: layout.tileWidth, previewWidth: layout.previewWidth, previewRevealed: previewsRevealed, dark, p1Color, p2Color, onPress: () => openGame(game), onRules: hasRules(game) ? () => openRules(game) : void 0 }, game.id)) })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native6.View, { style: [styles4.wideLeftPane, { left: layout.paddingLeft, width: layout.leftPaneWidth, paddingTop: HOME_TOP_BAND + insets.top, paddingBottom: 16 + insets.bottom }, pickerHost.openId !== null && styles4.pickerOpen], children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(pack.HeroTitle, { words: pack.wordmark, color: fg, p1Color, p2Color, active: heroActive, fit: layout.heroFit }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native6.View, { style: styles4.widePicker, children: picker })
         ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_auto_paper5.FadingScrollView, { style: styles4.scroll, contentContainerStyle: [styles4.content, { paddingTop: 56 + insets.top, paddingBottom: 24 + insets.bottom, paddingLeft: 16 + insets.left, paddingRight: 16 + insets.right }], children: [
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_auto_paper5.FadingScrollView, { ...tab && columnClamp, style: styles4.scroll, contentContainerStyle: [styles4.content, { paddingTop: 56 + insets.top, paddingBottom: 24 + insets.bottom, paddingLeft: 16 + insets.left, paddingRight: 16 + insets.right }], children: [
         pressAway,
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(pack.HeroTitle, { words: pack.wordmark, color: fg, p1Color, p2Color, active: heroActive }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native6.View, { style: [styles4.picker, pickerHost.openId !== null && styles4.pickerOpen], children: picker }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native6.View, { style: styles4.list, children: pack.games.map((game) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameRow, { game, dark, p1Color, p2Color, previewRevealed: previewsRevealed, onPress: () => openGame(game), onRules: hasRules(game) ? () => openRules(game) : void 0 }, game.id)) })
+        tabBar && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native6.View, { style: styles4.listWidth, children: tabBar }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native6.View, { style: styles4.list, children: pack.games.map((game) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameRow, { game, hidden: isHidden(tab, game), dark, p1Color, p2Color, previewRevealed: previewsRevealed, onPress: () => openGame(game), onRules: hasRules(game) ? () => openRules(game) : void 0 }, game.id)) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_feedback_press3.IconButton, { icon: "trophy", iconColor: fg, size: 24, style: [styles4.corner, { top: 8 + insets.top, left: 8 + insets.left }], onPress: () => import_expo_router6.router.push(STATS_HREF), accessibilityLabel: "Stats & Achievements" }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_feedback_press3.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles4.corner, { top: 8 + insets.top, right: 8 + insets.right }], onPress: () => setSettingsOpen(true), accessibilityLabel: "Settings" }),
@@ -1205,19 +1221,47 @@ function HomeMenu() {
 }
 var SEAT_ONE_PICKER = "home-p1";
 var noPickerAlign = () => void 0;
+function isHidden(tab, game) {
+  return !!tab && !tab.includes(game);
+}
+function useClampOnShrink() {
+  const view = (0, import_react16.useRef)(null);
+  const sizes = (0, import_react16.useRef)({ viewport: 0, offset: 0 });
+  return (0, import_react16.useMemo)(
+    () => ({
+      ref: (instance) => {
+        view.current = instance;
+        sizes.current.offset = 0;
+      },
+      onLayout: (e) => {
+        sizes.current.viewport = e.nativeEvent.layout.height;
+      },
+      onScroll: (e) => {
+        sizes.current.offset = e.nativeEvent.contentOffset.y;
+      },
+      onContentSizeChange: (_width, height) => {
+        const end = Math.max(0, height - sizes.current.viewport);
+        if (sizes.current.offset <= end) return;
+        sizes.current.offset = end;
+        view.current?.scrollTo({ y: end, animated: false });
+      }
+    }),
+    []
+  );
+}
 function hasRules(game) {
   return !!(game.Rules || game.guide);
 }
 function RulesHost({ enabled, children }) {
   return enabled ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper.Portal.Host, { children }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
 }
-function GameRow({ game, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
+function GameRow({ game, hidden, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
   const well = (0, import_chrome5.useWellColors)();
   const GameIcon = game.icon;
   return (
     // The rules button sits beside the row's own button, laid over its end, not inside it: a button
     // inside a button is invalid on the web.
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native6.View, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native6.View, { style: hidden ? styles4.hidden : void 0, children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_feedback_press3.Pressable, { onPress, style: [styles4.row, { backgroundColor: well.bg }], accessibilityRole: "button", accessibilityLabel: game.title, children: [
         game.Preview ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PreviewBox, { game, width: ROW_PREVIEW_WIDTH, revealed: previewRevealed, dark, p1Color, p2Color }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native6.View, { style: [styles4.rowIcon, { backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }], children: GameIcon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GameIcon, { size: ROW_ICON_SIZE, p1Color, p2Color, dark }) }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native6.View, { style: styles4.rowText, children: [
@@ -1229,9 +1273,9 @@ function GameRow({ game, dark, p1Color, p2Color, previewRevealed, onPress, onRul
     ] })
   );
 }
-function GameTile({ game, width, previewWidth, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
+function GameTile({ game, hidden, width, previewWidth, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
   const well = (0, import_chrome5.useWellColors)();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native6.View, { style: { width }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native6.View, { style: [{ width }, hidden && styles4.hidden], children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_feedback_press3.Pressable, { onPress, style: [styles4.tile, { backgroundColor: well.bg }], accessibilityRole: "button", accessibilityLabel: game.title, children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PreviewBox, { game, width: previewWidth, revealed: previewRevealed, dark, p1Color, p2Color }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper.Text, { variant: "titleMedium", style: [styles4.rowTitle, { color: well.fg }], numberOfLines: 1, children: game.title }),
@@ -1267,12 +1311,21 @@ var styles4 = import_react_native6.StyleSheet.create({
     flexWrap: "wrap",
     gap: HOME_GRID_GAP
   },
+  // Out of the layout (a grid closes up around it) and hidden from screen readers.
+  hidden: {
+    display: "none"
+  },
   // Solitaire's list: one column, never wider than a phone's, centred on a wide screen.
   list: {
     gap: 14,
     maxWidth: 480,
     width: "100%"
   },
+  // The list's width, for the tabs over it.
+  listWidth: {
+    maxWidth: 480,
+    width: "100%"
+  },
   picker: {
     alignItems: "center"
   },
@@ -1335,6 +1388,10 @@ var styles4 = import_react_native6.StyleSheet.create({
   scroll: {
     flex: 1
   },
+  // SegmentedButtons' own rounding, so a surface behind it is the same pill (the stats screen's tabs).
+  tabs: {
+    borderRadius: 20
+  },
   // The same well as a row, turned on its side.
   tile: {
     borderRadius: 12,
@@ -1373,6 +1430,10 @@ var styles4 = import_react_native6.StyleSheet.create({
     position: "absolute",
     right: 0,
     top: 0
+  },
+  // The tabs over the grid, a little further from it than the tiles are from each other.
+  wideTabs: {
+    marginBottom: 16
   }
 });
 

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 }) {
@@ -963,9 +968,9 @@ import { FakeLandscapeView as FakeLandscapeView2, useRotation as useRotation4 }
 import { PressAwayOverlay as PressAwayOverlay2, usePopoverHost as usePopoverHost2, useWellColors, WELL_SHADOW } from "@tastic/hud/chrome";
 import { getProfilePickerContentSize, ProfilePicker } from "@tastic/profile";
 import { Redirect as Redirect2, router as router3, useIsFocused } from "expo-router";
-import { useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo6, useState as useState6 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef5, useState as useState6 } from "react";
 import { AppState as AppState2, StyleSheet as StyleSheet4, View as View4 } from "react-native";
-import { Icon, Portal, Text } from "react-native-paper";
+import { Icon, Portal, SegmentedButtons, Text } from "react-native-paper";
 
 // src/hooks/useFrozenWhileHidden.ts
 import { useState as useState5 } from "react";
@@ -1098,6 +1103,13 @@ function HomeMenu() {
   const { previewColor } = pack;
   const p1Drawn = previewColor ? previewColor(p1Color, dark) : p1Color;
   const triggerStyle = useMemo6(() => pack.Backdrop ? [styles4.pill, { backgroundColor: colors.surface }] : void 0, [pack.Backdrop, colors.surface]);
+  const tabs = pack.homeTabs && pack.homeTabs.length > 1 ? pack.homeTabs : null;
+  const [tabLabel, setTabLabel] = useState6(() => tabs?.[0].label ?? null);
+  const tab = tabs ? tabs.find((t) => t.label === tabLabel) ?? tabs[0] : null;
+  const tabButtons = useMemo6(() => tabs?.map(({ label }) => ({ value: label, label })) ?? [], [tabs]);
+  const tabBar = tab && /* @__PURE__ */ jsx14(SegmentedButtons, { value: tab.label, onValueChange: setTabLabel, buttons: tabButtons, style: [styles4.tabs, pack.Backdrop && { backgroundColor: colors.surface }] });
+  const columnClamp = useClampOnShrink();
+  const gridClamp = useClampOnShrink();
   const openGame = useCallback10((game) => openFirstTime(game.id, () => router3.push(game.useLoadout ? loadoutHref(game.id) : playHref(game.id))), [openFirstTime]);
   const openRules = useCallback10((game) => game.Rules ? setRulesGame(game) : openFor(game.id), [openFor]);
   const colorSection = { value: p1Color, onChange: handleP1ColorChange, swatches: defaultColors2, caption: selectedProfile ? pack.colorCaption : void 0, previewValue: previewColor ? (hex) => previewColor(hex, dark) : void 0 };
@@ -1111,16 +1123,20 @@ function HomeMenu() {
     /* @__PURE__ */ jsx14(FakeLandscapeView2, { style: styles4.rotatable, children: /* @__PURE__ */ jsxs6(RulesHost, { enabled: pack.games.some((game) => game.Rules), children: [
       isWide ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
         pressAway,
-        /* @__PURE__ */ jsx14(FadingScrollView, { 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__ */ jsx14(View4, { style: [styles4.grid, { width: layout.rightPaneWidth }], children: pack.games.map((game) => /* @__PURE__ */ jsx14(GameTile, { 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(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__ */ 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, { style: styles4.scroll, contentContainerStyle: [styles4.content, { paddingTop: 56 + insets.top, paddingBottom: 24 + insets.bottom, paddingLeft: 16 + insets.left, paddingRight: 16 + insets.right }], children: [
+      ] }) : /* @__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: [
         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 }),
-        /* @__PURE__ */ jsx14(View4, { style: styles4.list, children: pack.games.map((game) => /* @__PURE__ */ jsx14(GameRow, { game, dark, p1Color, p2Color, previewRevealed: previewsRevealed, onPress: () => openGame(game), onRules: hasRules(game) ? () => openRules(game) : void 0 }, game.id)) })
+        tabBar && /* @__PURE__ */ jsx14(View4, { style: styles4.listWidth, children: tabBar }),
+        /* @__PURE__ */ jsx14(View4, { style: styles4.list, children: pack.games.map((game) => /* @__PURE__ */ jsx14(GameRow, { game, hidden: isHidden(tab, game), dark, p1Color, p2Color, previewRevealed: previewsRevealed, onPress: () => openGame(game), onRules: hasRules(game) ? () => openRules(game) : void 0 }, game.id)) })
       ] }),
       /* @__PURE__ */ jsx14(IconButton, { icon: "trophy", iconColor: fg, size: 24, style: [styles4.corner, { top: 8 + insets.top, left: 8 + insets.left }], onPress: () => router3.push(STATS_HREF), accessibilityLabel: "Stats & Achievements" }),
       /* @__PURE__ */ jsx14(IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles4.corner, { top: 8 + insets.top, right: 8 + insets.right }], onPress: () => setSettingsOpen(true), accessibilityLabel: "Settings" }),
@@ -1131,19 +1147,47 @@ function HomeMenu() {
 }
 var SEAT_ONE_PICKER = "home-p1";
 var noPickerAlign = () => void 0;
+function isHidden(tab, game) {
+  return !!tab && !tab.includes(game);
+}
+function useClampOnShrink() {
+  const view = useRef5(null);
+  const sizes = useRef5({ viewport: 0, offset: 0 });
+  return useMemo6(
+    () => ({
+      ref: (instance) => {
+        view.current = instance;
+        sizes.current.offset = 0;
+      },
+      onLayout: (e) => {
+        sizes.current.viewport = e.nativeEvent.layout.height;
+      },
+      onScroll: (e) => {
+        sizes.current.offset = e.nativeEvent.contentOffset.y;
+      },
+      onContentSizeChange: (_width, height) => {
+        const end = Math.max(0, height - sizes.current.viewport);
+        if (sizes.current.offset <= end) return;
+        sizes.current.offset = end;
+        view.current?.scrollTo({ y: end, animated: false });
+      }
+    }),
+    []
+  );
+}
 function hasRules(game) {
   return !!(game.Rules || game.guide);
 }
 function RulesHost({ enabled, children }) {
   return enabled ? /* @__PURE__ */ jsx14(Portal.Host, { children }) : /* @__PURE__ */ jsx14(Fragment4, { children });
 }
-function GameRow({ game, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
+function GameRow({ game, hidden, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
   const well = useWellColors();
   const GameIcon = game.icon;
   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, { children: [
+    /* @__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: [
         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: [
@@ -1155,9 +1199,9 @@ function GameRow({ game, dark, p1Color, p2Color, previewRevealed, onPress, onRul
     ] })
   );
 }
-function GameTile({ game, width, previewWidth, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
+function GameTile({ game, hidden, width, previewWidth, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
   const well = useWellColors();
-  return /* @__PURE__ */ jsxs6(View4, { style: { width }, children: [
+  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: [
       /* @__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 }),
@@ -1193,12 +1237,21 @@ var styles4 = StyleSheet4.create({
     flexWrap: "wrap",
     gap: HOME_GRID_GAP
   },
+  // Out of the layout (a grid closes up around it) and hidden from screen readers.
+  hidden: {
+    display: "none"
+  },
   // Solitaire's list: one column, never wider than a phone's, centred on a wide screen.
   list: {
     gap: 14,
     maxWidth: 480,
     width: "100%"
   },
+  // The list's width, for the tabs over it.
+  listWidth: {
+    maxWidth: 480,
+    width: "100%"
+  },
   picker: {
     alignItems: "center"
   },
@@ -1261,6 +1314,10 @@ var styles4 = StyleSheet4.create({
   scroll: {
     flex: 1
   },
+  // SegmentedButtons' own rounding, so a surface behind it is the same pill (the stats screen's tabs).
+  tabs: {
+    borderRadius: 20
+  },
   // The same well as a row, turned on its side.
   tile: {
     borderRadius: 12,
@@ -1299,6 +1356,10 @@ var styles4 = StyleSheet4.create({
     position: "absolute",
     right: 0,
     top: 0
+  },
+  // The tabs over the grid, a little further from it than the tiles are from each other.
+  wideTabs: {
+    marginBottom: 16
   }
 });
 
@@ -1324,7 +1385,7 @@ import { BaseStatsScreen, PressAwayOverlay as PressAwayOverlay3, RotatedFrame as
 import { getOptionPickerContentSize as getOptionPickerContentSize2, OptionPicker as OptionPicker2 } from "@tastic/profile";
 import { useMemo as useMemo7, useState as useState7 } from "react";
 import { StyleSheet as StyleSheet5, View as View5 } from "react-native";
-import { SegmentedButtons, Text as Text2 } from "react-native-paper";
+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";
@@ -1382,7 +1443,7 @@ function StatsContent({ pickerHost }) {
   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: [
     /* @__PURE__ */ jsx16(PressAwayOverlay3, { active: pickerHost.openId !== null, onPress: pickerHost.close, style: styles5.pressAway }),
-    /* @__PURE__ */ jsx16(SegmentedButtons, { value: tab, onValueChange: setTab, buttons: tabButtons, style: [styles5.tabs, surface] }),
+    /* @__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: [
       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 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/shell",
-  "version": "0.3.0",
+  "version": "0.4.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",

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/index.ts

@@ -2,7 +2,7 @@
 // and store, and every screen, game and shared piece reads the pack through usePack().
 export { PackProvider, usePack, usePackGame } from './PackContext'
 export { RootLayout } from './RootLayout'
-export { type FeedbackSounds, type GameDefinition, type GameGuide, type GameIconProps, type GameLoadout, type GamePreviewProps, type GameRulesProps, GUEST_PLAYER_ID, type GuidelessGameDefinition, type HeroTitleProps, humanSeatsFor, type LoadoutOptionsProps, type PackDefinition, type PackGameDefinition, type PackGuide, type PackStatsReset, type PackStatsSectionsProps, type PackStatsTab, type PickerAlign, type RoundMode, roundModeFor, type Seat, type SeatControlLook, type SeatTwo, seatTwoFor, type StackScreenOptions } from './types'
+export { type FeedbackSounds, type GameDefinition, type GameGuide, type GameIconProps, type GameLoadout, type GamePreviewProps, type GameRulesProps, GUEST_PLAYER_ID, type GuidelessGameDefinition, type HeroTitleProps, type HomeTab, humanSeatsFor, type LoadoutOptionsProps, type PackDefinition, type PackGameDefinition, type PackGuide, type PackStatsReset, type PackStatsSectionsProps, type PackStatsTab, type PickerAlign, type RoundMode, roundModeFor, type Seat, type SeatControlLook, type SeatTwo, seatTwoFor, type StackScreenOptions } from './types'
 
 // The screens behind an app's routes (src/app/ stays in the app: expo-router only reads routes there).
 export { LoadoutRoute, PlayRoute } from './screens/GameRoute'

package/src/screens/HomeScreen.tsx

@@ -4,9 +4,9 @@ import { FakeLandscapeView, useRotation } from '@tastic/core'
 import { PressAwayOverlay, usePopoverHost, useWellColors, WELL_SHADOW } from '@tastic/hud/chrome'
 import { getProfilePickerContentSize, type Profile, ProfilePicker, type ProfilePickerColorSection } from '@tastic/profile'
 import { Redirect, router, useIsFocused } from 'expo-router'
-import { type ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
-import { AppState, type AppStateStatus, StyleSheet, View } from 'react-native'
-import { Icon, Portal, Text } from 'react-native-paper'
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { AppState, type AppStateStatus, type LayoutChangeEvent, type NativeScrollEvent, type NativeSyntheticEvent, type ScrollView, StyleSheet, View } from 'react-native'
+import { Icon, Portal, SegmentedButtons, Text } from 'react-native-paper'
 
 import { useGameGuide } from '../components/GuideHost'
 import { SettingsDialog } from '../components/SettingsDialog'
@@ -17,14 +17,15 @@ import { useProfiles } from '../hooks/useProfiles'
 import { useSeatColors } from '../hooks/useSeatColors'
 import { usePack } from '../PackContext'
 import { loadoutHref, playHref, PROFILES_HREF, STATS_HREF } from '../routes'
-import type { PackGameDefinition } from '../types'
+import type { HomeTab, PackGameDefinition } from '../types'
 import { HOME_GRID_GAP, HOME_LEFT_PANE_PICKER_GAP, HOME_TILE_PADDING, HOME_TOP_BAND, HOME_WIDE_PANE_GAP, PREVIEW_ASPECT, ROW_PREVIEW_WIDTH, useHomeLayout } from './homeLayout'
 
 // Home: who's playing (seat 1, the same seat 1 every loadout starts with), then every game in the
 // pack as a row in a fixed order, Solitaire's list: each game on its own well, its small app icon
 // (or its preview, GameDefinition.Preview) beside its name and blurb. A tap opens that game's
 // loadout, or its play screen in a game without one, after its How to Play cards the first time it's
-// picked. Seat 2 is chosen in the loadout, from seat 2's own button.
+// picked. Seat 2 is chosen in the loadout, from seat 2's own button. A pack with tabs
+// (PackDefinition.homeTabs) shows one tab's games at a time, from a switch over the rows.
 //
 // A cold launch that finds the player left the app inside a resumable game's play screen
 // (GameDefinition.resumable) goes straight back there instead, before the menu ever paints. The
@@ -111,6 +112,18 @@ function HomeMenu() {
   const p1Drawn = previewColor ? previewColor(p1Color, dark) : p1Color
   const triggerStyle = useMemo(() => (pack.Backdrop ? [styles.pill, { backgroundColor: colors.surface }] : undefined), [pack.Backdrop, colors.surface])
 
+  // The pack's tabs (PackDefinition.homeTabs): one tab's games at a time, the same switch as the stats
+  // screen's tabs (on the theme's surface over a backdrop). The other tabs' games stay mounted, hidden, so
+  // a switch draws nothing new (their previews are already there). The tab is Home's own state, kept while
+  // Home is covered, since Home stays mounted under every screen it opens.
+  const tabs = pack.homeTabs && pack.homeTabs.length > 1 ? pack.homeTabs : null
+  const [tabLabel, setTabLabel] = useState(() => tabs?.[0].label ?? null)
+  const tab = tabs ? (tabs.find((t) => t.label === tabLabel) ?? tabs[0]) : null
+  const tabButtons = useMemo(() => tabs?.map(({ label }) => ({ value: label, label })) ?? [], [tabs])
+  const tabBar = tab && <SegmentedButtons value={tab.label} onValueChange={setTabLabel} buttons={tabButtons} style={[styles.tabs, pack.Backdrop && { backgroundColor: colors.surface }]} />
+  const columnClamp = useClampOnShrink()
+  const gridClamp = useClampOnShrink()
+
   // A game with nothing to set up (no useLoadout) opens straight to its play screen.
   const openGame = useCallback((game: PackGameDefinition) => openFirstTime(game.id, () => router.push(game.useLoadout ? loadoutHref(game.id) : playHref(game.id))), [openFirstTime])
 
@@ -149,10 +162,11 @@ function HomeMenu() {
             to the frame's right edge and the cog's gutter is its content's padding, so a web scrollbar
             sits at the window's edge. Both scrollers fade out at an edge while there is more past it
             (auto-paper's FadingScrollView, a mask, so whatever is behind shows through). */}
-              <FadingScrollView style={[styles.wideRightPane, { left: layout.paddingLeft + layout.leftPaneWidth + HOME_WIDE_PANE_GAP }]} contentContainerStyle={{ paddingTop: 16 + insets.top, paddingBottom: 16 + insets.bottom, paddingRight: layout.paddingRight }}>
+              <FadingScrollView {...(tab && gridClamp)} style={[styles.wideRightPane, { left: layout.paddingLeft + layout.leftPaneWidth + HOME_WIDE_PANE_GAP }]} contentContainerStyle={{ paddingTop: 16 + insets.top, paddingBottom: 16 + insets.bottom, paddingRight: layout.paddingRight }}>
+                {tabBar && <View style={[styles.wideTabs, { width: layout.rightPaneWidth }]}>{tabBar}</View>}
                 <View style={[styles.grid, { width: layout.rightPaneWidth }]}>
                   {pack.games.map((game) => (
-                    <GameTile key={game.id} game={game} width={layout.tileWidth} previewWidth={layout.previewWidth} previewRevealed={previewsRevealed} dark={dark} p1Color={p1Color} p2Color={p2Color} onPress={() => openGame(game)} onRules={hasRules(game) ? () => openRules(game) : undefined} />
+                    <GameTile key={game.id} game={game} hidden={isHidden(tab, game)} width={layout.tileWidth} previewWidth={layout.previewWidth} previewRevealed={previewsRevealed} dark={dark} p1Color={p1Color} p2Color={p2Color} onPress={() => openGame(game)} onRules={hasRules(game) ? () => openRules(game) : undefined} />
                   ))}
                 </View>
               </FadingScrollView>
@@ -165,7 +179,7 @@ function HomeMenu() {
               </View>
             </>
           ) : (
-            <FadingScrollView style={styles.scroll} contentContainerStyle={[styles.content, { paddingTop: 56 + insets.top, paddingBottom: 24 + insets.bottom, paddingLeft: 16 + insets.left, paddingRight: 16 + insets.right }]}>
+            <FadingScrollView {...(tab && columnClamp)} style={styles.scroll} contentContainerStyle={[styles.content, { paddingTop: 56 + insets.top, paddingBottom: 24 + insets.bottom, paddingLeft: 16 + insets.left, paddingRight: 16 + insets.right }]}>
               {pressAway}
               <pack.HeroTitle words={pack.wordmark} color={fg} p1Color={p1Color} p2Color={p2Color} active={heroActive} />
 
@@ -173,9 +187,11 @@ function HomeMenu() {
             tiles while its menu is open, so the menu paints over them. */}
               <View style={[styles.picker, pickerHost.openId !== null && styles.pickerOpen]}>{picker}</View>
 
+              {tabBar && <View style={styles.listWidth}>{tabBar}</View>}
+
               <View style={styles.list}>
                 {pack.games.map((game) => (
-                  <GameRow key={game.id} game={game} dark={dark} p1Color={p1Color} p2Color={p2Color} previewRevealed={previewsRevealed} onPress={() => openGame(game)} onRules={hasRules(game) ? () => openRules(game) : undefined} />
+                  <GameRow key={game.id} game={game} hidden={isHidden(tab, game)} dark={dark} p1Color={p1Color} p2Color={p2Color} previewRevealed={previewsRevealed} onPress={() => openGame(game)} onRules={hasRules(game) ? () => openRules(game) : undefined} />
                 ))}
               </View>
             </FadingScrollView>
@@ -200,6 +216,43 @@ const SEAT_ONE_PICKER = 'home-p1'
 // No placement of the pack's own: hud places the menu itself.
 const noPickerAlign = () => undefined
 
+// A game the tab picked doesn't include: kept mounted, out of the layout and out of a screen reader's way.
+function isHidden(tab: HomeTab | null, game: PackGameDefinition): boolean {
+  return !!tab && !tab.includes(game)
+}
+
+// iOS leaves a scroller's offset past the end when its content shrinks (React Native's own TODO, T190695447
+// in RCTScrollViewComponentView.mm), so a switch to a shorter tab while scrolled down would leave blank space
+// under the last game until the next drag. This pulls it back in, as Android and the web do by themselves.
+// Spread onto one scroller (its ref and three events) only in a pack with tabs, the one way Home's content
+// shrinks. The ref is a callback so a scroller mounted afresh (a switch between the column and the grid)
+// starts from its real offset, 0, not the last one's.
+function useClampOnShrink() {
+  const view = useRef<ScrollView | null>(null)
+  const sizes = useRef({ viewport: 0, offset: 0 })
+  return useMemo(
+    () => ({
+      ref: (instance: ScrollView | null) => {
+        view.current = instance
+        sizes.current.offset = 0
+      },
+      onLayout: (e: LayoutChangeEvent) => {
+        sizes.current.viewport = e.nativeEvent.layout.height
+      },
+      onScroll: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+        sizes.current.offset = e.nativeEvent.contentOffset.y
+      },
+      onContentSizeChange: (_width: number, height: number) => {
+        const end = Math.max(0, height - sizes.current.viewport)
+        if (sizes.current.offset <= end) return
+        sizes.current.offset = end
+        view.current?.scrollTo({ y: end, animated: false })
+      }
+    }),
+    []
+  )
+}
+
 // Whether a tile has a rules button: a rules sheet or How to Play cards to show.
 function hasRules(game: PackGameDefinition): boolean {
   return !!(game.Rules || game.guide)
@@ -214,6 +267,8 @@ function RulesHost({ enabled, children }: { enabled: boolean; children: ReactNod
 
 interface GameRowProps {
   game: PackGameDefinition
+  // Not in the tab picked (PackDefinition.homeTabs).
+  hidden: boolean
   dark: boolean
   p1Color: string
   p2Color: string
@@ -227,13 +282,13 @@ interface GameRowProps {
 // One game on its own well: its icon at app-icon size (the art was drawn as an app icon), or its
 // preview where it has one, its name and one-line blurb, and a rules button at the end that shows its
 // How to Play cards without opening the game.
-function GameRow({ game, dark, p1Color, p2Color, previewRevealed, onPress, onRules }: GameRowProps) {
+function GameRow({ game, hidden, dark, p1Color, p2Color, previewRevealed, onPress, onRules }: GameRowProps) {
   const well = useWellColors()
   const GameIcon = game.icon
   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.
-    <View>
+    <View style={hidden ? styles.hidden : undefined}>
       <Pressable onPress={onPress} style={[styles.row, { backgroundColor: well.bg }]} accessibilityRole='button' accessibilityLabel={game.title}>
         {game.Preview ? <PreviewBox game={game} width={ROW_PREVIEW_WIDTH} revealed={previewRevealed} dark={dark} p1Color={p1Color} p2Color={p2Color} /> : <View style={[styles.rowIcon, { backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }]}>{GameIcon && <GameIcon size={ROW_ICON_SIZE} p1Color={p1Color} p2Color={p2Color} dark={dark} />}</View>}
         <View style={styles.rowText}>
@@ -262,10 +317,10 @@ interface GameTileProps extends GameRowProps {
 // One game in the wide layout's grid: the row turned on its side, its preview (or icon) on top and its
 // name and blurb under it, since a row needs ~290pt, more than a grid column beside the hero has. The
 // rules button floats over the preview's corner, beside the tile's button rather than inside it.
-function GameTile({ game, width, previewWidth, dark, p1Color, p2Color, previewRevealed, onPress, onRules }: GameTileProps) {
+function GameTile({ game, hidden, width, previewWidth, dark, p1Color, p2Color, previewRevealed, onPress, onRules }: GameTileProps) {
   const well = useWellColors()
   return (
-    <View style={{ width }}>
+    <View style={[{ width }, hidden && styles.hidden]}>
       <Pressable onPress={onPress} style={[styles.tile, { backgroundColor: well.bg }]} accessibilityRole='button' accessibilityLabel={game.title}>
         <PreviewBox game={game} width={previewWidth} revealed={previewRevealed} dark={dark} p1Color={p1Color} p2Color={p2Color} />
         <Text variant='titleMedium' style={[styles.rowTitle, { color: well.fg }]} numberOfLines={1}>
@@ -337,12 +392,21 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     gap: HOME_GRID_GAP
   },
+  // Out of the layout (a grid closes up around it) and hidden from screen readers.
+  hidden: {
+    display: 'none'
+  },
   // Solitaire's list: one column, never wider than a phone's, centred on a wide screen.
   list: {
     gap: 14,
     maxWidth: 480,
     width: '100%'
   },
+  // The list's width, for the tabs over it.
+  listWidth: {
+    maxWidth: 480,
+    width: '100%'
+  },
   picker: {
     alignItems: 'center'
   },
@@ -405,6 +469,10 @@ const styles = StyleSheet.create({
   scroll: {
     flex: 1
   },
+  // SegmentedButtons' own rounding, so a surface behind it is the same pill (the stats screen's tabs).
+  tabs: {
+    borderRadius: 20
+  },
   // The same well as a row, turned on its side.
   tile: {
     borderRadius: 12,
@@ -443,5 +511,9 @@ const styles = StyleSheet.create({
     position: 'absolute',
     right: 0,
     top: 0
+  },
+  // The tabs over the grid, a little further from it than the tiles are from each other.
+  wideTabs: {
+    marginBottom: 16
   }
 })

package/src/types.ts

@@ -225,6 +225,13 @@ export interface PackStatsSectionsProps {
   gameId: string | null
 }
 
+// A tab on Home (PackDefinition.homeTabs): its label, and which of the pack's games it shows, in the
+// pack's order (Solitaire's: the games with no seat 2, and the ones with one).
+export interface HomeTab {
+  label: string
+  includes: (game: PackGameDefinition) => boolean
+}
+
 // The stack's screen options (expo-router's Stack), as an object: what PackDefinition.useScreenOptions
 // returns.
 export type StackScreenOptions = Exclude<NonNullable<ComponentProps<typeof Stack>['screenOptions']>, (...args: never[]) => unknown>
@@ -260,6 +267,10 @@ export interface PackDefinition {
   // A seat's color pick for a profile is kept for this pack only; the seat button says so.
   colorCaption: string
   games: readonly PackGameDefinition[]
+  // Home splits the games into these tabs, a switch under seat 1's button (over the grid on a wide
+  // screen) showing one tab's games at a time. It opens on the first, and keeps the tab picked while Home
+  // is covered. Unset, or a single tab, shows every game with no switch.
+  homeTabs?: readonly HomeTab[]
   // Player 1's and player 2's own default colors. They seed the theme's primary and secondary (the
   // tertiary is derived from them, see shellState.ts) and the guest and CPU colors a fresh install
   // starts with (seatColorsSlice.ts), so a fresh install's live theme and its remembered colors agree.