Increase complexity of test demo

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

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import {
+  OriginGestureSurface,
+  back,
+  forward,
+  gesture,
+  originView,
+  slideRight,
+  useOrigin,
+} from "@native-vue-router/core-v2";
+import InstanceCard from "../components/InstanceCard.vue";
+import { useDemoInstance } from "../lab-state";
+import { partialDrawerOpen } from "../motions";
+import PartialDrawerView from "./PartialDrawerView.vue";
+
+const origin = useOrigin();
+const identity = useDemoInstance("Drawer page");
+
+const drawerView = () =>
+  originView(
+    PartialDrawerView,
+    { openedFrom: identity.instance },
+    { key: "partial-drawer", name: "Two-thirds Drawer" },
+  );
+
+const openDrawerGesture = gesture.from
+  .left("clamp(32px, 10%, 88px)")
+  .to.right()
+  .navigate(() => forward(drawerView()))
+  .animate(partialDrawerOpen);
+
+const gestures = [openDrawerGesture] as const;
+
+function openDrawer() {
+  void origin.perform(forward(drawerView(), partialDrawerOpen));
+}
+
+function returnToLabs() {
+  if (origin.context.value.canGoBack) void origin.perform(back(slideRight));
+}
+</script>
+
+<template>
+  <OriginGestureSurface
+    as="main"
+    class="partial-origin-view"
+    :gestures="gestures"
+  >
+    <!--
+      This rail is the left third of the full page. Once the whole page moves
+      right by 2/3, this exact live DOM remains visible in the final third.
+    -->
+    <aside class="partial-origin-rail">
+      <div class="partial-brand">OV</div>
+      <nav aria-label="Example navigation">
+        <button type="button" data-origin-gesture="ignore">Inbox</button>
+        <button type="button" data-origin-gesture="ignore">Projects</button>
+        <button type="button" data-origin-gesture="ignore">Archive</button>
+      </nav>
+      <InstanceCard
+        label="Page instance"
+        :instance="identity.instance"
+        :status="identity.status.value"
+      />
+    </aside>
+
+    <section class="partial-origin-content">
+      <header>
+        <button
+          type="button"
+          data-origin-gesture="ignore"
+          aria-label="Return to labs"
+          @click="returnToLabs"
+        >
+          ← Labs
+        </button>
+        <span>Connected presentation</span>
+      </header>
+
+      <div class="partial-origin-copy">
+        <div class="eyebrow">Partial route lab</div>
+        <h1>Keep one third of this page on screen.</h1>
+        <p>
+          Drag right from the left edge. The drawer becomes a real history
+          entry, while this same mounted page remains translated and visible.
+        </p>
+        <button
+          class="primary-action"
+          type="button"
+          data-origin-gesture="ignore"
+          @click="openDrawer"
+        >
+          Open two-thirds drawer
+        </button>
+        <div class="gesture-hint"><span>→</span> Pull from the left edge</div>
+      </div>
+    </section>
+  </OriginGestureSurface>
+</template>