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

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

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import {
+  above,
+  back,
+  gesture,
+  OriginGestureSurface,
+  originView,
+  useOrigin,
+} from "@native-vue-router/core-v2";
+import InstanceCard from "../components/InstanceCard.vue";
+import { useDemoInstance } from "../lab-state";
+import { cardFlip, rise, unfocusPortal } from "../motions";
+import DirectionResultView from "./DirectionResultView.vue";
+
+const origin = useOrigin();
+const identity = useDemoInstance("Direction");
+
+const eastView = () =>
+  originView(
+    DirectionResultView,
+    {
+      direction: "east",
+      heading: "Horizontal declarations can own a full-page flip.",
+      accent: "#38d8ff",
+      createdBy: identity.instance,
+    },
+    { key: "direction-east", name: "East Result" },
+  );
+const openEast = () => above(eastView(), cardFlip);
+
+const northView = () =>
+  originView(
+    DirectionResultView,
+    {
+      direction: "north",
+      heading: "The same origin can create a completely different view upward.",
+      accent: "#b9ff66",
+      createdBy: identity.instance,
+    },
+    { key: "direction-north", name: "North Result" },
+  );
+const openNorth = () => above(northView(), rise);
+
+const flipGesture = gesture.to
+  .left()
+  .navigate(() => above(eastView()))
+  .animate(cardFlip);
+const riseGesture = gesture.to
+  .up()
+  .navigate(() => above(northView()))
+  .animate(rise);
+const backGesture = gesture.from
+  .left("clamp(24px, 8%, 64px)")
+  .to.right()
+  .navigate((context) => (context.canGoBack ? back() : null))
+  .animate(unfocusPortal);
+const gestures = [flipGesture, riseGesture, backGesture] as const;
+
+function perform(action: ReturnType<typeof openEast>) {
+  void origin.perform(action);
+}
+</script>
+
+<template>
+  <OriginGestureSurface
+    as="main"
+    class="lab-page direction-view"
+    :gestures="gestures"
+  >
+    <div class="eyebrow">Lab 02 · Direction matrix</div>
+    <h1>One component. Three explicit choices.</h1>
+    <p>
+      Swipe left for a perspective flip, swipe up for a rising cover, or use the
+      left edge to go back. None of these gestures exist outside this view.
+    </p>
+
+    <div class="direction-compass">
+      <button
+        type="button"
+        data-origin-gesture="ignore"
+        class="compass-action compass-action--up"
+        @click="perform(openNorth())"
+      >
+        <span>↑</span>
+        <strong>Rise</strong>
+        <small>target above</small>
+      </button>
+      <div class="compass-core">
+        <span>origin</span>
+        <strong>{{ identity.instance }}</strong>
+      </div>
+      <button
+        type="button"
+        data-origin-gesture="ignore"
+        class="compass-action compass-action--left"
+        @click="perform(openEast())"
+      >
+        <span>←</span>
+        <strong>Flip left</strong>
+        <small>custom perspective</small>
+      </button>
+    </div>
+
+    <InstanceCard
+      label="Direction view"
+      :instance="identity.instance"
+      :status="identity.status.value"
+    />
+    <div class="gesture-map">
+      <span>↑ full-surface target</span>
+      <span>← full-surface target</span>
+      <span>left edge → history back</span>
+    </div>
+    <div class="edge-marker edge-marker--left">back edge</div>
+  </OriginGestureSurface>
+</template>