@tastic/shell 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/shell",
-  "version": "0.4.0",
+  "version": "0.6.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",
@@ -66,7 +66,7 @@
   },
   "prettier": "@infinitetoken/eslint-config/prettier",
   "devDependencies": {
-    "@babel/core": "^7.29.7",
+    "@babel/core": "^7.29.13",
     "@expo/vector-icons": "^15.1.1",
     "@infinitetoken/eslint-config": "^0.2.1",
     "@infinitetoken/jest-config": "^0.5.2",
@@ -74,7 +74,7 @@
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-masked-view/masked-view": "0.3.2",
     "@react-native/jest-preset": "^0.88.0",
-    "@reduxjs/toolkit": "^2.13.0",
+    "@reduxjs/toolkit": "^2.14.0",
     "@rific/auto-paper": "^0.13.4",
     "@rific/core": "^0.5.0",
     "@rific/feedback-press": "^0.13.1",
@@ -84,7 +84,7 @@
     "@rific/toaster": "^0.12.0",
     "@rific/updater": "^0.8.0",
     "@tastic/achievements": "^0.6.0",
-    "@tastic/core": "^0.14.0",
+    "@tastic/core": "^0.15.0",
     "@tastic/edge-guard": "^0.1.5",
     "@tastic/hud": "^0.27.1",
     "@tastic/profile": "^0.17.0",
@@ -95,34 +95,33 @@
     "eslint": "^9.39.5",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-native": "^5.0.0",
-    "expo": "~58.0.19",
-    "expo-audio": "~58.0.10",
+    "expo": "~58.0.23",
+    "expo-audio": "~58.0.11",
     "expo-blur": "~58.0.5",
-    "expo-constants": "~58.0.13",
+    "expo-constants": "~58.0.15",
     "expo-font": "~58.0.10",
     "expo-haptics": "~58.0.7",
     "expo-keep-awake": "~58.0.3",
-    "expo-router": "~58.0.26",
-    "expo-sensors": "~58.0.4",
-    "expo-splash-screen": "~58.0.11",
+    "expo-router": "~58.0.30",
+    "expo-splash-screen": "~58.0.13",
     "expo-system-ui": "~58.0.6",
-    "expo-updates": "~58.0.18",
+    "expo-updates": "~58.0.21",
     "jest": "~30.5.2",
-    "jest-expo": "~58.0.12",
+    "jest-expo": "~58.0.14",
     "prettier": "^3.8.3",
     "react": "19.3.0",
-    "react-native": "0.88.0",
+    "react-native": "^0.88.1",
     "react-native-gesture-handler": "~3.3.0",
-    "react-native-paper": "^5.15.3",
+    "react-native-paper": "^5.15.4",
     "react-native-reanimated": "4.7.1",
-    "react-native-safe-area-context": "~5.10.1",
+    "react-native-safe-area-context": "~5.11.1",
     "react-native-screens": "~4.30.0",
     "react-native-worklets": "0.13.0",
     "react-redux": "^9.3.0",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "test-renderer": "^1.3.1",
-    "tsup": "^8.0.0",
+    "tsup": "^9.0.0",
     "typescript": "~6.0.3"
   },
   "peerDependencies": {
@@ -136,7 +135,7 @@
     "@rific/splash-gate": ">=0.2.3",
     "@rific/toaster": ">=0.10.1",
     "@tastic/achievements": ">=0.6.0",
-    "@tastic/core": ">=0.14.0",
+    "@tastic/core": ">=0.15.0",
     "@tastic/edge-guard": ">=0.1.5",
     "@tastic/hud": ">=0.27.1",
     "@tastic/profile": ">=0.16.2",
@@ -147,7 +146,6 @@
     "expo-haptics": ">=58.0.7",
     "expo-keep-awake": ">=58.0.3",
     "expo-router": ">=58.0.23",
-    "expo-sensors": ">=58.0.4",
     "expo-splash-screen": ">=58.0.10",
     "react": ">=19.3.0",
     "react-native": ">=0.88.0",

package/src/RootLayout.tsx

@@ -1,12 +1,11 @@
 import { useAutoPaperTheme } from '@rific/auto-paper'
 import { useHapticSettings } from '@rific/feedback-press'
 import { Toaster, ToastProvider } from '@rific/toaster'
-import { OrientationProvider, useRotationAwareStatusBar, useThemedRootBackground } from '@tastic/core'
+import { useThemedRootBackground } from '@tastic/core'
 import { RotatedFrame } from '@tastic/hud/chrome'
 import { ProfileColorProvider } from '@tastic/profile'
 import * as Haptics from 'expo-haptics'
 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'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
@@ -19,7 +18,6 @@ import { GuideHost } from './components/GuideHost'
 import { Providers } from './components/Providers'
 import { Theme } from './components/Theme'
 import { UpdateDialog } from './components/UpdateDialog'
-import { useAppSettings } from './hooks/useAppSettings'
 import { LastActiveGameProvider } from './hooks/useLastActiveGame'
 import { ProfilesProvider, useProfiles } from './hooks/useProfiles'
 import { PackProvider, usePack } from './PackContext'
@@ -38,15 +36,13 @@ import type { PackDefinition, PackGameDefinition } from './types'
 // a play screen and wins (confirmed on-device in LightCycles, where it kicked the player back to the title
 // screen mid-round instead of turning their cycle). Web has no such OS-level gesture.
 //
-// useRotationAwareStatusBar (@tastic/core) hides the OS status bar whenever the content is rotated
-// off portrait. It does it through screen options because that is the only way left: an app linked
-// against the iOS 27 SDK can't set the status bar app-wide, which is all React Native's StatusBar
-// (and expo-status-bar) does on iOS, and with @tastic/core's config plugin on, every mounted
-// StatusBar logs an error. So nothing in the app mounts one (Theme passes auto-paper's Provider
-// statusBar={false}). No `locked` argument: OrientationBridge already freezes the reading it
-// follows. A play screen hides the bar for the whole round, whatever the angle (a screen's own
-// options win over screenOptions); index is listed first so it stays the stack's first route.
-// A game with keepStatusBar (Solitaire's) keeps the screen options' rotation-aware bar instead.
+// The status bar is set through screen options because that is the only way left: an app linked
+// against the iOS 27 SDK can't set the status bar app-wide, which is all React Native's StatusBar (and
+// expo-status-bar) does on iOS, and with UIViewControllerBasedStatusBarAppearance on (each app's
+// ios.infoPlist), every mounted StatusBar logs an error. So nothing in the app mounts one (Theme passes
+// auto-paper's Provider statusBar={false}). A play screen hides the bar for the whole round (a screen's
+// own options win over screenOptions); index is listed first so it stays the stack's first route. A
+// game with keepStatusBar (Solitaire's) keeps the stack's bar instead.
 const PLAY_OPTIONS = { statusBarHidden: true }
 const KEEP_STATUS_BAR_OPTIONS = {}
 
@@ -76,7 +72,7 @@ function AppStack() {
   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 statusBarStyle = darkRoot ? ('light' as const) : ('dark' as const)
   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
@@ -96,7 +92,7 @@ function AppStack() {
   }, [darkRoot, navigationBackground])
   const stack = (
     <NavigationThemeProvider value={navigationTheme}>
-      <Stack screenOptions={{ ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }}>
+      <Stack screenOptions={{ ...rootBackground, statusBarStyle, ...backdropOptions, ...packOptions }}>
         <Stack.Screen name='index' />
         <Stack.Screen name='play/[game]' options={playOptions} />
       </Stack>
@@ -111,38 +107,6 @@ function AppStack() {
   )
 }
 
-// Wires the persisted Lock Orientation setting into @tastic/core's OrientationProvider. Its own
-// component because RootLayout renders the Redux store (inside Providers) and so can't call
-// useAppSettings() itself. Providers' PersistGate holds rendering until the store has rehydrated, so
-// lockInitialValue carries the saved lock from the very first render.
-//
-// freezeWhileLocked makes the lock app-wide: while appSettings.lockOrientation is on, the ONE shared
-// orientation reading freezes for every consumer (every screen, every board, hud dialogs, the
-// status bar), including anything that mounts after the lock, so no call site ever takes a `locked`
-// argument of its own (one would freeze on the pre-sensor default at mount). The Settings dialog
-// toggle only writes appSettings.lockOrientation, which reaches the provider as a changed
-// lockInitialValue; the provider reports the angle it froze on through onLockChange (`rotation`,
-// cleared on unlock), persisted as appSettings.lockedRotation and handed back here so a relaunch reopens
-// in the locked orientation instead of portrait.
-//
-// Mounted once, here, rather than per screen: one app-lifetime sensor subscription is what lets the
-// committed orientation survive navigation. deviceMotion is the app's own expo-sensors import, handed
-// in because @tastic/core never imports expo-sensors itself (apps without tilt tracking would
-// otherwise need it installed just to bundle).
-//
-// portraitWhileKeyboard (PackDefinition.portraitWhileKeyboard): the software keyboard can't turn with a
-// faked rotation, so a pack that has the player type sideways (a profile's name) reads portrait while
-// it's up.
-function OrientationBridge({ children }: { children: ReactNode }) {
-  const { settings, setSettings } = useAppSettings()
-  const { portraitWhileKeyboard } = usePack()
-  return (
-    <OrientationProvider deviceMotion={DeviceMotion} freezeWhileLocked lockInitialValue={{ locked: settings.lockOrientation, rotation: settings.lockedRotation }} onLockChange={(next) => setSettings({ lockOrientation: next.locked, lockedRotation: next.rotation })} portraitWhileKeyboard={portraitWhileKeyboard}>
-      {children}
-    </OrientationProvider>
-  )
-}
-
 // ProfilesProvider reconciles the local roster with the shared App Group one before `loaded` flips,
 // so a screen mounting earlier would read (and could persist) the wrong profiles. This holds
 // everything nested inside it, and the splash screen, until that's done, while ProfilesProvider sits
@@ -163,7 +127,7 @@ function GatedApp({ children }: { children: ReactNode }) {
 // either is ever shown. Must render inside Providers, whose FeedbackBridge provides the setting.
 //
 // A pack with its own Toaster gets no Paper here: with Paper the toaster draws through a Paper Portal,
-// which would take its toasts out of the turned frame PackToaster lays them in.
+// which would take its toasts out of the frame PackToaster lays them in.
 function HapticGatedToastProvider({ children }: { children: ReactNode }) {
   const { settings } = useHapticSettings()
   const { Toaster: PackToasterComponent } = usePack()
@@ -186,10 +150,10 @@ function RotatingToaster() {
   return <Toaster historyButton={null} clearButton={null} limit={3} renderFrame={renderFrame} />
 }
 
-// The pack's own toaster (PackDefinition.Toaster), laid over the whole app in a frame turned with the
-// phone: passThrough, so only a toast claims a touch over the stack, and rotatedSafeArea, so the
-// toaster's own safe-area reading lands on the frame's edges. The absoluteFill wrapper takes the frame
-// out of the layout beside the stack.
+// The pack's own toaster (PackDefinition.Toaster), laid over the whole app in hud's RotatedFrame, which
+// nothing turns since @tastic/core 0.15: passThrough, so only a toast claims a touch over the stack, and
+// rotatedSafeArea, so the toaster reads the safe area. The absoluteFill wrapper takes the frame out of
+// the layout beside the stack.
 function PackToaster({ Toaster: PackToasterComponent }: { Toaster: NonNullable<PackDefinition['Toaster']> }) {
   return (
     <View style={StyleSheet.absoluteFill} pointerEvents='box-none'>
@@ -243,24 +207,21 @@ export function RootLayout({ pack, store, persistor }: RootLayoutProps) {
                     <GameProviders games={pack.games}>
                       <PackRoot pack={pack}>
                         <GatedApp>
-                          <OrientationBridge>
-                            <HapticGatedToastProvider>
-                              {/* Wraps the stack (rather than sitting beside it like UpdateDialog)
+                          <HapticGatedToastProvider>
+                            {/* Wraps the stack (rather than sitting beside it like UpdateDialog)
                             because Home's tiles and the loadout's How to Play row reach it through
-                            context (see GuideHost). Inside the toast provider and OrientationBridge
-                            because the card renders through a Portal and rotates with the shared
-                            reading, and inside the gate so it mounts together with Home rather than
-                            before it. */}
-                              <GuideHost>
-                                <AppStack />
-                              </GuideHost>
-                              {/* historyButton/clearButton off: there's no toast history to open, and a
+                            context (see GuideHost). Inside the toast provider because the card renders
+                            through a Portal, and inside the gate so it mounts together with Home rather
+                            than before it. */}
+                            <GuideHost>
+                              <AppStack />
+                            </GuideHost>
+                            {/* historyButton/clearButton off: there's no toast history to open, and a
                             control row for it above the toast stack would go nowhere. limit pins the
                             package's current default (3) so a future toaster release can't change it. */}
-                              {pack.Toaster ? <PackToaster Toaster={pack.Toaster} /> : <RotatingToaster />}
-                              <UpdateDialog />
-                            </HapticGatedToastProvider>
-                          </OrientationBridge>
+                            {pack.Toaster ? <PackToaster Toaster={pack.Toaster} /> : <RotatingToaster />}
+                            <UpdateDialog />
+                          </HapticGatedToastProvider>
                         </GatedApp>
                       </PackRoot>
                     </GameProviders>

package/src/components/GuideHost.tsx

@@ -1,4 +1,4 @@
-import { useIsTouchPrimaryDevice, useRotation } from '@tastic/core'
+import { useIsTouchPrimaryDevice } from '@tastic/core'
 import { GuideProvider, useGuide } from '@tastic/hud/guide'
 import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { shallowEqual, useDispatch, useSelector, useStore } from 'react-redux'
@@ -38,9 +38,8 @@ interface Props {
 // the pack's own (PackDefinition.guide, cards that teach every game at once), or a game's. Each
 // game's cards come from its own registry entry (GameDefinition.guide), built from the live settings
 // and seat 2 so a replay after any loadout change describes the next match. Mounted around the stack
-// in RootLayout, inside the toast provider and OrientationBridge because the card renders through a
-// Portal and turns with the shared reading (`rotation`, the same one Home hands its Settings dialog),
-// and inside the profiles gate so it mounts together with Home.
+// in RootLayout, inside the toast provider because the card renders through a Portal, and inside the
+// profiles gate so it mounts together with Home.
 export function GuideHost({ children }: Props) {
   const pack = usePack()
   const [subject, setSubject] = useState(() => (pack.guide ? PACK_GUIDE : (pack.games.find((g) => g.guide)?.id ?? null)))
@@ -48,7 +47,6 @@ export function GuideHost({ children }: Props) {
   const game = subject === PACK_GUIDE ? undefined : pack.games.find((g) => g.id === subject)
   const gameGuide = game?.guide
 
-  const rotation = useRotation()
   const touch = useIsTouchPrimaryDevice()
   const seatTwo = useSelector((state: ShellState) => state.opponent.seatTwo)
   const input = useSelector((state: ShellState) => (gameGuide ? gameGuide.selectInput(state) : NO_INPUT), shallowEqual)
@@ -68,7 +66,7 @@ export function GuideHost({ children }: Props) {
   )
 
   return (
-    <GuideProvider steps={steps} currentVersion={(packGuide ?? gameGuide)?.version ?? 0} seenVersion={seenVersion} onSeen={onSeen} rotation={rotation}>
+    <GuideProvider steps={steps} currentVersion={(packGuide ?? gameGuide)?.version ?? 0} seenVersion={seenVersion} onSeen={onSeen}>
       <GameGuideBridge onPick={setSubject}>{children}</GameGuideBridge>
     </GuideProvider>
   )

package/src/components/MatchChips.tsx

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

package/src/components/SettingsDialog.tsx

@@ -1,5 +1,4 @@
 import { useUpdateErrorToast } from '@rific/toaster'
-import { ViewRotation } from '@tastic/core'
 import { BaseSettingsDialog } from '@tastic/hud/chrome'
 import type { ReactNode } from 'react'
 
@@ -9,11 +8,6 @@ import { usePack } from '../PackContext'
 export interface SettingsDialogProps {
   visible: boolean
   onDismiss: () => void
-  // Live physical-hold rotation (see @tastic/core's useRotation). BaseSettingsDialog lays the sheet
-  // out in its own frame turned by this (see @tastic/hud's RotatedFrame), so it reads right-side-up
-  // and fits the short edge however the phone is held. Defaults to 0 for a call site that doesn't
-  // track one.
-  rotation?: ViewRotation
   // Shows the How to Play row, which opens this game's cards (a loadout passes its game's opener).
   // Left out on Home, where each tile's rules button does it, and in a match, where opening
   // Settings pauses play.
@@ -23,12 +17,12 @@ export interface SettingsDialogProps {
   children?: ReactNode
 }
 
-// The pack-wide Settings dialog: everything the shell puts in it applies to every game (Lock
-// Orientation, Edge Guard, theme, sound, haptics, Keep Awake), so it reads and writes the app
+// The pack-wide Settings dialog: everything the shell puts in it applies to every game (Edge Guard,
+// theme, sound, haptics, Keep Awake), so it reads and writes the app
 // settings itself. Under those, a play screen's own rows and then the pack's own sections
 // (PackDefinition.SettingsSections), in every Settings dialog the pack opens. A pack with edgeGuard
 // false gets no Edge Guard row: hud draws it on iOS whenever its props are passed.
-export function SettingsDialog({ visible, onDismiss, rotation = 0, onShowHowToPlay, children }: SettingsDialogProps) {
+export function SettingsDialog({ visible, onDismiss, onShowHowToPlay, children }: SettingsDialogProps) {
   const onUpdateError = useUpdateErrorToast()
   const { settings, setSettings } = useAppSettings()
   // The pack's otaVersion (src/constants/release.ts, which the OTA tooling bumps).
@@ -36,7 +30,7 @@ export function SettingsDialog({ visible, onDismiss, rotation = 0, onShowHowToPl
   const edgeGuardProps = edgeGuard ? { deferBottomEdgeGestures: settings.deferBottomEdgeGestures, onDeferBottomEdgeGestures: (value: boolean) => setSettings({ deferBottomEdgeGestures: value }) } : {}
 
   return (
-    <BaseSettingsDialog visible={visible} onDismiss={onDismiss} rotation={rotation} version={otaVersion} lockOrientation={settings.lockOrientation} onLockOrientationChange={(value) => setSettings({ lockOrientation: value })} {...edgeGuardProps} onUpdateError={onUpdateError} onShowHowToPlay={onShowHowToPlay}>
+    <BaseSettingsDialog visible={visible} onDismiss={onDismiss} version={otaVersion} {...edgeGuardProps} onUpdateError={onUpdateError} onShowHowToPlay={onShowHowToPlay}>
       {children}
       {SettingsSections && <SettingsSections />}
     </BaseSettingsDialog>

package/src/components/Theme.tsx

@@ -61,8 +61,9 @@ export function Theme({ children }: Props) {
   // iOS/Android (the Settings sheet's and Rules' rows above Done, @tastic/profile's dropdown lists
   // above Manage); without it they just scroll with a hard edge. Web needs nothing.
   // statusBar={false}: auto-paper renders no React Native StatusBar (here or in Appbar.Header). The
-  // status bar is set per screen (_layout.tsx's useRotationAwareStatusBar), and with @tastic/core's
-  // config plugin on, a mounted StatusBar logs an error (a red box in a dev build).
+  // status bar is set through the stack's screen options (RootLayout's AppStack), and with
+  // UIViewControllerBasedStatusBarAppearance on (each app's ios.infoPlist), a mounted StatusBar logs an
+  // error (a red box in a dev build).
   // reanimated is what makes Dialog's own animatedStyle prop do anything (Metro won't pick up a
   // require()-in-try/catch from this package's ESM build, so the module is handed in); nothing else in
   // auto-paper reads it. fontFamily is the pack's (PackDefinition.fontFamily): set, it goes on every

package/src/components/UpdateDialog.tsx

@@ -1,5 +1,4 @@
 import { useUpdateErrorToast } from '@rific/toaster'
-import { useRotation } from '@tastic/core'
 import { UpdateDialog as SharedUpdateDialog } from '@tastic/hud/chrome'
 
 // Thin bridge onto the fleet-shared @tastic/hud UpdateDialog, which now owns the useUpdater()
@@ -8,6 +7,5 @@ import { UpdateDialog as SharedUpdateDialog } from '@tastic/hud/chrome'
 // directly in _layout.tsx) purely so this app's own onError -> toast wiring has one place to live.
 export function UpdateDialog() {
   const onError = useUpdateErrorToast()
-  const rotation = useRotation()
-  return <SharedUpdateDialog onError={onError} rotation={rotation} />
+  return <SharedUpdateDialog onError={onError} />
 }

package/src/hooks/useFrozenWhileHidden.ts

@@ -5,9 +5,9 @@ import { useState } from 'react'
 // Solitaire's components/useFrozenWhileHidden.ts as it was.
 //
 // Home holds its layout with it while another screen covers it (screens/HomeScreen.tsx): Home stays
-// mounted beneath every screen the stack pushes and keeps following the rotation, and crossing the
+// mounted beneath every screen the stack pushes and keeps following the window, and crossing the
 // upright/wide threshold swaps its whole tree (every tile, the hero, seat 1's button), invisible work
-// landing in the same commit as the covering screen's own rotation update. While covered the layout is
+// landing in the same commit as the covering screen's own update for the new window. While covered the layout is
 // held where it was; it catches up (one swap, visible) when Home is shown again.
 export function useFrozenWhileHidden<T>(value: T, hidden: boolean): T {
   // React's own sanctioned "adjust state during render" shape (see react.dev's guide of the same

package/src/index.ts

@@ -15,6 +15,7 @@ export { StatsScreen } from './screens/StatsScreen'
 // What a game's own screens use.
 export { useGameGuide } from './components/GuideHost'
 export { imageGameIcon } from './components/imageGameIcon'
+export { MATCH_CHIPS_DESKTOP_MIN_WIDTH, MATCH_CHIPS_FADE_MS, MatchChips, type MatchChipsProps } from './components/MatchChips'
 export { SettingsDialog, type SettingsDialogProps } from './components/SettingsDialog'
 export { useActiveRound } from './hooks/useActiveRound'
 export { useAppSettings } from './hooks/useAppSettings'

package/src/redux/appSettingsSlice.ts

@@ -1,24 +1,13 @@
 import { createSettingsSlice } from '@rific/core'
-import type { ViewRotation } from '@tastic/core'
 
 // Settings that apply to the whole pack rather than one game. A game's own rules (board, score to
 // win, controls) live in that game's own settings slice.
 export interface AppSettings {
-  // Lock Orientation: RootLayout's OrientationBridge hands it to @tastic/core's OrientationProvider
-  // (freezeWhileLocked), which freezes the one shared orientation reading for every screen, every
-  // board, dialogs and the status bar alike. Off by default: all of those just follow however the
-  // device is actually being held.
-  lockOrientation: boolean
-  // The angle the lock is holding. Written by OrientationProvider's onLockChange (recorded on lock,
-  // cleared on unlock) and handed back as lockInitialValue, so a relaunch reopens in the locked
-  // orientation instead of portrait. Never set by the UI directly; absent while unlocked.
-  lockedRotation?: ViewRotation
   // Edge Guard's opt-in (see Providers.tsx's EdgeGuardBridge).
   deferBottomEdgeGestures: boolean
 }
 
 export const DEFAULT_APP_SETTINGS: AppSettings = {
-  lockOrientation: false,
   deferBottomEdgeGestures: false
 }
 

package/src/screens/HomeScreen.tsx

@@ -1,6 +1,5 @@
 import { defaultColors, FadingScrollView, useAutoPaperTheme } from '@rific/auto-paper'
 import { IconButton, Pressable } from '@rific/feedback-press'
-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'
@@ -53,7 +52,6 @@ export function HomeScreen() {
 
 function HomeMenu() {
   const pack = usePack()
-  const rotation = useRotation()
   const layout = useHomeLayout()
   const { insets } = layout
   const { dark, colors } = useAutoPaperTheme()
@@ -79,7 +77,7 @@ function HomeMenu() {
 
   // Tiles: while any game in the pack has a preview, a wide screen lays the games out as a grid beside
   // the hero (homeLayout.ts). Home stays mounted beneath every screen the stack pushes and keeps
-  // following the rotation, so while it's covered the layout is held where it was (see
+  // following the window, so while it's covered the layout is held where it was (see
   // useFrozenWhileHidden); it catches up when Home is shown again. Only the choice of layout is held:
   // the panes' numbers follow the window, unseen under the screen covering Home.
   const tiled = pack.games.some((game) => game.Preview)
@@ -95,13 +93,13 @@ function HomeMenu() {
     return () => cancelAnimationFrame(id)
   }, [tiled])
   // A popover is placed once, as it opens, from measurements of the frame it opens in. Turning the
-  // phone (or any resize) moves the frame under it, and switching between the column and the two panes
+  // device (or any resize) moves the frame under it, and switching between the column and the two panes
   // unmounts the very button it hangs off, which would leave the press-away overlay up with nothing to
   // dismiss. So every layout change closes it.
   const closePicker = pickerHost.close
   useEffect(() => {
     closePicker()
-  }, [isWide, rotation, layout.windowWidth, layout.windowHeight, closePicker])
+  }, [isWide, layout.windowWidth, layout.windowHeight, closePicker])
 
   // Over the pack's Backdrop Home draws nothing of its own behind the menu.
   const bg = pack.Backdrop ? 'transparent' : dark ? '#000000' : '#FFFFFF'
@@ -150,10 +148,9 @@ function HomeMenu() {
 
   return (
     <View style={[styles.container, { backgroundColor: bg }]}>
-      {/* Reads correctly however the phone is held: see @tastic/core's FakeLandscapeView. The
-      Settings dialog stays outside it: it renders through a Portal, turned by its own `rotation`. A
-      game's rules sheet renders inside it instead (see RulesHost). */}
-      <FakeLandscapeView style={styles.rotatable}>
+      {/* The Settings dialog stays outside this frame: it renders through a Portal. A game's rules
+      sheet renders inside it instead (see RulesHost). */}
+      <View style={styles.frame}>
         <RulesHost enabled={pack.games.some((game) => game.Rules)}>
           {isWide ? (
             <>
@@ -201,11 +198,11 @@ function HomeMenu() {
           <IconButton icon='cog' iconColor={fg} size={24} style={[styles.corner, { top: 8 + insets.top, right: 8 + insets.right }]} onPress={() => setSettingsOpen(true)} accessibilityLabel='Settings' />
           {RulesSheet && <RulesSheet visible onDismiss={() => setRulesGame(null)} />}
         </RulesHost>
-      </FakeLandscapeView>
+      </View>
 
       {/* Home's How to Play row replays the pack's own cards (PackDefinition.guide); without them each
       tile's rules button shows its game's. */}
-      <SettingsDialog visible={settingsOpen} onDismiss={() => setSettingsOpen(false)} rotation={rotation} onShowHowToPlay={pack.guide ? openPack : undefined} />
+      <SettingsDialog visible={settingsOpen} onDismiss={() => setSettingsOpen(false)} onShowHowToPlay={pack.guide ? openPack : undefined} />
     </View>
   )
 }
@@ -258,9 +255,8 @@ function hasRules(game: PackGameDefinition): boolean {
   return !!(game.Rules || game.guide)
 }
 
-// A game's rules sheet (GameDefinition.Rules) portals into a Paper host inside Home's turned frame, so
-// it's turned with the frame and laid out against it (a sheet laid out against the upright window ran
-// off a phone held sideways). Only in a pack with one: a pack without keeps the frame as it was.
+// A game's rules sheet (GameDefinition.Rules) portals into a Paper host inside Home's frame, so it's
+// laid out against Home's safe area. Only in a pack with one: a pack without keeps the frame as it was.
 function RulesHost({ enabled, children }: { enabled: boolean; children: ReactNode }) {
   return enabled ? <Portal.Host>{children}</Portal.Host> : <>{children}</>
 }
@@ -386,6 +382,9 @@ const styles = StyleSheet.create({
   corner: {
     position: 'absolute'
   },
+  frame: {
+    flex: 1
+  },
   // The wide layout's tiles: wrapped rows of tiles the layout sizes to fill the pane's width.
   grid: {
     flexDirection: 'row',
@@ -432,9 +431,6 @@ const styles = StyleSheet.create({
   previewIcon: {
     overflow: 'hidden'
   },
-  rotatable: {
-    flex: 1
-  },
   // A well (@tastic/hud's wellSurface): the theme's surface on MD3's level-1 shadow, the same surface
   // as Solitaire's game rows, the stats screen's sections and every dialog.
   row: {