@tastic/shell 0.3.1 → 0.4.0

package/README.md

@@ -22,7 +22,7 @@ package ecosystem, on [`@tastic/hud`](https://github.com/jayrdeaton/react-native
   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,
@@ -130,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

@@ -1177,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 };
@@ -1190,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" }),
@@ -1210,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: [
@@ -1234,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 }),
@@ -1272,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"
   },
@@ -1340,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,
@@ -1378,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

@@ -968,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";
@@ -1103,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 };
@@ -1116,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" }),
@@ -1136,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: [
@@ -1160,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 }),
@@ -1198,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"
   },
@@ -1266,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,
@@ -1304,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
   }
 });
 
@@ -1329,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";
@@ -1387,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.1",
+  "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/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.