Fix frame pacing

apps/demo/src/style.css

@@ -52,6 +52,17 @@ html[data-pwa-edge-guard="active"] body {
   left: 0;
 }
 
+/* Blurring content that is itself moving forces WebKit to repeatedly
+   rasterize the tab/header chrome. Use the same dark material without the
+   live blur for the short duration of a route transition. */
+.app-frame:has(.nvr-router-view--interactive) :is(.app-tabs, .app-header, .composer) {
+  backdrop-filter: none;
+}
+
+.app-frame:has(.nvr-router-view--interactive) .app-tabs {
+  background: rgba(11, 13, 18, .98);
+}
+
 .screen {
   width: 100%;
   height: 100%;

apps/demo/src/views/SettingsView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useNativeRouter } from '@native-vue-router/core'
 import AppHeader from '../components/AppHeader.vue'
 import { useDemoStore } from '../data'
@@ -6,6 +7,12 @@ import { pwaBuildId, pwaEnvironment } from '../pwa'
 
 const store = useDemoStore()
 const native = useNativeRouter()
+const unloadResult = ref('Unload cached Stories')
+
+function unloadStories() {
+  const count = native.unload('/stories')
+  unloadResult.value = count ? `Unloaded ${count} Stories view` : 'Stories is not cached'
+}
 </script>
 
 <template>
@@ -32,6 +39,7 @@ const native = useNativeRouter()
       <p>Sibling tabs are created on first visit, then retained. Back-stack screens stay warm only while they remain useful as a predictive-back target.</p>
     </section>
     <button class="reset-button reset-button--neutral" type="button" @click="native.trimCache()">Trim inactive view cache</button>
+    <button class="reset-button reset-button--neutral" data-testid="unload-stories" type="button" @click="unloadStories">{{ unloadResult }}</button>
     <section class="settings-group">
       <h2>Simulation</h2>
       <label><span><strong>Network latency</strong><small>{{ store.settings.simulatedLatency }} ms</small></span><input v-model.number="store.settings.simulatedLatency" type="range" min="0" max="1200" step="20" /></label>