@jskit-ai/shell-web 0.1.187 → 0.1.188

package/fixtures/adaptive-shell/src/ScreenPage.vue

@@ -1,14 +1,25 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
 const title = computed(() => String(route.meta.title || "Shell fixture"));
+const answer = ref("");
+const validation = ref("");
 </script>
 
 <template>
   <main tabindex="-1">
     <h1>{{ title }}</h1>
     <p>Package-owned browser fixture for the adaptive shell contract.</p>
+    <form @submit.prevent="validation = 'Please review this answer.'">
+      <label>Unsaved answer <input v-model="answer" name="answer"></label>
+      <details>
+        <summary>More details</summary>
+        <p>Expanded form section.</p>
+      </details>
+      <button type="submit">Validate answer</button>
+      <p role="status">{{ validation }}</p>
+    </form>
   </main>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/shell-web",
-  "version": "0.1.187",
+  "version": "0.1.188",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -31,7 +31,7 @@
     "@mdi/js": "^7.4.47"
   },
   "peerDependencies": {
-    "@jskit-ai/kernel": "0.1.183",
+    "@jskit-ai/kernel": "0.1.184",
     "pinia": "^3.0.4",
     "vue": "^3.5.13",
     "vue-router": "^5.0.4",

package/src/client/components/ShellRouteTransition.vue

@@ -233,16 +233,20 @@ const routeTransitionName = computed(() => {
   return "";
 });
 
-const routeTransitionKey = computed(() => {
-  const routePathKey = routeTransitionName.value
-    ? normalizeComparablePathname(route?.path || route?.fullPath || "/")
-    : "";
-  return resolveShellRouteTransitionKey({
-    routePathKey,
-    routeTransitionName: routeTransitionName.value,
-    surfaceId: currentSurfaceId.value
-  });
-});
+// Animation can change with viewport geometry; pane identity changes only with
+// navigation. Resizing must not recreate the routed form or lose focus.
+const routeTransitionKey = ref("");
+watch(
+  [() => normalizeComparablePathname(route?.path || route?.fullPath || "/"), currentSurfaceId],
+  ([routePathKey, surfaceId]) => {
+    routeTransitionKey.value = resolveShellRouteTransitionKey({
+      routePathKey,
+      routeTransitionName: routeTransitionName.value,
+      surfaceId
+    });
+  },
+  { immediate: true, flush: "sync" }
+);
 
 const swipeNavigationEnabled = computed(() =>
   Boolean(

package/test/adaptiveShell.browser.test.js

@@ -301,3 +301,63 @@ test("shell-web adaptive navigation passes package-owned browser contracts", {
     await stopProcess(vite);
   }
 });
+
+test("shell-web preserves the active form across responsive changes", {
+  skip: RUN_BROWSER_TEST ? false : "set JSKIT_SHELL_WEB_BROWSER_INTEGRATION=1",
+  timeout: 90_000
+}, async () => {
+  const vite = await startViteFixture({ fixtureRoot: FIXTURE_ROOT });
+  let browser;
+  try {
+    browser = await chromium.launch(createChromiumLaunchOptions());
+    for (const startingWidth of [1280, 390]) {
+      const page = await browser.newPage({ baseURL: vite.baseURL, viewport: { width: startingWidth, height: 900 } });
+      await page.goto("/w/acme/admin/contacts");
+      await page.getByRole("link", { name: "Bookings", exact: true }).click();
+      await expect(page).toHaveURL(/\/bookings$/u);
+      await expect(page.locator(".shell-route-transition__pane")).toHaveCount(1);
+      const answer = page.getByRole("textbox", { name: "Unsaved answer" });
+      await answer.fill("Keep this unsaved answer");
+      await page.getByText("More details", { exact: true }).click();
+      await page.getByRole("button", { name: "Validate answer" }).click();
+      await answer.focus();
+      const originalInput = await answer.elementHandle();
+      for (const viewport of [
+        { width: 390, height: 844 },
+        { width: 1024, height: 1024 },
+        { width: 1280, height: 900 },
+        { width: 1280, height: 420 },
+        { width: 390, height: 420 },
+        { width: 390, height: 844 }
+      ]) {
+        await page.setViewportSize(viewport);
+        await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))));
+        await expect(answer).toHaveValue("Keep this unsaved answer");
+        await expect(page.locator("details")).toHaveAttribute("open", "");
+        await expect(page.getByRole("status")).toHaveText("Please review this answer.");
+        await expect(answer).toBeFocused();
+        assert.equal(await originalInput.evaluate((element) => element === document.activeElement), true);
+        await expect(page.locator(".shell-route-transition__pane")).toHaveCount(1);
+        await expect(page.getByRole("heading", { level: 1 })).toHaveCount(1);
+      }
+      // Real compact navigation still replaces the pane and runs its animation.
+      await page.getByRole("link", { name: "Contacts", exact: true }).click();
+      await expect(page).toHaveURL(/\/contacts$/u);
+      await expect(page.locator(".shell-route-transition__pane")).toHaveCount(1);
+      await expect(answer).toHaveValue("");
+      assert.equal(await originalInput.evaluate((element) => element.isConnected), false);
+      // Desktop same-surface navigation continues to reuse the routed component.
+      await page.setViewportSize({ width: 1280, height: 900 });
+      await page.getByRole("link", { name: "Bookings", exact: true }).click();
+      await expect(page).toHaveURL(/\/bookings$/u);
+      await answer.fill("Desktop state");
+      await page.getByRole("link", { name: "Contacts", exact: true }).click();
+      await expect(page).toHaveURL(/\/contacts$/u);
+      await expect(answer).toHaveValue("Desktop state");
+      await page.close();
+    }
+  } finally {
+    await browser?.close();
+    await stopProcess(vite);
+  }
+});

package/test/settingsPlacementContract.test.js

@@ -262,10 +262,9 @@ test("shell-web route transition keeps mobile route motion placement-driven", as
   assert.match(source, /\.shell-route-transition__pane\s*\{[\s\S]*flex:\s*1 1 auto/);
   assert.match(source, /\.shell-route-transition__pane\s*\{[\s\S]*min-height:\s*0/);
   assert.match(source, /transitionDirection\.value = nextIndex > previousIndex \? "forward" : "reverse"/);
-  assert.match(
-    source,
-    /const routeTransitionKey = computed\(\(\) => \{[\s\S]*const routePathKey = routeTransitionName\.value[\s\S]*normalizeComparablePathname\(route\?\.path \|\| route\?\.fullPath \|\| "\/"\)[\s\S]*resolveShellRouteTransitionKey\(\{[\s\S]*routeTransitionName: routeTransitionName\.value,[\s\S]*surfaceId: currentSurfaceId\.value[\s\S]*\}\);[\s\S]*\}\);/
-  );
+  assert.match(source, /const routeTransitionKey = ref\(""\)/);
+  assert.match(source, /\[\(\) => normalizeComparablePathname\(route\?\.path \|\| route\?\.fullPath \|\| "\/"\), currentSurfaceId\]/);
+  assert.match(source, /routeTransitionKey\.value = resolveShellRouteTransitionKey/);
   assert.match(source, /prefers-reduced-motion:\s*reduce/);
 });