optimize further

src/app/(tabs)/eq.tsx

@@ -38,6 +38,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { isWideWindow } from '@/theme/adaptive';
 import { useEQStore } from '@/stores/eqStore';
 import { useScopeActive } from '@/scope/scopeStore';
@@ -75,6 +76,7 @@ const BAND_TYPES: EQBandType[] = ['lowshelf', 'peaking', 'highshelf', 'highpass'
 
 export default function EQScreen() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const router = useRouter();
   const eq = useEQStore();
@@ -217,7 +219,7 @@ export default function EQScreen() {
   };
 
   const presetRowEl = (
-    <Pressable
+    <Pressable android_ripple={ripple.bounded}
       style={[styles.presetRow, isWide && styles.sideItem]}
       onPress={() => setSheet('preset')}
     >
@@ -285,7 +287,7 @@ export default function EQScreen() {
           onChange={eq.setPreamp}
         />
       </View>
-      <Pressable
+      <Pressable android_ripple={ripple.bounded}
         style={[styles.eqToggle, eq.enabled && styles.eqToggleOn]}
         onPress={eq.toggleEnabled}
       >
@@ -321,10 +323,10 @@ export default function EQScreen() {
           </Text>
         </View>
         <View style={styles.headerActions}>
-          <Pressable style={styles.iconButton} onPress={() => setSheet('save')} hitSlop={8}>
+          <Pressable android_ripple={ripple.bounded} style={styles.iconButton} onPress={() => setSheet('save')} hitSlop={8}>
             <Ionicons name="save-outline" size={20} color={colors.textSecondary} />
           </Pressable>
-          <Pressable style={styles.iconButton} onPress={() => setSheet('overflow')} hitSlop={8}>
+          <Pressable android_ripple={ripple.bounded} style={styles.iconButton} onPress={() => setSheet('overflow')} hitSlop={8}>
             <Ionicons name="ellipsis-vertical" size={20} color={colors.textSecondary} />
           </Pressable>
         </View>

src/app/(tabs)/index.tsx

@@ -28,10 +28,12 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { rgbaFromHex } from '@/theme/colorUtils';
 import { useLibraryStore } from '@/stores/libraryStore';
 import { usePlaylistStore } from '@/stores/playlistStore';
 import { usePlayerStore } from '@/stores/playerStore';
+import { usePlayerUiStore } from '@/stores/playerUiStore';
 import { useSearchStore } from '@/stores/searchStore';
 import {
   playTracks,
@@ -93,6 +95,7 @@ function SectionHeader({
 }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   return (
     <View style={styles.sectionHeader}>
       <View style={styles.sectionTitleGroup}>
@@ -106,7 +109,7 @@ function SectionHeader({
         ) : null}
       </View>
       {onActionPress && actionLabel ? (
-        <Pressable style={styles.seeAllButton} onPress={onActionPress} accessibilityRole="button">
+        <Pressable style={styles.seeAllButton} android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onActionPress} accessibilityRole="button">
           <Text variant="label" color={colors.accentText}>
             {actionLabel}
           </Text>
@@ -160,6 +163,7 @@ function NowPlayingCard({
 }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   const isPlaying = playbackState === 'playing';
   const isLoading = playbackState === 'loading';
   const scopeActive = useScopeActive();
@@ -194,7 +198,7 @@ function NowPlayingCard({
       {scopeActive && cardSize.width > 0 ? (
         <View pointerEvents="none" style={styles.playerSpectrumVeil} />
       ) : null}
-      <Pressable style={styles.playerArt} onPress={onOpen} accessibilityRole="button">
+      <Pressable style={styles.playerArt} android_ripple={ripple.tile} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onOpen} accessibilityRole="button">
         {track.artworkData ? (
           <Image source={{ uri: track.artworkData }} style={styles.image} contentFit="cover" />
         ) : (
@@ -213,20 +217,20 @@ function NowPlayingCard({
         </Text>
         <NowPlayingSeekStrip />
         <View style={styles.placeholderControls}>
-          <Pressable hitSlop={10} onPress={() => void skipToPrevious()}>
+          <Pressable hitSlop={10} android_ripple={ripple.icon(20)} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={() => void skipToPrevious()}>
             <Ionicons name="play-skip-back" size={22} color={colors.textSecondary} />
           </Pressable>
-          <Pressable hitSlop={10} onPress={() => void togglePlay()} style={styles.playCircle}>
+          <Pressable hitSlop={10} onPress={() => void togglePlay()} style={styles.playCircle} android_ripple={ripple.onAccent()} unstable_pressDelay={SCROLL_PRESS_DELAY}>
             <Ionicons
               name={isLoading ? 'ellipsis-horizontal' : isPlaying ? 'pause' : 'play'}
               size={18}
               color={colors.bgPrimary}
             />
           </Pressable>
-          <Pressable hitSlop={10} onPress={() => void skipToNext()}>
+          <Pressable hitSlop={10} android_ripple={ripple.icon(20)} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={() => void skipToNext()}>
             <Ionicons name="play-skip-forward" size={22} color={colors.textSecondary} />
           </Pressable>
-          <Pressable hitSlop={10} onPress={onOpen}>
+          <Pressable hitSlop={10} android_ripple={ripple.icon(20)} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onOpen}>
             <Ionicons name="expand-outline" size={21} color={colors.textTertiary} />
           </Pressable>
         </View>
@@ -243,8 +247,9 @@ function RecentlyAddedAlbum({
   onPress: () => void;
 }) {
   const styles = useStyles();
+  const ripple = useRipple();
   return (
-    <Pressable style={styles.recentAlbum} onPress={onPress} accessibilityRole="button">
+    <Pressable style={styles.recentAlbum} android_ripple={ripple.tile} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onPress} accessibilityRole="button">
       <AlbumCover album={album} size={112} />
       <Text variant="body" numberOfLines={1} style={styles.recentAlbumTitle}>
         {album.album}
@@ -273,11 +278,12 @@ function RandomAlbumCard({
 }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   const disabled = tracks.length === 0;
 
   return (
     <View style={styles.randomCard}>
-      <Pressable style={styles.randomMain} onPress={onOpen} accessibilityRole="button">
+      <Pressable style={styles.randomMain} android_ripple={ripple.tile} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onOpen} accessibilityRole="button">
         <AlbumCover album={album} size={96} />
         <View style={styles.randomMeta}>
           <Text variant="label" color={colors.textTertiary}>
@@ -294,7 +300,7 @@ function RandomAlbumCard({
           </Text>
         </View>
         <Pressable
-          style={styles.reroll}
+          style={styles.reroll} android_ripple={ripple.icon(20)} unstable_pressDelay={SCROLL_PRESS_DELAY}
           onPress={onReroll}
           hitSlop={8}
           accessibilityRole="button"
@@ -306,6 +312,7 @@ function RandomAlbumCard({
 
       <View style={styles.randomActions}>
         <Pressable
+          android_ripple={ripple.onAccent()} unstable_pressDelay={SCROLL_PRESS_DELAY}
           style={[styles.primaryButton, disabled && styles.buttonDisabled]}
           disabled={disabled}
           onPress={onPlay}
@@ -317,6 +324,7 @@ function RandomAlbumCard({
           </Text>
         </Pressable>
         <Pressable
+          android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
           style={[styles.secondaryButton, disabled && styles.buttonDisabled]}
           disabled={disabled}
           onPress={onShuffle}
@@ -341,6 +349,7 @@ function EmptyHomeCard({
 }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   return (
     <View style={styles.emptyCard}>
       <Ionicons name="folder-open-outline" size={34} color={colors.textTertiary} />
@@ -356,6 +365,7 @@ function EmptyHomeCard({
         ) : null}
       </View>
       <Pressable
+        android_ripple={ripple.onAccent()} unstable_pressDelay={SCROLL_PRESS_DELAY}
         style={styles.primaryButton}
         onPress={onManageFolders}
         accessibilityRole="button"
@@ -486,7 +496,7 @@ export default function HomeScreen() {
                 <NowPlayingCard
                   track={currentTrack}
                   playbackState={playbackState}
-                  onOpen={() => router.push('/now-playing')}
+                  onOpen={() => usePlayerUiStore.getState().openPlayer()}
                 />
               </View>
             ) : null}
@@ -502,7 +512,7 @@ export default function HomeScreen() {
                 <NowPlayingCard
                   track={currentTrack}
                   playbackState={playbackState}
-                  onOpen={() => router.push('/now-playing')}
+                  onOpen={() => usePlayerUiStore.getState().openPlayer()}
                 />
               ) : randomAlbum ? (
                 <RandomAlbumCard

src/app/(tabs)/library/artist/[name].tsx

@@ -26,6 +26,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import type { Palette } from '@/theme/palettes';
 import { useLibraryStore } from '@/stores/libraryStore';
 import { usePlayerStore } from '@/stores/playerStore';
@@ -291,6 +292,7 @@ function SectionHeader({
   onPress?: () => void;
 }) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   return (
     <View style={styles.sectionHeader}>
@@ -303,7 +305,7 @@ function SectionHeader({
         </Text>
       </View>
       {onPress ? (
-        <Pressable style={styles.seeAllButton} onPress={onPress} accessibilityRole="button">
+        <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.seeAllButton} onPress={onPress} accessibilityRole="button">
           <Text variant="label" color={colors.accentText}>
             See all
           </Text>
@@ -322,6 +324,7 @@ function AlbumRail({
   onAlbumPress: (album: ArtistAlbum) => void;
 }) {
   const styles = useStyles();
+  const ripple = useRipple();
   return (
     <ScrollView
       horizontal
@@ -329,7 +332,7 @@ function AlbumRail({
       contentContainerStyle={styles.albumRail}
     >
       {albums.map((album) => (
-        <Pressable
+        <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
           key={album.identity_key}
           style={styles.albumCard}
           onPress={() => onAlbumPress(album)}

src/app/(tabs)/library/artist/[name]/albums.tsx

@@ -12,12 +12,14 @@ import { Text } from '@/components/Text';
 import { AlbumGridItem } from '@/components/library/AlbumGridItem';
 import { spacing } from '@/theme';
 import { useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { useLibraryStore } from '@/stores/libraryStore';
 import { useSettingsStore } from '@/stores/settingsStore';
 import { buildArtistDetail } from '@/library/artistDetail';
 
 export default function ArtistAlbumsScreen() {
   const colors = useColors();
+  const ripple = useRipple();
   const router = useRouter();
   const { name = 'Artist' } = useLocalSearchParams<{ name: string }>();
   const allTracks = useLibraryStore((s) => s.tracks);
@@ -30,7 +32,7 @@ export default function ArtistAlbumsScreen() {
 
   return (
     <Screen>
-      <Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
+      <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.back} onPress={() => router.back()} hitSlop={8}>
         <Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
         <Text variant="body" color={colors.textSecondary} numberOfLines={1}>
           {name}

src/app/(tabs)/library/artist/[name]/appearances.tsx

@@ -13,6 +13,7 @@ import { TrackRow } from '@/components/library/TrackRow';
 import { TrackActionsSheet } from '@/components/library/TrackActionsSheet';
 import { spacing } from '@/theme';
 import { useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { useLibraryStore } from '@/stores/libraryStore';
 import { usePlayerStore } from '@/stores/playerStore';
 import { useSettingsStore } from '@/stores/settingsStore';
@@ -23,6 +24,7 @@ import type { DbTrack } from '@/types/library';
 
 export default function ArtistAppearancesScreen() {
   const colors = useColors();
+  const ripple = useRipple();
   const router = useRouter();
   const { name = 'Artist' } = useLocalSearchParams<{ name: string }>();
   const allTracks = useLibraryStore((s) => s.tracks);
@@ -43,7 +45,7 @@ export default function ArtistAppearancesScreen() {
 
   return (
     <Screen>
-      <Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
+      <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.back} onPress={() => router.back()} hitSlop={8}>
         <Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
         <Text variant="body" color={colors.textSecondary} numberOfLines={1}>
           {name}

src/app/(tabs)/library/artist/[name]/songs.tsx

@@ -13,6 +13,7 @@ import { TrackRow } from '@/components/library/TrackRow';
 import { TrackActionsSheet } from '@/components/library/TrackActionsSheet';
 import { spacing } from '@/theme';
 import { useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { useLibraryStore } from '@/stores/libraryStore';
 import { usePlayerStore } from '@/stores/playerStore';
 import { useSettingsStore } from '@/stores/settingsStore';
@@ -23,6 +24,7 @@ import type { DbTrack } from '@/types/library';
 
 export default function ArtistSongsScreen() {
   const colors = useColors();
+  const ripple = useRipple();
   const router = useRouter();
   const { name = 'Artist' } = useLocalSearchParams<{ name: string }>();
   const allTracks = useLibraryStore((s) => s.tracks);
@@ -43,7 +45,7 @@ export default function ArtistSongsScreen() {
 
   return (
     <Screen>
-      <Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
+      <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.back} onPress={() => router.back()} hitSlop={8}>
         <Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
         <Text variant="body" color={colors.textSecondary} numberOfLines={1}>
           {name}

src/app/(tabs)/library/index.tsx

@@ -39,6 +39,7 @@ import {
 } from '@/components/search/PullSearchGesture';
 import { spacing } from '@/theme';
 import { useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { useLibraryStore } from '@/stores/libraryStore';
 import { usePlayerStore } from '@/stores/playerStore';
 import { useSearchStore } from '@/stores/searchStore';
@@ -77,6 +78,7 @@ const ARTIST_SORT_OPTIONS: ArtistSort[] = ['name', 'track_count'];
 
 export default function LibraryScreen() {
   const colors = useColors();
+  const ripple = useRipple();
   const router = useRouter();
   const viewMode = useLibraryStore((s) => s.viewMode);
   const setViewMode = useLibraryStore((s) => s.setViewMode);
@@ -244,7 +246,7 @@ export default function LibraryScreen() {
             Library
           </Text>
           {!isEmpty ? (
-            <Pressable
+            <Pressable android_ripple={ripple.bounded}
               hitSlop={8}
               onPress={() => openQuickSearch()}
               accessibilityRole="button"
@@ -281,14 +283,14 @@ export default function LibraryScreen() {
                 <Text variant="label">
                   {selectedIds.size} selected
                 </Text>
-                <Pressable onPress={exitSelection} hitSlop={8} accessibilityRole="button">
+                <Pressable android_ripple={ripple.bounded} onPress={exitSelection} hitSlop={8} accessibilityRole="button">
                   <Text variant="label" color={colors.accentText}>
                     Cancel
                   </Text>
                 </Pressable>
               </View>
             ) : sortable ? (
-              <Pressable
+              <Pressable android_ripple={ripple.bounded}
                 style={styles.sortTrigger}
                 onPress={() => setSortSheetOpen(true)}
                 accessibilityRole="button"

src/app/(tabs)/library/playlist/[id].tsx

@@ -27,6 +27,7 @@ import { TextPromptModal } from '@/components/sheets/TextPromptModal';
 import { CollapsingHeader, useDetailCollapse } from '@/components/library/CollapsingDetail';
 import { spacing } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { usePlaylistStore } from '@/stores/playlistStore';
 import { usePlayerStore } from '@/stores/playerStore';
 import { playTracks, shuffleTracks } from '@/audio/playbackController';
@@ -54,9 +55,10 @@ function basename(path: string): string {
 
 function MissingRow({ entry, onLongPress }: { entry: PlaylistTrackEntry; onLongPress: () => void }) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   return (
-    <Pressable style={styles.missingRow} onLongPress={onLongPress} accessibilityRole="button">
+    <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.missingRow} onLongPress={onLongPress} accessibilityRole="button">
       <View style={styles.missingMeta}>
         <Text variant="body" numberOfLines={1} color={colors.textTertiary}>
           {entry.fallback_title ?? basename(entry.track_path)}
@@ -74,6 +76,7 @@ type Prompt = { kind: 'rename'; playlist: Playlist } | null;
 
 export default function PlaylistScreen() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const router = useRouter();
   const { id } = useLocalSearchParams<{ id: string }>();
@@ -283,7 +286,7 @@ export default function PlaylistScreen() {
         heroMeta={<Text variant="label">{meta}</Text>}
         heroExtra={
           isDynamic && playlistId != null ? (
-            <Pressable
+            <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
               style={styles.editRules}
               onPress={() =>
                 router.push({

src/app/(tabs)/library/playlist/edit-dynamic.tsx

@@ -27,6 +27,7 @@ import {
 } from '@/components/sheets/AppSheet';
 import { fonts, fontSize, radius, spacing } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { usePlaylistStore } from '@/stores/playlistStore';
 import {
   DYNAMIC_PLAYLIST_PRESETS,
@@ -327,15 +328,16 @@ function DraftActions({
   onApply: () => void;
 }) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   return (
     <View style={styles.sheetActions}>
-      <Pressable style={[styles.sheetButton, styles.cancelButton]} onPress={onCancel} accessibilityRole="button">
+      <Pressable android_ripple={ripple.bounded} style={[styles.sheetButton, styles.cancelButton]} onPress={onCancel} accessibilityRole="button">
         <Text variant="label" color={colors.textSecondary}>
           Cancel
         </Text>
       </Pressable>
-      <Pressable
+      <Pressable android_ripple={ripple.bounded}
         style={[styles.sheetButton, styles.applyButton, disabled && styles.applyDisabled]}
         disabled={disabled}
         onPress={onApply}
@@ -529,6 +531,7 @@ function ConditionEditorSheet({
   onApply: () => void;
 }) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const draft = target.draft;
   const error = validateCondition(draft);
@@ -536,7 +539,7 @@ function ConditionEditorSheet({
   return (
     <AppSheet onClose={onCancel}>
       <AppSheetTitle title={target.mode === 'new' ? 'Add filter' : 'Edit filter'} />
-      <Pressable style={styles.sheetSelectRow} onPress={onChangeField} accessibilityRole="button">
+      <Pressable android_ripple={ripple.bounded} style={styles.sheetSelectRow} onPress={onChangeField} accessibilityRole="button">
         <View style={styles.sheetSelectText}>
           <Text variant="caption" color={colors.textTertiary}>
             FIELD
@@ -568,7 +571,7 @@ function ConditionEditorSheet({
 
       <View style={styles.conditionSheetFooter}>
         {target.mode === 'edit' ? (
-          <Pressable style={styles.removeButton} onPress={onRemove} accessibilityRole="button">
+          <Pressable android_ripple={ripple.bounded} style={styles.removeButton} onPress={onRemove} accessibilityRole="button">
             <Ionicons name="trash-outline" size={17} color={colors.warning} />
             <Text variant="label" color={colors.warning}>
               Remove
@@ -713,11 +716,12 @@ function FilterCard({
   onRemove: () => void;
 }) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const option = fieldOptionForKey(getConditionFieldKey(condition));
 
   return (
-    <Pressable style={styles.ruleCard} onPress={onPress} accessibilityRole="button">
+    <Pressable android_ripple={ripple.bounded} style={styles.ruleCard} onPress={onPress} accessibilityRole="button">
       <View style={styles.cardIcon}>
         <Ionicons name={option?.icon ?? 'options-outline'} size={18} color={colors.accent} />
       </View>
@@ -729,7 +733,7 @@ function FilterCard({
           {fieldGroupLabel(condition)}
         </Text>
       </View>
-      <Pressable
+      <Pressable android_ripple={ripple.bounded}
         style={styles.cardRemove}
         onPress={onRemove}
         hitSlop={8}
@@ -744,6 +748,7 @@ function FilterCard({
 
 export default function DynamicPlaylistEditorScreen() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const router = useRouter();
   const { id } = useLocalSearchParams<{ id?: string }>();
@@ -1036,7 +1041,7 @@ export default function DynamicPlaylistEditorScreen() {
     >
       <Screen padded={false}>
         <View style={styles.header}>
-          <Pressable
+          <Pressable android_ripple={ripple.bounded}
             onPress={() => router.back()}
             hitSlop={8}
             style={styles.headerButton}
@@ -1080,7 +1085,7 @@ export default function DynamicPlaylistEditorScreen() {
               contentContainerStyle={styles.presetRow}
             >
               {DYNAMIC_PLAYLIST_PRESETS.map((preset) => (
-                <Pressable
+                <Pressable android_ripple={ripple.bounded}
                   key={preset.id}
                   style={styles.presetChip}
                   onPress={() => applyPreset(preset.rules)}
@@ -1100,7 +1105,7 @@ export default function DynamicPlaylistEditorScreen() {
               <Text variant="caption" style={styles.sectionLabel}>
                 FILTERS
               </Text>
-              <Pressable style={styles.inlineAction} onPress={() => openFieldPicker('new')} accessibilityRole="button">
+              <Pressable android_ripple={ripple.bounded} style={styles.inlineAction} onPress={() => openFieldPicker('new')} accessibilityRole="button">
                 <Ionicons name="add" size={16} color={colors.accent} />
                 <Text variant="label" color={colors.accent}>
                   Add filter
@@ -1133,7 +1138,7 @@ export default function DynamicPlaylistEditorScreen() {
             <Text variant="caption" style={styles.sectionLabel}>
               ORDER
             </Text>
-            <Pressable style={styles.sortCard} onPress={openSortSheet} accessibilityRole="button">
+            <Pressable android_ripple={ripple.bounded} style={styles.sortCard} onPress={openSortSheet} accessibilityRole="button">
               <View style={styles.cardIcon}>
                 <Ionicons name="swap-vertical" size={18} color={colors.accent} />
               </View>
@@ -1161,7 +1166,7 @@ export default function DynamicPlaylistEditorScreen() {
               {status.label}
             </Text>
           </View>
-          <Pressable
+          <Pressable android_ripple={ripple.bounded}
             style={[styles.previewButton, normalizedRulesError !== null && styles.disabled]}
             disabled={normalizedRulesError !== null}
             onPress={() => setSheet({ kind: 'preview' })}
@@ -1172,7 +1177,7 @@ export default function DynamicPlaylistEditorScreen() {
               Preview
             </Text>
           </Pressable>
-          <Pressable
+          <Pressable android_ripple={ripple.bounded}
             style={[styles.saveButton, saveDisabled && styles.disabled]}
             disabled={saveDisabled}
             onPress={save}

src/app/+native-intent.ts

@@ -1,6 +1,6 @@
 import {
-  getNotificationClickRedirectPath,
   isNotificationClickPath,
+  resolveNotificationClick,
 } from '@/audio/notificationIntent';
 import { getEQPresetShareRedirectPath } from '@/audio/eqShareIntent';
 
@@ -10,7 +10,7 @@ type RedirectSystemPathEvent = {
 };
 
 export async function redirectSystemPath({ path }: RedirectSystemPathEvent): Promise<string> {
-  if (isNotificationClickPath(path)) return getNotificationClickRedirectPath();
+  if (isNotificationClickPath(path)) return resolveNotificationClick();
 
   const eqShareRedirect = getEQPresetShareRedirectPath(path);
   if (eqShareRedirect) return eqShareRedirect;

src/app/_layout.tsx

@@ -17,6 +17,7 @@ import {
   JetBrainsMono_500Medium,
 } from '@expo-google-fonts/jetbrains-mono';
 import { usePlaybackSync } from '@/audio/usePlaybackSync';
+import { NowPlayingHost } from '@/components/player/NowPlayingHost';
 import { QuickSearchOverlay } from '@/components/search/QuickSearchOverlay';
 import { useScopeLifecycle } from '@/scope/useScopeLifecycle';
 import { useLibraryStore } from '@/stores/libraryStore';
@@ -45,10 +46,12 @@ import { useOnboardingStore } from '@/stores/onboardingStore';
 import { OnboardingFlow } from '@/components/onboarding/OnboardingFlow';
 import { useTheme } from '@/theme/themed';
 
-// Anchor the root stack at the tabs so a deep link straight to a top-level route (the
+// Anchor the root stack at the tabs so a deep link straight to a top-level route
-// widget/notification opening `now-playing`, or `recently-played`) builds `[(tabs), route]`
+// (the widget's `recently-played`, the notification-click redirect) builds
-// instead of just `[route]`. Without this, dismissing the now-playing modal pops to an empty
+// `[(tabs), route]` instead of just `[route]` — backing out of a deep-linked
-// stack → blank screen. Only affects deep-link/launch ordering; normal nav is unchanged.
+// route must never land on an empty stack. Only affects deep-link/launch
+// ordering; normal nav is unchanged. (Now-playing itself is no longer a route —
+// it's the store-gated NowPlayingHost overlay.)
 export const unstable_settings = {
   initialRouteName: '(tabs)',
 };
@@ -357,18 +360,12 @@ export default function RootLayout() {
           }}
         >
           <Stack.Screen name="(tabs)" />
-          <Stack.Screen
-            name="now-playing"
-            options={{
-              presentation: 'transparentModal',
-              animation: 'none',
-              gestureEnabled: false,
-              contentStyle: { backgroundColor: 'transparent' },
-            }}
-          />
         </Stack>
         {onboardingComplete ? (
           <>
+            {/* Always-mounted player overlay (store-gated); open/close is a pure
+                UI-thread slide with zero mount cost after the first mount. */}
+            <NowPlayingHost />
             <QuickSearchOverlay />
             <SyncConflictPrompt />
           </>

src/app/desktop-remote.tsx

@@ -27,8 +27,10 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { isWideWindow, WIDE_MIN_WIDTH } from '@/theme/adaptive';
 import { useDesktopRemoteStore } from '@/stores/desktopRemoteStore';
+import { usePlayerUiStore } from '@/stores/playerUiStore';
 import type { DesktopRemoteDiscoveredDesktop } from '@/types/desktopRemote';
 
 // Layout mirrors now-playing's adaptive pattern (minus the scope stage): a
@@ -189,9 +191,10 @@ function DiscoveredDesktopRow({ desktop, onPair, disabled }: {
   disabled: boolean;
 }) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   return (
-    <Pressable
+    <Pressable android_ripple={ripple.bounded}
       style={[styles.discoveredRow, disabled && styles.buttonDisabled]}
       onPress={() => onPair(desktop)}
       disabled={disabled}
@@ -219,6 +222,7 @@ function DiscoveredDesktopRow({ desktop, onPair, disabled }: {
 
 export default function DesktopRemoteScreen() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const router = useRouter();
   const { pair } = useLocalSearchParams<{ pair?: string }>();
@@ -390,7 +394,7 @@ export default function DesktopRemoteScreen() {
               maxLength={6}
               textContentType="oneTimeCode"
             />
-            <Pressable
+            <Pressable android_ripple={ripple.bounded}
               style={[
                 styles.primaryButton,
                 (normalizedPinInput.length !== 6 || !pinPairingActive) && styles.buttonDisabled,
@@ -416,7 +420,7 @@ export default function DesktopRemoteScreen() {
           Open Astra Desktop settings, enable Phone Remote, then scan or paste the pairing link.
         </Text>
         <View style={styles.actionRow}>
-          <Pressable style={styles.primaryButton} onPress={() => router.push('/desktop-remote/scan' as never)}>
+          <Pressable android_ripple={ripple.bounded} style={styles.primaryButton} onPress={() => router.push('/desktop-remote/scan' as never)}>
             <Ionicons name="scan" size={18} color={colors.accentTextStrong} />
             <Text variant="body" color={colors.accentTextStrong}>
               Scan QR
@@ -433,7 +437,7 @@ export default function DesktopRemoteScreen() {
           autoCorrect={false}
           keyboardType="url"
         />
-        <Pressable
+        <Pressable android_ripple={ripple.bounded}
           style={[styles.secondaryButton, !pairingLink.trim() && styles.buttonDisabled]}
           disabled={!pairingLink.trim()}
           onPress={() => void pairFromInput(pairingLink)}
@@ -470,7 +474,7 @@ export default function DesktopRemoteScreen() {
           autoCapitalize="none"
           autoCorrect={false}
         />
-        <Pressable
+        <Pressable android_ripple={ripple.bounded}
           style={[
             styles.secondaryButton,
             (!manualBaseUrl.trim() || !manualTicket.trim()) && styles.buttonDisabled,
@@ -523,7 +527,7 @@ export default function DesktopRemoteScreen() {
     >
       <View style={[styles.remoteShell, { width: remoteLayout.contentWidth }]}>
         <View style={styles.remoteNowHeader}>
-          <Pressable style={styles.headerBtn} onPress={() => router.back()} hitSlop={12}>
+          <Pressable android_ripple={ripple.bounded} style={styles.headerBtn} onPress={() => router.back()} hitSlop={12}>
             <Ionicons name="chevron-down" size={26} color={colors.textSecondary} />
           </Pressable>
           <View style={styles.headerMid}>
@@ -534,7 +538,7 @@ export default function DesktopRemoteScreen() {
               {remoteSource}
             </Text>
           </View>
-          <Pressable
+          <Pressable android_ripple={ripple.bounded}
             style={styles.headerBtn}
             onPress={() => void reconnect()}
             hitSlop={12}
@@ -582,20 +586,26 @@ export default function DesktopRemoteScreen() {
           </View>
 
           <View style={styles.manageActions}>
-            <Pressable
+            <Pressable android_ripple={ripple.bounded}
               style={styles.primaryButton}
-              onPress={() => router.replace('/now-playing' as never)}
+              onPress={() => {
+                // The player is an overlay, not a route: open it and pop this
+                // screen so it slides in above wherever the user came from.
+                usePlayerUiStore.getState().openPlayer();
+                if (router.canGoBack()) router.back();
+                else router.replace('/');
+              }}
             >
               <Ionicons name="musical-notes-outline" size={18} color={colors.accentTextStrong} />
               <Text variant="body" color={colors.accentTextStrong}>
                 Open Now Playing
               </Text>
             </Pressable>
-            <Pressable style={styles.secondaryButton} onPress={() => void reconnect()}>
+            <Pressable android_ripple={ripple.bounded} style={styles.secondaryButton} onPress={() => void reconnect()}>
               <Ionicons name="refresh" size={18} color={colors.textPrimary} />
               <Text variant="body">Reconnect</Text>
             </Pressable>
-            <Pressable style={styles.dangerButton} onPress={confirmForget}>
+            <Pressable android_ripple={ripple.bounded} style={styles.dangerButton} onPress={confirmForget}>
               <Ionicons name="trash-outline" size={18} color={colors.warning} />
               <Text variant="body" color={colors.warning}>
                 Forget desktop
@@ -630,7 +640,7 @@ export default function DesktopRemoteScreen() {
         ) : (
           <>
             <View style={styles.topBar}>
-              <Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
+              <Pressable android_ripple={ripple.bounded} style={styles.back} onPress={() => router.back()} hitSlop={8}>
                 <Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
                 <Text variant="body" color={colors.textSecondary}>
                   Settings

src/app/desktop-remote/scan.tsx

@@ -19,10 +19,12 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { useDesktopRemoteStore } from '@/stores/desktopRemoteStore';
 
 export default function DesktopRemoteScanScreen() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const router = useRouter();
   const pairFromInput = useDesktopRemoteStore((s) => s.pairFromInput);
@@ -42,7 +44,7 @@ export default function DesktopRemoteScanScreen() {
   return (
     <Screen>
       <View style={styles.header}>
-        <Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
+        <Pressable android_ripple={ripple.bounded} style={styles.back} onPress={() => router.back()} hitSlop={8}>
           <Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
           <Text variant="body" color={colors.textSecondary}>
             Desktop Remote
@@ -62,7 +64,7 @@ export default function DesktopRemoteScanScreen() {
         <View style={styles.permissionCard}>
           <Ionicons name="camera-outline" size={28} color={colors.accent} />
           <Text variant="body">Camera access is needed to scan the desktop pairing QR.</Text>
-          <Pressable style={styles.primaryButton} onPress={() => void requestPermission()}>
+          <Pressable android_ripple={ripple.bounded} style={styles.primaryButton} onPress={() => void requestPermission()}>
             <Text variant="body" color={colors.accentTextStrong}>
               Allow camera
             </Text>

src/app/desktop-sync.tsx

@@ -20,6 +20,7 @@ import { Text } from '@/components/Text';
 import { SyncConflictDetails } from '@/components/sync/SyncConflictDetails';
 import { radius, spacing } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { formatRelativeTime } from '@/lib/format';
 import { getDesktopRemoteConnection } from '@/services/desktopRemoteCredentials';
 import { useDesktopSyncStore } from '@/stores/desktopSyncStore';
@@ -67,6 +68,7 @@ function ConflictCard({
   onResolve: (resolution: DesktopSyncConflictResolution) => void;
 }) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const [selectedResolution, setSelectedResolution] = useState<DesktopSyncConflictResolution | null>(null);
   const desktopSnapshot = syncPlaylistToSnapshot(conflict.remote);
@@ -85,7 +87,7 @@ function ConflictCard({
       </Text>
       <View style={styles.conflictActions}>
         {options.map((resolution) => (
-          <Pressable
+          <Pressable android_ripple={ripple.bounded}
             key={resolution}
             style={[
               styles.conflictBtn,
@@ -114,7 +116,7 @@ function ConflictCard({
         previewResolution={selectedResolution}
       />
       <View style={styles.conflictConfirmRow}>
-        <Pressable
+        <Pressable android_ripple={ripple.bounded}
           style={[styles.primaryButton, (!selectedResolution || busy) && styles.disabled]}
           disabled={!selectedResolution || busy}
           onPress={() => selectedResolution ? onResolve(selectedResolution) : undefined}
@@ -130,6 +132,7 @@ function ConflictCard({
 
 export default function DesktopSyncScreen() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const router = useRouter();
   const status = useDesktopSyncStore((s) => s.status);
@@ -172,7 +175,7 @@ export default function DesktopSyncScreen() {
   return (
     <Screen>
       <View style={styles.topBar}>
-        <Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
+        <Pressable android_ripple={ripple.bounded} style={styles.back} onPress={() => router.back()} hitSlop={8}>
           <Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
           <Text variant="body" color={colors.textSecondary}>
             Settings
@@ -201,7 +204,7 @@ export default function DesktopSyncScreen() {
               Sync uses the same pairing as the Desktop Remote. Pair this phone with Astra Desktop
               once and both features work.
             </Text>
-            <Pressable
+            <Pressable android_ripple={ripple.bounded}
               style={styles.primaryButton}
               onPress={() => router.push('/desktop-remote' as never)}
             >
@@ -225,7 +228,7 @@ export default function DesktopSyncScreen() {
                         : 'Not synced yet'}
                   </Text>
                 </View>
-                <Pressable
+                <Pressable android_ripple={ripple.bounded}
                   style={[styles.primaryButton, syncing && styles.disabled]}
                   disabled={syncing}
                   onPress={() => void syncNow()}

src/app/eq/import.tsx

@@ -10,10 +10,12 @@ import { genEqId } from '@/audio/eqPresets';
 import { useEQStore } from '@/stores/eqStore';
 import { radius, spacing } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import type { EQPreset } from '@/types/audio';
 
 export default function EQPresetImportScreen() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const router = useRouter();
   const importPreset = useEQStore((state) => state.importPreset);
@@ -34,7 +36,7 @@ export default function EQPresetImportScreen() {
     return (
       <Screen>
         <View style={styles.header}>
-          <Pressable style={styles.back} onPress={goToEq} hitSlop={8}>
+          <Pressable android_ripple={ripple.bounded} style={styles.back} onPress={goToEq} hitSlop={8}>
             <Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
             <Text variant="body" color={colors.textSecondary}>
               Equalizer
@@ -44,7 +46,7 @@ export default function EQPresetImportScreen() {
         <View style={styles.errorCard}>
           <Ionicons name="alert-circle-outline" size={28} color={colors.warning} />
           <Text variant="body">This link does not contain a valid Astra EQ preset.</Text>
-          <Pressable style={styles.primaryButton} onPress={goToEq}>
+          <Pressable android_ripple={ripple.bounded} style={styles.primaryButton} onPress={goToEq}>
             <Text variant="body" color={colors.accentTextStrong}>
               Go to Equalizer
             </Text>

src/app/eq/scan.tsx

@@ -22,10 +22,12 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import type { EQPreset } from '@/types/audio';
 
 export default function EQPresetScanScreen() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const router = useRouter();
   const importPreset = useEQStore((state) => state.importPreset);
@@ -49,7 +51,7 @@ export default function EQPresetScanScreen() {
   return (
     <Screen>
       <View style={styles.header}>
-        <Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
+        <Pressable android_ripple={ripple.bounded} style={styles.back} onPress={() => router.back()} hitSlop={8}>
           <Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
           <Text variant="body" color={colors.textSecondary}>
             Equalizer
@@ -67,7 +69,7 @@ export default function EQPresetScanScreen() {
         <View style={styles.permissionCard}>
           <Ionicons name="camera-outline" size={28} color={colors.accent} />
           <Text variant="body">Camera access is needed to scan EQ preset QR codes.</Text>
-          <Pressable style={styles.primaryButton} onPress={() => void requestPermission()}>
+          <Pressable android_ripple={ripple.bounded} style={styles.primaryButton} onPress={() => void requestPermission()}>
             <Text variant="body" color={colors.accentTextStrong}>
               Allow camera
             </Text>
@@ -90,7 +92,7 @@ export default function EQPresetScanScreen() {
                   {error}
                 </Text>
               </View>
-              <Pressable style={styles.retryButton} onPress={() => setError(null)}>
+              <Pressable android_ripple={ripple.bounded} style={styles.retryButton} onPress={() => setError(null)}>
                 <Text variant="label" color={colors.accentTextStrong}>
                   Scan again
                 </Text>

src/app/lastfm/edit.tsx

@@ -19,6 +19,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { useLastFmSettingsStore } from '@/stores/lastFmSettingsStore';
 import type { LastFmScrobbleProtocol } from '@/types/lastFm';
 
@@ -103,6 +104,7 @@ function Field({
 
 export default function LastFmEditScreen() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const router = useRouter();
   const { id } = useLocalSearchParams<{ id?: string }>();
@@ -200,7 +202,7 @@ export default function LastFmEditScreen() {
         behavior={Platform.OS === 'ios' ? 'padding' : undefined}
       >
         <View style={styles.header}>
-          <Pressable style={styles.back} onPress={goBack} hitSlop={8}>
+          <Pressable android_ripple={ripple.bounded} style={styles.back} onPress={goBack} hitSlop={8}>
             <Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
             <Text variant="body" color={colors.textSecondary}>
               {backLabel}
@@ -219,7 +221,7 @@ export default function LastFmEditScreen() {
 
             <View style={styles.typeCards}>
               {PROTOCOL_OPTIONS.map((option) => (
-                <Pressable
+                <Pressable android_ripple={ripple.bounded}
                   key={option.protocol}
                   style={styles.typeCard}
                   onPress={() => chooseProtocol(option.protocol)}
@@ -293,7 +295,7 @@ export default function LastFmEditScreen() {
               </Text>
             ) : null}
 
-            <Pressable
+            <Pressable android_ripple={ripple.bounded}
               style={[styles.saveButton, !canSubmit || busy ? styles.buttonDisabled : null]}
               onPress={() => void onSave()}
               disabled={!canSubmit || busy}
@@ -308,7 +310,7 @@ export default function LastFmEditScreen() {
             </Pressable>
 
             {editing ? (
-              <Pressable style={styles.removeButton} onPress={onRemove} accessibilityRole="button">
+              <Pressable android_ripple={ripple.bounded} style={styles.removeButton} onPress={onRemove} accessibilityRole="button">
                 <Ionicons name="trash-outline" size={18} color={colors.warning} />
                 <Text variant="body" color={colors.warning}>
                   Remove destination

src/app/lastfm/index.tsx

@@ -16,6 +16,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { useLastFmSettingsStore } from '@/stores/lastFmSettingsStore';
 import { requestLastFmFlush } from '@/services/lastfm';
 import type { LastFmProfileStatus } from '@/types/lastFm';
@@ -45,6 +46,7 @@ function customStatusLine(profile: LastFmProfileStatus): { text: string; tone: '
 
 export default function LastFmScreen() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const router = useRouter();
   const status = useLastFmSettingsStore((s) => s.status);
@@ -125,7 +127,7 @@ export default function LastFmScreen() {
                 {profile.username}
               </Text>
             ) : null}
-            <Pressable
+            <Pressable android_ripple={ripple.bounded}
               onPress={() => confirmDisconnect(profile)}
               hitSlop={8}
               accessibilityLabel="Disconnect Last.fm"
@@ -134,7 +136,7 @@ export default function LastFmScreen() {
             </Pressable>
           </View>
         ) : (
-          <Pressable
+          <Pressable android_ripple={ripple.bounded}
             style={styles.connectButton}
             onPress={() => connectOfficial(profile)}
             accessibilityRole="button"
@@ -152,7 +154,7 @@ export default function LastFmScreen() {
   const renderCustom = (profile: LastFmProfileStatus) => {
     const line = customStatusLine(profile);
     return (
-      <Pressable
+      <Pressable android_ripple={ripple.bounded}
         key={profile.id}
         style={styles.row}
         onPress={() => router.push({ pathname: '/lastfm/edit', params: { id: profile.id } })}
@@ -195,13 +197,13 @@ export default function LastFmScreen() {
   return (
     <Screen>
       <View style={styles.header}>
-        <Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
+        <Pressable android_ripple={ripple.bounded} style={styles.back} onPress={() => router.back()} hitSlop={8}>
           <Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
           <Text variant="body" color={colors.textSecondary}>
             Settings
           </Text>
         </Pressable>
-        <Pressable
+        <Pressable android_ripple={ripple.bounded}
           onPress={() => router.push('/lastfm/edit')}
           hitSlop={8}
           accessibilityLabel="Add destination"
@@ -249,7 +251,7 @@ export default function LastFmScreen() {
         ) : null}
 
         {status && status.pendingScrobbles > 0 ? (
-          <Pressable style={styles.retryButton} onPress={() => requestLastFmFlush()}>
+          <Pressable android_ripple={ripple.bounded} style={styles.retryButton} onPress={() => requestLastFmFlush()}>
             <Ionicons name="sync" size={16} color={colors.accentText} />
             <Text variant="label" color={colors.accentText}>
               Retry {status.pendingScrobbles} queued now
@@ -271,7 +273,7 @@ export default function LastFmScreen() {
           )}
         </View>
 
-        <Pressable style={styles.addButton} onPress={() => router.push('/lastfm/edit')}>
+        <Pressable android_ripple={ripple.bounded} style={styles.addButton} onPress={() => router.push('/lastfm/edit')}>
           <Ionicons name="add" size={18} color={colors.accentTextStrong} />
           <Text variant="body" color={colors.accentTextStrong}>
             Add destination

src/app/notification.click.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { View } from 'react-native';
 import { useRouter } from 'expo-router';
-import { getNotificationClickRedirectPath } from '@/audio/notificationIntent';
+import { resolveNotificationClick } from '@/audio/notificationIntent';
 import { createThemedStyles } from '@/theme/themed';
 
 export default function NotificationClickRoute() {
@@ -11,7 +11,7 @@ export default function NotificationClickRoute() {
   useEffect(() => {
     let cancelled = false;
 
-    getNotificationClickRedirectPath()
+    resolveNotificationClick()
       .then((href) => {
         if (!cancelled) router.replace(href);
       })

src/app/recently-played.tsx

@@ -13,6 +13,7 @@ import { TrackRow } from '@/components/library/TrackRow';
 import { TrackActionsSheet } from '@/components/library/TrackActionsSheet';
 import { spacing } from '@/theme';
 import { useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { useLibraryStore } from '@/stores/libraryStore';
 import { usePlayerStore } from '@/stores/playerStore';
 import { playTracks } from '@/audio/playbackController';
@@ -37,6 +38,7 @@ function EmptyList() {
 
 export default function RecentlyPlayedScreen() {
   const colors = useColors();
+  const ripple = useRipple();
   const router = useRouter();
   const tracks = useLibraryStore((s) => s.recentlyPlayedTracks);
   const currentPath = usePlayerStore((s) => s.currentTrack?.path);
@@ -49,7 +51,7 @@ export default function RecentlyPlayedScreen() {
 
   return (
     <Screen>
-      <Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
+      <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.back} onPress={() => router.back()} hitSlop={8}>
         <Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
         <Text variant="body" color={colors.textSecondary}>
           Home

src/app/sources/edit.tsx

@@ -18,6 +18,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { useRemoteSourcesStore } from '@/stores/remoteSourcesStore';
 import type { RemoteSourceType } from '@/types/remote';
 
@@ -84,6 +85,7 @@ function Field({
 
 export default function SourceEditScreen() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const router = useRouter();
   const { id } = useLocalSearchParams<{ id?: string }>();
@@ -187,7 +189,7 @@ export default function SourceEditScreen() {
         behavior={Platform.OS === 'ios' ? 'padding' : undefined}
       >
         <View style={styles.header}>
-          <Pressable style={styles.back} onPress={goBack} hitSlop={8}>
+          <Pressable android_ripple={ripple.bounded} style={styles.back} onPress={goBack} hitSlop={8}>
             <Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
             <Text variant="body" color={colors.textSecondary}>
               {backLabel}
@@ -206,7 +208,7 @@ export default function SourceEditScreen() {
 
             <View style={styles.typeCards}>
               {TYPE_OPTIONS.map((option) => (
-                <Pressable
+                <Pressable android_ripple={ripple.bounded}
                   key={option.type}
                   style={styles.typeCard}
                   onPress={() => chooseType(option.type)}
@@ -274,7 +276,7 @@ export default function SourceEditScreen() {
             ) : null}
 
             <View style={styles.actions}>
-              <Pressable
+              <Pressable android_ripple={ripple.bounded}
                 style={[styles.button, styles.secondaryButton, busy ? styles.buttonDisabled : null]}
                 onPress={() => void onTest()}
                 disabled={!!busy}
@@ -287,7 +289,7 @@ export default function SourceEditScreen() {
                   </Text>
                 )}
               </Pressable>
-              <Pressable
+              <Pressable android_ripple={ripple.bounded}
                 style={[
                   styles.button,
                   styles.primaryButton,

src/app/sources/index.tsx

@@ -16,6 +16,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { useRemoteSourcesStore } from '@/stores/remoteSourcesStore';
 import type { RemoteSourceRow, RemoteSyncProgress } from '@/types/remote';
 
@@ -39,6 +40,7 @@ function statusLine(
 
 export default function SourcesScreen() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const router = useRouter();
   const sources = useRemoteSourcesStore((s) => s.sources);
@@ -103,7 +105,7 @@ export default function SourcesScreen() {
   return (
     <Screen>
       <View style={styles.header}>
-        <Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
+        <Pressable android_ripple={ripple.bounded} style={styles.back} onPress={() => router.back()} hitSlop={8}>
           <Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
           <Text variant="body" color={colors.textSecondary}>
             Settings
@@ -111,11 +113,11 @@ export default function SourcesScreen() {
         </Pressable>
         <View style={styles.headerActions}>
           {sources.length > 0 ? (
-            <Pressable onPress={() => void syncAll()} hitSlop={8} accessibilityLabel="Sync all">
+            <Pressable android_ripple={ripple.bounded} onPress={() => void syncAll()} hitSlop={8} accessibilityLabel="Sync all">
               <Ionicons name="sync" size={20} color={colors.textSecondary} />
             </Pressable>
           ) : null}
-          <Pressable
+          <Pressable android_ripple={ripple.bounded}
             onPress={() => router.push('/sources/edit')}
             hitSlop={8}
             accessibilityLabel="Add server"
@@ -137,7 +139,7 @@ export default function SourcesScreen() {
               No servers yet. Add a Subsonic or Jellyfin server to stream and browse your
               self-hosted library.
             </Text>
-            <Pressable style={styles.addButton} onPress={() => router.push('/sources/edit')}>
+            <Pressable android_ripple={ripple.bounded} style={styles.addButton} onPress={() => router.push('/sources/edit')}>
               <Ionicons name="add" size={18} color={colors.accentTextStrong} />
               <Text variant="body" color={colors.accentTextStrong}>
                 Add server
@@ -148,7 +150,7 @@ export default function SourcesScreen() {
           sources.map((source) => {
             const status = statusLine(source, progressById[source.id] ?? null);
             return (
-              <Pressable
+              <Pressable android_ripple={ripple.bounded}
                 key={source.id}
                 style={styles.row}
                 onPress={() => setActionFor(source)}

src/audio/notificationIntent.ts

@@ -1,5 +1,6 @@
 import TrackPlayer from 'react-native-track-player';
 import { usePlayerStore } from '@/stores/playerStore';
+import { usePlayerUiStore } from '@/stores/playerUiStore';
 
 const NOTIFICATION_CLICK_TARGETS = new Set([
   'trackplayer://notification.click',
@@ -9,8 +10,6 @@ const NOTIFICATION_CLICK_TARGETS = new Set([
   'notification.click',
 ]);
 
-export type NotificationClickRedirectPath = '/' | '/now-playing';
-
 export function isNotificationClickPath(path: string): boolean {
   const cleanPath = path.trim();
   const pathWithoutSuffix = cleanPath.split(/[?#]/, 1)[0];
@@ -31,8 +30,14 @@ export function isNotificationClickPath(path: string): boolean {
   }
 }
 
-export async function getNotificationClickRedirectPath(): Promise<NotificationClickRedirectPath> {
+/**
-  return (await hasLoadedTrack()) ? '/now-playing' : '/';
+ * Notification/widget tap: land on the tabs and, when a track is loaded, open
+ * the now-playing overlay above them (the player is a store-gated overlay, not
+ * a route). Returns the route to navigate to.
+ */
+export async function resolveNotificationClick(): Promise<'/'> {
+  if (await hasLoadedTrack()) usePlayerUiStore.getState().openPlayer();
+  return '/';
 }
 
 async function hasLoadedTrack(): Promise<boolean> {

src/components/MiniPlayer.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-native';
 import { Image } from 'expo-image';
 import { Ionicons } from '@expo/vector-icons';
-import { usePathname, useRouter } from 'expo-router';
+import { usePlayerUiStore } from '@/stores/playerUiStore';
 import { Text } from './Text';
 import { AstraLogo } from './AstraLogo';
 import { SpectrumCurve } from './SpectrumCurve';
@@ -16,6 +16,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { usePlayerStore } from '@/stores/playerStore';
 import { useDesktopRemoteStore } from '@/stores/desktopRemoteStore';
 import { usePlaybackTargetStore } from '@/stores/playbackTargetStore';
@@ -72,8 +73,8 @@ function PhoneMiniProgress({ isPlaying }: { isPlaying: boolean }) {
 export function MiniPlayer({ visible = true }: MiniPlayerProps) {
   const styles = useStyles();
   const colors = useColors();
-  const router = useRouter();
+  const ripple = useRipple();
-  const pathname = usePathname();
+  const playerOpen = usePlayerUiStore((s) => s.playerOpen);
   const selectedTarget = usePlaybackTargetStore((s) => s.target);
   const track = usePlayerStore((s) => s.currentTrack);
   const playbackState = usePlayerStore((s) => s.playbackState);
@@ -107,9 +108,9 @@ export function MiniPlayer({ visible = true }: MiniPlayerProps) {
   const isDesktop = presentation.target === 'desktop';
   const isPlaying = presentation.playbackState === 'playing';
   const isLoading = presentation.playbackState === 'loading';
-  // The pill sits underneath the now-playing transparentModal; don't burn a
+  // The pill sits underneath the now-playing overlay; don't burn a second
-  // second live-scope frame loop while it's fully occluded.
+  // live-scope frame loop while it's fully occluded.
-  const liveScopeActive = visible && scopeActive && !isDesktop && pathname !== '/now-playing';
+  const liveScopeActive = visible && scopeActive && !isDesktop && !playerOpen;
 
   const onLayout = (e: LayoutChangeEvent) => setPillWidth(e.nativeEvent.layout.width);
   const onTogglePlay = () => {
@@ -135,8 +136,9 @@ export function MiniPlayer({ visible = true }: MiniPlayerProps) {
     <>
       <Pressable
         pointerEvents={visible ? 'auto' : 'none'}
+        android_ripple={ripple.bounded}
         style={[styles.pill, !visible && styles.hidden]}
-        onPress={() => router.push('/now-playing')}
+        onPress={() => usePlayerUiStore.getState().openPlayer()}
         onLayout={onLayout}
       >
         {liveScopeActive && pillWidth > 0 && (
@@ -183,6 +185,7 @@ export function MiniPlayer({ visible = true }: MiniPlayerProps) {
           {isDesktop ? (
             <Pressable
               hitSlop={10}
+              android_ripple={ripple.icon(22)}
               onPress={() => setTargetPickerOpen(true)}
               style={styles.control}
               accessibilityLabel="Choose output device"
@@ -190,14 +193,14 @@ export function MiniPlayer({ visible = true }: MiniPlayerProps) {
               <Ionicons name="desktop-outline" size={21} color={colors.textSecondary} />
             </Pressable>
           ) : null}
-          <Pressable hitSlop={10} onPress={onTogglePlay} style={styles.control}>
+          <Pressable hitSlop={10} android_ripple={ripple.icon(22)} onPress={onTogglePlay} style={styles.control}>
             <Ionicons
               name={isLoading ? 'ellipsis-horizontal' : isPlaying ? 'pause' : 'play'}
               size={24}
               color={colors.accent}
             />
           </Pressable>
-          <Pressable hitSlop={10} onPress={onSkipNext} style={styles.control}>
+          <Pressable hitSlop={10} android_ripple={ripple.icon(22)} onPress={onSkipNext} style={styles.control}>
             <Ionicons name="play-skip-forward" size={22} color={colors.textPrimary} />
           </Pressable>
         </View>

src/components/PlaybackTargetPicker.tsx

@@ -10,6 +10,7 @@ import { Ionicons } from '@expo/vector-icons';
 import { Text } from './Text';
 import { radius, spacing } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { useDesktopRemoteStore } from '@/stores/desktopRemoteStore';
 import { usePlaybackTargetStore, type PlaybackTarget } from '@/stores/playbackTargetStore';
 import { usePlayerStore } from '@/stores/playerStore';
@@ -118,9 +119,11 @@ function TargetRow({
 }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   return (
     <Pressable
-      style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
+      android_ripple={ripple.bounded}
+      style={styles.row}
       onPress={onPress}
       accessibilityRole="button"
       accessibilityState={{ selected }}
@@ -176,9 +179,6 @@ const useStyles = createThemedStyles((colors) => ({
     alignItems: 'center',
     gap: spacing.md,
   },
-  rowPressed: {
-    opacity: 0.65,
-  },
   iconWrap: {
     width: 40,
     height: 40,

src/components/SegmentedControl.tsx

@@ -16,6 +16,7 @@ import {
   radius,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { motion } from '@/theme/motion';
 
 const THUMB_INSET = 3;
@@ -89,6 +90,7 @@ function SegmentButton({
 }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   // 0 = inactive, 1 = active; drives the label colour cross-fade.
   const progress = useSharedValue(focused ? 1 : 0);
 
@@ -106,7 +108,8 @@ function SegmentButton({
 
   return (
     <Pressable
-      style={({ pressed }) => [styles.segment, pressed && styles.segmentPressed]}
+      android_ripple={ripple.bounded}
+      style={styles.segment}
       onPress={onPress}
       accessibilityRole="tab"
       accessibilityState={{ selected: focused }}
@@ -143,9 +146,6 @@ const useStyles = createThemedStyles((colors) => ({
     justifyContent: 'center',
     paddingVertical: 7,
   },
-  segmentPressed: {
-    opacity: 0.72,
-  },
   label: {
     fontSize: 12,
     fontFamily: fonts.sans.medium,

src/components/TabBar.tsx

@@ -20,6 +20,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { motion } from '@/theme/motion';
 import { useDesktopRemoteStore } from '@/stores/desktopRemoteStore';
 import { usePlaybackTargetStore } from '@/stores/playbackTargetStore';
@@ -161,6 +162,7 @@ interface TabButtonProps {
 function TabButton({ meta, focused, onPress }: TabButtonProps) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   // 0 = inactive, 1 = active. Drives the accent fill, label colour, and bloom.
   const progress = useSharedValue(focused ? 1 : 0);
   // 0 = at rest, 1 = finger down.
@@ -184,6 +186,7 @@ function TabButton({ meta, focused, onPress }: TabButtonProps) {
 
   return (
     <Pressable
+      android_ripple={ripple.icon(26)}
       style={styles.tab}
       onPress={onPress}
       onPressIn={() => {

src/components/WaveformSeekBar.tsx

@@ -36,6 +36,11 @@ interface WaveformSeekBarProps {
   touchPadding?: number;
   /** Track file URI used to load/cache the offline waveform peaks. */
   trackPath?: string;
+  /**
+   * False while the bar is mounted but hidden (the now-playing overlay stays
+   * mounted when closed): pins progress and stops the smooth-time rAF loop.
+   */
+  active?: boolean;
 }
 
 const clamp = (fraction: number) => Math.min(1, Math.max(0, fraction));
@@ -54,12 +59,13 @@ export function WaveformSeekBar({
   height = CANVAS_HEIGHT,
   touchPadding = spacing.md,
   trackPath,
+  active = true,
 }: WaveformSeekBarProps) {
   const styles = useStyles();
   const colors = useColors();
-  const currentTime = usePlayerStore((s) => s.currentTime);
+  const currentTime = usePlayerStore((s) => (active ? s.currentTime : 0));
   const duration = usePlayerStore((s) => s.duration);
-  const isPlaying = usePlayerStore((s) => s.playbackState === 'playing');
+  const isPlaying = usePlayerStore((s) => active && s.playbackState === 'playing');
   const [scrubFraction, setScrubFraction] = useState<number | null>(null);
   const [barWidth, setBarWidth] = useState(0);
   const pendingSeek = usePlayerStore((s) => s.pendingSeek);

src/components/eq/BandDetailPanel.tsx

@@ -11,6 +11,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import type { EQBand } from '@/types/audio';
 import {
   EQ_MAX_FREQUENCY,
@@ -43,6 +44,7 @@ export type EQEditableValue = 'frequency' | 'gain' | 'Q';
 /** "Band N" + type dropdown + On toggle + audible parameter sliders. */
 export function BandDetailPanel({ band, bandNumber, onUpdate, onEditType, onEditValue }: BandDetailPanelProps) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   if (!band) {
     return (
@@ -61,7 +63,7 @@ export function BandDetailPanel({ band, bandNumber, onUpdate, onEditType, onEdit
     <View style={styles.card}>
       <View style={styles.header}>
         <Text variant="heading">Band {bandNumber}</Text>
-        <Pressable style={styles.typeButton} onPress={onEditType}>
+        <Pressable android_ripple={ripple.bounded} style={styles.typeButton} onPress={onEditType}>
           <Text variant="label" color={colors.textPrimary}>
             {BAND_TYPE_LABEL[band.type]}
           </Text>

src/components/eq/BandStrip.tsx

@@ -10,6 +10,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import type { EQBand } from '@/types/audio';
 import {
   formatFreq,
@@ -28,6 +29,7 @@ interface BandStripProps {
 /** Horizontal strip of per-band cells (freq + gain) + a trailing "+" add cell. */
 export function BandStrip({ bands, activeBandId, canAdd, onSelect, onAdd }: BandStripProps) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   return (
     <ScrollView
@@ -38,7 +40,7 @@ export function BandStrip({ bands, activeBandId, canAdd, onSelect, onAdd }: Band
       {bands.map((band) => {
         const isActive = band.id === activeBandId;
         return (
-          <Pressable
+          <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
             key={band.id}
             onPress={() => onSelect(band.id)}
             style={[styles.cell, isActive && styles.cellActive]}
@@ -56,7 +58,7 @@ export function BandStrip({ bands, activeBandId, canAdd, onSelect, onAdd }: Band
         );
       })}
       {canAdd ? (
-        <Pressable onPress={onAdd} style={[styles.cell, styles.addCell]} accessibilityLabel="Add band">
+        <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onAdd} style={[styles.cell, styles.addCell]} accessibilityLabel="Add band">
           <Ionicons name="add" size={22} color={colors.accentText} />
         </Pressable>
       ) : null}

src/components/eq/EQPresetNameSheet.tsx

@@ -12,6 +12,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { EqSheet } from './EqSheet';
 
 interface EQPresetNameSheetProps {
@@ -28,6 +29,7 @@ export function EQPresetNameSheet({
   onClose,
 }: EQPresetNameSheetProps) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const [name, setName] = useState(defaultName);
   const trimmed = name.trim();
@@ -56,12 +58,12 @@ export function EQPresetNameSheet({
         onSubmitEditing={submit}
       />
       <View style={styles.actions}>
-        <Pressable style={[styles.btn, styles.cancel]} onPress={onClose}>
+        <Pressable android_ripple={ripple.bounded} style={[styles.btn, styles.cancel]} onPress={onClose}>
           <Text variant="label" color={colors.textSecondary}>
             Cancel
           </Text>
         </Pressable>
-        <Pressable style={[styles.btn, styles.primary, !trimmed && styles.disabled]} disabled={!trimmed} onPress={submit}>
+        <Pressable android_ripple={ripple.bounded} style={[styles.btn, styles.primary, !trimmed && styles.disabled]} disabled={!trimmed} onPress={submit}>
           <Text variant="label" color={colors.accentTextStrong}>
             {actionLabel}
           </Text>

src/components/eq/EQPresetPreviewSheet.tsx

@@ -9,6 +9,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import type { EQPreset } from '@/types/audio';
 import { EqSheet } from './EqSheet';
 import { formatGain } from './format';
@@ -29,6 +30,7 @@ export function EQPresetPreviewSheet({
   onClose,
 }: EQPresetPreviewSheetProps) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const enabledBands = preset.bands.filter((band) => band.enabled).length;
   const modeLabel = preset.mode === 'graphic' ? 'Graphic' : 'Parametric';
@@ -68,12 +70,12 @@ export function EQPresetPreviewSheet({
         </View>
       </View>
       <View style={styles.actions}>
-        <Pressable style={[styles.btn, styles.cancel]} onPress={onClose}>
+        <Pressable android_ripple={ripple.bounded} style={[styles.btn, styles.cancel]} onPress={onClose}>
           <Text variant="label" color={colors.textSecondary}>
             Cancel
           </Text>
         </Pressable>
-        <Pressable
+        <Pressable android_ripple={ripple.bounded}
           style={[styles.btn, styles.primary]}
           onPress={() => {
             onConfirm();

src/components/eq/EQPresetQrSheet.tsx

@@ -10,6 +10,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { EqSheet } from './EqSheet';
 
 interface EQPresetQrSheetProps {
@@ -20,6 +21,7 @@ interface EQPresetQrSheetProps {
 
 export function EQPresetQrSheet({ presetName, value, onClose }: EQPresetQrSheetProps) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
 
   return (
@@ -33,7 +35,7 @@ export function EQPresetQrSheet({ presetName, value, onClose }: EQPresetQrSheetP
       <Text variant="label" numberOfLines={1} color={colors.textSecondary} style={styles.name}>
         {presetName}
       </Text>
-      <Pressable style={styles.done} onPress={onClose}>
+      <Pressable android_ripple={ripple.bounded} style={styles.done} onPress={onClose}>
         <Text variant="label" color={colors.accentTextStrong}>
           Done
         </Text>

src/components/eq/EQSlider.tsx

@@ -12,6 +12,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 
 const THUMB = 16;
 
@@ -43,6 +44,7 @@ export function EQSlider({
   onValuePress,
 }: EQSliderProps) {
   const styles = useStyles();
+  const ripple = useRipple();
   const [width, setWidth] = useState(0);
   const [active, setActive] = useState(false);
   const widthRef = useRef(0);
@@ -119,6 +121,9 @@ export function EQSlider({
       </View>
       {onValuePress && !disabled ? (
         <Pressable
+          android_ripple={ripple.bounded}
+          // Deliberate two-property pressed emphasis (accent border + fill), kept
+          // alongside the ripple — it marks the value as editable, not just pressed.
           style={({ pressed }) => [styles.valueButton, pressed && styles.valueButtonPressed]}
           onPress={onValuePress}
           accessibilityRole="button"

src/components/eq/EQValueEditSheet.tsx

@@ -13,6 +13,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { EqSheet } from './EqSheet';
 
 interface EQValueEditSheetProps {
@@ -40,6 +41,7 @@ export function EQValueEditSheet({
   onClose,
 }: EQValueEditSheetProps) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const [value, setValue] = useState(initialValue);
   const trimmed = value.trim();
@@ -80,12 +82,12 @@ export function EQValueEditSheet({
         {valid || trimmed.length === 0 ? rangeLabel : 'Enter a valid number'}
       </Text>
       <View style={styles.actions}>
-        <Pressable style={[styles.btn, styles.cancel]} onPress={onClose}>
+        <Pressable android_ripple={ripple.bounded} style={[styles.btn, styles.cancel]} onPress={onClose}>
           <Text variant="label" color={colors.textSecondary}>
             Cancel
           </Text>
         </Pressable>
-        <Pressable
+        <Pressable android_ripple={ripple.bounded}
           style={[styles.btn, styles.apply, !valid && styles.applyDisabled]}
           disabled={!valid}
           onPress={apply}

src/components/eq/PresetSheet.tsx

@@ -3,6 +3,7 @@ import { Ionicons } from '@expo/vector-icons';
 import { Text } from '@/components/Text';
 import { spacing } from '@/theme';
 import { useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import type { EQPreset } from '@/types/audio';
 import {
   EqSheet,
@@ -37,6 +38,7 @@ export function PresetSheet({
   onClose,
 }: PresetSheetProps) {
   const colors = useColors();
+  const ripple = useRipple();
   const builtIn = presets.filter((p) => !p.isCustom);
   const custom = presets.filter((p) => p.isCustom);
 
@@ -76,7 +78,7 @@ export function PresetSheet({
               onClose();
             }}
             trailing={
-              <Pressable
+              <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
                 hitSlop={10}
                 onPress={() => onDelete(p.id)}
                 style={styles.delete}

src/components/eq/SavePresetSheet.tsx

@@ -12,6 +12,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { EqSheet } from './EqSheet';
 
 interface SavePresetSheetProps {
@@ -23,6 +24,7 @@ interface SavePresetSheetProps {
 /** Name + save a custom preset from the current bands/preamp. */
 export function SavePresetSheet({ defaultName, onSave, onClose }: SavePresetSheetProps) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const [name, setName] = useState(defaultName);
   const trimmed = name.trim();
@@ -50,12 +52,12 @@ export function SavePresetSheet({ defaultName, onSave, onClose }: SavePresetShee
         }}
       />
       <View style={styles.actions}>
-        <Pressable style={[styles.btn, styles.cancel]} onPress={onClose}>
+        <Pressable android_ripple={ripple.bounded} style={[styles.btn, styles.cancel]} onPress={onClose}>
           <Text variant="label" color={colors.textSecondary}>
             Cancel
           </Text>
         </Pressable>
-        <Pressable
+        <Pressable android_ripple={ripple.bounded}
           style={[styles.btn, styles.save, !trimmed && styles.saveDisabled]}
           disabled={!trimmed}
           onPress={() => {

src/components/library/AlbumGridItem.tsx

@@ -11,14 +11,16 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { albumArtworkSource } from '@/library/artwork';
 import type { Album } from '@/types/library';
 
 export function AlbumGridItem({ album, onPress }: { album: Album; onPress: () => void }) {
   const styles = useStyles();
+  const ripple = useRipple();
   const artUri = albumArtworkSource(album);
   return (
-    <Pressable style={styles.item} onPress={onPress} accessibilityRole="button">
+    <Pressable android_ripple={ripple.tile} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.item} onPress={onPress} accessibilityRole="button">
       <View style={styles.art}>
         {artUri ? (
           <Image

src/components/library/AlbumRow.tsx

@@ -11,6 +11,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { albumArtworkSource } from '@/library/artwork';
 import type { Album } from '@/types/library';
 
@@ -18,9 +19,10 @@ import type { Album } from '@/types/library';
 export function AlbumRow({ album, onPress }: { album: Album; onPress: () => void }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   const artUri = albumArtworkSource(album);
   return (
-    <Pressable style={styles.row} onPress={onPress} accessibilityRole="button">
+    <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.row} onPress={onPress} accessibilityRole="button">
       <View style={styles.art}>
         {artUri ? (
           <Image

src/components/library/ArtistGridItem.tsx

@@ -11,6 +11,7 @@ import {
   radius,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { artworkUri } from '@/library/artwork';
 import type { Artist } from '@/types/library';
 
@@ -18,6 +19,7 @@ import type { Artist } from '@/types/library';
 export function ArtistGridItem({ artist, onPress }: { artist: Artist; onPress: () => void }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   const useMosaic = artist.artwork_hashes.length >= 4;
   const hashes = useMosaic ? artist.artwork_hashes.slice(0, 4) : artist.artwork_hashes.slice(0, 1);
 
@@ -25,7 +27,7 @@ export function ArtistGridItem({ artist, onPress }: { artist: Artist; onPress: (
   const tracks = `${artist.track_count} ${artist.track_count === 1 ? 'track' : 'tracks'}`;
 
   return (
-    <Pressable style={styles.item} onPress={onPress} accessibilityRole="button">
+    <Pressable android_ripple={ripple.tile} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.item} onPress={onPress} accessibilityRole="button">
       <View style={styles.art}>
         {hashes.length === 0 ? (
           <Ionicons name="person" size={44} color={colors.textTertiary} />

src/components/library/ArtistRow.tsx

@@ -11,14 +11,16 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { artworkUri } from '@/library/artwork';
 import type { Artist } from '@/types/library';
 
 export function ArtistRow({ artist, onPress }: { artist: Artist; onPress: () => void }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   return (
-    <Pressable style={styles.row} onPress={onPress} accessibilityRole="button">
+    <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.row} onPress={onPress} accessibilityRole="button">
       <View style={styles.art}>
         {artist.artwork_hash ? (
           <Image

src/components/library/CollapsingDetail.tsx

@@ -34,6 +34,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 
 // Collapsing detail header. An absolute container whose height shrinks with the
 // scroll and clips its faded content, so the track list (padded to the expanded
@@ -155,6 +156,7 @@ export function CollapsingHeader({
   onHeroBlockLayout: (e: LayoutChangeEvent) => void;
 }) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const insets = useSafeAreaInsets();
   const { width: W } = useWindowDimensions();
@@ -246,7 +248,7 @@ export function CollapsingHeader({
         {heroMeta}
         {heroExtra}
         <Animated.View style={[styles.actionRow, heroButtonsStyle]}>
-          <Pressable
+          <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
             style={[styles.actionButton, styles.primaryAction, disabled && styles.disabledAction]}
             onPress={onPlay}
             disabled={disabled}
@@ -257,7 +259,7 @@ export function CollapsingHeader({
               Play
             </Text>
           </Pressable>
-          <Pressable
+          <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
             style={[styles.actionButton, styles.secondaryAction, disabled && styles.disabledAction]}
             onPress={onShuffle}
             disabled={disabled}
@@ -271,7 +273,7 @@ export function CollapsingHeader({
         </Animated.View>
       </Animated.View>
 
-      <Pressable
+      <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
         onPress={onBack}
         hitSlop={8}
         style={[styles.chevron, { top: barCenterY - 12, left: spacing.md }]}
@@ -299,16 +301,16 @@ export function CollapsingHeader({
         style={[styles.barIcons, { top: barCenterY - 16, right: onMore ? spacing.md + 40 : spacing.md }, barIconsStyle]}
         pointerEvents={collapsed ? 'auto' : 'none'}
       >
-        <Pressable onPress={onPlay} disabled={disabled} hitSlop={6} style={styles.iconBtn}>
+        <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onPlay} disabled={disabled} hitSlop={6} style={styles.iconBtn}>
           <Ionicons name="play" size={20} color={colors.accent} />
         </Pressable>
-        <Pressable onPress={onShuffle} disabled={disabled} hitSlop={6} style={styles.iconBtn}>
+        <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onShuffle} disabled={disabled} hitSlop={6} style={styles.iconBtn}>
           <Ionicons name="shuffle" size={20} color={colors.accent} />
         </Pressable>
       </Animated.View>
 
       {onMore ? (
-        <Pressable
+        <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
           onPress={onMore}
           hitSlop={8}
           style={[styles.moreButton, { top: barCenterY - 16, right: spacing.md }]}

src/components/library/EmptyLibrary.tsx

@@ -10,9 +10,11 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 
 export function EmptyLibrary() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const router = useRouter();
 
@@ -25,7 +27,7 @@ export function EmptyLibrary() {
       <Text variant="body" color={colors.textSecondary} style={styles.body}>
         Pick a folder on this device and Astra will scan it into your library.
       </Text>
-      <Pressable style={styles.cta} onPress={() => router.push('/settings')} accessibilityRole="button">
+      <Pressable android_ripple={ripple.bounded} style={styles.cta} onPress={() => router.push('/settings')} accessibilityRole="button">
         <Ionicons name="folder-open-outline" size={18} color={colors.bgPrimary} />
         <Text variant="body" style={styles.ctaLabel}>
           Folder settings

src/components/library/FoldersView.tsx

@@ -36,6 +36,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { useLibraryStore } from '@/stores/libraryStore';
 import { usePlayerStore } from '@/stores/playerStore';
 import type { DbTrack } from '@/types/library';
@@ -60,6 +61,7 @@ function FolderRow({
 }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   const { node, depth, isExpanded } = row;
 
   const play = (event: GestureResponderEvent) => {
@@ -73,7 +75,8 @@ function FolderRow({
 
   return (
     <Pressable
-      style={({ pressed }) => [styles.folderRow, pressed && styles.rowPressed]}
+      android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
+      style={styles.folderRow}
       onPress={() => onToggle(node.id)}
       onLongPress={() => onOpenActions(node)}
       accessibilityRole="button"
@@ -104,7 +107,8 @@ function FolderRow({
         {node.totalTrackCount}
       </Text>
       <Pressable
-        style={({ pressed }) => [styles.folderButton, pressed && styles.folderButtonPressed]}
+        android_ripple={ripple.icon(20)} unstable_pressDelay={SCROLL_PRESS_DELAY}
+        style={styles.folderButton}
         onPress={play}
         hitSlop={6}
         accessibilityRole="button"
@@ -113,7 +117,8 @@ function FolderRow({
         <Ionicons name="play" size={16} color={colors.accent} />
       </Pressable>
       <Pressable
-        style={({ pressed }) => [styles.folderButton, pressed && styles.folderButtonPressed]}
+        android_ripple={ripple.icon(20)} unstable_pressDelay={SCROLL_PRESS_DELAY}
+        style={styles.folderButton}
         onPress={shuffle}
         hitSlop={6}
         accessibilityRole="button"
@@ -136,6 +141,7 @@ function FolderTrackRow({
 }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   const index = row.folderTracks.findIndex((track) => track.path === row.track.path);
 
   const playFolderTrack = () => {
@@ -148,11 +154,8 @@ function FolderTrackRow({
 
   return (
     <Pressable
-      style={({ pressed }) => [
+      android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
-        styles.trackRow,
+      style={[styles.trackRow, active && styles.trackRowActive]}
-        active && styles.trackRowActive,
-        pressed && styles.rowPressed,
-      ]}
       onPress={playFolderTrack}
       onLongPress={onOpenActions}
       accessibilityRole="button"
@@ -171,7 +174,8 @@ function FolderTrackRow({
         {formatDuration(row.track.duration)}
       </Text>
       <Pressable
-        style={({ pressed }) => [styles.actionsButton, pressed && styles.actionsButtonPressed]}
+        android_ripple={ripple.icon(21)} unstable_pressDelay={SCROLL_PRESS_DELAY}
+        style={styles.actionsButton}
         onPress={openActions}
         hitSlop={8}
         accessibilityRole="button"
@@ -347,9 +351,6 @@ const useStyles = createThemedStyles((colors) => ({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  folderButtonPressed: {
-    backgroundColor: colors.glassBg,
-  },
   trackRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -362,9 +363,6 @@ const useStyles = createThemedStyles((colors) => ({
   trackRowActive: {
     backgroundColor: colors.accentGlow,
   },
-  rowPressed: {
-    opacity: 0.72,
-  },
   trackMeta: {
     flex: 1,
     minWidth: 0,
@@ -390,9 +388,6 @@ const useStyles = createThemedStyles((colors) => ({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  actionsButtonPressed: {
-    backgroundColor: colors.glassBg,
-  },
   empty: {
     flex: 1,
     alignItems: 'center',

src/components/library/PlaylistRow.tsx

@@ -11,6 +11,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { artworkUri } from '@/library/artwork';
 
 export function PlaylistRow({
@@ -39,8 +40,10 @@ export function PlaylistRow({
 }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   return (
     <Pressable
+      android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
       style={styles.row}
       onPress={onPress}
       onLongPress={onLongPress}

src/components/library/PlaylistsView.tsx

@@ -24,6 +24,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { usePlaylistStore } from '@/stores/playlistStore';
 import type { Playlist } from '@/types/playlist';
 
@@ -47,6 +48,7 @@ export function PlaylistsView({
   scrollEventThrottle?: number;
 }) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const router = useRouter();
   const playlists = usePlaylistStore((s) => s.playlists);
@@ -205,7 +207,7 @@ export function PlaylistsView({
       />
 
       <View style={styles.addBar}>
-        <Pressable
+        <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
           style={styles.addButton}
           onPress={() => setAddSheetOpen(true)}
           accessibilityRole="button"

src/components/library/SelectionActionBar.tsx

@@ -7,6 +7,7 @@ import { Ionicons } from '@expo/vector-icons';
 import { Text } from '@/components/Text';
 import { spacing } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 
 interface SelectionActionBarProps {
   count: number;
@@ -66,13 +67,11 @@ function BarButton({
 }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   return (
     <Pressable
-      style={({ pressed }) => [
+      android_ripple={ripple.bounded}
-        styles.button,
+      style={[styles.button, disabled && styles.buttonDisabled]}
-        pressed && styles.buttonPressed,
-        disabled && styles.buttonDisabled,
-      ]}
       onPress={onPress}
       disabled={disabled}
       accessibilityRole="button"
@@ -101,9 +100,6 @@ const useStyles = createThemedStyles((colors) => ({
     gap: spacing.xs,
     paddingVertical: spacing.md,
   },
-  buttonPressed: {
-    opacity: 0.7,
-  },
   buttonDisabled: {
     opacity: 0.4,
   },

src/components/library/TrackRow.tsx

@@ -17,6 +17,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { formatDuration } from '@/lib/format';
 import { trackArtworkThumbSource } from '@/library/artwork';
 import { dbTrackToTrack } from '@/library/trackAdapter';
@@ -60,6 +61,7 @@ export function TrackRow({
 }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   // Key the artwork by hash (local) or identity path (remote) so the error fallback
   // and FlashList recycling work for both.
   const artKey = track.source_type !== 'local' ? track.path : track.artwork_hash;
@@ -74,6 +76,7 @@ export function TrackRow({
 
   const row = (
     <Pressable
+      android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
       style={[styles.row, selectionMode && selected && styles.rowSelected]}
       onPress={selectionMode ? onToggleSelect : onPress}
       onLongPress={selectionMode ? onToggleSelect : (onLongPress ?? onOpenActions)}
@@ -143,7 +146,8 @@ export function TrackRow({
 
       {onOpenActions && !selectionMode ? (
         <Pressable
-          style={({ pressed }) => [styles.actionsButton, pressed && styles.actionsButtonPressed]}
+          android_ripple={ripple.icon(ACTIONS_BUTTON / 2 + 4)} unstable_pressDelay={SCROLL_PRESS_DELAY}
+          style={styles.actionsButton}
           onPress={openActions}
           hitSlop={8}
           accessibilityRole="button"
@@ -257,7 +261,4 @@ const useStyles = createThemedStyles((colors) => ({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  actionsButtonPressed: {
-    backgroundColor: colors.glassBg,
-  },
 }));

src/components/lyrics/LyricsBand.tsx

@@ -10,6 +10,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Pressable, ScrollView, View, type LayoutChangeEvent } from 'react-native';
 import { Text } from '@/components/Text';
 import { useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { useSmoothPlaybackTime } from '@/audio/useSmoothPlaybackTime';
 import { useLyricsStore } from '@/stores/lyricsStore';
 import {
@@ -44,6 +45,7 @@ function clamp(value: number, min: number, max: number): number {
 
 export function LyricsBand({ track, currentTime, duration, isPlaying, onSeek }: LyricsBandProps) {
   const colors = useColors();
+  const ripple = useRipple();
   const entry = useLyricsStore((s) => s.byPath[track.path]);
   const loadForTrack = useLyricsStore((s) => s.loadForTrack);
 
@@ -228,7 +230,7 @@ export function LyricsBand({ track, currentTime, duration, isPlaying, onSeek }:
       </ScrollView>
 
       {followPaused ? (
-        <Pressable
+        <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
           onPress={recenter}
           hitSlop={10}
           style={{

src/components/lyrics/LyricsLine.tsx

@@ -20,6 +20,7 @@ import { Pressable, View, type LayoutChangeEvent } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { Text } from '@/components/Text';
 import { useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { getPreferredLyricsTranslation } from '@/lyrics/presentation';
 import type { LyricsFurigana, LyricsLine as LyricsLineData } from '@/lyrics/types';
 
@@ -68,6 +69,7 @@ function buildSegments(text: string, furigana: LyricsFurigana[] | undefined): Se
 
 function LyricsLineComponent({ line, tier, baseSize, translationPriority, onSeek, onLayout }: LyricsLineProps) {
   const colors = useColors();
+  const ripple = useRipple();
   const target = TIER[tier];
   // Uniform metrics for every line (the whole point — no wrap/reflow between tiers).
   const size = baseSize;
@@ -100,7 +102,7 @@ function LyricsLineComponent({ line, tier, baseSize, translationPriority, onSeek
 
   return (
     <Animated.View onLayout={onLayout} style={[{ width: '100%', transformOrigin: 'left center' }, animatedStyle]}>
-      <Pressable onPress={onSeek} style={{ paddingVertical: 7 }}>
+      <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={onSeek} style={{ paddingVertical: 7 }}>
         <View style={{ alignItems: 'flex-start' }}>
           {hasFurigana ? (
             <View

src/components/lyrics/LyricsView.tsx

@@ -15,6 +15,7 @@ import { SeekBar } from '@/components/SeekBar';
 import { LyricsBand } from './LyricsBand';
 import { spacing, radius } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { usePlayerStore } from '@/stores/playerStore';
 import { useLyricsStore } from '@/stores/lyricsStore';
 import { getLyricsPayloadSourceLabel } from '@/lyrics/presentation';
@@ -22,6 +23,8 @@ import type { Track } from '@/types/audio';
 
 interface LyricsViewProps {
   track: Track;
+  /** False while mounted but hidden (closed now-playing overlay): pins progress, stops rAF loops. */
+  active?: boolean;
   isPlaying: boolean;
   isLoading: boolean;
   isFavorite: boolean;
@@ -36,6 +39,7 @@ interface LyricsViewProps {
 
 export function LyricsView({
   track,
+  active = true,
   isPlaying,
   isLoading,
   isFavorite,
@@ -48,10 +52,12 @@ export function LyricsView({
   onDismiss,
 }: LyricsViewProps) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   // Lyrics mode is phone-target only, so progress comes straight from the
   // player store — the 2Hz tick re-renders this takeover, not the whole screen.
-  const currentTime = usePlayerStore((s) => s.currentTime);
+  // While inactive the selector pins to 0 so hidden ticks don't re-render.
+  const currentTime = usePlayerStore((s) => (active ? s.currentTime : 0));
   const duration = usePlayerStore((s) => s.duration);
   const result = useLyricsStore((s) => s.byPath[track.path]?.result ?? null);
   const sourceLabel = result?.status === 'hit' ? getLyricsPayloadSourceLabel(result.lyrics) : null;
@@ -59,7 +65,7 @@ export function LyricsView({
   return (
     <View style={styles.root}>
       <View style={styles.strip}>
-        <Pressable onPress={onDismiss} hitSlop={12} style={styles.stripBtn} accessibilityLabel="Close player">
+        <Pressable android_ripple={ripple.bounded} onPress={onDismiss} hitSlop={12} style={styles.stripBtn} accessibilityLabel="Close player">
           <Ionicons name="chevron-down" size={24} color={colors.textSecondary} />
         </Pressable>
 
@@ -87,7 +93,7 @@ export function LyricsView({
           </View>
         </View>
 
-        <Pressable
+        <Pressable android_ripple={ripple.bounded}
           onPress={onToggleFavorite}
           hitSlop={10}
           style={styles.stripBtn}
@@ -101,7 +107,7 @@ export function LyricsView({
           />
         </Pressable>
 
-        <Pressable
+        <Pressable android_ripple={ripple.bounded}
           onPress={onExitLyrics}
           hitSlop={10}
           style={styles.stripBtn}
@@ -116,24 +122,24 @@ export function LyricsView({
         track={track}
         currentTime={currentTime}
         duration={duration}
-        isPlaying={isPlaying}
+        isPlaying={isPlaying && active}
         onSeek={onSeek}
       />
 
       <View style={styles.controls}>
         <SeekBar currentTime={currentTime} duration={duration} trackKey={track.id} onSeek={onSeek} />
         <View style={styles.transport}>
-          <Pressable onPress={onPrev} hitSlop={12} style={styles.transportBtn} accessibilityLabel="Previous">
+          <Pressable android_ripple={ripple.bounded} onPress={onPrev} hitSlop={12} style={styles.transportBtn} accessibilityLabel="Previous">
             <Ionicons name="play-skip-back" size={28} color={colors.textPrimary} />
           </Pressable>
-          <Pressable onPress={onPlayPause} hitSlop={12} style={styles.playButton} accessibilityLabel={isPlaying ? 'Pause' : 'Play'}>
+          <Pressable android_ripple={ripple.bounded} onPress={onPlayPause} hitSlop={12} style={styles.playButton} accessibilityLabel={isPlaying ? 'Pause' : 'Play'}>
             <Ionicons
               name={isLoading ? 'ellipsis-horizontal' : isPlaying ? 'pause' : 'play'}
               size={28}
               color={colors.bgPrimary}
             />
           </Pressable>
-          <Pressable onPress={onNext} hitSlop={12} style={styles.transportBtn} accessibilityLabel="Next">
+          <Pressable android_ripple={ripple.bounded} onPress={onNext} hitSlop={12} style={styles.transportBtn} accessibilityLabel="Next">
             <Ionicons name="play-skip-forward" size={28} color={colors.textPrimary} />
           </Pressable>
         </View>

src/components/onboarding/OnboardingFlow.tsx

@@ -26,6 +26,7 @@ import { formatFolderCount, formatTrackCount } from '@/components/settings/Setti
 import { radius, spacing } from '@/theme';
 import { motion } from '@/theme/motion';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import type { BaseThemeId } from '@/theme/resolve';
 import { useLibraryStore } from '@/stores/libraryStore';
 import { useThemeStore } from '@/stores/themeStore';
@@ -51,6 +52,7 @@ const WIZARD_THEME_OPTIONS: { id: BaseThemeId; title: string }[] = [
  */
 export function OnboardingFlow({ onDone }: { onDone: () => void }) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const insets = useSafeAreaInsets();
   const { width, height } = useWindowDimensions();
@@ -124,7 +126,7 @@ export function OnboardingFlow({ onDone }: { onDone: () => void }) {
           </View>
           <View style={styles.navRow}>
             {canGoBack ? (
-              <Pressable
+              <Pressable android_ripple={ripple.bounded}
                 onPress={goBack}
                 style={styles.secondaryButton}
                 accessibilityRole="button"
@@ -135,7 +137,7 @@ export function OnboardingFlow({ onDone }: { onDone: () => void }) {
                 </Text>
               </Pressable>
             ) : null}
-            <Pressable
+            <Pressable android_ripple={ripple.bounded}
               onPress={goNext}
               style={styles.primaryButton}
               accessibilityRole="button"
@@ -174,6 +176,7 @@ function WelcomeStep() {
 
 function LibraryStep() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const folders = useLibraryStore((s) => s.folders);
   const totalTrackCount = useLibraryStore((s) => s.totalTrackCount);
@@ -187,7 +190,7 @@ function LibraryStep() {
         title="Add your music"
         subtitle="Point Astra at the folders where your music lives. It scans them into your library — files on disk are never modified."
       />
-      <Pressable
+      <Pressable android_ripple={ripple.bounded}
         style={[styles.choiceButton, isScanning && styles.disabled]}
         disabled={isScanning}
         onPress={() => void addFolder()}
@@ -224,6 +227,7 @@ function LibraryStep() {
 
 function ThemeStep() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const baseTheme = useThemeStore((s) => s.baseTheme);
   const materialYouAvailable = useThemeStore((s) => s.materialYouAvailable);
@@ -248,7 +252,7 @@ function ThemeStep() {
         {options.map((option) => {
           const selected = option.id === baseTheme;
           return (
-            <Pressable
+            <Pressable android_ripple={ripple.bounded}
               key={option.id}
               onPress={() => void setBaseTheme(option.id)}
               style={[styles.themePill, selected && styles.themePillSelected]}

src/components/player/NowPlayingHost.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { NowPlayingOverlay } from '@/components/player/NowPlayingOverlay';
+import { usePlayerUiStore } from '@/stores/playerUiStore';
+import { usePlayerStore } from '@/stores/playerStore';
+
+const PREWARM_DELAY_MS = 2000;
+
+/**
+ * Mount gate for the always-mounted now-playing overlay. Nothing mounts until a
+ * track exists (cold start unchanged); shortly after playback first starts the
+ * overlay pre-warms hidden so even the FIRST open is a pure slide, no mount cost.
+ */
+export function NowPlayingHost() {
+  const everOpened = usePlayerUiStore((s) => s.everOpened);
+  const hasTrack = usePlayerStore((s) => Boolean(s.currentTrack));
+
+  useEffect(() => {
+    if (everOpened || !hasTrack) return;
+    const timer = setTimeout(() => usePlayerUiStore.getState().prewarm(), PREWARM_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, [everOpened, hasTrack]);
+
+  if (!everOpened) return null;
+  return <NowPlayingOverlay />;
+}

src/components/player/NowPlayingOverlay.tsx

@@ -1,5 +1,6 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
+  BackHandler,
   View,
   Pressable,
   StyleSheet,
@@ -11,7 +12,6 @@ import { useRouter } from 'expo-router';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
-  SlideInDown,
   runOnJS,
   useAnimatedStyle,
   useSharedValue,
@@ -37,6 +37,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { WIDE_MIN_WIDTH, isWideWindow } from '@/theme/adaptive';
 import { motion } from '@/theme/motion';
 import { resolveNavigationArtist } from '@/library/artistGrouping';
@@ -46,6 +47,7 @@ import { useDesktopRemoteStore } from '@/stores/desktopRemoteStore';
 import { usePlayerStore } from '@/stores/playerStore';
 import { usePlaylistStore } from '@/stores/playlistStore';
 import { usePlaybackTargetStore } from '@/stores/playbackTargetStore';
+import { usePlayerUiStore } from '@/stores/playerUiStore';
 import { useSettingsStore } from '@/stores/settingsStore';
 import type { DbTrack } from '@/types/library';
 import {
@@ -266,12 +268,14 @@ function getNowPlayingLayout(
   };
 }
 
-export default function NowPlayingScreen() {
+export function NowPlayingOverlay() {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   const router = useRouter();
   const insets = useSafeAreaInsets();
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const playerOpen = usePlayerUiStore((s) => s.playerOpen);
   const [queueOpen, setQueueOpen] = useState(false);
   // Stable identity: QueueTray is memo'd, so a fresh arrow here would defeat it.
   const closeQueue = useCallback(() => setQueueOpen(false), []);
@@ -353,7 +357,9 @@ export default function NowPlayingScreen() {
 
   const navigateToArtist = () => {
     if (!artistName) return;
-    router.dismissTo({
+    // Slide the overlay away while the library detail loads underneath.
+    dismissSheet();
+    router.navigate({
       pathname: '/library/artist/[name]',
       params: { name: artistName },
     });
@@ -361,7 +367,8 @@ export default function NowPlayingScreen() {
 
   const navigateToAlbum = () => {
     if (!albumKey) return;
-    router.dismissTo({
+    dismissSheet();
+    router.navigate({
       pathname: '/library/album/[key]',
       params: { key: albumKey },
     });
@@ -411,18 +418,16 @@ export default function NowPlayingScreen() {
     });
   }
 
-  // Swipe down to minimize. The stack transition is disabled for this route, so
+  // The overlay stays mounted; open/close is this one shared value sliding the
-  // the sheet owns one continuous enter/exit animation instead of handing off to
+  // sheet on the UI thread. Starts off-screen so a pre-warmed mount never flashes.
-  // a second native modal animation after release.
+  const translateY = useSharedValue(windowHeight);
-  const translateY = useSharedValue(0);
   const menuProgress = useSharedValue(0);
-  // Belt-and-suspenders for deep-link entry (widget/notification → now-playing with no
+  // Closing is a store toggle, not navigation. Reset the inner layers so a
-  // history): `(tabs)` is the stack anchor (see root _layout unstable_settings), so back()
+  // reopen starts from the plain player (parity with the old per-open mount).
-  // returns there; if somehow there's nothing to go back to, replace to the tabs home so
-  // dismissing can never land on a blank screen.
   const dismiss = () => {
-    if (router.canGoBack()) router.back();
+    setMenuOpen(false);
-    else router.replace('/');
+    setQueueOpen(false);
+    usePlayerUiStore.getState().closePlayer();
   };
   const finishCloseMenu = () => setMenuOpen(false);
 
@@ -480,6 +485,39 @@ export default function NowPlayingScreen() {
       }
     });
 
+  // Open animation (close normally animates via dismissSheet's spring first;
+  // the else branch covers direct closePlayer calls and keeps the resting
+  // offset pinned to the current window height across rotation). NOTE: this
+  // effect must stay BELOW every direct `translateY.value` write — the react
+  // compiler forbids mutations after an effect that depends on the value.
+  useEffect(() => {
+    if (playerOpen) {
+      translateY.value = withTiming(0, { duration: 240 });
+    } else {
+      translateY.value = withTiming(windowHeight, { duration: 200 });
+    }
+  }, [playerOpen, windowHeight, translateY]);
+
+  // Hardware back, innermost layer first: menu → queue tray → player. Registered
+  // only while open, so it sits above the focused screen's own handlers (LIFO)
+  // — e.g. the library-detail back interceptor underneath.
+  useEffect(() => {
+    if (!playerOpen) return;
+    const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+      if (menuOpen) {
+        closeMenu();
+        return true;
+      }
+      if (queueOpen) {
+        setQueueOpen(false);
+        return true;
+      }
+      dismissSheet();
+      return true;
+    });
+    return () => sub.remove();
+  });
+
   const contentStyle = useAnimatedStyle(() => ({
     transform: [{ translateY: translateY.value }],
   }));
@@ -493,10 +531,9 @@ export default function NowPlayingScreen() {
   }));
 
   return (
-    <View style={styles.backdrop}>
+    <View style={StyleSheet.absoluteFill} pointerEvents={playerOpen ? 'auto' : 'none'}>
       <GestureDetector gesture={pan}>
         <Animated.View
-          entering={SlideInDown.duration(240)}
           style={[
             styles.content,
             contentStyle,
@@ -520,7 +557,7 @@ export default function NowPlayingScreen() {
             {!lyricsMode && (
               <View style={styles.header}>
                 <View style={styles.headerSide}>
-                  <Pressable style={styles.headerBtn} onPress={() => dismissSheet()} hitSlop={12}>
+                  <Pressable style={styles.headerBtn} android_ripple={ripple.icon(22)} onPress={() => dismissSheet()} hitSlop={12}>
                     <Ionicons name="chevron-down" size={26} color={colors.textSecondary} />
                   </Pressable>
                 </View>
@@ -535,7 +572,7 @@ export default function NowPlayingScreen() {
                 <View style={[styles.headerSide, styles.headerActions]}>
                   {!isDesktopTarget && track ? (
                     <Pressable
-                      style={styles.headerBtn}
+                      style={styles.headerBtn} android_ripple={ripple.icon(22)}
                       onPress={() => void setLyricsVisible(!lyricsVisible)}
                       hitSlop={12}
                       accessibilityLabel={lyricsVisible ? 'Hide lyrics' : 'Show lyrics'}
@@ -549,7 +586,7 @@ export default function NowPlayingScreen() {
                     </Pressable>
                   ) : null}
                   <Pressable
-                    style={styles.headerBtn}
+                    style={styles.headerBtn} android_ripple={ripple.icon(22)}
                     onPress={openMenu}
                     hitSlop={12}
                     accessibilityLabel="More options"
@@ -563,6 +600,7 @@ export default function NowPlayingScreen() {
             {lyricsMode && track ? (
               <LyricsView
                 track={track}
+                active={playerOpen}
                 isPlaying={isPlaying}
                 isLoading={isLoading}
                 isFavorite={isFavorite}
@@ -634,7 +672,7 @@ export default function NowPlayingScreen() {
                       </View>
                       <Pressable
                         hitSlop={10}
-                        style={styles.inlineActionBtn}
+                        style={styles.inlineActionBtn} android_ripple={ripple.icon(22)}
                         onPress={() => void sendDesktopControl('toggle-favorite')}
                         accessibilityLabel={activeTrack.isFavorite ? 'Remove from favorites' : 'Add to favorites'}
                         accessibilityState={{ selected: activeTrack.isFavorite }}
@@ -657,6 +695,7 @@ export default function NowPlayingScreen() {
                     <View style={[styles.transport, { marginTop: layout.controlsGap }]}>
                       <Pressable
                         hitSlop={10}
+                        android_ripple={ripple.icon(24)}
                         style={[
                           styles.transportSideBtn,
                           desktopSnapshot?.shuffle === undefined && styles.controlDisabled,
@@ -675,7 +714,7 @@ export default function NowPlayingScreen() {
                       <Pressable
                         onPress={() => void sendDesktopControl('previous')}
                         hitSlop={12}
-                        style={styles.transportMainBtn}
+                        style={styles.transportMainBtn} android_ripple={ripple.icon(26)}
                         accessibilityLabel="Previous"
                       >
                         <Ionicons
@@ -687,7 +726,7 @@ export default function NowPlayingScreen() {
                       <Pressable
                         onPress={() => void sendDesktopControl(isPlaying ? 'pause' : 'play')}
                         hitSlop={12}
-                        style={styles.playButton}
+                        style={styles.playButton} android_ripple={ripple.onAccent()}
                         accessibilityLabel={isPlaying ? 'Pause desktop' : 'Play desktop'}
                       >
                         <Ionicons
@@ -699,7 +738,7 @@ export default function NowPlayingScreen() {
                       <Pressable
                         onPress={() => void sendDesktopControl('next')}
                         hitSlop={12}
-                        style={styles.transportMainBtn}
+                        style={styles.transportMainBtn} android_ripple={ripple.icon(26)}
                         accessibilityLabel="Next"
                       >
                         <Ionicons
@@ -710,6 +749,7 @@ export default function NowPlayingScreen() {
                       </Pressable>
                       <Pressable
                         hitSlop={10}
+                        android_ripple={ripple.icon(24)}
                         style={[
                           styles.transportSideBtn,
                           desktopSnapshot?.repeat === undefined && styles.controlDisabled,
@@ -762,7 +802,7 @@ export default function NowPlayingScreen() {
                       <View style={styles.subActions}>
                         <Pressable
                           hitSlop={10}
-                          style={styles.subBtn}
+                          style={styles.subBtn} android_ripple={ripple.icon(20)}
                           onPress={() => void reconnectDesktop()}
                           accessibilityLabel="Reconnect to desktop"
                         >
@@ -771,7 +811,7 @@ export default function NowPlayingScreen() {
                         {desktopQueue ? (
                           <Pressable
                             hitSlop={10}
-                            style={styles.subBtn}
+                            style={styles.subBtn} android_ripple={ripple.icon(20)}
                             onPress={() => setQueueOpen(true)}
                             accessibilityLabel="Desktop queue"
                           >
@@ -794,12 +834,16 @@ export default function NowPlayingScreen() {
                       : 'Pair with Astra Desktop to control it here.'}
                   </Text>
                   <Pressable
-                    style={styles.emptyAction}
+                    style={styles.emptyAction} android_ripple={ripple.bounded}
-                    onPress={() =>
+                    onPress={() => {
-                      desktopConnection
+                      if (desktopConnection) {
-                        ? void reconnectDesktop()
+                        void reconnectDesktop();
-                        : router.push('/desktop-remote' as never)
+                        return;
-                    }
+                      }
+                      // Route change happens under the overlay; slide it away.
+                      dismissSheet();
+                      router.push('/desktop-remote' as never);
+                    }}
                   >
                     <Text variant="label" color={colors.accentTextStrong}>
                       {desktopConnection ? 'Reconnect' : 'Pair desktop'}
@@ -871,7 +915,7 @@ export default function NowPlayingScreen() {
                         showChrome={false}
                         mode={scopeMode}
                         edgeFade
-                        paused={queueOpen}
+                        paused={!playerOpen || queueOpen}
                       />
                       <Pressable
                         onPress={() =>
@@ -880,7 +924,7 @@ export default function NowPlayingScreen() {
                             .setScopeMode(scopeMode === 'spectrum' ? 'scope' : 'spectrum')
                         }
                         hitSlop={12}
-                        style={styles.scopeSwap}
+                        style={styles.scopeSwap} android_ripple={ripple.icon(24)}
                         accessibilityRole="button"
                         accessibilityLabel={`Showing ${
                           scopeMode === 'spectrum' ? 'spectrum' : 'oscilloscope'
@@ -916,7 +960,7 @@ export default function NowPlayingScreen() {
                         <Pressable
                           onPress={navigateToArtist}
                           hitSlop={6}
-                          style={styles.artistButton}
+                          style={styles.artistButton} android_ripple={ripple.bounded}
                           accessibilityRole="link"
                           accessibilityLabel={`View artist ${track.artist}`}
                         >
@@ -928,7 +972,7 @@ export default function NowPlayingScreen() {
                     </View>
                     <Pressable
                       hitSlop={10}
-                      style={styles.inlineActionBtn}
+                      style={styles.inlineActionBtn} android_ripple={ripple.icon(22)}
                       onPress={() => void toggleFavorite(track)}
                       accessibilityLabel={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
                       accessibilityState={{ selected: isFavorite }}
@@ -942,6 +986,7 @@ export default function NowPlayingScreen() {
                   </View>
 
                   <WaveformSeekBar
+                    active={playerOpen}
                     height={layout.waveformHeight}
                     touchPadding={WAVEFORM_TOUCH_PADDING}
                     trackPath={track.path}
@@ -951,7 +996,7 @@ export default function NowPlayingScreen() {
                   <View style={[styles.transport, { marginTop: layout.controlsGap }]}>
                     <Pressable
                       hitSlop={10}
-                      style={styles.transportSideBtn}
+                      style={styles.transportSideBtn} android_ripple={ripple.icon(24)}
                       onPress={() => void toggleShuffle()}
                       accessibilityLabel="Shuffle"
                       accessibilityState={{ selected: shuffle }}
@@ -965,7 +1010,7 @@ export default function NowPlayingScreen() {
                     <Pressable
                       onPress={skipToPrevious}
                       hitSlop={12}
-                      style={styles.transportMainBtn}
+                      style={styles.transportMainBtn} android_ripple={ripple.icon(26)}
                     >
                       <Ionicons
                         name="play-skip-back"
@@ -973,7 +1018,7 @@ export default function NowPlayingScreen() {
                         color={colors.textPrimary}
                       />
                     </Pressable>
-                    <Pressable onPress={togglePlay} hitSlop={12} style={styles.playButton}>
+                    <Pressable onPress={togglePlay} hitSlop={12} style={styles.playButton} android_ripple={ripple.onAccent()}>
                       <Ionicons
                         name={isLoading ? 'ellipsis-horizontal' : isPlaying ? 'pause' : 'play'}
                         size={PLAY_ICON_SIZE}
@@ -983,7 +1028,7 @@ export default function NowPlayingScreen() {
                     <Pressable
                       onPress={skipToNext}
                       hitSlop={12}
-                      style={styles.transportMainBtn}
+                      style={styles.transportMainBtn} android_ripple={ripple.icon(26)}
                     >
                       <Ionicons
                         name="play-skip-forward"
@@ -993,7 +1038,7 @@ export default function NowPlayingScreen() {
                     </Pressable>
                     <Pressable
                       hitSlop={10}
-                      style={styles.transportSideBtn}
+                      style={styles.transportSideBtn} android_ripple={ripple.icon(24)}
                       onPress={() => void cycleRepeat()}
                       accessibilityLabel="Repeat"
                       accessibilityState={{ selected: repeat !== 'none' }}
@@ -1022,7 +1067,7 @@ export default function NowPlayingScreen() {
                     <View style={styles.subActions}>
                       <Pressable
                         hitSlop={10}
-                        style={styles.subBtn}
+                        style={styles.subBtn} android_ripple={ripple.icon(20)}
                         onPress={() => void setScopeStageVisible(!scopeStageVisible)}
                         accessibilityLabel={scopeStageVisible ? 'Hide visualizer' : 'Show visualizer'}
                         accessibilityState={{ selected: scopeStageVisible }}
@@ -1035,7 +1080,7 @@ export default function NowPlayingScreen() {
                       </Pressable>
                       <Pressable
                         hitSlop={10}
-                        style={styles.subBtn}
+                        style={styles.subBtn} android_ripple={ripple.icon(20)}
                         onPress={() => setQueueOpen(true)}
                         accessibilityLabel="Queue"
                       >
@@ -1077,7 +1122,8 @@ export default function NowPlayingScreen() {
             {menuItems.map((item) => (
               <Pressable
                 key={item.key}
-                style={({ pressed }) => [styles.menuItem, pressed && styles.menuItemPressed]}
+                android_ripple={ripple.bounded}
+                style={styles.menuItem}
                 onPress={item.onPress}
                 accessibilityRole="button"
               >
@@ -1111,10 +1157,6 @@ export default function NowPlayingScreen() {
 }
 
 const useStyles = createThemedStyles((colors) => ({
-  backdrop: {
-    flex: 1,
-    backgroundColor: 'transparent',
-  },
   content: {
     flex: 1,
     backgroundColor: colors.bgPrimary,
@@ -1196,9 +1238,6 @@ const useStyles = createThemedStyles((colors) => ({
     gap: spacing.md,
     paddingHorizontal: spacing.md,
   },
-  menuItemPressed: {
-    opacity: 0.6,
-  },
   menuItemLabel: {
     flex: 1,
   },

src/components/queue/QueueTray.tsx

@@ -43,6 +43,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { motion } from '@/theme/motion';
 import { artworkThumbFromSource } from '@/library/artwork';
 import { dragArmHaptic, tickHaptic } from '@/lib/haptics';
@@ -155,6 +156,7 @@ interface QueueTrayProps {
 export const QueueTray = memo(function QueueTray({ onClose }: QueueTrayProps) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   const insets = useSafeAreaInsets();
   const { height: windowHeight } = useWindowDimensions();
   const snapPoints = useMemo(() => ['58%', '100%'], []);
@@ -595,7 +597,7 @@ export const QueueTray = memo(function QueueTray({ onClose }: QueueTrayProps) {
           </Text>
         </View>
         {canEdit ? (
-          <Pressable
+          <Pressable android_ripple={ripple.bounded}
             hitSlop={10}
             onPress={() => (editMode ? exitEdit() : setEditMode(true))}
             accessibilityRole="button"
@@ -654,7 +656,8 @@ export const QueueTray = memo(function QueueTray({ onClose }: QueueTrayProps) {
       {editMode && selectedCount > 0 ? (
         <View style={[styles.actionBar, { paddingBottom: insets.bottom + spacing.sm }]}>
           <Pressable
-            style={({ pressed }) => [styles.actionBtn, pressed && styles.actionBtnPressed]}
+            android_ripple={ripple.bounded}
+            style={styles.actionBtn}
             onPress={groupPlayNext}
             accessibilityRole="button"
             accessibilityLabel={`Play ${selectedCount} selected songs next`}
@@ -665,7 +668,8 @@ export const QueueTray = memo(function QueueTray({ onClose }: QueueTrayProps) {
             </Text>
           </Pressable>
           <Pressable
-            style={({ pressed }) => [styles.actionBtn, pressed && styles.actionBtnPressed]}
+            android_ripple={ripple.bounded}
+            style={styles.actionBtn}
             onPress={groupRemove}
             accessibilityRole="button"
             accessibilityLabel={`Remove ${selectedCount} selected songs from queue`}
@@ -751,6 +755,7 @@ const QueueRow = memo(function QueueRow({
 }: QueueRowProps) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   const entryKey = entry.key;
   const title = trackTitle(entry.track);
   const artist = trackArtist(entry.track);
@@ -848,7 +853,7 @@ const QueueRow = memo(function QueueRow({
   const rowContent = (
     <Animated.View style={[styles.row, rowSurfaceStyle]}>
       {editMode ? (
-        <Pressable
+        <Pressable android_ripple={ripple.bounded}
           hitSlop={8}
           onPress={onToggleSelect}
           style={styles.checkbox}
@@ -891,7 +896,8 @@ const QueueRow = memo(function QueueRow({
       <Animated.View style={[styles.rowOuter, rowMotionStyle]}>
         <Pressable
           onPress={onJump}
-          style={({ pressed }) => [styles.rowPressable, pressed && styles.rowPressed]}
+          android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
+          style={styles.rowPressable}
           accessibilityRole="button"
           accessibilityLabel={`Play ${title}`}
           accessibilityHint="Opens this song in the queue"
@@ -907,7 +913,8 @@ const QueueRow = memo(function QueueRow({
       <Animated.View style={[styles.rowOuter, rowMotionStyle]}>
         <Pressable
           onPress={onToggleSelect}
-          style={({ pressed }) => [styles.rowPressable, pressed && styles.rowPressed]}
+          android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
+          style={styles.rowPressable}
           accessibilityRole="button"
           accessibilityState={{ selected }}
           accessibilityLabel={`${selected ? 'Deselect' : 'Select'} ${title}`}
@@ -927,7 +934,8 @@ const QueueRow = memo(function QueueRow({
       >
         <Pressable
           onPress={onJump}
-          style={({ pressed }) => [styles.rowPressable, pressed && styles.rowPressed]}
+          android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
+          style={styles.rowPressable}
           accessibilityRole="button"
           accessibilityLabel={`Play ${title}`}
           accessibilityHint="Opens this song in the queue"
@@ -1023,9 +1031,6 @@ const useStyles = createThemedStyles((colors) => ({
   rowPressable: {
     height: QUEUE_ROW_HEIGHT,
   },
-  rowPressed: {
-    opacity: 0.72,
-  },
   row: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -1090,9 +1095,6 @@ const useStyles = createThemedStyles((colors) => ({
     gap: spacing.sm,
     paddingVertical: spacing.md,
   },
-  actionBtnPressed: {
-    opacity: 0.7,
-  },
   actionText: {
     color: colors.accent,
   },

src/components/queue/RemoteQueueSheet.tsx

@@ -17,6 +17,7 @@ import { FlashList, type ListRenderItemInfo } from '@shopify/flash-list';
 import { Text } from '@/components/Text';
 import { radius, spacing } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { formatDuration } from '@/lib/format';
 import { useDesktopRemoteStore } from '@/stores/desktopRemoteStore';
 import type { DesktopRemoteQueueItem } from '@/types/desktopRemote';
@@ -28,6 +29,7 @@ interface RemoteQueueSheetProps {
 export function RemoteQueueSheet({ onClose }: RemoteQueueSheetProps) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   const queue = useDesktopRemoteStore((s) => s.queue);
   const snapPoints = useMemo(() => ['58%', '100%'], []);
   const renderFlashListScrollComponent = useBottomSheetScrollableCreator();
@@ -66,7 +68,8 @@ export function RemoteQueueSheet({ onClose }: RemoteQueueSheetProps) {
   const renderItem = useCallback(
     ({ item }: ListRenderItemInfo<DesktopRemoteQueueItem>) => (
       <Pressable
-        style={({ pressed }) => [styles.row, pressed && !item.isCurrent && styles.rowPressed]}
+        android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
+        style={styles.row}
         onPress={() => playItem(item)}
         disabled={item.isCurrent}
         accessibilityRole="button"
@@ -95,7 +98,7 @@ export function RemoteQueueSheet({ onClose }: RemoteQueueSheetProps) {
         ) : null}
       </Pressable>
     ),
-    [playItem, colors, styles]
+    [playItem, colors, styles, ripple]
   );
 
   return (
@@ -159,9 +162,6 @@ const useStyles = createThemedStyles((colors) => ({
     alignItems: 'center',
     gap: spacing.md,
   },
-  rowPressed: {
-    opacity: 0.6,
-  },
   rowText: {
     flex: 1,
     minWidth: 0,

src/components/search/QuickSearchOverlay.tsx

@@ -28,6 +28,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import { rgbaFromHex } from '@/theme/colorUtils';
 import { enqueueTop, playTracks } from '@/audio/playbackController';
 import { dbTrackToTrack } from '@/library/trackAdapter';
@@ -483,6 +484,7 @@ function ResultRow({
   onQueueTrack: (track: DbTrack) => void;
 }) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const isTrack = result.kind === 'track';
   const isShowMode = result.kind === 'show-all' || result.kind === 'show-top';
@@ -494,7 +496,7 @@ function ResultRow({
   };
 
   return (
-    <Pressable
+    <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
       style={[styles.resultRow, active && styles.resultRowActive, isShowMode && styles.showModeRow]}
       onPress={onPress}
       accessibilityRole="button"
@@ -509,7 +511,7 @@ function ResultRow({
         </Text>
       </View>
       {isTrack ? (
-        <Pressable
+        <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
           style={styles.queueButton}
           onPress={queueTrack}
           hitSlop={8}
@@ -535,6 +537,7 @@ function QuickSearchPanel({
   onClose: () => void;
 }) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const router = useRouter();
   const insets = useSafeAreaInsets();
@@ -1005,7 +1008,7 @@ function QuickSearchPanel({
           style={styles.input}
         />
         {query.length > 0 ? (
-          <Pressable
+          <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
             onPress={() => updateQuery('')}
             hitSlop={8}
             accessibilityRole="button"
@@ -1014,7 +1017,7 @@ function QuickSearchPanel({
             <Ionicons name="close-circle" size={18} color={colors.textTertiary} />
           </Pressable>
         ) : null}
-        <Pressable onPress={close} hitSlop={8} accessibilityRole="button" accessibilityLabel="Close search">
+        <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} onPress={close} hitSlop={8} accessibilityRole="button" accessibilityLabel="Close search">
           <Ionicons name="close" size={20} color={colors.textSecondary} />
         </Pressable>
       </View>
@@ -1066,6 +1069,7 @@ function QuickSearchPanel({
 
 export function QuickSearchOverlay() {
   const styles = useStyles();
+  const ripple = useRipple();
   const isOpen = useSearchStore((s) => s.isQuickSearchOpen);
   const initialQuery = useSearchStore((s) => s.initialQuery);
   const openVersion = useSearchStore((s) => s.openVersion);
@@ -1085,7 +1089,7 @@ export function QuickSearchOverlay() {
       onRequestClose={close}
     >
       <View style={styles.modalRoot}>
-        <Pressable style={StyleSheet.absoluteFill} onPress={close} accessibilityRole="button" />
+        <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={StyleSheet.absoluteFill} onPress={close} accessibilityRole="button" />
         {isOpen ? (
           <QuickSearchPanel key={openVersion} initialQuery={initialQuery} onClose={close} />
         ) : null}

src/components/settings/AccentSwatchRow.tsx

@@ -4,6 +4,7 @@ import { Text } from '@/components/Text';
 import { spacing } from '@/theme';
 import { ACCENTS, ACCENT_IDS, type AccentId } from '@/theme/accents';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 
 const SWATCH_SIZE = 36;
 
@@ -15,6 +16,7 @@ interface AccentSwatchRowProps {
 /** Circular accent swatches; the selected one gets a ring + checkmark. */
 export function AccentSwatchRow({ value, onChange }: AccentSwatchRowProps) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   return (
     <View style={styles.wrap}>
@@ -22,7 +24,7 @@ export function AccentSwatchRow({ value, onChange }: AccentSwatchRowProps) {
         {ACCENT_IDS.map((id) => {
           const selected = id === value;
           return (
-            <Pressable
+            <Pressable android_ripple={ripple.bounded}
               key={id}
               onPress={() => onChange(id)}
               accessibilityRole="radio"

src/components/settings/SettingsPanels.tsx

@@ -16,6 +16,7 @@ import {
 } from '@/components/settings/SettingsSectionScaffold';
 import { radius, spacing } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 import type { ReplayGainMode } from '@/audio/normalization';
 import type { ArtistGroupingMode } from '@/library/artistGrouping';
 import type { BaseThemeId, PreferredDark } from '@/theme/resolve';
@@ -81,6 +82,7 @@ export function themeOptionTitle(id: BaseThemeId): string {
 
 export function AppearanceSettingsPanel() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const baseTheme = useThemeStore((s) => s.baseTheme);
   const preferredDark = useThemeStore((s) => s.preferredDark);
@@ -102,7 +104,7 @@ export function AppearanceSettingsPanel() {
         {options.map((option) => {
           const selected = option.id === baseTheme;
           return (
-            <Pressable
+            <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
               key={option.id}
               style={[styles.option, selected && styles.optionSelected]}
               onPress={() => void setBaseTheme(option.id)}
@@ -159,6 +161,7 @@ function LibraryFolderSettingsRow({
   onRemove: (folder: FolderWithCount) => void;
 }) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   return (
     <View style={styles.folderSettingsRow}>
@@ -181,7 +184,7 @@ function LibraryFolderSettingsRow({
             : 'Access lost. Remove and add again.'}
         </Text>
       </View>
-      <Pressable
+      <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
         hitSlop={8}
         disabled={disabled}
         onPress={() => onRemove(folder)}
@@ -197,6 +200,7 @@ function LibraryFolderSettingsRow({
 
 function LibraryFoldersSettings() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const folders = useLibraryStore((s) => s.folders);
   const isScanning = useLibraryStore((s) => s.isScanning);
@@ -230,7 +234,7 @@ function LibraryFoldersSettings() {
               : `${formatFolderCount(folders.length)} / ${formatTrackCount(totalTracks)}`}
           </Text>
         </View>
-        <Pressable
+        <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
           style={[styles.folderPrimaryAction, isScanning && styles.actionDisabled]}
           disabled={isScanning}
           onPress={() => void addFolder()}
@@ -245,7 +249,7 @@ function LibraryFoldersSettings() {
 
       {folders.length > 0 ? (
         <View style={styles.folderSettingsActions}>
-          <Pressable
+          <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
             style={[styles.folderSecondaryAction, isScanning && styles.actionDisabled]}
             disabled={isScanning}
             onPress={() => void rescan()}
@@ -291,6 +295,7 @@ function LibraryFoldersSettings() {
 
 export function LibrarySettingsPanel() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const groupingMode = useSettingsStore((s) => s.artistGroupingMode);
   const setArtistGroupingMode = useSettingsStore((s) => s.setArtistGroupingMode);
@@ -314,7 +319,7 @@ export function LibrarySettingsPanel() {
         {ARTIST_GROUPING_OPTIONS.map((option) => {
           const selected = option.mode === groupingMode;
           return (
-            <Pressable
+            <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
               key={option.mode}
               style={[styles.option, selected && styles.optionSelected]}
               onPress={() => void setArtistGroupingMode(option.mode)}
@@ -353,6 +358,7 @@ export function LibrarySettingsPanel() {
 
 export function AudioSettingsPanel() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const normalizationEnabled = useAudioSettingsStore((s) => s.normalizationEnabled);
   const normalizationTargetLufs = useAudioSettingsStore((s) => s.normalizationTargetLufs);
@@ -400,7 +406,7 @@ export function AudioSettingsPanel() {
             {REPLAYGAIN_MODES.map((m) => {
               const selected = m.mode === replayGainMode;
               return (
-                <Pressable
+                <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
                   key={m.mode}
                   style={[styles.modePill, selected && styles.modePillSelected]}
                   onPress={() => void setReplayGainMode(m.mode)}

src/components/settings/SettingsSectionScaffold.tsx

@@ -14,6 +14,7 @@ import { Screen } from '@/components/Screen';
 import { Text } from '@/components/Text';
 import { radius, spacing } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 
 export type SettingsIconName = keyof typeof Ionicons.glyphMap;
 
@@ -26,12 +27,18 @@ export function SettingsSectionScreen({
 }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   const router = useRouter();
 
   return (
     <Screen>
       <View style={styles.header}>
-        <Pressable style={styles.back} onPress={() => router.back()} hitSlop={8}>
+        <Pressable
+          android_ripple={ripple.bounded}
+          style={styles.back}
+          onPress={() => router.back()}
+          hitSlop={8}
+        >
           <Ionicons name="chevron-back" size={22} color={colors.textSecondary} />
           <Text variant="body" color={colors.textSecondary}>
             Settings
@@ -98,8 +105,9 @@ export function SettingsNavRow({
 }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   return (
-    <Pressable style={styles.row} onPress={onPress} accessibilityRole="button">
+    <Pressable android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY} style={styles.row} onPress={onPress} accessibilityRole="button">
       <View style={styles.rowIcon}>
         <Ionicons name={icon} size={20} color={colors.accent} />
       </View>

src/components/sheets/ActionSheet.tsx

@@ -12,6 +12,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 
 export interface ActionSheetItem {
   key: string;
@@ -39,6 +40,7 @@ export function ActionSheet({
 }) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   const insets = useSafeAreaInsets();
 
   return (
@@ -60,7 +62,8 @@ export function ActionSheet({
           {items.map((item) => (
             <Pressable
               key={item.key}
-              style={({ pressed }) => [styles.item, pressed && styles.itemPressed]}
+              android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
+              style={styles.item}
               onPress={item.onPress}
               accessibilityRole="button"
             >
@@ -122,9 +125,6 @@ const useStyles = createThemedStyles((colors) => ({
     gap: spacing.md,
     paddingVertical: spacing.md,
   },
-  itemPressed: {
-    opacity: 0.6,
-  },
   itemLabel: {
     flex: 1,
   },

src/components/sheets/AppSheet.tsx

@@ -16,6 +16,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { SCROLL_PRESS_DELAY, useRipple } from '@/theme/ripple';
 
 export function AppSheet({ onClose, children }: { onClose: () => void; children: ReactNode }) {
   const styles = useStyles();
@@ -95,12 +96,14 @@ export function AppSheetItem({
 }: AppSheetItemProps) {
   const styles = useStyles();
   const colors = useColors();
+  const ripple = useRipple();
   const tint = destructive ? colors.warning : selected ? colors.accentTextStrong : colors.textPrimary;
 
   return (
     <View style={styles.itemRow}>
       <Pressable
-        style={({ pressed }) => [styles.item, pressed && styles.itemPressed]}
+        android_ripple={ripple.bounded} unstable_pressDelay={SCROLL_PRESS_DELAY}
+        style={styles.item}
         onPress={onPress}
         accessibilityRole="button"
       >
@@ -156,9 +159,6 @@ const useStyles = createThemedStyles((colors) => ({
     gap: spacing.md,
     paddingVertical: spacing.md,
   },
-  itemPressed: {
-    opacity: 0.6,
-  },
   itemLabel: {
     flex: 1,
   },

src/components/sheets/PlaylistPickerSheet.tsx

@@ -17,6 +17,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { usePlaylistStore } from '@/stores/playlistStore';
 import type { DbTrack } from '@/types/library';
 
@@ -41,6 +42,7 @@ export function PlaylistPickerSheet({
   onAdded,
 }: PlaylistPickerSheetProps) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const [step, setStep] = useState<'pick' | 'create'>('pick');
   const [playlistName, setPlaylistName] = useState('');
@@ -82,12 +84,12 @@ export function PlaylistPickerSheet({
           selectionColor={colors.accent}
         />
         <View style={styles.actions}>
-          <Pressable style={[styles.btn, styles.cancel]} onPress={() => setStep('pick')}>
+          <Pressable android_ripple={ripple.bounded} style={[styles.btn, styles.cancel]} onPress={() => setStep('pick')}>
             <Text variant="label" color={colors.textSecondary}>
               Back
             </Text>
           </Pressable>
-          <Pressable
+          <Pressable android_ripple={ripple.bounded}
             style={[styles.btn, styles.create, !trimmedPlaylistName && styles.createDisabled]}
             disabled={!trimmedPlaylistName}
             onPress={addToNewPlaylist}

src/components/sheets/TextPromptModal.tsx

@@ -14,6 +14,7 @@ import {
   spacing,
 } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 
 interface TextPromptModalProps {
   visible: boolean;
@@ -41,6 +42,7 @@ function TextPromptModalInner({
   onClose,
 }: TextPromptModalProps) {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const [value, setValue] = useState(initialValue);
   const trimmed = value.trim();
@@ -69,12 +71,12 @@ function TextPromptModalInner({
             selectionColor={colors.accent}
           />
           <View style={styles.actions}>
-            <Pressable style={styles.action} onPress={onClose} accessibilityRole="button">
+            <Pressable android_ripple={ripple.bounded} style={styles.action} onPress={onClose} accessibilityRole="button">
               <Text variant="body" color={colors.textSecondary}>
                 Cancel
               </Text>
             </Pressable>
-            <Pressable
+            <Pressable android_ripple={ripple.bounded}
               style={[styles.action, !trimmed && styles.actionDisabled]}
               disabled={!trimmed}
               onPress={submit}

src/components/sync/SyncConflictPrompt.tsx

@@ -13,6 +13,7 @@ import { router, usePathname } from 'expo-router';
 import { Text } from '@/components/Text';
 import { radius, spacing } from '@/theme';
 import { createThemedStyles, useColors } from '@/theme/themed';
+import { useRipple } from '@/theme/ripple';
 import { formatRelativeTime } from '@/lib/format';
 import {
   buildSyncConflictResolutionPreview,
@@ -64,6 +65,7 @@ function diffLine(desktop: SyncPlaylistSnapshot, phone: SyncPlaylistSnapshot): s
 
 export function SyncConflictPrompt() {
   const styles = useStyles();
+  const ripple = useRipple();
   const colors = useColors();
   const conflicts = useDesktopSyncStore((s) => s.conflicts);
   const status = useDesktopSyncStore((s) => s.status);
@@ -158,7 +160,7 @@ export function SyncConflictPrompt() {
             </Text>
             <View style={styles.choiceList}>
               {options.map((resolution) => (
-                <Pressable
+                <Pressable android_ripple={ripple.bounded}
                   key={resolution}
                   style={[
                     styles.choiceRow,
@@ -183,7 +185,7 @@ export function SyncConflictPrompt() {
               </Text>
             </View>
             {count > 1 ? (
-              <Pressable onPress={review} style={styles.reviewLink}>
+              <Pressable android_ripple={ripple.bounded} onPress={review} style={styles.reviewLink}>
                 <Text variant="caption" color={colors.accent}>
                   Review all {count} conflicts
                 </Text>
@@ -191,12 +193,12 @@ export function SyncConflictPrompt() {
             ) : null}
           </ScrollView>
           <View style={styles.actions}>
-            <Pressable style={styles.secondaryButton} onPress={dismissConflictPrompt}>
+            <Pressable android_ripple={ripple.bounded} style={styles.secondaryButton} onPress={dismissConflictPrompt}>
               <Text variant="body" color={colors.textSecondary}>
                 Not now
               </Text>
             </Pressable>
-            <Pressable
+            <Pressable android_ripple={ripple.bounded}
               style={[styles.primaryButton, (!selectedResolution || busy) && styles.disabled]}
               disabled={!selectedResolution || busy}
               onPress={confirm}

src/stores/playerUiStore.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+
+/**
+ * Now-playing overlay gate. The player is an always-mounted overlay above the
+ * navigator (not a route): `everOpened` latches the first mount so cold start
+ * pays nothing, `playerOpen` drives the UI-thread slide open/close. Session
+ * state only — never persisted.
+ */
+interface PlayerUiStore {
+  playerOpen: boolean;
+  /** Mount latch: once true the overlay stays mounted (hidden) for instant reopen. */
+  everOpened: boolean;
+  openPlayer: () => void;
+  closePlayer: () => void;
+  /** Mount the overlay hidden (e.g. shortly after playback starts) so even the first open is instant. */
+  prewarm: () => void;
+}
+
+export const usePlayerUiStore = create<PlayerUiStore>((set) => ({
+  playerOpen: false,
+  everOpened: false,
+  openPlayer: () => set({ playerOpen: true, everOpened: true }),
+  closePlayer: () => set({ playerOpen: false }),
+  prewarm: () => set({ everOpened: true }),
+}));

src/theme/palettes.ts

@@ -5,8 +5,8 @@
  * INVARIANT: solid-color tokens must stay 6-digit `#rrggbb` hex — the Skia
  * visualizers (SpectrumCurve, OscilloscopeWave, EQGraph, GraphicResponseCurve)
  * slice hex chars to build alpha variants. Only `glass*`, `*Glow`,
- * `overlayFaint`, and `backdrop` may be `rgba()` strings (they are never fed
+ * `overlayFaint`, `ripple`, and `backdrop` may be `rgba()` strings (they are
- * through those helpers).
+ * never fed through those helpers).
  */
 
 export interface Palette {
@@ -19,6 +19,8 @@ export interface Palette {
   glassBg: string;
   glassBorder: string;
   glassHighlight: string;
+  /** Native android_ripple tint (glassHighlight family, transient so slightly stronger). */
+  ripple: string;
 
   // Text ramp
   textPrimary: string;
@@ -65,6 +67,7 @@ export const midnightBase: BasePalette = {
   glassBg: 'rgba(124, 146, 196, 0.05)',
   glassBorder: 'rgba(124, 146, 196, 0.16)',
   glassHighlight: 'rgba(140, 162, 208, 0.08)',
+  ripple: 'rgba(140, 162, 208, 0.13)',
 
   textPrimary: '#e2e8f4',
   textSecondary: '#8a98b8',
@@ -92,6 +95,7 @@ export const darkBase: BasePalette = {
   glassBg: 'rgba(165, 175, 195, 0.05)',
   glassBorder: 'rgba(165, 175, 195, 0.16)',
   glassHighlight: 'rgba(175, 185, 205, 0.08)',
+  ripple: 'rgba(175, 185, 205, 0.13)',
 
   textPrimary: '#e6e8ec',
   textSecondary: '#979da8',
@@ -120,6 +124,7 @@ export const amoledBase: BasePalette = {
   glassBg: 'rgba(124, 146, 196, 0.06)',
   glassBorder: 'rgba(124, 146, 196, 0.20)',
   glassHighlight: 'rgba(140, 162, 208, 0.10)',
+  ripple: 'rgba(140, 162, 208, 0.14)',
 
   textPrimary: '#e2e8f4',
   textSecondary: '#8a98b8',
@@ -148,6 +153,7 @@ export const lightBase: BasePalette = {
   glassBg: 'rgba(52, 74, 130, 0.06)',
   glassBorder: 'rgba(52, 74, 130, 0.18)',
   glassHighlight: 'rgba(52, 74, 130, 0.10)',
+  ripple: 'rgba(52, 74, 130, 0.12)',
 
   textPrimary: '#171d2e',
   textSecondary: '#4d5a78',

src/theme/resolve.ts

@@ -83,6 +83,7 @@ export function buildMaterialYouPalette(ramps: SystemPalette, isDark: boolean):
       glassBg: rgbaFromHex(tone(ramps.accent2, 200), 0.06),
       glassBorder: rgbaFromHex(tone(ramps.accent2, 200), 0.18),
       glassHighlight: rgbaFromHex(tone(ramps.accent2, 200), 0.09),
+      ripple: rgbaFromHex(tone(ramps.accent2, 200), 0.13),
       textPrimary: tone(ramps.neutral1, 50),
       textSecondary: tone(ramps.neutral2, 300),
       textTertiary: tone(ramps.neutral2, 500),
@@ -107,6 +108,7 @@ export function buildMaterialYouPalette(ramps: SystemPalette, isDark: boolean):
     glassBg: rgbaFromHex(tone(ramps.neutral2, 700), 0.06),
     glassBorder: rgbaFromHex(tone(ramps.neutral2, 700), 0.16),
     glassHighlight: rgbaFromHex(tone(ramps.neutral2, 700), 0.09),
+    ripple: rgbaFromHex(tone(ramps.neutral2, 700), 0.12),
     textPrimary: tone(ramps.neutral1, 900),
     textSecondary: tone(ramps.neutral2, 700),
     textTertiary: tone(ramps.neutral2, 500),

src/theme/ripple.ts

@@ -0,0 +1,53 @@
+// Native android_ripple configs — touch feedback drawn by the Android render
+// thread the frame the finger lands, independent of JS-thread load. This is
+// the app's ONE press-feedback system: JS `({ pressed })` dim styles were
+// removed in its favor (persistent selected/active styles are state, not
+// feedback, and stay).
+
+import { useMemo } from 'react';
+import type { PressableAndroidRippleConfig } from 'react-native';
+import { useColors } from '@/theme/themed';
+
+/**
+ * Fixed light overlay for accent-filled buttons — the theme `ripple` token is
+ * invisible on a saturated accent fill. Theme-invariant on purpose (Material's
+ * on-color ripple), so it is not a palette token.
+ */
+const ON_ACCENT_COLOR = 'rgba(255, 255, 255, 0.24)';
+
+/**
+ * `unstable_pressDelay` for Pressables inside SCROLLABLE content (rows, tiles,
+ * sheet items): a scroll flick claims the touch before the delay elapses, so
+ * scrolling never flashes ripples on everything it grazes — mirroring Android's
+ * ViewConfiguration tap timeout in native lists. Quick real taps still ripple
+ * (RN fires press-in/out on release even under the delay). Fixed chrome
+ * (tab bar, transport, action bars) stays instant — no delay there.
+ */
+export const SCROLL_PRESS_DELAY = 80;
+
+export interface RippleSet {
+  /** Clips to the Pressable rect/borderRadius — rows, cards, pills, sheet items. */
+  bounded: PressableAndroidRippleConfig;
+  /** Bounded but drawn ABOVE children — tiles/cards whose artwork covers the Pressable. */
+  tile: PressableAndroidRippleConfig;
+  /** Circular unbounded ripple for transparent icon buttons; radius ≈ half the touch target. */
+  icon: (radius: number) => PressableAndroidRippleConfig;
+  /** Light overlay for accent-filled buttons (bounded unless a radius is given). */
+  onAccent: (radius?: number) => PressableAndroidRippleConfig;
+}
+
+export function useRipple(): RippleSet {
+  const colors = useColors();
+  return useMemo(
+    () => ({
+      bounded: { color: colors.ripple },
+      tile: { color: colors.ripple, foreground: true },
+      icon: (radius: number) => ({ color: colors.ripple, borderless: true, radius }),
+      onAccent: (radius?: number) =>
+        radius == null
+          ? { color: ON_ACCENT_COLOR, foreground: true }
+          : { color: ON_ACCENT_COLOR, borderless: true, radius },
+    }),
+    [colors.ripple]
+  );
+}