first commit

2026-07-21 14:54:36 +10:00
commit e79c793b9c
134 changed files with 14427 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+coverage
+playwright-report
+test-results
+.vite
+*.local
+
+# Editor directories and files
+.vscode
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@@ -0,0 +1,95 @@
+# Native Vue Router
+
+Native Vue Router is a gesture-first navigation runtime for Vue 3 and Vue Router 5. It keeps Vue Router in charge of matching, URLs, guards, and history while rendering live route stacks that can be manipulated interactively.
+
+The repository includes a reusable headless core, a platform-adaptive visual preset, Capacitor and Electron adapters, and one messaging demo delivered as a PWA and through native hosts.
+
+## What works
+
+- Interactive edge pop that can be held indefinitely at any progress.
+- Ordered horizontal route paging with replace-by-default history.
+- Component-originated route dragging with a live target route.
+- Interactive push, adjacent-page sibling slide, modal, sheet, fade, and application-defined presentations.
+- Concurrent `from` and `to` routes using only public Vue Router 5 APIs.
+- Guarded commits: previews do not alter the URL, and rejected navigation springs back.
+- Cold-start predictive back through declared parent routes.
+- Bounded live view caching, nested router views, focus isolation, RTL, and reduced motion.
+- PWA, Electron, and Capacitor iOS/Android hosts.
+
+## Run it
+
+```bash
+npm install
+npm run dev
+```
+
+The default app is the installable messaging PWA. Other useful commands:
+
+```bash
+npm run build          # packages, declarations, demo, and service worker
+npm test               # core transaction tests
+npm run test:e2e       # desktop and mobile Playwright projects
+npm run electron       # build and launch the Electron host
+npm run cap:sync       # build and synchronize iOS and Android projects
+```
+
+Native projects live under `apps/capacitor/ios` and `apps/capacitor/android`. Open or run them from `apps/capacitor` with `npx cap open ios`, `npx cap open android`, or `npx cap run <platform>`.
+
+## Minimal integration
+
+```ts
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import { createNativeRouter } from '@native-vue-router/core'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: '/', component: Home },
+    {
+      path: '/chat/:id',
+      component: Chat,
+      meta: {
+        native: { presentation: 'push', parent: '/', gesture: 'edge' },
+      },
+    },
+  ],
+})
+
+const nativeRouter = createNativeRouter({ router })
+createApp(App).use(router).use(nativeRouter).mount('#app')
+```
+
+```vue
+<script setup lang="ts">
+import { NativeGestureLink, NativeNavigator, NativeRouterView } from '@native-vue-router/core'
+</script>
+
+<template>
+  <NativeNavigator :siblings="['/', '/stories', '/profile']">
+    <NativeRouterView />
+  </NativeNavigator>
+  <NativeGestureLink to="/chat/maya" presentation="reveal">
+    Drag this row into the chat route
+  </NativeGestureLink>
+</template>
+```
+
+Import `@native-vue-router/core/style.css` for the built-in presentation layers. The demo imports `@native-vue-router/preset-native/style.css` as well.
+
+Use `nativeRouter.sibling(to)` for tab or peer-route navigation. Direction is derived from `siblingOrder`, repeated navigation to the active route is a no-op, and `siblingHistory: 'replace'` keeps cached tab views out of the back stack.
+
+## Packages
+
+- `@native-vue-router/core` — transactions, route ledger, concurrent views, gestures, caching, and public components/composables.
+- `@native-vue-router/preset-native` — adaptive tab/back controls, safe-area CSS, and platform motion defaults.
+- `@native-vue-router/capacitor` — hardware back, deep links, pause cancellation, root exit, and haptics.
+- `@native-vue-router/electron` — Chromium history-gesture suppression and renderer back/forward bridging.
+
+See [architecture](docs/architecture.md) and [platform integration](docs/platforms.md) for the transaction lifecycle and host-specific behavior.
+
+## Support contract
+
+The target is Vue 3.5+ and Vue Router 5. Installed PWAs, current Electron, and Capacitor 8 are first-class. Normal browser tabs remain functional but browsers can reserve edge gestures that page content cannot consistently override.
+
+MIT
--- a/apps/capacitor/android/.gitignore
+++ b/apps/capacitor/android/.gitignore
@@ -0,0 +1,101 @@
+# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
+
+# Built application files
+*.apk
+*.aar
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+#  Uncomment the following line in case you need and you don't have the release build type files in your app
+# release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/assetWizardSettings.xml
+.idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+.cxx/
+
+# Google Services (e.g. APIs or Firebase)
+# google-services.json
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+
+# Version control
+vcs.xml
+
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+
+# Android Profiling
+*.hprof
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public
+
+# Generated Config files
+app/src/main/assets/capacitor.config.json
+app/src/main/assets/capacitor.plugins.json
+app/src/main/res/xml/config.xml
--- a/apps/capacitor/android/app/.gitignore
+++ b/apps/capacitor/android/app/.gitignore
@@ -0,0 +1,2 @@
+/build/*
+!/build/.npmkeep
--- a/apps/capacitor/android/app/build.gradle
+++ b/apps/capacitor/android/app/build.gradle
@@ -0,0 +1,54 @@
+apply plugin: 'com.android.application'
+
+android {
+    namespace = "dev.nativevuerouter.messenger"
+    compileSdk = rootProject.ext.compileSdkVersion
+    defaultConfig {
+        applicationId "dev.nativevuerouter.messenger"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        aaptOptions {
+             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
+             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
+            ignoreAssetsPattern = '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+repositories {
+    flatDir{
+        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+    }
+}
+
+dependencies {
+    implementation fileTree(include: ['*.jar'], dir: 'libs')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
+    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
+    implementation project(':capacitor-android')
+    testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+    implementation project(':capacitor-cordova-android-plugins')
+}
+
+apply from: 'capacitor.build.gradle'
+
+try {
+    def servicesJSON = file('google-services.json')
+    if (servicesJSON.text) {
+        apply plugin: 'com.google.gms.google-services'
+    }
+} catch(Exception e) {
+    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
+}
--- a/apps/capacitor/android/app/capacitor.build.gradle
+++ b/apps/capacitor/android/app/capacitor.build.gradle
@@ -0,0 +1,22 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+
+android {
+  compileOptions {
+      sourceCompatibility JavaVersion.VERSION_21
+      targetCompatibility JavaVersion.VERSION_21
+  }
+}
+
+apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
+dependencies {
+    implementation project(':capacitor-app')
+    implementation project(':capacitor-haptics')
+    implementation project(':capacitor-splash-screen')
+    implementation project(':capacitor-status-bar')
+
+}
+
+
+if (hasProperty('postBuildExtras')) {
+  postBuildExtras()
+}
--- a/apps/capacitor/android/app/proguard-rules.pro
+++ b/apps/capacitor/android/app/proguard-rules.pro
@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile
--- a/apps/capacitor/android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java
+++ b/apps/capacitor/android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java
@@ -0,0 +1,26 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import android.content.Context;
+import androidx.test.ext.junit.runners.AndroidJUnit4;
+import androidx.test.platform.app.InstrumentationRegistry;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+@RunWith(AndroidJUnit4.class)
+public class ExampleInstrumentedTest {
+
+    @Test
+    public void useAppContext() throws Exception {
+        // Context of the app under test.
+        Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
+
+        assertEquals("com.getcapacitor.app", appContext.getPackageName());
+    }
+}
--- a/apps/capacitor/android/app/src/main/AndroidManifest.xml
+++ b/apps/capacitor/android/app/src/main/AndroidManifest.xml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+
+        <activity
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode|navigation|density"
+            android:name=".MainActivity"
+            android:label="@string/title_activity_main"
+            android:theme="@style/AppTheme.NoActionBarLaunch"
+            android:launchMode="singleTask"
+            android:exported="true">
+
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+
+        </activity>
+
+        <provider
+            android:name="androidx.core.content.FileProvider"
+            android:authorities="${applicationId}.fileprovider"
+            android:exported="false"
+            android:grantUriPermissions="true">
+            <meta-data
+                android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/file_paths"></meta-data>
+        </provider>
+    </application>
+
+    <!-- Permissions -->
+
+    <uses-permission android:name="android.permission.INTERNET" />
+</manifest>
--- a/apps/capacitor/android/app/src/main/java/dev/nativevuerouter/messenger/MainActivity.java
+++ b/apps/capacitor/android/app/src/main/java/dev/nativevuerouter/messenger/MainActivity.java
@@ -0,0 +1,5 @@
+package dev.nativevuerouter.messenger;
+
+import com.getcapacitor.BridgeActivity;
+
+public class MainActivity extends BridgeActivity {}
--- a/apps/capacitor/android/app/src/main/res/drawable-land-hdpi/splash.png
+++ b/apps/capacitor/android/app/src/main/res/drawable-land-hdpi/splash.png
--- a/apps/capacitor/android/app/src/main/res/drawable-land-mdpi/splash.png
+++ b/apps/capacitor/android/app/src/main/res/drawable-land-mdpi/splash.png
--- a/apps/capacitor/android/app/src/main/res/drawable-land-xhdpi/splash.png
+++ b/apps/capacitor/android/app/src/main/res/drawable-land-xhdpi/splash.png
--- a/apps/capacitor/android/app/src/main/res/drawable-land-xxhdpi/splash.png
+++ b/apps/capacitor/android/app/src/main/res/drawable-land-xxhdpi/splash.png
--- a/apps/capacitor/android/app/src/main/res/drawable-land-xxxhdpi/splash.png
+++ b/apps/capacitor/android/app/src/main/res/drawable-land-xxxhdpi/splash.png
--- a/apps/capacitor/android/app/src/main/res/drawable-port-hdpi/splash.png
+++ b/apps/capacitor/android/app/src/main/res/drawable-port-hdpi/splash.png
--- a/apps/capacitor/android/app/src/main/res/drawable-port-mdpi/splash.png
+++ b/apps/capacitor/android/app/src/main/res/drawable-port-mdpi/splash.png
--- a/apps/capacitor/android/app/src/main/res/drawable-port-xhdpi/splash.png
+++ b/apps/capacitor/android/app/src/main/res/drawable-port-xhdpi/splash.png
--- a/apps/capacitor/android/app/src/main/res/drawable-port-xxhdpi/splash.png
+++ b/apps/capacitor/android/app/src/main/res/drawable-port-xxhdpi/splash.png
--- a/apps/capacitor/android/app/src/main/res/drawable-port-xxxhdpi/splash.png
+++ b/apps/capacitor/android/app/src/main/res/drawable-port-xxxhdpi/splash.png
--- a/apps/capacitor/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml
+++ b/apps/capacitor/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml
@@ -0,0 +1,34 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillType="evenOdd"
+        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:endX="78.5885"
+                android:endY="90.9159"
+                android:startX="48.7653"
+                android:startY="61.0927"
+                android:type="linear">
+                <item
+                    android:color="#44000000"
+                    android:offset="0.0" />
+                <item
+                    android:color="#00000000"
+                    android:offset="1.0" />
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:fillColor="#FFFFFF"
+        android:fillType="nonZero"
+        android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1" />
+</vector>
--- a/apps/capacitor/android/app/src/main/res/drawable/ic_launcher_background.xml
+++ b/apps/capacitor/android/app/src/main/res/drawable/ic_launcher_background.xml
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillColor="#26A69A"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+</vector>
--- a/apps/capacitor/android/app/src/main/res/drawable/splash.png
+++ b/apps/capacitor/android/app/src/main/res/drawable/splash.png
--- a/apps/capacitor/android/app/src/main/res/layout/activity_main.xml
+++ b/apps/capacitor/android/app/src/main/res/layout/activity_main.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity">
+
+    <WebView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+</androidx.coordinatorlayout.widget.CoordinatorLayout>
--- a/apps/capacitor/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
+++ b/apps/capacitor/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>
--- a/apps/capacitor/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
+++ b/apps/capacitor/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>
--- a/apps/capacitor/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
+++ b/apps/capacitor/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
--- a/apps/capacitor/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png
+++ b/apps/capacitor/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png
--- a/apps/capacitor/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
+++ b/apps/capacitor/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
--- a/apps/capacitor/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
+++ b/apps/capacitor/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
--- a/apps/capacitor/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png
+++ b/apps/capacitor/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png
--- a/apps/capacitor/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
+++ b/apps/capacitor/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
--- a/apps/capacitor/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
+++ b/apps/capacitor/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--- a/apps/capacitor/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png
+++ b/apps/capacitor/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png
--- a/apps/capacitor/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
+++ b/apps/capacitor/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
--- a/apps/capacitor/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
+++ b/apps/capacitor/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--- a/apps/capacitor/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png
+++ b/apps/capacitor/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png
--- a/apps/capacitor/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
+++ b/apps/capacitor/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
--- a/apps/capacitor/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
+++ b/apps/capacitor/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
--- a/apps/capacitor/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png
+++ b/apps/capacitor/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png
--- a/apps/capacitor/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
+++ b/apps/capacitor/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
--- a/apps/capacitor/android/app/src/main/res/values/ic_launcher_background.xml
+++ b/apps/capacitor/android/app/src/main/res/values/ic_launcher_background.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FFFFFF</color>
+</resources>
--- a/apps/capacitor/android/app/src/main/res/values/strings.xml
+++ b/apps/capacitor/android/app/src/main/res/values/strings.xml
@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='utf-8'?>
+<resources>
+    <string name="app_name">Native Vue Messenger</string>
+    <string name="title_activity_main">Native Vue Messenger</string>
+    <string name="package_name">dev.nativevuerouter.messenger</string>
+    <string name="custom_url_scheme">dev.nativevuerouter.messenger</string>
+</resources>
--- a/apps/capacitor/android/app/src/main/res/values/styles.xml
+++ b/apps/capacitor/android/app/src/main/res/values/styles.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+    </style>
+
+    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+        <item name="android:background">@null</item>
+    </style>
+
+
+    <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
+        <item name="android:background">@drawable/splash</item>
+    </style>
+</resources>
--- a/apps/capacitor/android/app/src/main/res/xml/file_paths.xml
+++ b/apps/capacitor/android/app/src/main/res/xml/file_paths.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <external-path name="my_images" path="." />
+    <cache-path name="my_cache_images" path="." />
+</paths>
--- a/apps/capacitor/android/app/src/test/java/com/getcapacitor/myapp/ExampleUnitTest.java
+++ b/apps/capacitor/android/app/src/test/java/com/getcapacitor/myapp/ExampleUnitTest.java
@@ -0,0 +1,18 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import org.junit.Test;
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+public class ExampleUnitTest {
+
+    @Test
+    public void addition_isCorrect() throws Exception {
+        assertEquals(4, 2 + 2);
+    }
+}
--- a/apps/capacitor/android/build.gradle
+++ b/apps/capacitor/android/build.gradle
@@ -0,0 +1,29 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:8.13.0'
+        classpath 'com.google.gms:google-services:4.4.4'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+apply from: "variables.gradle"
+
+allprojects {
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}
--- a/apps/capacitor/android/capacitor.settings.gradle
+++ b/apps/capacitor/android/capacitor.settings.gradle
@@ -0,0 +1,15 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+include ':capacitor-android'
+project(':capacitor-android').projectDir = new File('../../../node_modules/@capacitor/android/capacitor')
+
+include ':capacitor-app'
+project(':capacitor-app').projectDir = new File('../../../node_modules/@capacitor/app/android')
+
+include ':capacitor-haptics'
+project(':capacitor-haptics').projectDir = new File('../../../node_modules/@capacitor/haptics/android')
+
+include ':capacitor-splash-screen'
+project(':capacitor-splash-screen').projectDir = new File('../../../node_modules/@capacitor/splash-screen/android')
+
+include ':capacitor-status-bar'
+project(':capacitor-status-bar').projectDir = new File('../../../node_modules/@capacitor/status-bar/android')
--- a/apps/capacitor/android/gradle.properties
+++ b/apps/capacitor/android/gradle.properties
@@ -0,0 +1,22 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx1536m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
--- a/apps/capacitor/android/gradle/wrapper/gradle-wrapper.jar
+++ b/apps/capacitor/android/gradle/wrapper/gradle-wrapper.jar
--- a/apps/capacitor/android/gradle/wrapper/gradle-wrapper.properties
+++ b/apps/capacitor/android/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-all.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
--- a/apps/capacitor/android/gradlew
+++ b/apps/capacitor/android/gradlew
@@ -0,0 +1,251 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH="\\\"\\\""
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"
--- a/apps/capacitor/android/gradlew.bat
+++ b/apps/capacitor/android/gradlew.bat
@@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
--- a/apps/capacitor/android/settings.gradle
+++ b/apps/capacitor/android/settings.gradle
@@ -0,0 +1,5 @@
+include ':app'
+include ':capacitor-cordova-android-plugins'
+project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
+
+apply from: 'capacitor.settings.gradle'
--- a/apps/capacitor/android/variables.gradle
+++ b/apps/capacitor/android/variables.gradle
@@ -0,0 +1,16 @@
+ext {
+    minSdkVersion = 24
+    compileSdkVersion = 36
+    targetSdkVersion = 36
+    androidxActivityVersion = '1.11.0'
+    androidxAppCompatVersion = '1.7.1'
+    androidxCoordinatorLayoutVersion = '1.3.0'
+    androidxCoreVersion = '1.17.0'
+    androidxFragmentVersion = '1.8.9'
+    coreSplashScreenVersion = '1.2.0'
+    androidxWebkitVersion = '1.14.0'
+    junitVersion = '4.13.2'
+    androidxJunitVersion = '1.3.0'
+    androidxEspressoCoreVersion = '3.7.0'
+    cordovaAndroidVersion = '14.0.1'
+}
--- a/apps/capacitor/capacitor.config.ts
+++ b/apps/capacitor/capacitor.config.ts
@@ -0,0 +1,21 @@
+import type { CapacitorConfig } from '@capacitor/cli'
+
+const config: CapacitorConfig = {
+  appId: 'dev.nativevuerouter.messenger',
+  appName: 'Native Vue Messenger',
+  webDir: '../demo/dist',
+  backgroundColor: '#0b0d12',
+  plugins: {
+    App: { disableBackButtonHandler: true },
+    SplashScreen: {
+      launchAutoHide: true,
+      backgroundColor: '#0b0d12',
+      androidScaleType: 'CENTER_CROP',
+    },
+    StatusBar: { style: 'DARK', backgroundColor: '#0b0d12' },
+  },
+  android: { backgroundColor: '#0b0d12' },
+  ios: { backgroundColor: '#0b0d12', contentInset: 'never' },
+}
+
+export default config
--- a/apps/capacitor/ios/.gitignore
+++ b/apps/capacitor/ios/.gitignore
@@ -0,0 +1,13 @@
+App/build
+App/Pods
+App/output
+App/App/public
+DerivedData
+xcuserdata
+
+# Cordova plugins for Capacitor
+capacitor-cordova-ios-plugins
+
+# Generated Config files
+App/App/capacitor.config.json
+App/App/config.xml
--- a/apps/capacitor/ios/App/App.xcodeproj/project.pbxproj
+++ b/apps/capacitor/ios/App/App.xcodeproj/project.pbxproj
@@ -0,0 +1,376 @@
+// !$*UTF8*$!
+{
+	archiveVersion = 1;
+	classes = {
+	};
+	objectVersion = 60;
+	objects = {
+
+/* Begin PBXBuildFile section */
+		2FAD9763203C412B000D30F8 /* config.xml in Resources */ = {isa = PBXBuildFile; fileRef = 2FAD9762203C412B000D30F8 /* config.xml */; };
+		4D22ABE92AF431CB00220026 /* CapApp-SPM in Frameworks */ = {isa = PBXBuildFile; productRef = 4D22ABE82AF431CB00220026 /* CapApp-SPM */; };
+		50379B232058CBB4000EE86E /* capacitor.config.json in Resources */ = {isa = PBXBuildFile; fileRef = 50379B222058CBB4000EE86E /* capacitor.config.json */; };
+		504EC3081FED79650016851F /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 504EC3071FED79650016851F /* AppDelegate.swift */; };
+		504EC30D1FED79650016851F /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30B1FED79650016851F /* Main.storyboard */; };
+		504EC30F1FED79650016851F /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30E1FED79650016851F /* Assets.xcassets */; };
+		504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC3101FED79650016851F /* LaunchScreen.storyboard */; };
+		50B271D11FEDC1A000F3C39B /* public in Resources */ = {isa = PBXBuildFile; fileRef = 50B271D01FEDC1A000F3C39B /* public */; };
+/* End PBXBuildFile section */
+
+/* Begin PBXFileReference section */
+		2FAD9762203C412B000D30F8 /* config.xml */ = {isa = PBXFileReference; lastKnownFileType = text.xml; path = config.xml; sourceTree = "<group>"; };
+		50379B222058CBB4000EE86E /* capacitor.config.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = capacitor.config.json; sourceTree = "<group>"; };
+		504EC3041FED79650016851F /* App.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = App.app; sourceTree = BUILT_PRODUCTS_DIR; };
+		504EC3071FED79650016851F /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
+		504EC30C1FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
+		504EC30E1FED79650016851F /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
+		504EC3111FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
+		504EC3131FED79650016851F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = "<group>"; };
+		958DCC722DB07C7200EA8C5F /* debug.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = debug.xcconfig; path = ../debug.xcconfig; sourceTree = SOURCE_ROOT; };
+/* End PBXFileReference section */
+
+/* Begin PBXFrameworksBuildPhase section */
+		504EC3011FED79650016851F /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				4D22ABE92AF431CB00220026 /* CapApp-SPM in Frameworks */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXFrameworksBuildPhase section */
+
+/* Begin PBXGroup section */
+		504EC2FB1FED79650016851F = {
+			isa = PBXGroup;
+			children = (
+				958DCC722DB07C7200EA8C5F /* debug.xcconfig */,
+				504EC3061FED79650016851F /* App */,
+				504EC3051FED79650016851F /* Products */,
+			);
+			sourceTree = "<group>";
+		};
+		504EC3051FED79650016851F /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				504EC3041FED79650016851F /* App.app */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		504EC3061FED79650016851F /* App */ = {
+			isa = PBXGroup;
+			children = (
+				50379B222058CBB4000EE86E /* capacitor.config.json */,
+				504EC3071FED79650016851F /* AppDelegate.swift */,
+				504EC30B1FED79650016851F /* Main.storyboard */,
+				504EC30E1FED79650016851F /* Assets.xcassets */,
+				504EC3101FED79650016851F /* LaunchScreen.storyboard */,
+				504EC3131FED79650016851F /* Info.plist */,
+				2FAD9762203C412B000D30F8 /* config.xml */,
+				50B271D01FEDC1A000F3C39B /* public */,
+			);
+			path = App;
+			sourceTree = "<group>";
+		};
+/* End PBXGroup section */
+
+/* Begin PBXNativeTarget section */
+		504EC3031FED79650016851F /* App */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */;
+			buildPhases = (
+				504EC3001FED79650016851F /* Sources */,
+				504EC3011FED79650016851F /* Frameworks */,
+				504EC3021FED79650016851F /* Resources */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			name = App;
+			packageProductDependencies = (
+				4D22ABE82AF431CB00220026 /* CapApp-SPM */,
+			);
+			productName = App;
+			productReference = 504EC3041FED79650016851F /* App.app */;
+			productType = "com.apple.product-type.application";
+		};
+/* End PBXNativeTarget section */
+
+/* Begin PBXProject section */
+		504EC2FC1FED79650016851F /* Project object */ = {
+			isa = PBXProject;
+			attributes = {
+				LastSwiftUpdateCheck = 0920;
+				LastUpgradeCheck = 0920;
+				TargetAttributes = {
+					504EC3031FED79650016851F = {
+						CreatedOnToolsVersion = 9.2;
+						LastSwiftMigration = 1100;
+						ProvisioningStyle = Automatic;
+					};
+				};
+			};
+			buildConfigurationList = 504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */;
+			compatibilityVersion = "Xcode 8.0";
+			developmentRegion = en;
+			hasScannedForEncodings = 0;
+			knownRegions = (
+				en,
+				Base,
+			);
+			mainGroup = 504EC2FB1FED79650016851F;
+			packageReferences = (
+				D4C12C0A2AAA248700AAC8A2 /* XCLocalSwiftPackageReference "CapApp-SPM" */,
+			);
+			productRefGroup = 504EC3051FED79650016851F /* Products */;
+			projectDirPath = "";
+			projectRoot = "";
+			targets = (
+				504EC3031FED79650016851F /* App */,
+			);
+		};
+/* End PBXProject section */
+
+/* Begin PBXResourcesBuildPhase section */
+		504EC3021FED79650016851F /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */,
+				50B271D11FEDC1A000F3C39B /* public in Resources */,
+				504EC30F1FED79650016851F /* Assets.xcassets in Resources */,
+				50379B232058CBB4000EE86E /* capacitor.config.json in Resources */,
+				504EC30D1FED79650016851F /* Main.storyboard in Resources */,
+				2FAD9763203C412B000D30F8 /* config.xml in Resources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXResourcesBuildPhase section */
+
+/* Begin PBXSourcesBuildPhase section */
+		504EC3001FED79650016851F /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				504EC3081FED79650016851F /* AppDelegate.swift in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXSourcesBuildPhase section */
+
+/* Begin PBXVariantGroup section */
+		504EC30B1FED79650016851F /* Main.storyboard */ = {
+			isa = PBXVariantGroup;
+			children = (
+				504EC30C1FED79650016851F /* Base */,
+			);
+			name = Main.storyboard;
+			sourceTree = "<group>";
+		};
+		504EC3101FED79650016851F /* LaunchScreen.storyboard */ = {
+			isa = PBXVariantGroup;
+			children = (
+				504EC3111FED79650016851F /* Base */,
+			);
+			name = LaunchScreen.storyboard;
+			sourceTree = "<group>";
+		};
+/* End PBXVariantGroup section */
+
+/* Begin XCBuildConfiguration section */
+		504EC3141FED79650016851F /* Debug */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 958DCC722DB07C7200EA8C5F /* debug.xcconfig */;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				CODE_SIGN_IDENTITY = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = dwarf;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				ENABLE_TESTABILITY = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu11;
+				GCC_DYNAMIC_NO_PIC = NO;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_OPTIMIZATION_LEVEL = 0;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
+				MTL_ENABLE_DEBUG_INFO = YES;
+				ONLY_ACTIVE_ARCH = YES;
+				SDKROOT = iphoneos;
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
+				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
+			};
+			name = Debug;
+		};
+		504EC3151FED79650016851F /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				CODE_SIGN_IDENTITY = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
+				ENABLE_NS_ASSERTIONS = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu11;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
+				MTL_ENABLE_DEBUG_INFO = NO;
+				SDKROOT = iphoneos;
+				SWIFT_COMPILATION_MODE = wholemodule;
+				SWIFT_OPTIMIZATION_LEVEL = "-O";
+				VALIDATE_PRODUCT = YES;
+			};
+			name = Release;
+		};
+		504EC3171FED79650016851F /* Debug */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 958DCC722DB07C7200EA8C5F /* debug.xcconfig */;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CODE_SIGN_STYLE = Automatic;
+				CURRENT_PROJECT_VERSION = 1;
+				INFOPLIST_FILE = App/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				MARKETING_VERSION = 1.0;
+				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
+				PRODUCT_BUNDLE_IDENTIFIER = dev.nativevuerouter.messenger;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
+				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Debug;
+		};
+		504EC3181FED79650016851F /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CODE_SIGN_STYLE = Automatic;
+				CURRENT_PROJECT_VERSION = 1;
+				INFOPLIST_FILE = App/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				MARKETING_VERSION = 1.0;
+				PRODUCT_BUNDLE_IDENTIFIER = dev.nativevuerouter.messenger;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
+				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Release;
+		};
+/* End XCBuildConfiguration section */
+
+/* Begin XCConfigurationList section */
+		504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				504EC3141FED79650016851F /* Debug */,
+				504EC3151FED79650016851F /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				504EC3171FED79650016851F /* Debug */,
+				504EC3181FED79650016851F /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+/* End XCConfigurationList section */
+
+/* Begin XCLocalSwiftPackageReference section */
+		D4C12C0A2AAA248700AAC8A2 /* XCLocalSwiftPackageReference "CapApp-SPM" */ = {
+			isa = XCLocalSwiftPackageReference;
+			relativePath = "CapApp-SPM";
+		};
+/* End XCLocalSwiftPackageReference section */
+
+/* Begin XCSwiftPackageProductDependency section */
+		4D22ABE82AF431CB00220026 /* CapApp-SPM */ = {
+			isa = XCSwiftPackageProductDependency;
+			package = D4C12C0A2AAA248700AAC8A2 /* XCLocalSwiftPackageReference "CapApp-SPM" */;
+			productName = "CapApp-SPM";
+		};
+/* End XCSwiftPackageProductDependency section */
+	};
+	rootObject = 504EC2FC1FED79650016851F /* Project object */;
+}
--- a/apps/capacitor/ios/App/App.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
+++ b/apps/capacitor/ios/App/App.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>
--- a/apps/capacitor/ios/App/App.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved
+++ b/apps/capacitor/ios/App/App.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved
@@ -0,0 +1,15 @@
+{
+  "originHash" : "2f4cd7580d97120d02d17d813ae45c5592ed47763f54a9890679b5e96b41b34d",
+  "pins" : [
+    {
+      "identity" : "capacitor-swift-pm",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/ionic-team/capacitor-swift-pm.git",
+      "state" : {
+        "revision" : "9b9fb0af76b2b653f6e9b999f658adc132b9ab4c",
+        "version" : "8.4.2"
+      }
+    }
+  ],
+  "version" : 3
+}
--- a/apps/capacitor/ios/App/App/AppDelegate.swift
+++ b/apps/capacitor/ios/App/App/AppDelegate.swift
@@ -0,0 +1,49 @@
+import UIKit
+import Capacitor
+
+@UIApplicationMain
+class AppDelegate: UIResponder, UIApplicationDelegate {
+
+    var window: UIWindow?
+
+    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+        // Override point for customization after application launch.
+        return true
+    }
+
+    func applicationWillResignActive(_ application: UIApplication) {
+        // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
+        // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.
+    }
+
+    func applicationDidEnterBackground(_ application: UIApplication) {
+        // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
+        // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
+    }
+
+    func applicationWillEnterForeground(_ application: UIApplication) {
+        // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
+    }
+
+    func applicationDidBecomeActive(_ application: UIApplication) {
+        // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
+    }
+
+    func applicationWillTerminate(_ application: UIApplication) {
+        // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
+    }
+
+    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
+        // Called when the app was launched with a url. Feel free to add additional processing here,
+        // but if you want the App API to support tracking app url opens, make sure to keep this call
+        return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
+    }
+
+    func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
+        // Called when the app was launched with an activity, including Universal Links.
+        // Feel free to add additional processing here, but if you want the App API to support
+        // tracking app url opens, make sure to keep this call
+        return ApplicationDelegateProxy.shared.application(application, continue: userActivity, restorationHandler: restorationHandler)
+    }
+
+}
--- a/apps/capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png
+++ b/apps/capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png
--- a/apps/capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json
+++ b/apps/capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json
@@ -0,0 +1,14 @@
+{
+  "images" : [
+    {
+      "filename" : "AppIcon-512@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "size" : "1024x1024"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
--- a/apps/capacitor/ios/App/App/Assets.xcassets/Contents.json
+++ b/apps/capacitor/ios/App/App/Assets.xcassets/Contents.json
@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
--- a/apps/capacitor/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json
+++ b/apps/capacitor/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json
@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "splash-2732x2732-2.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "splash-2732x2732-1.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "splash-2732x2732.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
--- a/apps/capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png
+++ b/apps/capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png
--- a/apps/capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png
+++ b/apps/capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png
--- a/apps/capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png
+++ b/apps/capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png
--- a/apps/capacitor/ios/App/App/Base.lproj/LaunchScreen.storyboard
+++ b/apps/capacitor/ios/App/App/Base.lproj/LaunchScreen.storyboard
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17132" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17105"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <imageView key="view" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="Splash" id="snD-IY-ifK">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                        <autoresizingMask key="autoresizingMask"/>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                    </imageView>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="53" y="375"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="Splash" width="1366" height="1366"/>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+    </resources>
+</document>
--- a/apps/capacitor/ios/App/App/Base.lproj/Main.storyboard
+++ b/apps/capacitor/ios/App/App/Base.lproj/Main.storyboard
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14111" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
+    <device id="retina4_7" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
+    </dependencies>
+    <scenes>
+        <!--Bridge View Controller-->
+        <scene sceneID="tne-QT-ifu">
+            <objects>
+                <viewController id="BYZ-38-t0r" customClass="CAPBridgeViewController" customModule="Capacitor" sceneMemberID="viewController"/>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
+            </objects>
+        </scene>
+    </scenes>
+</document>
--- a/apps/capacitor/ios/App/App/Info.plist
+++ b/apps/capacitor/ios/App/App/Info.plist
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+    <key>CAPACITOR_DEBUG</key>
+	<string>$(CAPACITOR_DEBUG)</string>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleDisplayName</key>
+        <string>Native Vue Messenger</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>$(MARKETING_VERSION)</string>
+	<key>CFBundleVersion</key>
+	<string>$(CURRENT_PROJECT_VERSION)</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIMainStoryboardFile</key>
+	<string>Main</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<true/>
+</dict>
+</plist>
--- a/apps/capacitor/ios/App/CapApp-SPM/.gitignore
+++ b/apps/capacitor/ios/App/CapApp-SPM/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+/.build
+/Packages
+/*.xcodeproj
+xcuserdata/
+DerivedData/
+.swiftpm/config/registries.json
+.swiftpm/xcode/package.xcworkspace/contents.xcworkspacedata
+.netrc
--- a/apps/capacitor/ios/App/CapApp-SPM/Package.swift
+++ b/apps/capacitor/ios/App/CapApp-SPM/Package.swift
@@ -0,0 +1,33 @@
+// swift-tools-version: 5.9
+import PackageDescription
+
+// DO NOT MODIFY THIS FILE - managed by Capacitor CLI commands
+let package = Package(
+    name: "CapApp-SPM",
+    platforms: [.iOS(.v15)],
+    products: [
+        .library(
+            name: "CapApp-SPM",
+            targets: ["CapApp-SPM"])
+    ],
+    dependencies: [
+        .package(url: "https://github.com/ionic-team/capacitor-swift-pm.git", exact: "8.4.2"),
+        .package(name: "CapacitorApp", path: "../../../../../node_modules/@capacitor/app"),
+        .package(name: "CapacitorHaptics", path: "../../../../../node_modules/@capacitor/haptics"),
+        .package(name: "CapacitorSplashScreen", path: "../../../../../node_modules/@capacitor/splash-screen"),
+        .package(name: "CapacitorStatusBar", path: "../../../../../node_modules/@capacitor/status-bar")
+    ],
+    targets: [
+        .target(
+            name: "CapApp-SPM",
+            dependencies: [
+                .product(name: "Capacitor", package: "capacitor-swift-pm"),
+                .product(name: "Cordova", package: "capacitor-swift-pm"),
+                .product(name: "CapacitorApp", package: "CapacitorApp"),
+                .product(name: "CapacitorHaptics", package: "CapacitorHaptics"),
+                .product(name: "CapacitorSplashScreen", package: "CapacitorSplashScreen"),
+                .product(name: "CapacitorStatusBar", package: "CapacitorStatusBar")
+            ]
+        )
+    ]
+)
--- a/apps/capacitor/ios/App/CapApp-SPM/README.md
+++ b/apps/capacitor/ios/App/CapApp-SPM/README.md
@@ -0,0 +1,5 @@
+# CapApp-SPM
+
+This package is used to host SPM dependencies for your Capacitor project
+
+Do not modify the contents of it or there may be unintended consequences.
--- a/apps/capacitor/ios/App/CapApp-SPM/Sources/CapApp-SPM/CapApp-SPM.swift
+++ b/apps/capacitor/ios/App/CapApp-SPM/Sources/CapApp-SPM/CapApp-SPM.swift
@@ -0,0 +1 @@
+public let isCapacitorApp = true
--- a/apps/capacitor/ios/debug.xcconfig
+++ b/apps/capacitor/ios/debug.xcconfig
@@ -0,0 +1 @@
+CAPACITOR_DEBUG = true
--- a/apps/capacitor/package.json
+++ b/apps/capacitor/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "@native-vue-router/demo-capacitor",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "dependencies": {
+    "@capacitor/android": "^8.0.0",
+    "@capacitor/app": "^8.0.0",
+    "@capacitor/core": "^8.0.0",
+    "@capacitor/haptics": "^8.0.0",
+    "@capacitor/ios": "^8.0.0",
+    "@capacitor/splash-screen": "^8.0.0",
+    "@capacitor/status-bar": "^8.0.0"
+  },
+  "devDependencies": {
+    "@capacitor/cli": "^8.0.0"
+  }
+}
--- a/apps/demo/e2e/navigation.spec.ts
+++ b/apps/demo/e2e/navigation.spec.ts
@@ -0,0 +1,198 @@
+import { expect, test, type Page } from '@playwright/test'
+
+async function captureTransitions(page: Page) {
+  await page.evaluate(() => {
+    const state = window as typeof window & {
+      __nvrEvents?: Array<{ direction: string | null; presentation: string | null }>
+      __nvrObserver?: MutationObserver
+    }
+    state.__nvrObserver?.disconnect()
+    state.__nvrEvents = []
+    const view = document.querySelector('.nvr-router-view')
+    if (!view) throw new Error('Native router view did not render')
+    state.__nvrObserver = new MutationObserver(() => {
+      if (view.classList.contains('nvr-router-view--interactive')) {
+        state.__nvrEvents?.push({
+          direction: view.getAttribute('data-native-direction'),
+          presentation: view.getAttribute('data-native-presentation'),
+        })
+      }
+    })
+    state.__nvrObserver.observe(view, { attributes: true })
+  })
+}
+
+async function recordedTransitions(page: Page) {
+  return await page.evaluate(() => (window as typeof window & {
+    __nvrEvents?: Array<{ direction: string | null; presentation: string | null }>
+  }).__nvrEvents ?? [])
+}
+
+async function waitForTransition(page: Page) {
+  await expect(page.locator('.nvr-router-view')).not.toHaveClass(/nvr-router-view--interactive/)
+}
+
+test('navigates a conversation and returns through the native runtime', async ({ page }) => {
+  await page.goto('/inbox')
+  await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible()
+  await page.getByText('Maya Chen').last().click()
+  await expect(page).toHaveURL(/\/chat\/maya$/)
+  await expect(page.getByRole('heading', { name: 'Maya Chen' })).toBeVisible()
+  await page.getByRole('button', { name: 'Back' }).click()
+  await expect(page).toHaveURL(/\/inbox$/)
+  await waitForTransition(page)
+  await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible()
+})
+
+test('switches sibling routes without growing the primary history flow', async ({ page }) => {
+  await page.goto('/inbox')
+  await page.getByRole('link', { name: /Stories/ }).click()
+  await expect(page).toHaveURL(/\/stories$/)
+  await waitForTransition(page)
+  await expect(page.getByRole('heading', { name: 'Stories' })).toBeVisible()
+  await page.getByRole('link', { name: /You/ }).click()
+  await expect(page).toHaveURL(/\/profile$/)
+  await waitForTransition(page)
+  await expect(page.getByRole('heading', { name: 'You' })).toBeVisible()
+})
+
+test('uses route order for tab direction and does not animate the active tab', async ({ page }) => {
+  await page.goto('/inbox')
+  await captureTransitions(page)
+  await page.getByRole('link', { name: /Stories/ }).click()
+  await expect(page).toHaveURL(/\/stories$/)
+  await waitForTransition(page)
+  expect(await recordedTransitions(page)).toContainEqual({ direction: 'forward', presentation: 'slide' })
+
+  await captureTransitions(page)
+  await page.getByRole('link', { name: /Inbox/ }).click()
+  await expect(page).toHaveURL(/\/inbox$/)
+  await waitForTransition(page)
+  expect(await recordedTransitions(page)).toContainEqual({ direction: 'back', presentation: 'slide' })
+
+  await captureTransitions(page)
+  await page.getByRole('link', { name: /Inbox/ }).click()
+  await page.waitForTimeout(100)
+  expect(await recordedTransitions(page)).toEqual([])
+  await expect(page).toHaveURL(/\/inbox$/)
+})
+
+test('moves sibling screens edge-to-edge at one-to-one drag progress', async ({ page }) => {
+  await page.goto('/stories')
+  const routerView = page.locator('.nvr-router-view')
+  const frame = await routerView.boundingBox()
+  if (!frame) throw new Error('Native router view did not render')
+
+  await page.mouse.move(frame.x + frame.width * 0.55, frame.y + frame.height * 0.45)
+  await page.mouse.down()
+  await page.mouse.move(frame.x + frame.width * 0.8, frame.y + frame.height * 0.45, { steps: 18 })
+  await expect(routerView).toHaveAttribute('data-native-presentation', 'slide')
+  await expect(routerView).toHaveAttribute('data-native-direction', 'back')
+
+  const from = await page.locator('[data-native-role="from"]').boundingBox()
+  const to = await page.locator('[data-native-role="to"]').boundingBox()
+  if (!from || !to) throw new Error('Both sibling pages must be live during a drag')
+  expect(Math.abs(from.x - (to.x + to.width))).toBeLessThan(3)
+  await page.mouse.up()
+})
+
+test('opens and dismisses the compose sheet', async ({ page }) => {
+  await page.goto('/inbox')
+  await page.getByRole('button', { name: 'Compose' }).click()
+  await expect(page).toHaveURL(/\/compose$/)
+  await expect(page.getByRole('heading', { name: 'New message' })).toBeVisible()
+  await page.getByRole('button', { name: 'Cancel' }).click()
+  await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible()
+})
+
+test('keeps the target live during a held component drag', async ({ page }) => {
+  await page.goto('/inbox')
+  const row = page.locator('.conversation-row').first()
+  const box = await row.boundingBox()
+  if (!box) throw new Error('Conversation row did not render')
+  await page.mouse.move(box.x + box.width * 0.8, box.y + box.height / 2)
+  await page.mouse.down()
+  await page.mouse.move(box.x + box.width * 0.35, box.y + box.height / 2, { steps: 12 })
+  await expect(page.locator('[data-native-role="to"]')).toBeVisible()
+  await page.mouse.up()
+  await expect(page.getByRole('heading', { name: 'Maya Chen' })).toBeVisible()
+})
+
+test('holds an edge-back preview without committing the URL', async ({ page }) => {
+  await page.goto('/inbox')
+  await page.getByText('Maya Chen').last().click()
+  await expect(page).toHaveURL(/\/chat\/maya$/)
+  const frame = await page.locator('.app-frame').boundingBox()
+  if (!frame) throw new Error('App frame did not render')
+  await page.mouse.move(frame.x + 2, frame.y + frame.height * 0.5)
+  await page.mouse.down()
+  await page.mouse.move(frame.x + frame.width * 0.55, frame.y + frame.height * 0.5, { steps: 14 })
+  await expect(page.locator('[data-native-role="to"]')).toBeVisible()
+  await expect(page).toHaveURL(/\/chat\/maya$/)
+  await page.mouse.up()
+  await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible()
+})
+
+test('never previews a stale conversation after a cancelled back gesture', async ({ page }) => {
+  await page.goto('/inbox')
+  await page.getByText('Maya Chen').last().click()
+  await page.getByRole('button', { name: 'Back' }).click()
+  await expect(page).toHaveURL(/\/inbox$/)
+  await waitForTransition(page)
+  await page.getByText('Noah Williams').last().click()
+  await expect(page).toHaveURL(/\/chat\/noah$/)
+  await waitForTransition(page)
+
+  const frame = await page.locator('.app-frame').boundingBox()
+  if (!frame) throw new Error('App frame did not render')
+  await page.mouse.move(frame.x + 2, frame.y + frame.height * 0.5)
+  await page.mouse.down()
+  await page.mouse.move(frame.x + frame.width * 0.055, frame.y + frame.height * 0.5, { steps: 16 })
+  await page.mouse.up()
+  await waitForTransition(page)
+  await expect(page).toHaveURL(/\/chat\/noah$/)
+
+  await page.getByRole('button', { name: 'Back' }).click()
+  const backTarget = page.locator('[data-native-role="to"]')
+  await expect(backTarget.getByRole('heading', { name: 'Messages' })).toBeVisible()
+  await expect(backTarget.getByRole('heading', { name: 'Maya Chen' })).toHaveCount(0)
+  await waitForTransition(page)
+  await expect(page).toHaveURL(/\/inbox$/)
+})
+
+test('always opens compose as a vertical sheet after prior navigation', async ({ page }) => {
+  await page.goto('/inbox')
+  await page.getByText('Maya Chen').last().click()
+  await page.getByRole('button', { name: 'Back' }).click()
+  await expect(page).toHaveURL(/\/inbox$/)
+  await waitForTransition(page)
+  await page.getByRole('link', { name: /Stories/ }).click()
+  await expect(page).toHaveURL(/\/stories$/)
+  await waitForTransition(page)
+  await page.getByRole('link', { name: /Inbox/ }).click()
+  await expect(page).toHaveURL(/\/inbox$/)
+  await waitForTransition(page)
+
+  await page.getByRole('button', { name: 'Compose' }).click()
+  const routerView = page.locator('.nvr-router-view')
+  await expect(routerView).toHaveAttribute('data-native-presentation', 'sheet')
+  await expect(routerView).toHaveAttribute('data-native-direction', 'up')
+  const frame = await routerView.boundingBox()
+  const sheet = await page.locator('[data-native-role="to"]').boundingBox()
+  if (!frame || !sheet) throw new Error('Sheet transition did not render')
+  expect(Math.abs(frame.x - sheet.x)).toBeLessThan(3)
+  await waitForTransition(page)
+  await page.getByRole('button', { name: 'Cancel' }).click()
+})
+
+test('drags a sheet down to dismiss it', async ({ page }) => {
+  await page.goto('/inbox')
+  await page.getByRole('button', { name: 'Compose' }).click()
+  const sheet = await page.locator('.sheet-screen').boundingBox()
+  if (!sheet) throw new Error('Sheet did not render')
+  await page.mouse.move(sheet.x + sheet.width / 2, sheet.y + 12)
+  await page.mouse.down()
+  await page.mouse.move(sheet.x + sheet.width / 2, sheet.y + sheet.height * 0.55, { steps: 14 })
+  await page.mouse.up()
+  await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible()
+})
--- a/apps/demo/index.html
+++ b/apps/demo/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no" />
+    <meta name="theme-color" content="#0b0d12" />
+    <link rel="icon" href="/favicon.svg" />
+    <title>Native Vue Messenger</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/apps/demo/package.json
+++ b/apps/demo/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@native-vue-router/demo",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module"
+}
--- a/apps/demo/src/App.vue
+++ b/apps/demo/src/App.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NativeNavigator, NativeRouterView } from '@native-vue-router/core'
+import { NativeTabBar, type NativeTabItem } from '@native-vue-router/preset-native'
+import { useRoute } from 'vue-router'
+import PwaUpdate from './components/PwaUpdate.vue'
+
+const route = useRoute()
+const siblingRoutes = ['/inbox', '/stories', '/profile']
+const showTabs = computed(() => Boolean(route.meta.tab))
+const tabs: NativeTabItem[] = [
+  { label: 'Inbox', to: '/inbox', icon: '◉' },
+  { label: 'Stories', to: '/stories', icon: '◎' },
+  { label: 'You', to: '/profile', icon: '◇' },
+]
+</script>
+
+<template>
+  <div class="app-frame">
+    <NativeNavigator :siblings="siblingRoutes">
+      <NativeRouterView />
+    </NativeNavigator>
+    <NativeTabBar v-if="showTabs" :items="tabs" class="app-tabs" />
+    <PwaUpdate />
+  </div>
+</template>
--- a/apps/demo/src/components/AppAvatar.vue
+++ b/apps/demo/src/components/AppAvatar.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { Person } from '../data'
+
+defineProps<{ person: Person; size?: 'sm' | 'md' | 'lg' | 'xl' }>()
+</script>
+
+<template>
+  <span class="avatar" :class="`avatar--${size ?? 'md'}`" :style="{ '--avatar-color': person.color }" :aria-label="person.name">
+    <span>{{ person.name.split(' ').map((part) => part[0]).join('') }}</span>
+    <i v-if="person.online" aria-label="Online" />
+  </span>
+</template>
--- a/apps/demo/src/components/AppHeader.vue
+++ b/apps/demo/src/components/AppHeader.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { NativeBackButton } from '@native-vue-router/preset-native'
+
+withDefaults(defineProps<{ title: string; subtitle?: string; back?: boolean; large?: boolean }>(), {
+  back: false,
+  large: false,
+})
+</script>
+
+<template>
+  <header class="app-header" :class="{ 'app-header--large': large }">
+    <NativeBackButton v-if="back" />
+    <div class="app-header__title">
+      <p v-if="subtitle">{{ subtitle }}</p>
+      <h1>{{ title }}</h1>
+    </div>
+    <div class="app-header__actions"><slot /></div>
+  </header>
+</template>
--- a/apps/demo/src/components/PwaUpdate.vue
+++ b/apps/demo/src/components/PwaUpdate.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useRegisterSW } from 'virtual:pwa-register/vue'
+import { useNativeRouter } from '@native-vue-router/core'
+
+const native = useNativeRouter()
+const { needRefresh, updateServiceWorker } = useRegisterSW()
+
+function update() {
+  if (!native.transaction.value) void updateServiceWorker(true)
+}
+</script>
+
+<template>
+  <aside v-if="needRefresh" class="update-toast" role="status">
+    <span>A fresh build is ready.</span>
+    <button type="button" :disabled="Boolean(native.transaction.value)" @click="update">Update</button>
+  </aside>
+</template>
--- a/apps/demo/src/data.ts
+++ b/apps/demo/src/data.ts
@@ -0,0 +1,171 @@
+import { computed, reactive, readonly, ref } from 'vue'
+
+export interface Person {
+  id: string
+  name: string
+  handle: string
+  color: string
+  online: boolean
+  bio: string
+}
+
+export interface Message {
+  id: string
+  personId: string
+  body: string
+  sentAt: number
+  mine: boolean
+  status: 'sent' | 'delivered' | 'failed'
+}
+
+export interface Conversation {
+  id: string
+  personId: string
+  unread: number
+  pinned?: boolean
+  messages: Message[]
+}
+
+const people: Person[] = [
+  { id: 'maya', name: 'Maya Chen', handle: '@mayac', color: '#ff7a8a', online: true, bio: 'Product designer · Sydney to everywhere.' },
+  { id: 'noah', name: 'Noah Williams', handle: '@noahw', color: '#4f9cff', online: true, bio: 'Film, tiny cameras, and very long walks.' },
+  { id: 'sofia', name: 'Sofia Rossi', handle: '@sofiar', color: '#9d67ff', online: false, bio: 'Making typefaces and better pasta.' },
+  { id: 'liam', name: 'Liam Park', handle: '@liamp', color: '#35c7a0', online: true, bio: 'Engineer. Climber. Questionable DJ.' },
+  { id: 'amara', name: 'Amara Okafor', handle: '@amarao', color: '#f4ad42', online: false, bio: 'Architecture and cities after dark.' },
+]
+
+const timestamp = Date.now()
+const seedConversations: Conversation[] = [
+  {
+    id: 'maya', personId: 'maya', unread: 2, pinned: true,
+    messages: [
+      { id: 'm1', personId: 'maya', body: 'That transition feels ridiculously smooth ✨', sentAt: timestamp - 840_000, mine: false, status: 'delivered' },
+      { id: 'm2', personId: 'maya', body: 'Try holding it halfway, then let go slowly.', sentAt: timestamp - 780_000, mine: false, status: 'delivered' },
+    ],
+  },
+  {
+    id: 'noah', personId: 'noah', unread: 0,
+    messages: [
+      { id: 'n1', personId: 'noah', body: 'Uploaded the photos from yesterday.', sentAt: timestamp - 4_200_000, mine: false, status: 'delivered' },
+      { id: 'n2', personId: 'noah', body: 'The grain is perfect.', sentAt: timestamp - 4_000_000, mine: true, status: 'delivered' },
+    ],
+  },
+  {
+    id: 'sofia', personId: 'sofia', unread: 1,
+    messages: [{ id: 's1', personId: 'sofia', body: 'Coffee at the new place tomorrow?', sentAt: timestamp - 18_000_000, mine: false, status: 'delivered' }],
+  },
+  {
+    id: 'liam', personId: 'liam', unread: 0,
+    messages: [{ id: 'l1', personId: 'liam', body: 'The build is green. Ship it.', sentAt: timestamp - 86_000_000, mine: false, status: 'delivered' }],
+  },
+  {
+    id: 'amara', personId: 'amara', unread: 0,
+    messages: [{ id: 'a1', personId: 'amara', body: 'This city never really goes quiet.', sentAt: timestamp - 172_000_000, mine: false, status: 'delivered' }],
+  },
+]
+
+const conversations = ref<Conversation[]>(structuredClone(seedConversations))
+const ready = ref(false)
+const offline = ref(!navigator.onLine)
+const settings = reactive({ simulatedLatency: 180, simulateFailures: false })
+
+function openDatabase() {
+  return new Promise<IDBDatabase>((resolve, reject) => {
+    const request = indexedDB.open('native-vue-messenger', 1)
+    request.onupgradeneeded = () => request.result.createObjectStore('state')
+    request.onsuccess = () => resolve(request.result)
+    request.onerror = () => reject(request.error)
+  })
+}
+
+async function readStored() {
+  const database = await openDatabase()
+  return await new Promise<Conversation[] | undefined>((resolve, reject) => {
+    const transaction = database.transaction('state', 'readonly')
+    const request = transaction.objectStore('state').get('conversations')
+    request.onsuccess = () => resolve(request.result as Conversation[] | undefined)
+    request.onerror = () => reject(request.error)
+  }).finally(() => database.close())
+}
+
+async function persist() {
+  try {
+    const database = await openDatabase()
+    await new Promise<void>((resolve, reject) => {
+      const transaction = database.transaction('state', 'readwrite')
+      transaction.objectStore('state').put(structuredClone(conversations.value), 'conversations')
+      transaction.oncomplete = () => resolve()
+      transaction.onerror = () => reject(transaction.error)
+    })
+    database.close()
+  } catch {
+    // Private browsing and locked-down webviews can reject IndexedDB.
+  }
+}
+
+async function initialize() {
+  try {
+    const stored = await readStored()
+    if (stored?.length) conversations.value = stored
+    else await persist()
+  } finally {
+    ready.value = true
+  }
+}
+
+window.addEventListener('online', () => { offline.value = false })
+window.addEventListener('offline', () => { offline.value = true })
+void initialize()
+
+export function useDemoStore() {
+  const conversationFor = (id: string) => computed(() => conversations.value.find((conversation) => conversation.id === id))
+  const personFor = (id: string) => people.find((person) => person.id === id)
+  const markRead = (id: string) => {
+    const conversation = conversations.value.find((item) => item.id === id)
+    if (conversation) conversation.unread = 0
+    void persist()
+  }
+  const sendMessage = async (id: string, body: string) => {
+    const conversation = conversations.value.find((item) => item.id === id)
+    if (!conversation || !body.trim()) return false
+    const message: Message = {
+      id: crypto.randomUUID(),
+      personId: id,
+      body: body.trim(),
+      sentAt: Date.now(),
+      mine: true,
+      status: 'sent',
+    }
+    conversation.messages.push(message)
+    await persist()
+    await new Promise((resolve) => window.setTimeout(resolve, settings.simulatedLatency))
+    message.status = settings.simulateFailures || offline.value ? 'failed' : 'delivered'
+    await persist()
+    return message.status === 'delivered'
+  }
+  const reset = async () => {
+    conversations.value = structuredClone(seedConversations)
+    await persist()
+  }
+  return {
+    people: readonly(ref(people)),
+    conversations: readonly(conversations),
+    ready: readonly(ready),
+    offline: readonly(offline),
+    settings,
+    conversationFor,
+    personFor,
+    markRead,
+    sendMessage,
+    reset,
+  }
+}
+
+export function relativeTime(value: number) {
+  const minutes = Math.floor((Date.now() - value) / 60_000)
+  if (minutes < 1) return 'now'
+  if (minutes < 60) return `${minutes}m`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h`
+  return `${Math.floor(hours / 24)}d`
+}
--- a/apps/demo/src/main.ts
+++ b/apps/demo/src/main.ts
@@ -0,0 +1,25 @@
+import { createApp } from 'vue'
+import { createNativeRouter } from '@native-vue-router/core'
+import { createCapacitorAdapter } from '@native-vue-router/capacitor'
+import { createElectronRendererAdapter } from '@native-vue-router/electron'
+import App from './App.vue'
+import { router } from './router'
+import './style.css'
+
+const isElectron = navigator.userAgent.toLowerCase().includes('electron')
+const platform = isElectron
+  ? createElectronRendererAdapter()
+  : createCapacitorAdapter({ haptics: true, exitAtRoot: true })
+
+const nativeRouter = createNativeRouter({
+  router,
+  cache: { maxInactive: 8 },
+  platform,
+})
+
+const app = createApp(App)
+app.use(router)
+app.use(nativeRouter)
+
+await router.isReady()
+app.mount('#app')
--- a/apps/demo/src/router.ts
+++ b/apps/demo/src/router.ts
@@ -0,0 +1,39 @@
+import { createRouter, createWebHashHistory, createWebHistory, type RouteRecordRaw } from 'vue-router'
+
+const routes: RouteRecordRaw[] = [
+  { path: '/', redirect: '/inbox' },
+  {
+    path: '/inbox', name: 'inbox', component: () => import('./views/InboxView.vue'),
+    meta: { tab: true, native: { siblingGroup: 'primary', siblingOrder: 0, siblingHistory: 'replace', gesture: 'full' } },
+  },
+  {
+    path: '/stories', name: 'stories', component: () => import('./views/StoriesView.vue'),
+    meta: { tab: true, native: { siblingGroup: 'primary', siblingOrder: 1, siblingHistory: 'replace', gesture: 'full' } },
+  },
+  {
+    path: '/profile', name: 'profile', component: () => import('./views/ProfileView.vue'),
+    meta: { tab: true, native: { siblingGroup: 'primary', siblingOrder: 2, siblingHistory: 'replace', gesture: 'full' } },
+  },
+  {
+    path: '/chat/:id', name: 'chat', component: () => import('./views/ChatView.vue'),
+    meta: { native: { presentation: 'push', parent: '/inbox', gesture: 'edge' } },
+  },
+  {
+    path: '/chat/:id/details', name: 'chat-details', component: () => import('./views/ContactView.vue'),
+    meta: { native: { presentation: 'push', parent: (route) => `/chat/${String(route.params.id)}`, gesture: 'edge' } },
+  },
+  {
+    path: '/compose', name: 'compose', component: () => import('./views/ComposeView.vue'),
+    meta: { native: { presentation: 'sheet', parent: '/inbox', gesture: 'full' } },
+  },
+  {
+    path: '/settings', name: 'settings', component: () => import('./views/SettingsView.vue'),
+    meta: { native: { presentation: 'push', parent: '/profile', gesture: 'edge' } },
+  },
+]
+
+export const router = createRouter({
+  history: window.location.protocol === 'file:' ? createWebHashHistory() : createWebHistory(),
+  routes,
+  scrollBehavior: () => ({ top: 0 }),
+})
--- a/apps/demo/src/style.css
+++ b/apps/demo/src/style.css
@@ -0,0 +1,260 @@
+@import "@native-vue-router/core/style.css";
+@import "@native-vue-router/preset-native/style.css";
+
+:root {
+  font-family: Inter, ui-rounded, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: #f5f6fa;
+  background: #050608;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  --nvr-view-background: #0b0d12;
+  --nvr-accent: #8b73ff;
+  --line: rgba(255, 255, 255, .08);
+  --muted: #898e9c;
+  --surface: #13161d;
+}
+
+* { box-sizing: border-box; }
+html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
+button, input { font: inherit; }
+button, a { -webkit-tap-highlight-color: transparent; }
+button { color: inherit; }
+
+body {
+  min-width: 320px;
+  background:
+    radial-gradient(circle at 50% -15%, rgba(124, 92, 255, .18), transparent 36%),
+    #050608;
+}
+
+.app-frame {
+  position: relative;
+  width: 100%;
+  height: 100dvh;
+  max-width: 740px;
+  margin: 0 auto;
+  overflow: hidden;
+  background: #0b0d12;
+  box-shadow: 0 0 80px rgba(0, 0, 0, .5);
+}
+
+.app-tabs {
+  position: absolute;
+  z-index: 20;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.screen {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  overscroll-behavior: contain;
+  background:
+    radial-gradient(circle at 88% 4%, rgba(124, 92, 255, .09), transparent 24%),
+    #0b0d12;
+  scrollbar-width: none;
+}
+.screen::-webkit-scrollbar { display: none; }
+.screen--tabs { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
+
+.app-header {
+  position: sticky;
+  z-index: 10;
+  top: 0;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  min-height: calc(58px + env(safe-area-inset-top));
+  padding: env(safe-area-inset-top) 14px 0;
+  border-bottom: 1px solid var(--line);
+  background: rgba(11, 13, 18, .82);
+  backdrop-filter: blur(24px) saturate(1.45);
+}
+
+.app-header--large {
+  position: relative;
+  align-items: end;
+  min-height: calc(126px + env(safe-area-inset-top));
+  padding: calc(24px + env(safe-area-inset-top)) 20px 16px;
+  border-bottom: 0;
+  background: transparent;
+  backdrop-filter: none;
+}
+
+.app-header__title { min-width: 0; }
+.app-header__title p { margin: 0 0 3px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; }
+.app-header__title h1 { overflow: hidden; margin: 0; text-overflow: ellipsis; font-size: 17px; line-height: 1.2; white-space: nowrap; }
+.app-header--large .app-header__title h1 { font-size: clamp(32px, 8vw, 42px); letter-spacing: -.045em; }
+.app-header__actions { display: flex; align-items: center; justify-content: flex-end; }
+
+.round-button,
+.avatar-button {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  place-items: center;
+  border: 1px solid rgba(255,255,255,.1);
+  border-radius: 50%;
+  color: #fff;
+  background: rgba(255,255,255,.07);
+  text-decoration: none;
+  cursor: pointer;
+}
+.round-button { font-size: 25px; font-weight: 300; }
+.avatar-button { border: 0; background: transparent; }
+
+.content-stack { padding: 0 16px 24px; }
+.search-field {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 46px;
+  padding: 0 14px;
+  border: 1px solid rgba(255,255,255,.06);
+  border-radius: 15px;
+  color: var(--muted);
+  background: rgba(255,255,255,.055);
+}
+.search-field input { min-width: 0; flex: 1; border: 0; outline: 0; color: #fff; background: transparent; }
+.search-field input::placeholder { color: #707582; }
+
+.story-strip { display: flex; gap: 18px; padding: 22px 3px 20px; overflow-x: auto; scrollbar-width: none; }
+.story-strip::-webkit-scrollbar { display: none; }
+.story-person { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 7px; color: #c9ccd5; font-size: 11px; }
+
+.avatar {
+  position: relative;
+  display: inline-grid;
+  flex: 0 0 auto;
+  width: 52px;
+  height: 52px;
+  place-items: center;
+  border: 2px solid color-mix(in srgb, var(--avatar-color) 65%, white 5%);
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(145deg, color-mix(in srgb, var(--avatar-color) 84%, white), color-mix(in srgb, var(--avatar-color) 54%, #111));
+  box-shadow: inset 0 0 22px rgba(255,255,255,.12), 0 8px 24px color-mix(in srgb, var(--avatar-color) 22%, transparent);
+  font-size: 15px;
+  font-weight: 750;
+}
+.avatar i { position: absolute; right: -1px; bottom: 1px; width: 12px; height: 12px; border: 2px solid #0b0d12; border-radius: 50%; background: #34d399; }
+.avatar--sm { width: 38px; height: 38px; font-size: 11px; }
+.avatar--lg { width: 60px; height: 60px; }
+.avatar--xl { width: 102px; height: 102px; font-size: 27px; }
+
+.section-heading { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 4px 10px; }
+.section-heading h2 { margin: 0; font-size: 16px; }
+.section-heading span { color: #646a77; font-size: 11px; }
+.conversation-list { overflow: hidden; border: 1px solid rgba(255,255,255,.055); border-radius: 21px; background: rgba(255,255,255,.03); }
+.conversation-row {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-height: 76px;
+  align-items: center;
+  gap: 13px;
+  padding: 11px 14px;
+  border: 0;
+  border-bottom: 1px solid var(--line);
+  color: inherit;
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
+}
+.conversation-row:last-child { border-bottom: 0; }
+.conversation-row:active { background: rgba(255,255,255,.045); }
+.conversation-copy { min-width: 0; flex: 1; }
+.conversation-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.conversation-copy strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
+.conversation-copy time { color: #6f7480; font-size: 11px; }
+.conversation-copy p { overflow: hidden; margin: 5px 0 0; color: #858a97; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
+.unread-badge { display: grid; min-width: 20px; height: 20px; padding: 0 6px; place-items: center; border-radius: 10px; background: var(--nvr-accent); font-size: 11px; font-weight: 800; }
+.chevron { color: #515663; font-size: 24px; }
+
+.story-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
+.story-card { position: relative; display: flex; min-height: 240px; flex-direction: column; justify-content: flex-end; gap: 9px; overflow: hidden; padding: 16px; border-radius: 25px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
+.story-card__glow { position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,.62)); }
+.story-card > *:not(.story-card__glow) { position: relative; z-index: 1; }
+.story-card strong { font-size: 13px; }
+.story-card p { margin: 2px 0 0; color: rgba(255,255,255,.7); font-size: 11px; }
+.story-card__mark { position: absolute !important; top: 18px; right: 18px; font-size: 28px; }
+.gesture-tip { margin: 22px auto; padding: 0 34px; color: #646a77; font-size: 12px; line-height: 1.5; text-align: center; }
+
+.profile-card { margin: 0 16px 18px; padding: 28px 20px 22px; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg, rgba(124,92,255,.16), rgba(255,255,255,.025)); text-align: center; }
+.profile-avatar { display: grid; width: 88px; height: 88px; margin: 0 auto 14px; place-items: center; border: 2px solid #9b88ff; border-radius: 30px; background: linear-gradient(145deg, #9b88ff, #4735a5); box-shadow: 0 18px 44px rgba(124,92,255,.26); font-size: 24px; font-weight: 800; transform: rotate(-3deg); }
+.profile-card h2 { margin: 0; font-size: 24px; }
+.profile-card > p { margin: 5px 0 22px; color: var(--muted); font-size: 13px; }
+.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
+.profile-stats div { display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--line); }
+.profile-stats div:last-child { border: 0; }
+.profile-stats strong { font-size: 17px; }
+.profile-stats span { color: var(--muted); font-size: 11px; }
+
+.settings-list, .settings-group { overflow: hidden; margin: 0 16px 18px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.03); }
+.settings-list > a, .settings-list > button { display: grid; width: 100%; min-height: 58px; grid-template-columns: 30px 1fr auto; align-items: center; padding: 0 15px; border: 0; border-bottom: 1px solid var(--line); color: inherit; background: transparent; text-align: left; text-decoration: none; }
+.settings-list > :last-child { border-bottom: 0; }
+.settings-list strong { font-size: 14px; }
+.settings-list i { color: var(--muted); font-size: 12px; font-style: normal; }
+.settings-list .danger { color: #ff6c76; }
+
+.chat-screen { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
+.message-list { display: flex; min-height: 0; flex-direction: column; gap: 8px; overflow-y: auto; padding: 18px 14px; overscroll-behavior: contain; }
+.message-day { align-self: center; margin-bottom: 9px; padding: 5px 10px; border-radius: 12px; color: #737986; background: rgba(255,255,255,.04); font-size: 10px; font-weight: 700; }
+.message { max-width: min(78%, 480px); align-self: flex-start; }
+.message p { margin: 0; padding: 10px 13px; border-radius: 18px 18px 18px 5px; background: #1a1e27; font-size: 14px; line-height: 1.42; }
+.message footer { display: flex; gap: 6px; margin: 4px 5px 0; color: #656b78; font-size: 9px; }
+.message--mine { align-self: flex-end; }
+.message--mine p { border-radius: 18px 18px 5px 18px; background: linear-gradient(145deg, #8268ff, #6247d7); }
+.message--mine footer { justify-content: flex-end; }
+.typing-pill { display: flex; width: 50px; gap: 4px; padding: 12px 13px; border-radius: 18px 18px 18px 5px; background: #1a1e27; }
+.typing-pill i { width: 5px; height: 5px; border-radius: 50%; background: #777d89; animation: typing 1s infinite alternate; }
+.typing-pill i:nth-child(2) { animation-delay: .2s; }.typing-pill i:nth-child(3) { animation-delay: .4s; }
+@keyframes typing { to { opacity: .25; transform: translateY(-3px); } }
+.composer { display: grid; grid-template-columns: 38px 1fr 38px; gap: 8px; padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: rgba(11,13,18,.92); backdrop-filter: blur(24px); }
+.composer input { min-width: 0; border: 1px solid var(--line); border-radius: 20px; outline: 0; padding: 0 15px; color: #fff; background: rgba(255,255,255,.055); }
+.composer button { border: 0; border-radius: 50%; background: rgba(255,255,255,.07); font-size: 21px; }
+.composer .send-button { background: var(--nvr-accent); font-weight: 700; }
+.composer .send-button:disabled { opacity: .35; }
+
+.contact-hero { padding: 36px 24px 20px; text-align: center; }
+.contact-hero h1 { margin: 15px 0 2px; font-size: 26px; }
+.contact-hero p { max-width: 340px; margin: 5px auto; color: var(--muted); font-size: 13px; line-height: 1.5; }
+.contact-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 16px 22px; }
+.contact-actions button { display: flex; min-height: 72px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.035); font-size: 11px; }
+.contact-actions span { color: #9b88ff; font-size: 21px; }
+
+.sheet-screen { border-radius: 22px 22px 0 0; }
+.sheet-handle { position: sticky; z-index: 12; top: 8px; width: 38px; height: 5px; margin: 8px auto 0; border-radius: 4px; background: #4e5360; }
+.sheet-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px; }
+.sheet-header h1 { margin: 0; font-size: 16px; }
+.sheet-header button { justify-self: start; border: 0; color: #9b88ff; background: transparent; }
+.compose-search { margin: 0 16px 14px; }
+
+.lab-intro { display: flex; align-items: center; gap: 16px; margin: 20px 16px; padding: 18px; border: 1px solid rgba(124,92,255,.2); border-radius: 20px; background: rgba(124,92,255,.1); }
+.lab-intro > span { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 17px; background: #7c5cff; font-size: 20px; font-weight: 800; }
+.lab-intro strong { font-size: 14px; }.lab-intro p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
+.settings-group { padding: 8px 0; }
+.settings-group h2 { margin: 8px 15px; color: #737986; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
+.settings-group > label, .settings-group > div { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 15px; border-top: 1px solid var(--line); }
+.settings-group > p { margin: 0; padding: 12px 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.55; }
+.settings-group label span, .settings-group div span { display: flex; flex-direction: column; gap: 3px; }
+.settings-group strong { font-size: 13px; }.settings-group small { color: var(--muted); }
+.settings-group input[type="range"] { width: 120px; accent-color: var(--nvr-accent); }
+.settings-group input[type="checkbox"] { width: 42px; height: 24px; accent-color: var(--nvr-accent); }
+.settings-group b { color: #3dd9aa; font-size: 12px; }.settings-group b.offline { color: #ff7a84; }
+.reset-button { display: block; width: calc(100% - 32px); min-height: 48px; margin: 0 16px 30px; border: 1px solid rgba(255,108,118,.2); border-radius: 15px; color: #ff7a84; background: rgba(255,108,118,.07); }
+.empty-state { display: grid; place-items: center; }
+.update-toast { position: absolute; z-index: 50; right: 14px; bottom: calc(82px + env(safe-area-inset-bottom)); left: 14px; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(28,31,40,.96); box-shadow: 0 18px 50px rgba(0,0,0,.4); font-size: 12px; }
+.update-toast button { border: 0; color: #a998ff; background: transparent; font-weight: 700; }
+
+@media (min-width: 741px) {
+  .app-frame { height: min(920px, calc(100dvh - 28px)); margin-top: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 30px; }
+  .story-grid { grid-template-columns: repeat(4, 1fr); }
+  .story-card { min-height: 300px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
+}
--- a/apps/demo/src/views/ChatView.vue
+++ b/apps/demo/src/views/ChatView.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { NativeLink } from '@native-vue-router/core'
+import { useRoute } from 'vue-router'
+import AppAvatar from '../components/AppAvatar.vue'
+import AppHeader from '../components/AppHeader.vue'
+import { relativeTime, useDemoStore } from '../data'
+
+const route = useRoute()
+const store = useDemoStore()
+const id = computed(() => String(route.params.id))
+const conversation = computed(() => store.conversations.value.find((item) => item.id === id.value))
+const person = computed(() => store.personFor(id.value))
+const draft = ref('')
+const list = ref<HTMLElement | null>(null)
+
+async function send() {
+  const body = draft.value
+  if (!body.trim()) return
+  draft.value = ''
+  void store.sendMessage(id.value, body)
+  await nextTick()
+  list.value?.scrollTo({ top: list.value.scrollHeight, behavior: 'smooth' })
+}
+
+onMounted(() => {
+  store.markRead(id.value)
+  list.value?.scrollTo({ top: list.value.scrollHeight })
+})
+</script>
+
+<template>
+  <main v-if="conversation && person" class="screen chat-screen">
+    <AppHeader :title="person.name" :subtitle="person.online ? 'Online now' : person.handle" back>
+      <NativeLink :to="`/chat/${id}/details`" class="avatar-button" aria-label="Conversation details">
+        <AppAvatar :person="person" size="sm" />
+      </NativeLink>
+    </AppHeader>
+
+    <div ref="list" class="message-list">
+      <div class="message-day">Today</div>
+      <article v-for="message in conversation.messages" :key="message.id" class="message" :class="{ 'message--mine': message.mine }">
+        <p>{{ message.body }}</p>
+        <footer>
+          <time>{{ relativeTime(message.sentAt) }}</time>
+          <span v-if="message.mine">{{ message.status === 'failed' ? 'Tap to retry' : message.status }}</span>
+        </footer>
+      </article>
+      <div v-if="person.online" class="typing-pill"><i /><i /><i /></div>
+    </div>
+
+    <form class="composer" @submit.prevent="send">
+      <button type="button" aria-label="Add attachment">＋</button>
+      <input v-model="draft" aria-label="Message" :placeholder="`Message ${person.name.split(' ')[0]}`" />
+      <button class="send-button" type="submit" :disabled="!draft.trim()" aria-label="Send">↑</button>
+    </form>
+  </main>
+  <main v-else class="screen empty-state"><h1>Conversation not found</h1></main>
+</template>
--- a/apps/demo/src/views/ComposeView.vue
+++ b/apps/demo/src/views/ComposeView.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NativeDismissGesture, useNativeRouter } from '@native-vue-router/core'
+import AppAvatar from '../components/AppAvatar.vue'
+import { useDemoStore } from '../data'
+
+const native = useNativeRouter()
+const store = useDemoStore()
+const query = ref('')
+
+async function choose(id: string) {
+  await native.cancelInteractive()
+  await native.replace(`/chat/${id}`, { presentation: 'push' })
+}
+</script>
+
+<template>
+  <NativeDismissGesture as="main" class="screen sheet-screen">
+    <div class="sheet-handle" aria-hidden="true" />
+    <header class="sheet-header">
+      <button type="button" @click="native.dismiss()">Cancel</button>
+      <h1>New message</h1>
+      <span />
+    </header>
+    <label class="search-field compose-search">
+      <span>To:</span>
+      <input v-model="query" autofocus placeholder="Search people" />
+    </label>
+    <div class="conversation-list">
+      <button v-for="person in store.people.value.filter((item) => item.name.toLowerCase().includes(query.toLowerCase()))" :key="person.id" class="conversation-row" @click="choose(person.id)">
+        <AppAvatar :person="person" />
+        <div class="conversation-copy"><strong>{{ person.name }}</strong><p>{{ person.handle }}</p></div>
+        <span class="chevron">›</span>
+      </button>
+    </div>
+  </NativeDismissGesture>
+</template>
--- a/apps/demo/src/views/ContactView.vue
+++ b/apps/demo/src/views/ContactView.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import AppAvatar from '../components/AppAvatar.vue'
+import AppHeader from '../components/AppHeader.vue'
+import { useDemoStore } from '../data'
+
+const route = useRoute()
+const store = useDemoStore()
+const person = computed(() => store.personFor(String(route.params.id)))
+</script>
+
+<template>
+  <main v-if="person" class="screen">
+    <AppHeader title="Details" back />
+    <section class="contact-hero">
+      <AppAvatar :person="person" size="xl" />
+      <h1>{{ person.name }}</h1>
+      <p>{{ person.handle }}</p>
+      <p>{{ person.bio }}</p>
+    </section>
+    <section class="contact-actions">
+      <button><span>◌</span>Audio</button>
+      <button><span>▣</span>Video</button>
+      <button><span>⌕</span>Search</button>
+    </section>
+    <section class="settings-list">
+      <button><span>▧</span><strong>Shared media</strong><i>24</i></button>
+      <button><span>♧</span><strong>Mute notifications</strong><i>Off</i></button>
+      <button class="danger"><span>⊘</span><strong>Block contact</strong><i /></button>
+    </section>
+  </main>
+</template>
--- a/apps/demo/src/views/InboxView.vue
+++ b/apps/demo/src/views/InboxView.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { NativeGestureLink, useNativeRouter } from '@native-vue-router/core'
+import AppAvatar from '../components/AppAvatar.vue'
+import AppHeader from '../components/AppHeader.vue'
+import { relativeTime, useDemoStore } from '../data'
+
+const store = useDemoStore()
+const native = useNativeRouter()
+const query = ref('')
+const filtered = computed(() => store.conversations.value.filter((conversation) => {
+  const person = store.personFor(conversation.personId)
+  return person?.name.toLowerCase().includes(query.value.toLowerCase())
+}))
+</script>
+
+<template>
+  <main class="screen screen--tabs">
+    <AppHeader title="Messages" subtitle="Thursday, 16 July" large>
+      <button class="round-button" type="button" aria-label="Compose" @click="native.present('/compose', 'sheet')">＋</button>
+    </AppHeader>
+
+    <section class="content-stack">
+      <label class="search-field">
+        <span aria-hidden="true">⌕</span>
+        <input v-model="query" type="search" placeholder="Search conversations" />
+      </label>
+
+      <div class="story-strip" aria-label="Online friends">
+        <div v-for="person in store.people.value.filter((item) => item.online)" :key="person.id" class="story-person">
+          <AppAvatar :person="person" size="lg" />
+          <span>{{ person.name.split(' ')[0] }}</span>
+        </div>
+      </div>
+
+      <div class="section-heading">
+        <h2>Recent</h2>
+        <span>Drag a conversation left</span>
+      </div>
+
+      <div class="conversation-list">
+        <NativeGestureLink
+          v-for="conversation in filtered"
+          :key="conversation.id"
+          :to="`/chat/${conversation.id}`"
+          presentation="reveal"
+          direction="left"
+          class="conversation-row"
+        >
+          <template v-if="store.personFor(conversation.personId)" >
+            <AppAvatar :person="store.personFor(conversation.personId)!" size="md" />
+            <div class="conversation-copy">
+              <div>
+                <strong>{{ store.personFor(conversation.personId)?.name }}</strong>
+                <time>{{ relativeTime(conversation.messages.at(-1)?.sentAt ?? 0) }}</time>
+              </div>
+              <p>{{ conversation.messages.at(-1)?.body }}</p>
+            </div>
+            <span v-if="conversation.unread" class="unread-badge">{{ conversation.unread }}</span>
+            <span v-else class="chevron" aria-hidden="true">›</span>
+          </template>
+        </NativeGestureLink>
+      </div>
+    </section>
+  </main>
+</template>
--- a/apps/demo/src/views/ProfileView.vue
+++ b/apps/demo/src/views/ProfileView.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { NativeLink } from '@native-vue-router/core'
+import AppHeader from '../components/AppHeader.vue'
+</script>
+
+<template>
+  <main class="screen screen--tabs">
+    <AppHeader title="You" subtitle="Your space" large />
+    <section class="profile-card">
+      <div class="profile-avatar">HV</div>
+      <h2>Harvey</h2>
+      <p>@harvmaster · Sydney</p>
+      <div class="profile-stats">
+        <div><strong>28</strong><span>Friends</span></div>
+        <div><strong>164</strong><span>Moments</span></div>
+        <div><strong>12</strong><span>Groups</span></div>
+      </div>
+    </section>
+    <section class="settings-list">
+      <NativeLink to="/settings"><span>⚙︎</span><strong>Navigation lab</strong><i>›</i></NativeLink>
+      <a href="https://github.com" target="_blank" rel="noreferrer"><span>⌘</span><strong>Project source</strong><i>↗</i></a>
+      <button type="button"><span>◐</span><strong>Appearance</strong><i>System</i></button>
+    </section>
+  </main>
+</template>
--- a/apps/demo/src/views/SettingsView.vue
+++ b/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>
--- a/apps/demo/src/views/StoriesView.vue
+++ b/apps/demo/src/views/StoriesView.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import AppAvatar from '../components/AppAvatar.vue'
+import AppHeader from '../components/AppHeader.vue'
+import { useDemoStore } from '../data'
+
+const store = useDemoStore()
+const gradients = [
+  'linear-gradient(155deg, #f4a261, #d64e7d 48%, #5427a8)',
+  'linear-gradient(155deg, #44c6e9, #4378db 48%, #1b245d)',
+  'linear-gradient(155deg, #68d391, #2a9d8f 48%, #173e48)',
+  'linear-gradient(155deg, #b794f4, #805ad5 48%, #322659)',
+]
+</script>
+
+<template>
+  <main class="screen screen--tabs">
+    <AppHeader title="Stories" subtitle="Moments from your circle" large />
+    <section class="story-grid">
+      <article v-for="(person, index) in store.people.value.slice(0, 4)" :key="person.id" class="story-card" :style="{ background: gradients[index] }">
+        <div class="story-card__glow" />
+        <AppAvatar :person="person" size="sm" />
+        <div>
+          <strong>{{ person.name }}</strong>
+          <p>{{ index % 2 ? '2 hours ago' : 'Just now' }}</p>
+        </div>
+        <span class="story-card__mark">{{ ['✦', '◌', '△', '◇'][index] }}</span>
+      </article>
+    </section>
+    <p class="gesture-tip">Swipe horizontally anywhere to move between primary routes.</p>
+  </main>
+</template>
--- a/apps/electron/main.mjs
+++ b/apps/electron/main.mjs
@@ -0,0 +1,84 @@
+import { app, BrowserWindow, ipcMain, Menu } from 'electron'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+import { disableElectronHistoryGestures } from '@native-vue-router/electron'
+
+const directory = path.dirname(fileURLToPath(import.meta.url))
+const smokeMode = process.env.ELECTRON_SMOKE === '1'
+  || process.argv.includes('--smoke')
+  || app.commandLine.hasSwitch('smoke')
+disableElectronHistoryGestures(app.commandLine)
+app.commandLine.appendSwitch('disable-pinch')
+
+function createWindow() {
+  const window = new BrowserWindow({
+    width: 430,
+    height: 860,
+    minWidth: 360,
+    minHeight: 620,
+    backgroundColor: '#0b0d12',
+    titleBarStyle: process.platform === 'darwin' ? 'hiddenInset' : 'default',
+    show: false,
+    webPreferences: {
+      preload: path.join(directory, 'preload.mjs'),
+      contextIsolation: true,
+      nodeIntegration: false,
+      sandbox: true,
+    },
+  })
+
+  const developmentUrl = process.env.VITE_DEV_SERVER_URL
+  if (developmentUrl) void window.loadURL(developmentUrl)
+  else void window.loadFile(path.resolve(directory, '../demo/dist/index.html'))
+
+  window.once('ready-to-show', () => { if (!smokeMode) window.show() })
+  if (smokeMode) {
+    console.log('Electron smoke mode started')
+    const timeout = setTimeout(() => {
+      console.error('Electron renderer smoke check timed out')
+      app.exit(1)
+    }, 15_000)
+    window.webContents.once('dom-ready', async () => {
+      const rendered = await window.webContents.executeJavaScript("Boolean(document.querySelector('h1'))")
+      console.log(rendered ? 'Electron renderer smoke check passed' : 'Electron renderer did not render')
+      clearTimeout(timeout)
+      app.exit(rendered ? 0 : 1)
+    })
+    window.webContents.once('did-fail-load', (_event, code, description) => {
+      console.error(`Electron load failed (${code}): ${description}`)
+    })
+  }
+  window.on('app-command', (_event, command) => {
+    if (command === 'browser-backward') window.webContents.send('native-vue:back')
+    if (command === 'browser-forward') window.webContents.send('native-vue:forward')
+  })
+
+  const template = [
+    ...(process.platform === 'darwin' ? [{ role: 'appMenu' }] : []),
+    {
+      label: 'Navigate',
+      submenu: [
+        { label: 'Back', accelerator: 'Alt+Left', click: () => window.webContents.send('native-vue:back') },
+        { label: 'Forward', accelerator: 'Alt+Right', click: () => window.webContents.send('native-vue:forward') },
+        { type: 'separator' },
+        { role: 'reload' },
+      ],
+    },
+    { role: 'editMenu' },
+    { role: 'viewMenu' },
+    { role: 'windowMenu' },
+  ]
+  Menu.setApplicationMenu(Menu.buildFromTemplate(template))
+  return window
+}
+
+await app.whenReady()
+createWindow()
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) createWindow()
+})
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') app.quit()
+})
+
+ipcMain.handle('native-vue:platform', () => process.platform)
--- a/apps/electron/package.json
+++ b/apps/electron/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "@native-vue-router/demo-electron",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "main": "main.mjs"
+}
--- a/apps/electron/preload.mjs
+++ b/apps/electron/preload.mjs
@@ -0,0 +1,12 @@
+import { contextBridge, ipcRenderer } from 'electron'
+
+function listener(channel, callback) {
+  const handler = () => callback()
+  ipcRenderer.on(channel, handler)
+  return () => ipcRenderer.removeListener(channel, handler)
+}
+
+contextBridge.exposeInMainWorld('nativeVueHost', {
+  onBack: (callback) => listener('native-vue:back', callback),
+  onForward: (callback) => listener('native-vue:forward', callback),
+})
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -0,0 +1,56 @@
+# Architecture
+
+## Ownership boundary
+
+Vue Router owns matching, lazy components, committed routes, redirects, guards, URL serialization, and browser history. Native Vue Router owns a separate visual ledger containing mounted route entries, scroll/focus state, cache status, and the current interactive transaction.
+
+A forward drag calls `router.resolve()` and Vue Router's public `loadRouteLocation()`, then renders the location through `<RouterView :route>` without calling `push()`. The URL and application history remain unchanged until the gesture commits.
+
+Each preview subtree receives a scoped `routeLocationKey`, so `useRoute()` returns preview params even though the global route is not committed. A normal `router.push()` or `replace()` runs only after the gesture chooses to commit. A guard failure cancels the transaction and removes the preview.
+
+## Transaction lifecycle
+
+Transactions move through `interactive`, `committing`, `settling`, and cancellation states. They expose normalized progress and velocity plus `fromKey`, `toKey`, direction, presentation, and optional source geometry.
+
+The runtime deliberately keeps two ledgers. The navigation stack mirrors committed push/replace/pop semantics and is the only source of predictive-back targets. The view cache owns mounted component instances independently, so a replaced tab can be reused without becoming an accidental back destination.
+
+Pointer movement changes only a CSS progress variable. Built-in presentations restrict active-frame work to compositor-friendly properties. Release uses distance/velocity intent and a damped spring. Reduced-motion mode settles immediately.
+
+Component gesture owners stop propagation before a containing navigator can claim the same pointer. Navigator gestures wait for horizontal intent, use pointer capture, respect form controls and `data-native-gesture="ignore"`, and preserve normal vertical scrolling through `touch-action: pan-y`.
+
+## Route metadata
+
+```ts
+interface NativeRouteOptions {
+  navigator?: string
+  presentation?: 'push' | 'reveal' | 'slide' | 'fade' | 'modal' | 'sheet' | string
+  parent?: RouteLocationRaw | ((route) => RouteLocationRaw)
+  siblingGroup?: string
+  siblingOrder?: number
+  siblingHistory?: 'push' | 'replace'
+  cache?: boolean
+  gesture?: boolean | 'edge' | 'full'
+}
+```
+
+`parent` supplies a predictive back target when a deep link starts without an in-memory predecessor. Sibling routes replace history by default and use the built-in `slide` presentation, which moves both pages one-to-one as adjacent surfaces. Direction comes from `siblingOrder`. Set `siblingHistory: 'push'` when browser back should visit prior sibling selections.
+
+## Custom presentations
+
+```ts
+nativeRouter.registerPresentation(definePresentation({
+  name: 'scale-fade',
+  axis: 'x',
+  layerStyle({ role, progress }) {
+    return role === 'to'
+      ? { opacity: progress, transform: `scale(${0.92 + progress * 0.08})` }
+      : { opacity: 1 - progress * 0.4 }
+  },
+}))
+```
+
+Applications can call `beginInteractive()`, `updateInteractive()`, and `finishInteractive()` to drive the same transaction engine from a bespoke recognizer.
+
+## Cache semantics
+
+The active route and recent inactive routes remain mounted. The default limit is eight inactive views per runtime. Older entries keep their route descriptor but are unmounted and lazily restored when revisited. Application data that must survive eviction belongs in an application store.
--- a/docs/platforms.md
+++ b/docs/platforms.md
@@ -0,0 +1,23 @@
+# Platform integration
+
+## PWA and browser
+
+The demo uses a standalone manifest, safe-area environment variables, and a generated Workbox service worker. Updates are prompted and cannot reload while a gesture is active. `overscroll-behavior` suppresses pull-to-refresh and history overscroll where supported; `touch-action` reserves horizontal manipulation only on navigator-owned surfaces.
+
+Mobile operating systems can reserve gestures that web content cannot suppress in every browser mode. The full interaction system targets installed PWAs. Normal tabs retain links, buttons, history, and non-interactive transitions as their fallback.
+
+## Electron
+
+Call `disableElectronHistoryGestures(app.commandLine)` before `app.whenReady()`. It disables Chromium's `OverscrollHistoryNavigation`, preventing the host from racing the renderer's interactive stack. The included preload bridge maps app commands and Alt+Arrow shortcuts into the renderer adapter without enabling Node integration.
+
+The demo switches to hash history under `file:` so packaged deep navigation never asks the filesystem for route paths.
+
+## Capacitor
+
+`createCapacitorAdapter()` handles Android hardware back, Universal/App Links, launch URLs, pause cancellation, root exit, and native haptic feedback.
+
+The checked-in iOS and Android projects use Capacitor 8 and include App, Haptics, Splash Screen, and Status Bar plugins. Rebuild the web bundle before `npx cap sync`.
+
+## Accessibility
+
+Inactive live routes are `inert` and `aria-hidden`. Only the active or interactive pair participates in focus and pointer hit testing. Back and tab controls retain native link/button semantics; reduced-motion users receive immediate transaction settling. Custom presentations must preserve the same focus and inert invariants.
--- a/Show More
+++ b/Show More