@jskit-ai/shell-web 0.1.250 → 0.1.252

package/fixtures/adaptive-shell/src/main.js

@@ -13,6 +13,9 @@ import ShellSurfaceAwareMenuLinkItem from "@jskit-ai/shell-web/client/components
 import ShellTabLinkItem from "@jskit-ai/shell-web/client/components/ShellTabLinkItem";
 import { useShellLayoutStore } from "../../../src/client/stores/useShellLayoutStore.js";
 import { createWebPlacementRuntime } from "../../../src/client/placement/runtime.js";
+import { SHELL_WEB_PLACEMENT_RUNTIME_KEY } from "../../../src/client/placement/inject.js";
+import { SHELL_WEB_ERROR_RUNTIME_KEY } from "../../../src/client/error/inject.js";
+import { SHELL_WEB_REFRESH_RUNTIME_KEY } from "../../../src/client/runtime/refreshRuntime.js";
 import { createErrorRuntime } from "../../../src/client/error/runtime.js";
 import { createDefaultMaterialErrorPresenters } from "../../../src/client/error/presenters.js";
 import { createErrorPresentationStore } from "../../../src/client/error/store.js";
@@ -183,21 +186,21 @@ const app = createApp(App);
 app.use(pinia);
 app.use(router);
 app.use(vuetify);
-app.provide("jskit.shell-web.runtime.web-placement.client", placementRuntime);
+app.provide(SHELL_WEB_PLACEMENT_RUNTIME_KEY, placementRuntime);
 const errorStore = createErrorPresentationStore();
 const errorRuntime = createErrorRuntime({
   presenters: createDefaultMaterialErrorPresenters({ store: errorStore }),
   defaultPresenterId: "material.snackbar"
 });
 useShellErrorPresentationStore(pinia).attachRuntimeStore(errorStore);
-app.provide("jskit.shell-web.runtime.web-error.client", errorRuntime);
+app.provide(SHELL_WEB_ERROR_RUNTIME_KEY, errorRuntime);
 window.__shellFixtureReportBanner = (message) => errorRuntime.report({
   source: "shell-web.fixture",
   message,
   severity: "error",
   channel: "banner"
 });
-app.provide("jskit.shell-web.runtime.web-refresh.client", {
+app.provide(SHELL_WEB_REFRESH_RUNTIME_KEY, {
   async refresh() {
     await fetch("/api/bootstrap?reason=pull-to-refresh");
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/shell-web",
-  "version": "0.1.250",
+  "version": "0.1.252",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1"
@@ -34,7 +34,7 @@
     "@vue/compiler-sfc": "3.5.44"
   },
   "peerDependencies": {
-    "@jskit-ai/kernel": "0.1.245",
+    "@jskit-ai/kernel": "0.1.246",
     "pinia": "^4.0.3",
     "vue": "^3.5.44",
     "vue-router": "^5.3.1",

package/patterns/application-shell/PATTERN.md

@@ -43,10 +43,24 @@ placement registry, topology, and adaptive smoke helper exported by
   above the content so they never cover it. A full-viewport fixed screen on
   such a surface starts at `var(--shell-error-banners-inline-height, 0px)`, as
   `@jskit-ai/auth-web`'s login and reset views do.
-- Restyle shell chrome through its `--shell-chrome-*`, `--shell-app-bar-*`,
-  `--shell-navigation-*` and `--shell-bottom-navigation-*` custom properties,
-  not by overriding Vuetify internals; a Material 3 restyle removes the dividers
-  and separates surfaces tonally.
+- Restyle shell chrome through its custom properties, not by overriding
+  Vuetify internals: `--shell-chrome-border-width` and
+  `--shell-chrome-border-color` for the shared dividers,
+  `--shell-app-bar-border-width`, `--shell-navigation-border-width` and
+  `--shell-bottom-navigation-border-width` per edge, and
+  `--shell-app-bar-background`, `--shell-navigation-background` and
+  `--shell-bottom-navigation-background` for the surfaces. The defaults keep
+  one thin divider on each separating edge, because Vuetify's default themes
+  define no Material 3 surface-container roles. A Material 3 restyle sets the
+  border widths to `0` and gives navigation a tonal surface, for example
+  `rgb(var(--v-theme-surface-container-low))` when the theme defines it.
+- `createShellRouter()` from `@jskit-ai/kernel/client` installs
+  `shellScrollBehavior`: a new screen opens at the top (or its hash target),
+  Back/Forward restore the saved position, and query, hash, tab or sub-view
+  changes within the same page keep it. A tab or sub-view is the same page when
+  both locations share a parent page record below the surface root. Pass
+  `scrollBehavior` to replace it, or `scrollBehavior: false` to disable it; do
+  not wrap the router or reset scroll in page components.
 - The adaptive browser check closes navigation through its public close control.
 
 ## Example files

package/patterns/application-shell/example/src/pages/home/index.vue

@@ -15,16 +15,16 @@ const healthQuery = useQuery({
 });
 
 const health = computed(() => {
-  if (healthQuery.isPending.value || healthQuery.isFetching.value) {
-    return "loading...";
-  }
-
   if (healthQuery.error.value) {
     return "unreachable";
   }
 
   return healthQuery.data.value?.ok ? "ok" : "unhealthy";
 });
+
+const healthPending = computed(
+  () => healthQuery.isPending.value || healthQuery.isFetching.value
+);
 </script>
 
 <template>
@@ -36,7 +36,13 @@ const health = computed(() => {
     <v-sheet rounded="lg" border class="home-surface-screen__panel">
       <div class="home-surface-screen__status">
         <span class="text-caption text-medium-emphasis">Service health</span>
-        <strong>{{ health }}</strong>
+        <v-skeleton-loader
+          v-if="healthPending"
+          aria-label="Loading service health"
+          class="home-surface-screen__health-skeleton"
+          type="text"
+        />
+        <strong v-else>{{ health }}</strong>
       </div>
       <v-divider vertical class="d-none d-sm-block" />
       <div class="home-surface-screen__status">
@@ -71,6 +77,10 @@ const health = computed(() => {
   min-width: 9rem;
 }
 
+.home-surface-screen__health-skeleton {
+  max-width: 5rem;
+}
+
 @media (max-width: 640px) {
   .home-surface-screen__actions :deep(.v-btn) {
     min-height: 48px;

package/patterns/application-shell/example/tests/e2e/adaptive-shell.spec.ts

@@ -1,7 +1,7 @@
 import { expect, test } from "@playwright/test";
 import { DEFAULT_VIEWPORTS, runAdaptiveShellSmokeCase } from "@jskit-ai/shell-web/test/adaptiveShellSmoke";
 
-test.describe("generated adaptive shell smoke", () => {
+test.describe("adaptive shell smoke", () => {
   for (const viewport of DEFAULT_VIEWPORTS) {
     test(`${viewport.name} layout has reachable navigation and no horizontal overflow`, async ({ page }) => {
       await runAdaptiveShellSmokeCase({ page, expect, viewport });