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

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

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import {
+  above,
+  back,
+  gesture,
+  OriginGestureSurface,
+  originView,
+  slideLeft,
+  slideRight,
+  useOrigin,
+  type OriginContext,
+} from "@native-vue-router/core-v2";
+import InstanceCard from "../components/InstanceCard.vue";
+import { useDemoInstance } from "../lab-state";
+import SecondView from "./SecondView.vue";
+
+const origin = useOrigin();
+const identity = useDemoInstance("X");
+
+const secondView = () =>
+  originView(
+    SecondView,
+    {
+      openedAt: new Date().toLocaleTimeString(),
+      createdBy: identity.instance,
+    },
+    { key: "second", name: "Second" },
+  );
+const createSecond = () => above(secondView(), slideLeft);
+
+const goBack = (context: OriginContext) =>
+  context.canGoBack ? back(slideRight) : null;
+
+const forwardGesture = gesture.to
+  .left()
+  .navigate(() => above(secondView()))
+  .animate(slideLeft);
+const backGesture = gesture
+  // .from.left("clamp(24px, 8%, 64px)")
+  // .from.left("20%")
+  .to.right()
+  .navigate((context) => (context.canGoBack ? back() : null))
+  .animate(slideRight);
+const gestures = [forwardGesture, backGesture] as const;
+
+function backWithButton() {
+  const action = goBack(origin.context.value);
+  if (action) void origin.perform(action);
+}
+</script>
+
+<template>
+  <OriginGestureSurface
+    as="main"
+    class="lab-page chain-view view-one"
+    :gestures="gestures"
+  >
+    <button
+      class="view-back"
+      type="button"
+      data-origin-gesture="ignore"
+      @click="backWithButton"
+    >
+      ← Labs
+    </button>
+    <div class="eyebrow">Chain stress test · Origin X</div>
+    <h1>Every component starts its own movement.</h1>
+    <p>
+      Drag this screen left. Release it, then immediately drag the blue screen
+      while this spring is still settling. Keep going to build a four-node
+      scene.
+    </p>
+    <InstanceCard
+      label="X Vue instance"
+      :instance="identity.instance"
+      :status="identity.status.value"
+    />
+    <button
+      class="primary-action"
+      data-origin-gesture="ignore"
+      type="button"
+      @click="origin.perform(createSecond())"
+    >
+      Open Y without a gesture
+    </button>
+    <div class="gesture-hint">Swipe left <span>→</span></div>
+    <div class="edge-marker edge-marker--left">back edge</div>
+  </OriginGestureSurface>
+</template>