@tastic/shell 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/shell",
-  "version": "0.1.0",
+  "version": "0.2.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",
@@ -86,7 +86,7 @@
     "@tastic/achievements": "^0.6.0",
     "@tastic/core": "^0.14.0",
     "@tastic/edge-guard": "^0.1.5",
-    "@tastic/hud": "^0.25.1",
+    "@tastic/hud": "^0.26.0",
     "@tastic/profile": "^0.17.0",
     "@tastic/split-screen": "^0.5.5",
     "@testing-library/react-native": "^14.1.0",
@@ -138,17 +138,17 @@
     "@tastic/achievements": ">=0.6.0",
     "@tastic/core": ">=0.14.0",
     "@tastic/edge-guard": ">=0.1.5",
-    "@tastic/hud": ">=0.25.1",
-    "@tastic/profile": ">=0.17.0",
+    "@tastic/hud": ">=0.26.0",
+    "@tastic/profile": ">=0.16.2",
     "@tastic/split-screen": ">=0.5.5",
-    "expo-blur": ">=58.0.5",
-    "expo-constants": ">=58.0.13",
-    "expo-font": ">=58.0.10",
+    "expo-blur": ">=58.0.4",
+    "expo-constants": ">=58.0.12",
+    "expo-font": ">=58.0.8",
     "expo-haptics": ">=58.0.7",
     "expo-keep-awake": ">=58.0.3",
-    "expo-router": ">=58.0.26",
+    "expo-router": ">=58.0.23",
     "expo-sensors": ">=58.0.4",
-    "expo-splash-screen": ">=58.0.11",
+    "expo-splash-screen": ">=58.0.10",
     "react": ">=19.3.0",
     "react-native": ">=0.88.0",
     "react-native-gesture-handler": ">=3.3.0",

package/src/PackContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, ReactNode, useContext } from 'react'
 
-import type { GameDefinition, PackDefinition } from './types'
+import type { PackDefinition, PackGameDefinition } from './types'
 
 // The pack the shell is running: handed in once at the root (see RootLayout), so nothing in shell/
 // ever imports pack.ts or a game. Games reach the shell only through this registry.
@@ -17,6 +17,6 @@ export function usePack(): PackDefinition {
 }
 
 // A game by id, or undefined for an id the pack doesn't have (a stale link).
-export function usePackGame(id: string | undefined): GameDefinition | undefined {
+export function usePackGame(id: string | undefined): PackGameDefinition | undefined {
   return usePack().games.find((g) => g.id === id)
 }

package/src/RootLayout.tsx

@@ -2,12 +2,13 @@ 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 { RotatedFrame } from '@tastic/hud'
+import { RotatedFrame } from '@tastic/hud/chrome'
+import { ProfileColorProvider } from '@tastic/profile'
 import * as Haptics from 'expo-haptics'
-import { Stack } from 'expo-router'
+import { DarkTheme, Stack, ThemeProvider as NavigationThemeProvider } from 'expo-router'
 import { DeviceMotion } from 'expo-sensors'
-import { ReactNode, useCallback } from 'react'
-import { StyleSheet } from 'react-native'
+import { ReactNode, useCallback, useMemo } from 'react'
+import { Platform, StyleSheet, View } from 'react-native'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import * as RNPaper from 'react-native-paper'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
@@ -21,10 +22,10 @@ import { UpdateDialog } from './components/UpdateDialog'
 import { useAppSettings } from './hooks/useAppSettings'
 import { LastActiveGameProvider } from './hooks/useLastActiveGame'
 import { ProfilesProvider, useProfiles } from './hooks/useProfiles'
-import { PackProvider } from './PackContext'
+import { PackProvider, usePack } from './PackContext'
 import type { PackStore } from './redux/createPackStore'
 import { SplashGate } from './splashGate'
-import type { GameDefinition, PackDefinition } from './types'
+import type { PackDefinition, PackGameDefinition } from './types'
 
 // The pack's root: every provider the shell needs, the pack's games' own providers, and the stack.
 // src/app/_layout.tsx hands it the pack (pack.ts) and its store, so nothing in shell/ imports a
@@ -45,18 +46,57 @@ import type { GameDefinition, PackDefinition } from './types'
 // 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.
 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.
+const TRANSPARENT_CONTENT = { backgroundColor: 'transparent' }
+
+// The pack's own screen options (PackDefinition.useScreenOptions), as a hook every pack calls: an
+// empty object without them.
+const noScreenOptions = () => ({})
 
 function AppStack() {
+  const pack = usePack()
+  const { Backdrop } = pack
   const { dark } = useAutoPaperTheme()
-  const rootBackground = useThemedRootBackground(dark, false)
+  // 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()
-  return (
-    <Stack screenOptions={{ ...rootBackground, ...statusBar }}>
+  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
+  // straight through a transparent play screen. iOS keeps its own push.
+  const backdropOptions = Backdrop ? { contentStyle: TRANSPARENT_CONTENT, animation: Platform.select({ android: 'fade' as const }) } : undefined
+  const playOptions = useCallback(
+    ({ route }: { route: { params?: object } }) => {
+      const id = (route.params as { game?: string } | undefined)?.game
+      return pack.games.some((g) => g.id === id && g.keepStatusBar) ? KEEP_STATUS_BAR_OPTIONS : PLAY_OPTIONS
+    },
+    [pack.games]
+  )
+  const navigationTheme = useMemo(() => (Backdrop ? { ...DarkTheme, colors: { ...DarkTheme.colors, background: 'transparent' } } : null), [Backdrop])
+  const stack = (
+    <Stack screenOptions={{ ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }}>
       <Stack.Screen name='index' />
-      <Stack.Screen name='play/[game]' options={PLAY_OPTIONS} />
+      <Stack.Screen name='play/[game]' options={playOptions} />
     </Stack>
   )
+  if (!Backdrop || !navigationTheme) return stack
+  return (
+    <View style={styles.root}>
+      <Backdrop />
+      <NavigationThemeProvider value={navigationTheme}>{stack}</NavigationThemeProvider>
+    </View>
+  )
 }
 
 // Wires the persisted Lock Orientation setting into @tastic/core's OrientationProvider. Its own
@@ -77,10 +117,15 @@ function AppStack() {
 // 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 })}>
+    <OrientationProvider deviceMotion={DeviceMotion} freezeWhileLocked lockInitialValue={{ locked: settings.lockOrientation, rotation: settings.lockedRotation }} onLockChange={(next) => setSettings({ lockOrientation: next.locked, lockedRotation: next.rotation })} portraitWhileKeyboard={portraitWhileKeyboard}>
       {children}
     </OrientationProvider>
   )
@@ -104,10 +149,14 @@ function GatedApp({ children }: { children: ReactNode }) {
 // follow the same setting as every other haptic in the app. Today they can't fire anyway (the only
 // controls that tick, the history and clear buttons, are off below), but this keeps it that way if
 // 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.
 function HapticGatedToastProvider({ children }: { children: ReactNode }) {
   const { settings } = useHapticSettings()
+  const { Toaster: PackToasterComponent } = usePack()
   return (
-    <ToastProvider haptics={settings.vibrate ? Haptics : undefined} paper={RNPaper}>
+    <ToastProvider haptics={settings.vibrate ? Haptics : undefined} paper={PackToasterComponent ? undefined : RNPaper}>
       {children}
     </ToastProvider>
   )
@@ -125,9 +174,40 @@ function RotatingToaster() {
   return <Toaster historyButton={null} clearButton={null} limit={3} renderFrame={renderFrame} />
 }
 
-// Every game's own root provider (its stats and achievements context), nested in pack order.
-function GameProviders({ games, children }: { games: readonly GameDefinition[]; children: ReactNode }) {
-  return games.reduceRight<ReactNode>((inner, game) => <game.Provider key={game.id}>{inner}</game.Provider>, children)
+// 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.
+function PackToaster({ Toaster: PackToasterComponent }: { Toaster: NonNullable<PackDefinition['Toaster']> }) {
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents='box-none'>
+      <RotatedFrame rotatedSafeArea passThrough>
+        <PackToasterComponent />
+      </RotatedFrame>
+    </View>
+  )
+}
+
+// Every game's own root provider (its stats and achievements context), nested in pack order. A game
+// without one adds nothing.
+function GameProviders({ games, children }: { games: readonly PackGameDefinition[]; children: ReactNode }) {
+  return games.reduceRight<ReactNode>((inner, game) => (game.Provider ? <game.Provider key={game.id}>{inner}</game.Provider> : inner), children)
+}
+
+// How every profile color is drawn (PackDefinition.previewColor), in the live mode: inside Theme for
+// the `dark` read. A pack without it draws the colors as they are, with no provider.
+function PreviewColors({ previewColor, children }: { previewColor: NonNullable<PackDefinition['previewColor']>; children: ReactNode }) {
+  const { dark } = useAutoPaperTheme()
+  const preview = useCallback((hex: string) => previewColor(hex, dark), [previewColor, dark])
+  return <ProfileColorProvider preview={preview}>{children}</ProfileColorProvider>
+}
+
+// The pack's own root pieces that sit inside the store, Theme and every provider above:
+// its color preview around everything, and its own Provider around How to Play and the stack.
+function PackRoot({ pack, children }: { pack: PackDefinition; children: ReactNode }) {
+  const { Provider, previewColor } = pack
+  const inner = Provider ? <Provider>{children}</Provider> : children
+  return previewColor ? <PreviewColors previewColor={previewColor}>{inner}</PreviewColors> : <>{inner}</>
 }
 
 interface RootLayoutProps {
@@ -149,26 +229,28 @@ export function RootLayout({ pack, store, persistor }: RootLayoutProps) {
                   it mounts) is the saved one. */}
                   <LastActiveGameProvider>
                     <GameProviders games={pack.games}>
-                      <GatedApp>
-                        <OrientationBridge>
-                          <HapticGatedToastProvider>
-                            {/* Wraps the stack (rather than sitting beside it like UpdateDialog)
+                      <PackRoot pack={pack}>
+                        <GatedApp>
+                          <OrientationBridge>
+                            <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
+                              <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. */}
-                            <RotatingToaster />
-                            <UpdateDialog />
-                          </HapticGatedToastProvider>
-                        </OrientationBridge>
-                      </GatedApp>
+                              {pack.Toaster ? <PackToaster Toaster={pack.Toaster} /> : <RotatingToaster />}
+                              <UpdateDialog />
+                            </HapticGatedToastProvider>
+                          </OrientationBridge>
+                        </GatedApp>
+                      </PackRoot>
                     </GameProviders>
                   </LastActiveGameProvider>
                 </ProfilesProvider>

package/src/components/GuideHost.tsx

@@ -9,57 +9,82 @@ import { roundModeFor, seatTwoFor } from '../types'
 
 interface GameGuideContextValue {
   // Shows a game's How to Play cards if this player hasn't finished or skipped this version yet,
-  // then runs `next` once they close; runs `next` at once otherwise. Home calls it on a tile tap, so
-  // a game's cards show the first time it's picked, before its loadout opens.
+  // then runs `next` once they close; runs `next` at once otherwise (and for a game with no cards of
+  // its own). Home calls it on a tile tap, so a game's cards show the first time it's picked, before
+  // its loadout opens.
   openFirstTime: (gameId: string, next: () => void) => void
-  // Shows a game's cards now, seen or not (a tile's rules button, a loadout's How to Play row).
+  // Shows a game's cards now, seen or not (a tile's rules button, a loadout's How to Play row). Does
+  // nothing for a game with no cards of its own.
   openFor: (gameId: string) => void
+  // Shows the pack's own cards now (PackDefinition.guide: Home's Settings).
+  openPack: () => void
+  // Shows the pack's own cards once per session, while this player hasn't seen this version (Home's
+  // first launch).
+  autoShowPack: () => void
 }
 
+// What the one GuideProvider is showing: the pack's own cards, or a game's (by id).
+const PACK_GUIDE = '__pack__'
+
+const NO_INPUT = {}
+
 const GameGuideContext = createContext<GameGuideContextValue | null>(null)
 
 interface Props {
   children: ReactNode
 }
 
-// One @tastic/hud GuideProvider for the whole pack, showing whichever game's cards were asked for
-// last. 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.
+// One @tastic/hud GuideProvider for the whole pack, showing whichever cards were asked for last:
+// 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.
 export function GuideHost({ children }: Props) {
   const pack = usePack()
-  const [gameId, setGameId] = useState(pack.games[0].id)
-  const game = pack.games.find((g) => g.id === gameId) ?? pack.games[0]
+  const [subject, setSubject] = useState(() => (pack.guide ? PACK_GUIDE : (pack.games.find((g) => g.guide)?.id ?? null)))
+  const packGuide = subject === PACK_GUIDE ? pack.guide : undefined
+  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) => game.guide.selectInput(state), shallowEqual)
-  const seenVersion = useSelector((state: ShellState) => game.guide.selectVersionSeen(state))
+  const input = useSelector((state: ShellState) => (gameGuide ? gameGuide.selectInput(state) : NO_INPUT), shallowEqual)
+  const seenVersion = useSelector((state: ShellState) => (packGuide ?? gameGuide)?.selectVersionSeen(state) ?? 0)
   const dispatch = useDispatch()
 
   // The seat-2 choice the cards describe: the one the player last picked, the CPU in a game that has
   // no room for it (a saved 'nobody' in a game without a solo mode), or nobody in a game for one.
-  const mode = roundModeFor(seatTwoFor(seatTwo, game.seatTwo))
-  const steps = useMemo(() => game.guide.getSteps(input, { touch, mode }), [game, input, touch, mode])
-  const onSeen = useCallback((version: number) => dispatch(game.guide.markSeen(version)), [dispatch, game])
+  const mode = roundModeFor(seatTwoFor(seatTwo, game?.seatTwo))
+  const steps = useMemo(() => (packGuide ? packGuide.getSteps({ touch }) : gameGuide ? gameGuide.getSteps(input, { touch, mode }) : []), [packGuide, gameGuide, input, touch, mode])
+  const onSeen = useCallback(
+    (version: number) => {
+      const guide = packGuide ?? gameGuide
+      if (guide) dispatch(guide.markSeen(version))
+    },
+    [dispatch, packGuide, gameGuide]
+  )
 
   return (
-    <GuideProvider steps={steps} currentVersion={game.guide.version} seenVersion={seenVersion} onSeen={onSeen} rotation={rotation}>
-      <GameGuideBridge onPick={setGameId}>{children}</GameGuideBridge>
+    <GuideProvider steps={steps} currentVersion={(packGuide ?? gameGuide)?.version ?? 0} seenVersion={seenVersion} onSeen={onSeen} rotation={rotation}>
+      <GameGuideBridge onPick={setSubject}>{children}</GameGuideBridge>
     </GuideProvider>
   )
 }
 
 // Inside GuideProvider, so it can open the dialog and watch it close.
-function GameGuideBridge({ onPick, children }: { onPick: (gameId: string) => void; children: ReactNode }) {
+function GameGuideBridge({ onPick, children }: { onPick: (subject: string) => void; children: ReactNode }) {
   const pack = usePack()
   const store = useStore<ShellState>()
   const { isOpen, open } = useGuide()
   const pendingNext = useRef<(() => void) | null>(null)
   const wasOpen = useRef(false)
+  // The pack's cards show by themselves once per session at most: Home mounts again whenever the
+  // player comes back to it, and skipping shouldn't have to happen twice before the seen version is
+  // written back.
+  const packAutoShown = useRef(false)
 
   // When cards opened by openFirstTime close (finished, skipped or dismissed), carry on to where the
   // tap was going.
@@ -74,16 +99,17 @@ function GameGuideBridge({ onPick, children }: { onPick: (gameId: string) => voi
 
   const openFor = useCallback(
     (gameId: string) => {
+      if (!pack.games.find((g) => g.id === gameId)?.guide) return
       onPick(gameId)
       open()
     },
-    [onPick, open]
+    [pack, onPick, open]
   )
 
   const openFirstTime = useCallback(
     (gameId: string, next: () => void) => {
-      const game = pack.games.find((g) => g.id === gameId)
-      if (!game || game.guide.selectVersionSeen(store.getState()) >= game.guide.version) {
+      const guide = pack.games.find((g) => g.id === gameId)?.guide
+      if (!guide || guide.selectVersionSeen(store.getState()) >= guide.version) {
         next()
         return
       }
@@ -93,7 +119,20 @@ function GameGuideBridge({ onPick, children }: { onPick: (gameId: string) => voi
     [pack, store, openFor]
   )
 
-  const value = useMemo(() => ({ openFirstTime, openFor }), [openFirstTime, openFor])
+  const openPack = useCallback(() => {
+    if (!pack.guide) return
+    onPick(PACK_GUIDE)
+    open()
+  }, [pack, onPick, open])
+
+  const autoShowPack = useCallback(() => {
+    const guide = pack.guide
+    if (!guide || packAutoShown.current || guide.selectVersionSeen(store.getState()) >= guide.version) return
+    packAutoShown.current = true
+    openPack()
+  }, [pack, store, openPack])
+
+  const value = useMemo(() => ({ openFirstTime, openFor, openPack, autoShowPack }), [openFirstTime, openFor, openPack, autoShowPack])
   return <GameGuideContext.Provider value={value}>{children}</GameGuideContext.Provider>
 }
 

package/src/components/Providers.tsx

@@ -9,16 +9,29 @@ import { Provider as ReduxProvider, useDispatch, useSelector } from 'react-redux
 import type { Persistor } from 'redux-persist'
 import { PersistGate } from 'redux-persist/integration/react'
 
+import { usePack } from '../PackContext'
 import type { PackStore } from '../redux/createPackStore'
 import type { ShellState } from '../redux/shellState'
+import type { FeedbackSounds } from '../types'
 
 interface Props {
   children: ReactNode
 }
 
+// Generic UI feedback sounds, wired into every Button/IconButton/etc. in the package (see
+// useFeedbackHandlers' `fire`, which already gates these on the sound-enabled setting itself -
+// no need to re-check it here).
+function useShellFeedbackSounds(): FeedbackSounds {
+  const selection = useAudioPool(require('../../assets/sounds/select.wav'))
+  const notification = useAudioPool(require('../../assets/sounds/notification.wav'))
+  return { selection, notification }
+}
+
 // Redux-backed haptic/sound settings, dispatching through @rific/feedback-press's own
 // hapticActions/soundActions - same shape as Expo-Starter/Snake's FeedbackBridge, converged onto
-// fleet-wide rather than this app's old direct-AsyncStorage version.
+// fleet-wide rather than this app's old direct-AsyncStorage version. The two sounds are the pack's own
+// where it has them (PackDefinition.useFeedbackSounds: Solitaire's card sound and invalid-move sound);
+// the pack never changes while it runs, so the same hook is called on every render.
 const FeedbackBridge = ({ children }: Props) => {
   const haptic = useSelector((state: ShellState) => state.haptic)
   const sound = useSelector((state: ShellState) => state.sound)
@@ -26,13 +39,10 @@ const FeedbackBridge = ({ children }: Props) => {
   const onChange = useCallback((next: HapticSettings) => dispatch(hapticActions.initialize(next)), [dispatch])
   const onSoundChange = useCallback((next: SoundSettings) => dispatch(soundActions.initialize(next)), [dispatch])
 
-  // Generic UI feedback sounds, wired into every Button/IconButton/etc. in the package (see
-  // useFeedbackHandlers' `fire`, which already gates these on the sound-enabled setting itself -
-  // no need to re-check it here).
-  const playSelection = useAudioPool(require('../../assets/sounds/select.wav'))
-  const playNotification = useAudioPool(require('../../assets/sounds/notification.wav'))
+  const { useFeedbackSounds = useShellFeedbackSounds } = usePack()
+  const sounds = useFeedbackSounds()
 
-  const bridgeProps = useFeedbackBridgeProps({ initialValue: haptic, onChange, soundInitialValue: sound, onSoundChange, sound: { selection: playSelection, notification: playNotification } })
+  const bridgeProps = useFeedbackBridgeProps({ initialValue: haptic, onChange, soundInitialValue: sound, onSoundChange, sound: sounds })
 
   return (
     <FeedbackPressProvider {...bridgeProps} paper={RNPaper}>

package/src/components/SeatTwoPanel.tsx

@@ -1,5 +1,6 @@
 import type { SeedColor } from '@rific/auto-paper'
-import { type MenuOption, type PopoverHost, ReadyButton, useZoneClampedAlign } from '@tastic/hud'
+import type { PopoverHost } from '@tastic/hud/chrome'
+import { type MenuOption, ReadyButton, useZoneClampedAlign } from '@tastic/hud/lobby'
 import { getOptionPickerContentSize, OptionPicker, type OptionPickerOption, type Profile, type ProfilePickerColorSection } from '@tastic/profile'
 import { ReactNode, useMemo } from 'react'
 import { StyleSheet, View } from 'react-native'

package/src/components/SettingsDialog.tsx

@@ -1,6 +1,6 @@
 import { useUpdateErrorToast } from '@rific/toaster'
 import { ViewRotation } from '@tastic/core'
-import { BaseSettingsDialog } from '@tastic/hud'
+import { BaseSettingsDialog } from '@tastic/hud/chrome'
 import type { ReactNode } from 'react'
 
 import { useAppSettings } from '../hooks/useAppSettings'
@@ -26,15 +26,17 @@ export interface SettingsDialogProps {
 // 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
 // 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.
+// (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) {
   const onUpdateError = useUpdateErrorToast()
   const { settings, setSettings } = useAppSettings()
   // The pack's otaVersion (src/constants/release.ts, which the OTA tooling bumps).
-  const { otaVersion, SettingsSections } = usePack()
+  const { otaVersion, SettingsSections, edgeGuard = true } = usePack()
+  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 })} deferBottomEdgeGestures={settings.deferBottomEdgeGestures} onDeferBottomEdgeGestures={(value) => setSettings({ deferBottomEdgeGestures: value })} onUpdateError={onUpdateError} onShowHowToPlay={onShowHowToPlay}>
+    <BaseSettingsDialog visible={visible} onDismiss={onDismiss} rotation={rotation} version={otaVersion} lockOrientation={settings.lockOrientation} onLockOrientationChange={(value) => setSettings({ lockOrientation: value })} {...edgeGuardProps} onUpdateError={onUpdateError} onShowHowToPlay={onShowHowToPlay}>
       {children}
       {SettingsSections && <SettingsSections />}
     </BaseSettingsDialog>

package/src/components/UpdateDialog.tsx

@@ -1,6 +1,6 @@
 import { useUpdateErrorToast } from '@rific/toaster'
 import { useRotation } from '@tastic/core'
-import { UpdateDialog as SharedUpdateDialog } from '@tastic/hud'
+import { UpdateDialog as SharedUpdateDialog } from '@tastic/hud/chrome'
 
 // Thin bridge onto the fleet-shared @tastic/hud UpdateDialog, which now owns the useUpdater()
 // instance, the manifest/confirm bridging, and the themed ConfirmDialog rendering this file used