@tastic/hud 0.18.0 → 0.19.0

package/README.md

@@ -207,9 +207,11 @@ the fleet with real Redux Toolkit state - reads `lockOrientation`/`deferBottomEd
 `useSelector` and writes them back via `dispatch(gameActions.setLockOrientation(...))` directly
 inside the adapter, with nothing threaded through props at all. `BaseSettingsDialog` doesn't care
 which of these an app uses: sound, haptics, appearance, and update-checking are identical across
-every app and live entirely inside this package now, so `lockOrientation`/`onLockOrientationChange`
-and `deferBottomEdgeGestures`/`onDeferBottomEdgeGestures` are the only two settings an adapter
-actually needs to source itself, however it does that.
+every app and live entirely inside this package now, so `lockOrientation`/`onLockOrientationChange`,
+`deferBottomEdgeGestures`/`onDeferBottomEdgeGestures` and `keepAwake`/`onKeepAwakeChange` are the only
+settings an adapter actually needs to source itself, however it does that. Each pair is optional: omit
+one and its row doesn't show. The Keep Awake row only toggles the value; the app keeps the screen awake
+itself while it's on (for example with `expo-keep-awake` on its match screen).
 
 Every adapter also passes `version={release.otaVersion}` (so the dialog's own update-check button
 knows what it's currently running) and `onUpdateError`, wired to a real `useToast()` call. Wire this
@@ -234,6 +236,8 @@ export function SettingsDialog({ visible, onDismiss, rotation = 0, settings, set
       onLockOrientationChange={(value) => setSettings({ lockOrientation: value })}
       deferBottomEdgeGestures={settings.deferBottomEdgeGestures}
       onDeferBottomEdgeGestures={(value) => setSettings({ deferBottomEdgeGestures: value })}
+      keepAwake={settings.keepAwake}
+      onKeepAwakeChange={(value) => setSettings({ keepAwake: value })}
       onUpdateError={(message) => error('Update check failed', message)}
     />
   )

package/dist/chrome/index.d.mts

@@ -47,6 +47,8 @@ interface BaseSettingsDialogProps {
     onLockOrientationChange?: (value: boolean) => void;
     deferBottomEdgeGestures?: boolean;
     onDeferBottomEdgeGestures?: (value: boolean) => void;
+    keepAwake?: boolean;
+    onKeepAwakeChange?: (value: boolean) => void;
     hideSound?: boolean;
     hideHaptics?: boolean;
     hideAppearance?: boolean;
@@ -55,7 +57,7 @@ interface BaseSettingsDialogProps {
     onShowHowToPlay?: () => void;
     children?: ReactNode;
 }
-declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps): react.JSX.Element | null;
+declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, keepAwake, onKeepAwakeChange, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps): react.JSX.Element | null;
 
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface Props$4 {

package/dist/chrome/index.d.ts

@@ -47,6 +47,8 @@ interface BaseSettingsDialogProps {
     onLockOrientationChange?: (value: boolean) => void;
     deferBottomEdgeGestures?: boolean;
     onDeferBottomEdgeGestures?: (value: boolean) => void;
+    keepAwake?: boolean;
+    onKeepAwakeChange?: (value: boolean) => void;
     hideSound?: boolean;
     hideHaptics?: boolean;
     hideAppearance?: boolean;
@@ -55,7 +57,7 @@ interface BaseSettingsDialogProps {
     onShowHowToPlay?: () => void;
     children?: ReactNode;
 }
-declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps): react.JSX.Element | null;
+declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, keepAwake, onKeepAwakeChange, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps): react.JSX.Element | null;
 
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface Props$4 {

package/dist/chrome/index.js

@@ -474,7 +474,7 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 function SettingIcon({ source, color, containerColor }) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [styles9.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Icon, { source, size: 18, color }) });
 }
-function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }) {
+function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, keepAwake, onKeepAwakeChange, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }) {
   const { colors } = (0, import_auto_paper8.useAutoPaperTheme)();
   const ambientRotation = (0, import_core4.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
@@ -504,6 +504,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   if (visible && !opened) setOpened(true);
   const showLockOrientation = isTouchPrimary && lockOrientation !== void 0 && onLockOrientationChange !== void 0;
   const showEdgeGuard = import_react_native12.Platform.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
+  const showKeepAwake = isTouchPrimary && keepAwake !== void 0 && onKeepAwakeChange !== void 0;
   const showHaptics = import_react_native12.Platform.OS !== "web" && !hideHaptics;
   const showSound = !hideSound;
   const showAppearance = !hideAppearance;
@@ -530,6 +531,13 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
                 /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Require second swipe" })
               ] })
             ] }) }),
+            showKeepAwake && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => onKeepAwakeChange(!keepAwake), style: styles9.toggleButton, accessibilityLabel: `Keep awake ${keepAwake ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleContent, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SettingIcon, { source: keepAwake ? "eye" : "eye-closed", color: keepAwake ? colors.tertiary : colors.onSurfaceVariant, containerColor: keepAwake ? colors.tertiaryContainer : colors.surfaceVariant }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.flexShrink, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Keep Awake" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper8.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Stop auto-lock mid-match" })
+              ] })
+            ] }) }),
             (showSound || showHaptics) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: styles9.toggleRow, children: [
               showSound && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 import_feedback_press2.TouchableRipple,

package/dist/chrome/index.mjs

@@ -16,7 +16,7 @@ import {
   UpdateDialog,
   getStaggeredWordDuration,
   useCompactDialog
-} from "../chunk-Z2WUUYTE.mjs";
+} from "../chunk-HGJKNLMD.mjs";
 import {
   COMPACT_DIALOG_HEIGHT,
   DialogHeader,

package/dist/{chunk-Z2WUUYTE.mjs → chunk-HGJKNLMD.mjs}

@@ -293,7 +293,7 @@ import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function SettingIcon({ source, color, containerColor }) {
   return /* @__PURE__ */ jsx8(View6, { style: [styles7.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ jsx8(Icon2, { source, size: 18, color }) });
 }
-function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }) {
+function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, keepAwake, onKeepAwakeChange, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }) {
   const { colors } = useAutoPaperTheme6();
   const ambientRotation = useRotation2();
   const rotation = rotationOverride ?? ambientRotation;
@@ -323,6 +323,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   if (visible && !opened) setOpened(true);
   const showLockOrientation = isTouchPrimary && lockOrientation !== void 0 && onLockOrientationChange !== void 0;
   const showEdgeGuard = Platform2.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
+  const showKeepAwake = isTouchPrimary && keepAwake !== void 0 && onKeepAwakeChange !== void 0;
   const showHaptics = Platform2.OS !== "web" && !hideHaptics;
   const showSound = !hideSound;
   const showAppearance = !hideAppearance;
@@ -349,6 +350,13 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
                 /* @__PURE__ */ jsx8(Text6, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Require second swipe" })
               ] })
             ] }) }),
+            showKeepAwake && /* @__PURE__ */ jsx8(TouchableRipple, { onPress: () => onKeepAwakeChange(!keepAwake), style: styles7.toggleButton, accessibilityLabel: `Keep awake ${keepAwake ? "on" : "off"}`, children: /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleContent, children: [
+              /* @__PURE__ */ jsx8(SettingIcon, { source: keepAwake ? "eye" : "eye-closed", color: keepAwake ? colors.tertiary : colors.onSurfaceVariant, containerColor: keepAwake ? colors.tertiaryContainer : colors.surfaceVariant }),
+              /* @__PURE__ */ jsxs7(View6, { style: styles7.flexShrink, children: [
+                /* @__PURE__ */ jsx8(Text6, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Keep Awake" }),
+                /* @__PURE__ */ jsx8(Text6, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Stop auto-lock mid-match" })
+              ] })
+            ] }) }),
             (showSound || showHaptics) && /* @__PURE__ */ jsxs7(View6, { style: styles7.toggleRow, children: [
               showSound && /* @__PURE__ */ jsx8(
                 TouchableRipple,

package/dist/index.js

@@ -678,7 +678,7 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 function SettingIcon({ source, color, containerColor }) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native13.View, { style: [styles10.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper9.Icon, { source, size: 18, color }) });
 }
-function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }) {
+function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, keepAwake, onKeepAwakeChange, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }) {
   const { colors } = (0, import_auto_paper9.useAutoPaperTheme)();
   const ambientRotation = (0, import_core4.useRotation)();
   const rotation = rotationOverride ?? ambientRotation;
@@ -708,6 +708,7 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
   if (visible && !opened) setOpened(true);
   const showLockOrientation = isTouchPrimary && lockOrientation !== void 0 && onLockOrientationChange !== void 0;
   const showEdgeGuard = import_react_native13.Platform.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
+  const showKeepAwake = isTouchPrimary && keepAwake !== void 0 && onKeepAwakeChange !== void 0;
   const showHaptics = import_react_native13.Platform.OS !== "web" && !hideHaptics;
   const showSound = !hideSound;
   const showAppearance = !hideAppearance;
@@ -734,6 +735,13 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper9.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Require second swipe" })
               ] })
             ] }) }),
+            showKeepAwake && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press2.TouchableRipple, { onPress: () => onKeepAwakeChange(!keepAwake), style: styles10.toggleButton, accessibilityLabel: `Keep awake ${keepAwake ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: styles10.toggleContent, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SettingIcon, { source: keepAwake ? "eye" : "eye-closed", color: keepAwake ? colors.tertiary : colors.onSurfaceVariant, containerColor: keepAwake ? colors.tertiaryContainer : colors.surfaceVariant }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: styles10.flexShrink, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper9.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Keep Awake" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper9.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Stop auto-lock mid-match" })
+              ] })
+            ] }) }),
             (showSound || showHaptics) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: styles10.toggleRow, children: [
               showSound && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 import_feedback_press2.TouchableRipple,

package/dist/index.mjs

@@ -19,7 +19,7 @@ import {
   UpdateDialog,
   getStaggeredWordDuration,
   useCompactDialog
-} from "./chunk-Z2WUUYTE.mjs";
+} from "./chunk-HGJKNLMD.mjs";
 import {
   COMPACT_DIALOG_HEIGHT,
   DialogHeader,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Visual component kit for local-multiplayer React Native games: inline (non-modal) popovers, dropdowns, color pickers, gauges, ready buttons, and dialogs, built to stay scoped to one player's own zone on a shared screen",
   "keywords": [
     "react-native",
@@ -87,15 +87,15 @@
     "@infinitetoken/eslint-config": "^0.2.0",
     "@infinitetoken/jest-config": "^0.4.0",
     "@infinitetoken/tsconfig": "^0.5.0",
-    "@rific/auto-paper": "^0.13.0",
-    "@rific/core": "^0.3.0",
+    "@rific/auto-paper": "^0.13.2",
+    "@rific/core": "^0.3.1",
     "@rific/feedback-press": "^0.13.0",
-    "@rific/updater": "^0.6.0",
+    "@rific/updater": "^0.7.1",
     "@shopify/react-native-skia": "^2.6.2",
-    "@tastic/achievements": "^0.5.0",
-    "@tastic/core": "^0.13.0",
+    "@tastic/achievements": "^0.6.0",
+    "@tastic/core": "^0.14.0",
     "@tastic/profile": "^0.12.0",
-    "@tastic/split-screen": "^0.5.0",
+    "@tastic/split-screen": "^0.5.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",

package/src/BaseSettingsDialog.tsx

@@ -56,6 +56,13 @@ export interface BaseSettingsDialogProps {
   // @tastic/edge-guard's own swizzle is a no-op on every other platform.
   deferBottomEdgeGestures?: boolean
   onDeferBottomEdgeGestures?: (value: boolean) => void
+  // Optional, and always passed as a pair - omit both for an app that doesn't keep the screen awake.
+  // This dialog only shows and reports the toggle; the app itself keeps the screen on while it's set
+  // (expo-keep-awake on its match screen), so this package needs no native dependency for it. Shown
+  // on the same devices as Lock Orientation (see isTouchPrimary below): a desktop/laptop browser
+  // stays awake on its own while someone is playing with its keyboard or mouse.
+  keepAwake?: boolean
+  onKeepAwakeChange?: (value: boolean) => void
   // Explicit opt-outs for the rows that pull their own state straight from @rific/feedback-press,
   // @rific/auto-paper, and @rific/updater's own shared contexts/hooks rather than from anything the
   // caller passes in - unlike Lock Orientation/Edge Guard above, there's no "value" to omit for
@@ -83,14 +90,14 @@ export interface BaseSettingsDialogProps {
   children?: ReactNode
 }
 
-// The settings shell every @tastic game shares - orientation lock, the optional edge-guard toggle,
-// sound/haptics, appearance, and update checking - extracted after the same six rows were
+// The settings shell every @tastic game shares - orientation lock, the optional edge-guard and
+// keep-awake toggles, sound/haptics, appearance, and update checking - extracted after the same six rows were
 // independently copied into LightCycles, AirHockey, BoxHockey, Pong, and Snake and then needed
 // hand-editing in every one of them, twice, for what were meant to be identical fixes. `children`
 // is the seam for whatever isn't shared: a game with its own board/difficulty settings (or a stats
 // backup flow, or anything else genuinely specific to it) renders those below Appearance, not by
 // forking this component.
-export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps) {
+export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, keepAwake, onKeepAwakeChange, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps) {
   const { colors } = useAutoPaperTheme()
   const ambientRotation = useRotation()
   const rotation = rotationOverride ?? ambientRotation
@@ -106,7 +113,7 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
   // Dialog's own 32pt padding is simply overhung.
   const insets = rotateInsets(useSafeAreaInsets(), rotation)
   const sheetWidth = Math.min(overlayStyles.card.maxWidth, (turned ? window.height : window.width) - 2 * Math.max(insets.left, insets.right, SHEET_GUTTER))
-  // Also gates the Lock Orientation row below (alongside showLockOrientation itself) - true
+  // Also gates the Lock Orientation and Keep Awake rows below (alongside their own props) - true
   // unconditionally on native (see the hook's own doc), so this only actually excludes a
   // desktop/laptop browser, where a mouse-driven window has no physical orientation to lock
   // against; a resize there would just make the setting silently stop reflowing the layout instead
@@ -153,6 +160,7 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
 
   const showLockOrientation = isTouchPrimary && lockOrientation !== undefined && onLockOrientationChange !== undefined
   const showEdgeGuard = Platform.OS === 'ios' && deferBottomEdgeGestures !== undefined && onDeferBottomEdgeGestures !== undefined
+  const showKeepAwake = isTouchPrimary && keepAwake !== undefined && onKeepAwakeChange !== undefined
   const showHaptics = Platform.OS !== 'web' && !hideHaptics
   const showSound = !hideSound
   const showAppearance = !hideAppearance
@@ -235,6 +243,23 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
                     </TouchableRipple>
                   )}
 
+                  {/* See the keepAwake prop's own doc: the app does the keeping awake, this only toggles it. */}
+                  {showKeepAwake && (
+                    <TouchableRipple onPress={() => onKeepAwakeChange!(!keepAwake)} style={styles.toggleButton} accessibilityLabel={`Keep awake ${keepAwake ? 'on' : 'off'}`}>
+                      <View style={styles.toggleContent}>
+                        <SettingIcon source={keepAwake ? 'eye' : 'eye-closed'} color={keepAwake ? colors.tertiary : colors.onSurfaceVariant} containerColor={keepAwake ? colors.tertiaryContainer : colors.surfaceVariant} />
+                        <View style={styles.flexShrink}>
+                          <Text variant='bodyLarge' style={{ color: colors.onSurface }}>
+                            Keep Awake
+                          </Text>
+                          <Text variant='bodySmall' numberOfLines={1} style={{ color: colors.onSurfaceVariant }}>
+                            Stop auto-lock mid-match
+                          </Text>
+                        </View>
+                      </View>
+                    </TouchableRipple>
+                  )}
+
                   {/* Side by side, not stacked - neither needs a full row's width (single-line label,
                   no description under it the way Lock Orientation has), so sharing one row reads
                   just as clearly and takes half the vertical space. toggleRow carries the same