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

apps/origins-demo/src/lab-state.ts

@@ -0,0 +1,49 @@
+import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
+
+export interface LabEvent {
+  id: number;
+  message: string;
+  time: string;
+}
+
+let instanceSequence = 0;
+let eventSequence = 0;
+
+export const labEvents = reactive<LabEvent[]>([]);
+
+export function recordLabEvent(message: string) {
+  labEvents.unshift({
+    id: ++eventSequence,
+    message,
+    time: new Date().toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    }),
+  });
+  if (labEvents.length > 18) labEvents.length = 18;
+}
+
+/**
+ * Give every Vue setup execution a visible identity. A scene-edge collapse
+ * and a forward push both retain the ID. A committed back only unmounts the
+ * entry being popped, then reveals the exact previous instance.
+ */
+export function useDemoInstance(label: string) {
+  const instance = `${label.slice(0, 2).toUpperCase()}-${String(
+    ++instanceSequence,
+  ).padStart(2, "0")}`;
+  const status = ref("created");
+  recordLabEvent(`${instance} created`);
+
+  onMounted(() => {
+    status.value = "mounted";
+    recordLabEvent(`${instance} mounted`);
+  });
+  onBeforeUnmount(() => {
+    status.value = "unmounting";
+    recordLabEvent(`${instance} unmounted`);
+  });
+
+  return { instance, status };
+}