@jskit-ai/shell-web 0.1.251 → 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.251",
+  "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/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 });