Attempt to work around unresponsive app after AR exit

package.json

@@ -40,7 +40,7 @@
     "vite": "^7.3.1",
     "vite-plugin-vuetify": "^2.1.3",
     "vue-eslint-parser": "^10.4.0",
-    "vue-router": "^5.0.4",
+    "vue-router": "^5.0.6",
     "vue-tsc": "^3.2.6"
   },
   "scripts": {

src/BubblingGalaxies.vue

@@ -242,7 +242,7 @@
         >
           <div class="merge-cube-shoutout ma-4">
             <h3>
-              Have a 
+              Have a
               <img
                 class="ml-1"
                 src="./assets/MergeCube-Logo-Purple.svg"
@@ -449,6 +449,7 @@
 <script setup lang="ts">
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { ref, reactive, computed, onMounted, watch, nextTick } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { GotoRADecZoomParams, engineStore } from "@wwtelescope/engine-pinia";
 import { BackgroundImageset, supportsTouchscreen, useWWTKeyboardControls, useFullscreen } from "@cosmicds/vue-toolkit";
 import { useDisplay } from "vuetify";
@@ -486,14 +487,23 @@ export interface WwtPlaygroundProps {
 const fullscreen = useFullscreen();
 const searchParams = new URLSearchParams(window.location.search);
 const kiosk = searchParams.get("kiosk")?.toLowerCase() === "true";
+const toModel = searchParams.get("model")?.toLowerCase() === "true";
 if (kiosk) {
   document.body.classList.add("kiosk");
 }
-const skipScrawl = searchParams.get("crawl")?.toLowerCase() === "false";
-const skipSplash = searchParams.get("splash")?.toLowerCase() === "false";
+const skipCrawl = toModel || searchParams.get("crawl")?.toLowerCase() === "false";
+const skipSplash = toModel || searchParams.get("splash")?.toLowerCase() === "false";
 console.log("kiosk mode?", kiosk);
-console.log("skip crawl?", skipScrawl);
+console.log("skip crawl?", skipCrawl);
 console.log("skip splash?", skipSplash);
+console.log("to model?", toModel);
+
+if (toModel) {
+  const url = new URL(window.location.href);
+  url.searchParams.delete("model");
+  window.history.replaceState({}, "", url);
+}
+
 const store = engineStore();
 
 useWWTKeyboardControls(store);
@@ -525,11 +535,11 @@ const showInfoSheet = ref(false);
 const aboutMode = ref(false);
 const showSplashScreen = ref(!skipSplash);
 const showCrawl = ref(false);
-if (skipSplash && !skipScrawl) {
+if (skipSplash && !skipCrawl) {
   showCrawl.value = true;
 }
 watch(showSplashScreen, (showing) => {
-  if (!showing && !skipScrawl) {
+  if (!showing && !skipCrawl) {
     showCrawl.value = true;
   }
 });
@@ -538,7 +548,7 @@ const positionSet = ref(false);
 const accentColor = ref("#d957db");
 const buttonColor = ref("#ffffff");
 
-const showModel = ref(false);
+const showModel = ref(toModel);
 
 const showImageCard = ref(false);
 const galleryOpen = ref(false);
@@ -619,9 +629,6 @@ const currentLabel = computed(() => {
 const showSimulation = ref(false);
 
 
-import { BoxGeometry, DoubleSide, Mesh, MeshBasicMaterial, MeshPhysicalMaterial, Object3D, PerspectiveCamera, Scene, SpotLight, WebGLRenderer } from "three";
-import { storeToRefs } from "pinia";
-
 function moveToImageset(imageset: Imageset, options: {instant?: boolean, roll?: boolean, extraRoll?: number} = {instant: true, roll: false,}) {
   const centerX = imageset.get_centerX(); // degrees
   const centerY = imageset.get_centerY(); // degrees
@@ -664,7 +671,6 @@ function goToCoordinates(item: keyof typeof coordinates, instant=true) {
   });
 }
 
-
 import { useWtmlLoader } from "./composables/useWtmlLoader";
 
 onMounted(() => {

src/components/ModelViewer.vue

@@ -27,7 +27,9 @@
 </template>
 
 <script setup lang="ts">
-import {onMounted, useTemplateRef} from 'vue';
+import { onMounted, useTemplateRef } from 'vue';
+import type { ModelViewerElement } from "@google/model-viewer";
+
 export interface ModelViewerProps {
   src: string;
   alt: string;
@@ -46,12 +48,31 @@ withDefaults(defineProps<ModelViewerProps>(), {
   maxFieldOfView: "auto",
 });
 
+interface ARStatusEvent {
+  detail: {
+    status: "not-presenting" | "session-started" | "object-placed" | "failed";
+  };
+}
+
 const modelViewer = useTemplateRef('model-viewer');
 onMounted(() => {
   if (modelViewer.value) {
-    (modelViewer.value as unknown as HTMLElement).addEventListener('error', (event: Event) => {
+    const modelViewerElement = modelViewer.value as unknown as ModelViewerElement;
+    modelViewerElement.addEventListener('error', (event: Event) => {
       console.error('Error loading model:', event);
     });
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error The model-viewer element has an "ar-status" event
+    modelViewerElement.addEventListener("ar-status", (event: ARStatusEvent) => {
+      const status = event.detail.status;
+      if (status === "not-presenting") {
+        const url = new URL(window.location.href);
+        url.searchParams.set("model", "true");
+        window.location.href = url.href;
+      }
+    });
+
   }
 });
 </script>

src/main.ts

@@ -6,7 +6,6 @@ import BrightnessContrast from "./components/BrightnessContrast.vue";
 import ModelViewer from "./components/ModelViewer.vue";
 import ImageFlipbook from "./components/ImageFlipbook.vue";
 
-
 import vuetify from "@/plugins/vuetify";
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

yarn.lock

@@ -1159,7 +1159,7 @@ __metadata:
     vite-plugin-vuetify: "npm:^2.1.3"
     vue: "npm:^3.5.31"
     vue-eslint-parser: "npm:^10.4.0"
-    vue-router: "npm:^5.0.4"
+    vue-router: "npm:^5.0.6"
     vue-tsc: "npm:^3.2.6"
     vuetify: "npm:^4.0.4"
   languageName: unknown
@@ -4931,9 +4931,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-router@npm:^5.0.4":
-  version: 5.0.4
-  resolution: "vue-router@npm:5.0.4"
+"vue-router@npm:^5.0.6":
+  version: 5.0.6
+  resolution: "vue-router@npm:5.0.6"
   dependencies:
     "@babel/generator": "npm:^7.28.6"
     "@vue-macros/common": "npm:^3.1.1"
@@ -4964,7 +4964,7 @@ __metadata:
       optional: true
     pinia:
       optional: true
-  checksum: 10c0/11309a44c3b5aaa6e4f960d8739ce94796e78afa2d9b517ccfe78fa982f029009a07aef30ffeafecaf383a1cbd870ae27f7d56f4b9a62bad61423d8e244eb94b
+  checksum: 10c0/2ede48df2ee9a1e196a822134659db50af6b3eb653c0c0000e9a17f0b3aa5e0a1bbb3ea2ce1e6189dc2d8a0aec1baeb85d5e2f524bd8df736409ae45594d3572
   languageName: node
   linkType: hard