V2: Origin based animations, Gesture Builder, New Demo, non-url-based-routing. Massive improvements.

apps/origins-demo/src/views/FourthView.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import {
+  OriginGesture,
+  back,
+  gesture,
+  slideRight,
+  useOrigin,
+  type OriginContext,
+} from "@native-vue-router/core-v2";
+import InstanceCard from "../components/InstanceCard.vue";
+import { useDemoInstance } from "../lab-state";
+
+defineProps<{ chain?: string }>();
+
+const origin = useOrigin();
+const identity = useDemoInstance("Omega");
+const goBack = (context: OriginContext) =>
+  context.canGoBack ? back(slideRight) : null;
+
+const backGesture = gesture
+  // .from.left("clamp(24px, 8%, 64px)")
+  // .from.left("20%")
+  .to.right()
+  .navigate((context) => (context.canGoBack ? back() : null))
+  .animate(slideRight);
+
+function backWithButton() {
+  const action = goBack(origin.context.value);
+  if (action) void origin.perform(action);
+}
+</script>
+
+<template>
+  <OriginGesture class="lab-page chain-view view-four" :gesture="backGesture">
+    <div class="eyebrow">Chain stress test · Origin Ω</div>
+    <h1>Four independently mounted components. Three live edges.</h1>
+    <p>
+      If you moved quickly enough, the inspector showed X, Y, Z, and Ω at once.
+      Each component stayed a flat sibling while inherited transforms composed
+      mathematically.
+    </p>
+    <div class="proof">
+      Reported ancestry <strong>{{ chain }}</strong>
+    </div>
+    <InstanceCard
+      label="Ω Vue instance"
+      :instance="identity.instance"
+      :status="identity.status.value"
+    />
+    <button
+      class="primary-action"
+      type="button"
+      data-origin-gesture="ignore"
+      @click="backWithButton"
+    >
+      Return to the retained Z instance
+    </button>
+    <div class="gesture-hint gesture-hint--back">
+      <span>←</span> Or swipe from the left edge
+    </div>
+    <div class="edge-marker edge-marker--left">back edge</div>
+  </OriginGesture>
+</template>