ci: build on VPS runner while desktop is offline

Desktop runner (marcusDesktop) is off; runs 4-5 queued indefinitely.
ubuntu-latest label targets the VPS docker runner so releases ship now.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

.gitea/workflows/release.yml

@@ -6,10 +6,11 @@ on:
 
 jobs:
   build:
-    # RN/NDK builds starve the 4-core VPS — run on the desktop runner
+    # RN/NDK builds starve the 4-core VPS, so `desktop` (marcusDesktop) is the
-    # (marcusDesktop). Jobs queue while the desktop is off and start when it
+    # preferred runner — but jobs queue while the desktop is off. On
-    # comes online; switch back to ubuntu-latest to build on the VPS.
+    # ubuntu-latest the VPS builds immediately; flip back when the desktop is
-    runs-on: desktop
+    # reliably online.
+    runs-on: ubuntu-latest
     container:
       image: eclipse-temurin:21-jdk
     steps:

app.json

@@ -7,13 +7,13 @@
     "icon": "./assets/images/icon.png",
     "scheme": "kegel",
     "userInterfaceStyle": "dark",
-    "backgroundColor": "#0F1115",
+    "backgroundColor": "#160B0B",
     "ios": {
       "bundleIdentifier": "com.marcus.kegel"
     },
     "android": {
       "adaptiveIcon": {
-        "backgroundColor": "#0F1115",
+        "backgroundColor": "#160B0B",
         "foregroundImage": "./assets/images/android-icon-foreground.png",
         "monochromeImage": "./assets/images/android-icon-monochrome.png"
       },
@@ -25,7 +25,7 @@
       [
         "expo-splash-screen",
         {
-          "backgroundColor": "#0F1115",
+          "backgroundColor": "#160B0B",
           "image": "./assets/images/splash-icon.png",
           "imageWidth": 120
         }

package-lock.json

@@ -23,6 +23,7 @@
         "react-native": "0.86.2",
         "react-native-safe-area-context": "~5.7.0",
         "react-native-screens": "~4.26.0",
+        "react-native-svg": "15.15.4",
         "react-native-web": "^0.21.2"
       },
       "devDependencies": {
@@ -64,7 +65,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
       "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.7",
         "@babel/generator": "^7.29.7",
@@ -561,6 +561,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.29.7.tgz",
       "integrity": "sha512-N7zArUXWzAMzm+/N0uPBeVB3Fam5lMxtUwMmDK5f/IBBS7a7p1qeUoxd/6CckXoxUdgsntq1Dh8xNW06maZbDQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.29.7"
       },
@@ -949,6 +950,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.29.7.tgz",
       "integrity": "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.29.7"
       },
@@ -964,6 +966,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.29.7.tgz",
       "integrity": "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.29.7"
       },
@@ -995,6 +998,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.29.8.tgz",
       "integrity": "sha512-0UpIXPtdDtMXfnV2OJAVMLpj3H/92vmkA6lpSRakmycJvj3VUy6Xs1dM8tXRugupykr5WB+LpiVl0J8LMVg2mg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.29.7"
       },
@@ -1039,6 +1043,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.29.7.tgz",
       "integrity": "sha512-I+WYbGBAiCn7nA6xBrlgPH+MB7HWb4u8pv5S0Pv7OtwNvIFvCCb24YlttKEeUFVurfBCEaOTnuhlqsb7f0Z5Dg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.29.7"
       },
@@ -1054,6 +1059,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.29.7.tgz",
       "integrity": "sha512-NCSEJ4sLFU2gqAub45HYh4fus2yQ36rr6ei6vpU7NdoJqCpxvEG8E6eJpscGyXP3VHD2Ny+fSXr04k1hoUrFqA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.29.7"
       },
@@ -2085,6 +2091,7 @@
       "resolved": "https://registry.npmjs.org/@react-native/babel-preset/-/babel-preset-0.86.2.tgz",
       "integrity": "sha512-4XKEJ6jKW9lXMB1O5o47gBoGgolde1fbX13gLW/erlcn+1ky+MHHo5UjuM3RWGdPJHIvIzekDDumSUHhB9x5iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/core": "^7.25.2",
         "@babel/plugin-proposal-export-default-from": "^7.24.7",
@@ -2247,6 +2254,7 @@
       "resolved": "https://registry.npmjs.org/@react-native/metro-babel-transformer/-/metro-babel-transformer-0.86.2.tgz",
       "integrity": "sha512-mX1wgLErdb2hDgXJr9zM9SWLe+ZteZTFTwRWGOQ53yEJwc9DVSnxdTlAtVdMeOj2ntycKh0R8jYdat2Am43cwQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/core": "^7.25.2",
         "@react-native/babel-preset": "0.86.2",
@@ -2265,6 +2273,7 @@
       "resolved": "https://registry.npmjs.org/@react-native/metro-config/-/metro-config-0.86.2.tgz",
       "integrity": "sha512-hJno256j+MS0b3JD1aD3ouTGZVacKNVBuXL2atMQQ8BZ060vl1ptnZ83y569aDW+/rgFSOcqn6ydKeSz4uUKQQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@react-native/js-polyfills": "0.86.2",
         "@react-native/metro-babel-transformer": "0.86.2",
@@ -2315,6 +2324,7 @@
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -2334,6 +2344,7 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -2346,6 +2357,7 @@
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -2359,7 +2371,8 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@testing-library/jest-dom": {
       "version": "6.9.1",
@@ -2403,7 +2416,8 @@
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
@@ -2443,7 +2457,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz",
       "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2453,6 +2466,7 @@
       "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-19.1.0.tgz",
       "integrity": "sha512-XD0WZrHqjNrxA/MaR9O22w/RNidWR9YZmBdRGI7wcnWGrv/3dA8wKCJ8m63Sn+tLJhcjmuhOi629N66W6kgWzQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -2772,6 +2786,12 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
     "node_modules/bplist-creator": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.1.0.tgz",
@@ -2836,7 +2856,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.11.12",
         "caniuse-lite": "^1.0.30001809",
@@ -3201,6 +3220,56 @@
         "hyphenate-style-name": "^1.0.3"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-tree/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -3313,7 +3382,63 @@
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
     },
     "node_modules/ee-first": {
       "version": "1.1.1",
@@ -3342,6 +3467,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/error-stack-parser": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
@@ -3410,7 +3547,6 @@
       "resolved": "https://registry.npmjs.org/expo/-/expo-57.0.13.tgz",
       "integrity": "sha512-oJnPSAcQYDIXTJowL9fm6SvAU5CU0P+u1WtWM9a/7uUmeCrkcVKoaGstwF+UY3GoM11S7FO4KKmRl1aU12CTKA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.20.0",
         "@expo/cli": "^57.0.15",
@@ -3473,7 +3609,6 @@
       "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-57.0.11.tgz",
       "integrity": "sha512-gpSZ13Nfx0BOc9ALjG1SMhks5csb8Z6ncEVdhDgv0NRrmJcHPRvyUlWaKjRjzwW730XrQ6PIXFRcnNmAxOLj5A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@expo/env": "~2.4.2"
       },
@@ -3487,7 +3622,6 @@
       "resolved": "https://registry.npmjs.org/expo-font/-/expo-font-57.0.1.tgz",
       "integrity": "sha512-QyS9L1Kh9sKJg4gfU6rdbpxpmH+DyzBX8z6jVvXMUDoqLr1GqmkO/Wu379KCXjL///kWbhpNlbi7AgBuj4VdIQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fontfaceobserver": "^2.1.0"
       },
@@ -3532,7 +3666,6 @@
       "resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-57.0.6.tgz",
       "integrity": "sha512-NdKjEGk+ywwGRNvgQCq9KettM1eVHfR1+uLov+0ohb6rmmMEgnstfLcc3f0DKMQ0PnROsY5G5+ZkNeiairYRXA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "expo-constants": "~57.0.11",
         "invariant": "^2.2.4"
@@ -3750,7 +3883,6 @@
       "resolved": "https://registry.npmjs.org/expo-server/-/expo-server-57.0.3.tgz",
       "integrity": "sha512-aK+LdKzauHSGmsOStZtyxdzv0zWssCkxTw3m4QuOhfDSJsZaMRTd9O41d8ixU/QfELTbaJ0oRNcF7JFV/7O9YQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.16.0"
       }
@@ -4148,7 +4280,6 @@
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.3.tgz",
       "integrity": "sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -5197,6 +5328,7 @@
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -5216,6 +5348,12 @@
       "integrity": "sha512-ocnPZQLNpvbedwTy9kNrQEsknEfgvcLMvOtz3sFeWApDq1MXH1TqkCIx58xlpESsfwQOnuBO9beyQuNGzVvuhQ==",
       "license": "Apache-2.0"
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "license": "CC0-1.0"
+    },
     "node_modules/memoize-one": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
@@ -5740,6 +5878,18 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/nullthrows": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@@ -6183,7 +6333,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6203,7 +6352,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -6240,7 +6388,6 @@
       "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.86.2.tgz",
       "integrity": "sha512-zbJXGZpwfZGA79Z9ob6Atvfx4nAQL8yJBa35s58E4Oo+khPykfQP2sTeumkKbjwajFYfVayg8pj7Il9nIfTk7A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@react-native/assets-registry": "0.86.2",
         "@react-native/codegen": "0.86.2",
@@ -6331,6 +6478,7 @@
       "resolved": "https://registry.npmjs.org/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.3.1.tgz",
       "integrity": "sha512-NIXU/iT5+ORyCc7p0z2nnlkouYKX425vuU1OEm6bMMtWWR9yvb+Xg5AZmImTKoF9abxCPqrKC3rOZsKzUYgYZA==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "react": "*",
         "react-native": "*"
@@ -6357,7 +6505,6 @@
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.7.0.tgz",
       "integrity": "sha512-/9/MtQz8ODphjsLdZ+GZAIcC/RtoqW9EeShf7Uvnfgm/pzYrJ75y3PV/J1wuAV1T5Dye5ygq4EAW20RoBq0ABQ==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "react": "*",
         "react-native": "*"
@@ -6377,12 +6524,26 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-svg": {
+      "version": "15.15.4",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.15.4.tgz",
+      "integrity": "sha512-boT/vIRgj6zZKBpfTPJJiYWMbZE9duBMOwPK6kCSTgxsS947IFMOq9OgIFkpWZTB7t229H24pDRkh3W9ZK/J1A==",
+      "license": "MIT",
+      "dependencies": {
+        "css-select": "^5.1.0",
+        "css-tree": "^1.1.3",
+        "warn-once": "0.1.1"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.21.2",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.21.2.tgz",
       "integrity": "sha512-SO2t9/17zM4iEnFvlu2DA9jqNbzNhoUP+AItkoCOyFmDMOhUnBBznBDCYN92fGdfAkfQlWzPoez6+zLxFNsZEg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.6",
         "@react-native/normalize-colors": "^0.74.1",
@@ -6451,7 +6612,6 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
       "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7191,7 +7351,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
       "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -7259,7 +7418,6 @@
       "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

package.json

@@ -18,6 +18,7 @@
     "react-native": "0.86.2",
     "react-native-safe-area-context": "~5.7.0",
     "react-native-screens": "~4.26.0",
+    "react-native-svg": "15.15.4",
     "react-native-web": "^0.21.2"
   },
   "devDependencies": {

src/app/_layout.tsx

@@ -1,9 +1,20 @@
 import { Link, Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { useEffect } from "react";
+import { Pressable } from "react-native";
+import Svg, { Circle, Path } from "react-native-svg";
 import { hydrate } from "../lib/store";
 import { C } from "../lib/theme";
 
+function GearIcon() {
+  return (
+    <Svg width={22} height={22} viewBox="0 0 24 24" fill="none" stroke={C.muted} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Circle cx={12} cy={12} r={3} />
+      <Path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+    </Svg>
+  );
+}
+
 export default function RootLayout() {
   useEffect(() => {
     void hydrate();
@@ -25,8 +36,10 @@ export default function RootLayout() {
           options={{
             title: "Kegel",
             headerRight: () => (
-              <Link href="/settings" style={{ paddingHorizontal: 8, fontSize: 18 }}>
+              <Link href="/settings" asChild>
-                ⚙️
+                <Pressable style={({ pressed }) => ({ paddingHorizontal: 8, paddingVertical: 4, opacity: pressed ? 0.6 : 1 })} hitSlop={8}>
+                  <GearIcon />
+                </Pressable>
               </Link>
             ),
           }}

src/app/index.tsx

@@ -1,10 +1,11 @@
 import { useRouter } from "expo-router";
 import { StyleSheet, Text, View } from "react-native";
-import { Button, StatRow } from "../components/ui";
+import { ShapeIcon } from "../components/session-viz";
+import { Button, Card, StatRow } from "../components/ui";
 import { currentHold } from "../lib/store";
-import { C } from "../lib/theme";
+import { alpha, C } from "../lib/theme";
 import { useStore } from "../lib/useStore";
-import { MAX_HOLD, SESSIONS_PER_INCREMENT, sessionMinutes } from "../lib/workout";
+import { FLICK_REPS, HOLD_REPS, MAX_HOLD, PUSH_REPS, SESSIONS_PER_INCREMENT, sessionMinutes } from "../lib/workout";
 
 export default function Home() {
   const router = useRouter();
@@ -17,11 +18,13 @@ export default function Home() {
   return (
     <View style={s.screen}>
       <View style={s.hero}>
+        <View style={s.glowOuter} />
+        <View style={s.glowInner} />
         <Text style={s.holdValue}>{hold}s</Text>
         <Text style={s.holdLabel}>current hold</Text>
       </View>
 
-      <View style={s.card}>
+      <Card>
         <StatRow label="Sessions completed" value={String(sessionsCompleted)} />
         <StatRow
           label="Next hold increase"
@@ -29,7 +32,22 @@ export default function Home() {
         />
         <StatRow label="Session length" value={`~${sessionMinutes(hold)} min`} />
         <StatRow label="Last session" value={lastSessionAt ? new Date(lastSessionAt).toLocaleDateString() : "—"} />
+      </Card>
+
+      <Card>
+        <View style={s.legendRow}>
+          <ShapeIcon shape="circle" size={12} color={C.accent} />
+          <Text style={s.legendText}>Squeeze & hold — {HOLD_REPS} reps</Text>
         </View>
+        <View style={s.legendRow}>
+          <ShapeIcon shape="square" size={12} color={C.push} />
+          <Text style={s.legendText}>Push out — {PUSH_REPS} reps</Text>
+        </View>
+        <View style={[s.legendRow, s.legendLast]}>
+          <ShapeIcon shape="x" size={12} color={C.accent} />
+          <Text style={s.legendText}>Quick squeezes & pushes — {FLICK_REPS} each</Text>
+        </View>
+      </Card>
 
       <Button title="Start session" onPress={() => router.push("/session")} />
 
@@ -43,17 +61,20 @@ export default function Home() {
 
 const s = StyleSheet.create({
   screen: { flex: 1, backgroundColor: C.bg, padding: 20 },
-  hero: { alignItems: "center", paddingVertical: 28 },
+  hero: { alignItems: "center", justifyContent: "center", paddingVertical: 32 },
-  holdValue: { color: C.accent, fontSize: 72, fontWeight: "700", fontVariant: ["tabular-nums"] },
+  glowOuter: { position: "absolute", width: 230, height: 230, borderRadius: 115, backgroundColor: alpha(C.accent, 0.05) },
-  holdLabel: { color: C.muted, fontSize: 14, textTransform: "uppercase", letterSpacing: 1 },
+  glowInner: { position: "absolute", width: 150, height: 150, borderRadius: 75, backgroundColor: alpha(C.accent, 0.08) },
-  card: {
+  holdValue: { color: C.accent, fontSize: 72, fontWeight: "800", fontVariant: ["tabular-nums"], letterSpacing: -1 },
-    backgroundColor: C.surface,
+  holdLabel: { color: C.muted, fontSize: 13, textTransform: "uppercase", letterSpacing: 1.6, marginTop: 2 },
-    borderRadius: 12,
+  legendRow: {
-    borderWidth: 1,
+    flexDirection: "row",
-    borderColor: C.border,
+    alignItems: "center",
-    paddingHorizontal: 16,
+    gap: 12,
-    paddingVertical: 4,
+    paddingVertical: 11,
-    marginBottom: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: C.border,
   },
+  legendLast: { borderBottomWidth: 0 },
+  legendText: { color: C.text, fontSize: 14 },
   hint: { color: C.muted, fontSize: 13, lineHeight: 19, marginTop: 8 },
 });

src/app/session.tsx

@@ -2,9 +2,10 @@ import * as Haptics from "expo-haptics";
 import { useKeepAwake } from "expo-keep-awake";
 import { useRouter } from "expo-router";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { Animated, StyleSheet, Text, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { Button } from "../components/ui";
+import { BLOCK_SHAPE, DoneCheck, GuideDisc, ProgressRing, RoundDots, ShapeIcon, useStepProgress } from "../components/session-viz";
+import { Button, Card, StatRow } from "../components/ui";
 import { completeSession, currentHold, getState } from "../lib/store";
 import { C } from "../lib/theme";
 import { buildSession, SESSIONS_PER_INCREMENT, type StepKind } from "../lib/workout";
@@ -15,7 +16,7 @@ const KIND_COLOR: Record<StepKind, string> = {
   push: C.push,
   "flick-squeeze": C.accent,
   "flick-push": C.push,
-  relax: C.muted,
+  relax: C.rest,
   rest: C.rest,
 };
 
@@ -24,6 +25,8 @@ function stepHaptic(kind: StepKind) {
   void Haptics.impactAsync(work ? Haptics.ImpactFeedbackStyle.Heavy : Haptics.ImpactFeedbackStyle.Light);
 }
 
+const RING_SIZE = 300;
+
 export default function Session() {
   useKeepAwake();
   const router = useRouter();
@@ -39,6 +42,16 @@ export default function Session() {
   const [done, setDone] = useState(false);
   const recorded = useRef(false);
 
+  const progress = useStepProgress(i, remaining, paused, done);
+
+  // Small pop on the countdown when a new step starts, so the cue change
+  // registers even in peripheral vision.
+  const pop = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    pop.setValue(1.08);
+    Animated.spring(pop, { toValue: 1, friction: 5, tension: 120, useNativeDriver: true }).start();
+  }, [i, pop]);
+
   useEffect(() => {
     if (paused || done) return;
     const id = setInterval(() => setRemaining((r) => r - 1), 1000);
@@ -66,15 +79,20 @@ export default function Session() {
   if (done) {
     const { sessionsCompleted } = getState();
     const leveledUp = sessionsCompleted % SESSIONS_PER_INCREMENT === 0;
+    const untilNext = SESSIONS_PER_INCREMENT - (sessionsCompleted % SESSIONS_PER_INCREMENT);
     return (
       <SafeAreaView style={s.screen}>
         <View style={s.center}>
-          <Text style={s.doneTitle}>Session complete 💪</Text>
+          <DoneCheck size={120} />
+          <Text style={s.doneTitle}>Session complete</Text>
           <Text style={s.doneSub}>
-            {sessionsCompleted} session{sessionsCompleted === 1 ? "" : "s"} completed.
+            {leveledUp ? `Holds increase to ${currentHold()}s next time.` : `${untilNext} more session${untilNext === 1 ? "" : "s"} until holds increase.`}
-            {leveledUp ? ` Holds increase to ${currentHold()}s next time.` : ""}
           </Text>
         </View>
+        <Card>
+          <StatRow label="Sessions completed" value={String(sessionsCompleted)} />
+          <StatRow label="This session" value={`${Math.round(totalSeconds / 60)} min`} />
+        </Card>
         <Button title="Done" onPress={() => router.back()} />
       </SafeAreaView>
     );
@@ -83,17 +101,23 @@ export default function Session() {
   const step = steps[i];
   const elapsed = steps.slice(0, i).reduce((s, st) => s + st.seconds, 0) + (step.seconds - remaining);
   const color = KIND_COLOR[step.kind];
+  const shape = BLOCK_SHAPE[step.blockId];
   const next = steps[i + 1];
 
   return (
     <SafeAreaView style={s.screen}>
       <Text style={s.block}>{step.block}</Text>
+      <RoundDots step={step} />
 
       <View style={s.center}>
-        <View style={[s.circle, { borderColor: color }]}>
+        <ProgressRing size={RING_SIZE} strokeWidth={10} progress={progress} color={color}>
+          <GuideDisc size={RING_SIZE - 44} kind={step.kind} stepIndex={i} color={color} />
+          <View style={s.inner}>
+            {shape ? <ShapeIcon shape={shape} size={22} color={color} /> : null}
             <Text style={[s.label, { color }]}>{step.label}</Text>
-          <Text style={s.count}>{remaining}</Text>
+            <Animated.Text style={[s.count, { transform: [{ scale: pop }] }]}>{remaining}</Animated.Text>
           </View>
+        </ProgressRing>
         <Text style={s.next}>{next ? `Next: ${next.label} ${next.seconds}s` : "Last one!"}</Text>
       </View>
 
@@ -101,30 +125,22 @@ export default function Session() {
         <View style={[s.progressFill, { width: `${(elapsed / totalSeconds) * 100}%` }]} />
       </View>
 
-      <Button title={paused ? "Resume" : "Pause"} onPress={() => setPaused((p) => !p)} />
+      <Button title={paused ? "Resume" : "Pause"} variant="secondary" onPress={() => setPaused((p) => !p)} />
-      <Button title="End session" danger onPress={() => router.back()} />
+      <Button title="End session" variant="danger" onPress={() => router.back()} />
     </SafeAreaView>
   );
 }
 
 const s = StyleSheet.create({
   screen: { flex: 1, backgroundColor: C.bg, padding: 20 },
-  block: { color: C.muted, fontSize: 15, textAlign: "center", textTransform: "uppercase", letterSpacing: 1, marginTop: 8 },
+  block: { color: C.muted, fontSize: 14, textAlign: "center", textTransform: "uppercase", letterSpacing: 1.2, marginTop: 8, marginBottom: 12 },
   center: { flex: 1, alignItems: "center", justifyContent: "center" },
-  circle: {
+  inner: { alignItems: "center", justifyContent: "center", gap: 6 },
-    width: 260,
+  label: { fontSize: 22, fontWeight: "600" },
-    height: 260,
-    borderRadius: 130,
-    borderWidth: 6,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: C.surface,
-  },
-  label: { fontSize: 22, fontWeight: "600", marginBottom: 4 },
   count: { color: C.text, fontSize: 80, fontWeight: "700", fontVariant: ["tabular-nums"] },
   next: { color: C.muted, fontSize: 15, marginTop: 24 },
-  doneTitle: { color: C.text, fontSize: 28, fontWeight: "700", marginBottom: 12 },
+  doneTitle: { color: C.text, fontSize: 28, fontWeight: "700", marginTop: 28, marginBottom: 10 },
   doneSub: { color: C.muted, fontSize: 16, textAlign: "center", lineHeight: 23 },
-  progressTrack: { height: 6, borderRadius: 3, backgroundColor: C.surface2, marginBottom: 16 },
+  progressTrack: { height: 6, borderRadius: 3, backgroundColor: C.surface2, marginBottom: 16, overflow: "hidden" },
   progressFill: { height: 6, borderRadius: 3, backgroundColor: C.accent },
 });

src/app/settings.tsx

@@ -1,10 +1,22 @@
-import { Alert, StyleSheet, Text, View } from "react-native";
+import { Alert, Pressable, StyleSheet, Text, View } from "react-native";
-import { Button, StatRow } from "../components/ui";
+import { Button, Card, StatRow } from "../components/ui";
 import { adjustHold, currentHold, resetProgress } from "../lib/store";
 import { C } from "../lib/theme";
 import { useStore } from "../lib/useStore";
 import { MAX_HOLD, MIN_HOLD } from "../lib/workout";
 
+function StepperButton({ label, disabled, onPress }: { label: string; disabled: boolean; onPress: () => void }) {
+  return (
+    <Pressable
+      style={({ pressed }) => [s.step, disabled && s.stepDisabled, pressed && !disabled && s.stepPressed]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <Text style={[s.stepText, disabled && s.stepTextDisabled]}>{label}</Text>
+    </Pressable>
+  );
+}
+
 export default function Settings() {
   const { sessionsCompleted, holdAdjust } = useStore();
   const hold = currentHold();
@@ -12,27 +24,26 @@ export default function Settings() {
   return (
     <View style={s.screen}>
       <Text style={s.section}>Difficulty</Text>
-      <View style={s.card}>
+      <Card style={{ marginBottom: 12 }}>
-        <StatRow label="Current hold" value={`${hold}s`} />
+        <View style={s.stepperRow}>
+          <StepperButton label="−" disabled={hold <= MIN_HOLD} onPress={() => adjustHold(-1)} />
+          <View style={s.stepperValue}>
+            <Text style={s.holdValue}>{hold}s</Text>
+            <Text style={s.holdLabel}>hold length</Text>
+          </View>
+          <StepperButton label="+" disabled={hold >= MAX_HOLD} onPress={() => adjustHold(1)} />
+        </View>
         <StatRow label="Manual adjustment" value={`${holdAdjust >= 0 ? "+" : ""}${holdAdjust}s`} />
-      </View>
+      </Card>
-      <View style={s.row}>
-        <View style={s.half}>
-          <Button title="Easier −1s" onPress={() => hold > MIN_HOLD && adjustHold(-1)} />
-        </View>
-        <View style={s.half}>
-          <Button title="Harder +1s" onPress={() => hold < MAX_HOLD && adjustHold(1)} />
-        </View>
-      </View>
       <Text style={s.hint}>
-        Holds grow automatically by 1s every 3 completed sessions ({MIN_HOLD}–{MAX_HOLD}s). Use these if a session
+        Holds grow automatically by 1s every 3 completed sessions ({MIN_HOLD}–{MAX_HOLD}s). Adjust here if a session
         feels too easy or too hard — the adjustment stacks with the automatic progression.
       </Text>
 
       <Text style={s.section}>Progress</Text>
       <Button
         title="Reset progress"
-        danger
+        variant="danger"
         onPress={() =>
           Alert.alert("Reset progress?", `This clears ${sessionsCompleted} completed sessions and starts over at ${MIN_HOLD}s holds.`, [
             { text: "Cancel", style: "cancel" },
@@ -46,17 +57,24 @@ export default function Settings() {
 
 const s = StyleSheet.create({
   screen: { flex: 1, backgroundColor: C.bg, padding: 20 },
-  section: { color: C.muted, fontSize: 13, textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 8, marginTop: 12 },
+  section: { color: C.muted, fontSize: 13, textTransform: "uppercase", letterSpacing: 1.2, marginBottom: 8, marginTop: 12 },
-  card: {
+  stepperRow: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingVertical: 14 },
-    backgroundColor: C.surface,
+  stepperValue: { alignItems: "center" },
-    borderRadius: 12,
+  holdValue: { color: C.accent, fontSize: 34, fontWeight: "700", fontVariant: ["tabular-nums"] },
+  holdLabel: { color: C.muted, fontSize: 12, textTransform: "uppercase", letterSpacing: 1.2, marginTop: 2 },
+  step: {
+    width: 52,
+    height: 52,
+    borderRadius: 26,
+    backgroundColor: C.surface2,
     borderWidth: 1,
     borderColor: C.border,
-    paddingHorizontal: 16,
+    alignItems: "center",
-    paddingVertical: 4,
+    justifyContent: "center",
-    marginBottom: 12,
   },
-  row: { flexDirection: "row", gap: 12 },
+  stepPressed: { opacity: 0.7, transform: [{ scale: 0.95 }] },
-  half: { flex: 1 },
+  stepDisabled: { opacity: 0.35 },
+  stepText: { color: C.text, fontSize: 26, fontWeight: "600", lineHeight: 30 },
+  stepTextDisabled: { color: C.muted },
   hint: { color: C.muted, fontSize: 13, lineHeight: 19, marginBottom: 12 },
 });

src/components/session-viz.tsx

@@ -0,0 +1,220 @@
+import { ReactNode, useEffect, useRef } from "react";
+import { Animated, Easing, StyleSheet, View } from "react-native";
+import Svg, { Circle, Path } from "react-native-svg";
+import { alpha, C } from "../lib/theme";
+import type { BlockId, Step, StepKind } from "../lib/workout";
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+/** Shape language: ○ = squeeze (in), □ = push (out), ✕ = quick flicks. */
+export type Shape = "circle" | "square" | "x";
+
+export const BLOCK_SHAPE: Record<BlockId, Shape | null> = {
+  warmup: null,
+  holds: "circle",
+  pushes: "square",
+  "flick-squeezes": "x",
+  "flick-pushes": "x",
+};
+
+const BLOCK_COLOR: Record<BlockId, string> = {
+  warmup: C.muted,
+  holds: C.accent,
+  pushes: C.push,
+  "flick-squeezes": C.accent,
+  "flick-pushes": C.push,
+};
+
+export function ShapeIcon({ shape, size, color, outline }: { shape: Shape; size: number; color: string; outline?: boolean }) {
+  if (shape === "x") {
+    const bar = { position: "absolute" as const, width: size * 1.25, height: Math.max(2, size * 0.26), borderRadius: size, backgroundColor: color };
+    return (
+      <View style={{ width: size, height: size, alignItems: "center", justifyContent: "center" }}>
+        <View style={[bar, { transform: [{ rotate: "45deg" }] }]} />
+        <View style={[bar, { transform: [{ rotate: "-45deg" }] }]} />
+      </View>
+    );
+  }
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: shape === "circle" ? size / 2 : Math.max(2, size * 0.18),
+        backgroundColor: outline ? "transparent" : color,
+        borderWidth: outline ? 1.5 : 0,
+        borderColor: color,
+      }}
+    />
+  );
+}
+
+/**
+ * Ring that sweeps around the timer edge in proportion to the current step —
+ * same idiom as the meditation app. `progress` runs 0→1 over the step.
+ */
+export function ProgressRing({
+  size,
+  strokeWidth,
+  progress,
+  color,
+  children,
+}: {
+  size: number;
+  strokeWidth: number;
+  progress: Animated.Value;
+  color: string;
+  children: ReactNode;
+}) {
+  const r = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * r;
+  return (
+    <View style={{ width: size, height: size, alignItems: "center", justifyContent: "center" }}>
+      <Svg width={size} height={size} style={StyleSheet.absoluteFill}>
+        <Circle cx={size / 2} cy={size / 2} r={r} stroke={C.surface2} strokeWidth={strokeWidth} fill={C.surface} />
+        <AnimatedCircle
+          cx={size / 2}
+          cy={size / 2}
+          r={r}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          fill="none"
+          strokeDasharray={`${circumference}`}
+          strokeDashoffset={progress.interpolate({ inputRange: [0, 1], outputRange: [circumference, 0] })}
+          rotation={-90}
+          origin={`${size / 2}, ${size / 2}`}
+        />
+      </Svg>
+      {children}
+    </View>
+  );
+}
+
+/**
+ * Breathing-guide disc inside the ring: inflates on work (squeeze/push/flick),
+ * deflates on rest. Each 1s flick step re-triggers the inflate, so flick blocks
+ * pulse at the flick rhythm for free.
+ */
+export function GuideDisc({ size, kind, stepIndex, color }: { size: number; kind: StepKind; stepIndex: number; color: string }) {
+  const work = kind === "squeeze" || kind === "push" || kind === "flick-squeeze" || kind === "flick-push";
+  const scale = useRef(new Animated.Value(0.6)).current;
+
+  useEffect(() => {
+    const anim = Animated.timing(scale, {
+      toValue: work ? 1 : 0.6,
+      duration: work ? 650 : 450,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [stepIndex, work, scale]);
+
+  return (
+    <Animated.View
+      pointerEvents="none"
+      style={{
+        position: "absolute",
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: alpha(color, work ? 0.14 : 0.07),
+        borderWidth: 1,
+        borderColor: alpha(color, work ? 0.4 : 0.18),
+        transform: [{ scale }],
+      }}
+    />
+  );
+}
+
+/** Session-complete mark: accent ring with a check, springing in once. */
+export function DoneCheck({ size }: { size: number }) {
+  const pop = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.spring(pop, { toValue: 1, friction: 5, tension: 60, useNativeDriver: true }).start();
+  }, [pop]);
+
+  return (
+    <Animated.View style={{ transform: [{ scale: pop }], opacity: pop }}>
+      <Svg width={size} height={size} viewBox="0 0 100 100">
+        <Circle cx={50} cy={50} r={46} stroke={C.accent} strokeWidth={5} fill={alpha(C.accent, 0.1)} />
+        <Path d="M31 52 L45 66 L70 37" stroke={C.text} strokeWidth={7} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+      </Svg>
+    </Animated.View>
+  );
+}
+
+/** Drives a ProgressRing: restarts on each step, freezes on pause. */
+export function useStepProgress(stepIndex: number, remaining: number, paused: boolean, done: boolean) {
+  const progress = useRef(new Animated.Value(0)).current;
+  const lastStep = useRef(-1);
+  const remainingRef = useRef(remaining);
+  remainingRef.current = remaining;
+
+  useEffect(() => {
+    if (done) return;
+    if (lastStep.current !== stepIndex) {
+      lastStep.current = stepIndex;
+      progress.setValue(0);
+    }
+    if (paused) return;
+    const anim = Animated.timing(progress, {
+      toValue: 1,
+      duration: remainingRef.current * 1000,
+      easing: Easing.linear,
+      useNativeDriver: false,
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [stepIndex, paused, done, progress]);
+
+  return progress;
+}
+
+/**
+ * Where the round is out of the block: one marker per rep in the block's own
+ * shape, with small interleaved dots for the rests between hold/push reps so
+ * rest rounds read differently from work rounds. Flick blocks skip the 1s
+ * relax gaps — 10 markers is already the ceiling of glanceable.
+ */
+export function RoundDots({ step }: { step: Step }) {
+  const shape = BLOCK_SHAPE[step.blockId];
+  if (!shape) return <View style={d.row} />;
+
+  const color = BLOCK_COLOR[step.blockId];
+  const showRests = step.blockId === "holds" || step.blockId === "pushes";
+  const working = step.kind !== "rest" && step.kind !== "relax";
+  const markers: ReactNode[] = [];
+
+  for (let r = 1; r <= step.repsTotal; r++) {
+    const isCurrent = r === step.rep && working;
+    const isDone = r < step.rep || (r === step.rep && !working);
+    markers.push(
+      <View key={`w${r}`} style={isCurrent ? d.current : undefined}>
+        <ShapeIcon shape={shape} size={isCurrent ? 15 : 11} color={isDone || isCurrent ? color : C.border} outline={!isDone && !isCurrent} />
+      </View>,
+    );
+    if (showRests && r < step.repsTotal) {
+      const restCurrent = r === step.rep && !working;
+      markers.push(
+        <View
+          key={`r${r}`}
+          style={{
+            width: restCurrent ? 7 : 4,
+            height: restCurrent ? 7 : 4,
+            borderRadius: 4,
+            backgroundColor: r < step.rep ? C.muted : restCurrent ? C.rest : C.border,
+          }}
+        />,
+      );
+    }
+  }
+
+  return <View style={d.row}>{markers}</View>;
+}
+
+const d = StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 7, minHeight: 20 },
+  current: { transform: [{ scale: 1.15 }] },
+});

src/components/ui.tsx

@@ -1,21 +1,36 @@
-import { Pressable, StyleSheet, Text, View } from "react-native";
+import { Pressable, StyleSheet, Text, View, ViewStyle } from "react-native";
-import { C } from "../lib/theme";
+import { alpha, C } from "../lib/theme";
+
+type Variant = "primary" | "secondary" | "danger";
+
+const VARIANT_STYLE: Record<Variant, { box: ViewStyle; text: { color: string } }> = {
+  primary: { box: { backgroundColor: C.accent }, text: { color: C.text } },
+  secondary: {
+    box: { backgroundColor: C.surface, borderWidth: 1, borderColor: C.border },
+    text: { color: C.text },
+  },
+  danger: {
+    box: { backgroundColor: "transparent", borderWidth: 1, borderColor: alpha(C.danger, 0.55) },
+    text: { color: C.danger },
+  },
+};
 
 export function Button({
   title,
   onPress,
-  danger,
+  variant = "primary",
 }: {
   title: string;
   onPress: () => void;
-  danger?: boolean;
+  variant?: Variant;
 }) {
+  const v = VARIANT_STYLE[variant];
   return (
     <Pressable
-      style={[u.button, danger && { backgroundColor: "transparent", borderColor: C.danger, borderWidth: 1 }]}
+      style={({ pressed }) => [u.button, v.box, pressed && u.pressed]}
       onPress={onPress}
     >
-      <Text style={[u.buttonText, danger && { color: C.danger }]}>{title}</Text>
+      <Text style={[u.buttonText, v.text]}>{title}</Text>
     </Pressable>
   );
 }
@@ -29,23 +44,36 @@ export function StatRow({ label, value }: { label: string; value: string }) {
   );
 }
 
+export function Card({ children, style }: { children: React.ReactNode; style?: ViewStyle }) {
+  return <View style={[u.card, style]}>{children}</View>;
+}
+
 const u = StyleSheet.create({
   button: {
-    backgroundColor: C.accent,
+    borderRadius: 12,
-    borderRadius: 10,
+    padding: 15,
-    padding: 14,
     alignItems: "center",
     marginTop: 8,
     marginBottom: 12,
   },
-  buttonText: { color: C.text, fontSize: 16, fontWeight: "600" },
+  pressed: { opacity: 0.8, transform: [{ scale: 0.98 }] },
+  buttonText: { fontSize: 16, fontWeight: "600", letterSpacing: 0.2 },
   statRow: {
     flexDirection: "row",
     justifyContent: "space-between",
-    paddingVertical: 10,
+    paddingVertical: 11,
     borderBottomWidth: 1,
     borderBottomColor: C.border,
   },
   statLabel: { color: C.muted, fontSize: 15 },
-  statValue: { color: C.text, fontSize: 15, fontWeight: "600" },
+  statValue: { color: C.text, fontSize: 15, fontWeight: "600", fontVariant: ["tabular-nums"] },
+  card: {
+    backgroundColor: C.surface,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: C.border,
+    paddingHorizontal: 16,
+    paddingVertical: 4,
+    marginBottom: 20,
+  },
 });

src/lib/theme.ts

@@ -1,12 +1,25 @@
+// Stamena-style red theme: near-black red-tinted ground, saturated red as the
+// primary work color, warm amber for reverse-kegel pushes so the two moves
+// never read as the same cue.
 export const C = {
-  bg: "#0F1115",
+  bg: "#160B0B",
-  surface: "#1A1D24",
+  surface: "#241213",
-  surface2: "#232733",
+  surface2: "#2F1718",
-  border: "#2C313D",
+  border: "#42201F",
-  text: "#E6E8EC",
+  text: "#F7ECEA",
-  muted: "#8A909C",
+  muted: "#A98A86",
-  accent: "#8B5CF6", // squeeze / primary
+  accent: "#E7402E", // squeeze / primary
-  push: "#F59E0B", // reverse kegel (push out)
+  push: "#FF9D3B", // reverse kegel (push out)
-  rest: "#4CAF7D",
+  rest: "#8B7573", // recovery — deliberately dull so work steps pop
-  danger: "#E05B5B",
+  danger: "#FF5D5D",
 };
+
+/** Append an alpha byte to a #RRGGBB token — RN accepts #RRGGBBAA. */
+export function alpha(color: string, a: number): string {
+  return (
+    color +
+    Math.round(a * 255)
+      .toString(16)
+      .padStart(2, "0")
+  );
+}

src/lib/workout.ts

@@ -10,12 +10,18 @@ export type StepKind =
   | "relax" // 1s gap between flicks
   | "rest"; // recovery between reps/blocks
 
+export type BlockId = "warmup" | "holds" | "pushes" | "flick-squeezes" | "flick-pushes";
+
 export interface Step {
   kind: StepKind;
   label: string;
   seconds: number;
   /** Block title shown as secondary context, e.g. "Holds 3/8". */
   block: string;
+  blockId: BlockId;
+  /** Which rep of the block this step belongs to (rests carry the rep they follow). */
+  rep: number;
+  repsTotal: number;
 }
 
 export const MIN_HOLD = 5;
@@ -34,9 +40,9 @@ function pushSeconds(hold: number): number {
   return Math.min(12, MIN_HOLD + Math.floor((hold - MIN_HOLD) / 2));
 }
 
-const HOLD_REPS = 8;
+export const HOLD_REPS = 8;
-const PUSH_REPS = 5;
+export const PUSH_REPS = 5;
-const FLICK_REPS = 10;
+export const FLICK_REPS = 10;
 const BLOCK_REST = 20;
 
 export function buildSession(hold: number): Step[] {
@@ -44,33 +50,33 @@ export function buildSession(hold: number): Step[] {
   const repRest = Math.max(4, Math.round(hold * 0.75));
   const push = pushSeconds(hold);
 
-  steps.push({ kind: "ready", label: "Get ready", seconds: 5, block: "Warm up" });
+  steps.push({ kind: "ready", label: "Get ready", seconds: 5, block: "Warm up", blockId: "warmup", rep: 0, repsTotal: 0 });
 
   // Block 1: squeeze-and-hold (the progressive-overload driver).
   for (let r = 1; r <= HOLD_REPS; r++) {
-    steps.push({ kind: "squeeze", label: "Squeeze & hold", seconds: hold, block: `Holds ${r}/${HOLD_REPS}` });
+    steps.push({ kind: "squeeze", label: "Squeeze & hold", seconds: hold, block: `Holds ${r}/${HOLD_REPS}`, blockId: "holds", rep: r, repsTotal: HOLD_REPS });
-    if (r < HOLD_REPS) steps.push({ kind: "rest", label: "Rest", seconds: repRest, block: `Holds ${r}/${HOLD_REPS}` });
+    if (r < HOLD_REPS) steps.push({ kind: "rest", label: "Rest", seconds: repRest, block: `Holds ${r}/${HOLD_REPS}`, blockId: "holds", rep: r, repsTotal: HOLD_REPS });
   }
-  steps.push({ kind: "rest", label: "Rest", seconds: BLOCK_REST, block: "Holds done" });
+  steps.push({ kind: "rest", label: "Rest", seconds: BLOCK_REST, block: "Holds done", blockId: "holds", rep: HOLD_REPS, repsTotal: HOLD_REPS });
 
   // Block 2: reverse kegels — gently push out, as when starting to urinate.
   for (let r = 1; r <= PUSH_REPS; r++) {
-    steps.push({ kind: "push", label: "Push out", seconds: push, block: `Pushes ${r}/${PUSH_REPS}` });
+    steps.push({ kind: "push", label: "Push out", seconds: push, block: `Pushes ${r}/${PUSH_REPS}`, blockId: "pushes", rep: r, repsTotal: PUSH_REPS });
-    if (r < PUSH_REPS) steps.push({ kind: "rest", label: "Rest", seconds: 5, block: `Pushes ${r}/${PUSH_REPS}` });
+    if (r < PUSH_REPS) steps.push({ kind: "rest", label: "Rest", seconds: 5, block: `Pushes ${r}/${PUSH_REPS}`, blockId: "pushes", rep: r, repsTotal: PUSH_REPS });
   }
-  steps.push({ kind: "rest", label: "Rest", seconds: BLOCK_REST, block: "Pushes done" });
+  steps.push({ kind: "rest", label: "Rest", seconds: BLOCK_REST, block: "Pushes done", blockId: "pushes", rep: PUSH_REPS, repsTotal: PUSH_REPS });
 
   // Block 3: quick flicks in — fast full contractions, full release between.
   for (let r = 1; r <= FLICK_REPS; r++) {
-    steps.push({ kind: "flick-squeeze", label: "Squeeze", seconds: 1, block: `Quick squeezes ${r}/${FLICK_REPS}` });
+    steps.push({ kind: "flick-squeeze", label: "Squeeze", seconds: 1, block: `Quick squeezes ${r}/${FLICK_REPS}`, blockId: "flick-squeezes", rep: r, repsTotal: FLICK_REPS });
-    steps.push({ kind: "relax", label: "Relax", seconds: 1, block: `Quick squeezes ${r}/${FLICK_REPS}` });
+    steps.push({ kind: "relax", label: "Relax", seconds: 1, block: `Quick squeezes ${r}/${FLICK_REPS}`, blockId: "flick-squeezes", rep: r, repsTotal: FLICK_REPS });
   }
-  steps.push({ kind: "rest", label: "Rest", seconds: 15, block: "Quick squeezes done" });
+  steps.push({ kind: "rest", label: "Rest", seconds: 15, block: "Quick squeezes done", blockId: "flick-squeezes", rep: FLICK_REPS, repsTotal: FLICK_REPS });
 
   // Block 4: quick flicks out.
   for (let r = 1; r <= FLICK_REPS; r++) {
-    steps.push({ kind: "flick-push", label: "Push", seconds: 1, block: `Quick pushes ${r}/${FLICK_REPS}` });
+    steps.push({ kind: "flick-push", label: "Push", seconds: 1, block: `Quick pushes ${r}/${FLICK_REPS}`, blockId: "flick-pushes", rep: r, repsTotal: FLICK_REPS });
-    steps.push({ kind: "relax", label: "Relax", seconds: 1, block: `Quick pushes ${r}/${FLICK_REPS}` });
+    steps.push({ kind: "relax", label: "Relax", seconds: 1, block: `Quick pushes ${r}/${FLICK_REPS}`, blockId: "flick-pushes", rep: r, repsTotal: FLICK_REPS });
   }
 
   return steps;