first commit

apps/demo/src/views/SettingsView.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import AppHeader from '../components/AppHeader.vue'
+import { useDemoStore } from '../data'
+
+const store = useDemoStore()
+</script>
+
+<template>
+  <main class="screen">
+    <AppHeader title="Navigation lab" subtitle="Runtime controls" back />
+    <section class="lab-intro">
+      <span>60</span>
+      <div><strong>FPS baseline</strong><p>Interactive layers use transform and opacity only.</p></div>
+    </section>
+    <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>
+      <label><span><strong>Force message failures</strong><small>Test optimistic UI</small></span><input v-model="store.settings.simulateFailures" type="checkbox" /></label>
+      <div><span><strong>Connection</strong><small>Browser network state</small></span><b :class="{ offline: store.offline.value }">{{ store.offline.value ? 'Offline' : 'Online' }}</b></div>
+    </section>
+    <section class="settings-group">
+      <h2>Gesture recipes</h2>
+      <p>Hold an edge-back gesture at any progress, swipe between primary routes, drag a conversation, or open the compose sheet.</p>
+    </section>
+    <button class="reset-button" type="button" @click="store.reset">Reset offline demo data</button>
+  </main>
+</template>