@jskit-ai/shell-web 0.1.65 → 0.1.66

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/shell-web",
-  version: "0.1.65",
+  version: "0.1.66",
   kind: "runtime",
   description: "Web shell layout runtime with outlet-based placement contributions.",
   dependsOn: [],
@@ -30,7 +30,7 @@ export default Object.freeze({
       surfaces: [
         {
           subpath: "./client",
-          summary: "Exports shell layout/outlet/outlet-menu/error-host components and ShellWebClientProvider."
+          summary: "Exports shell layout/outlet/outlet-menu/route-transition/error-host components and ShellWebClientProvider."
         },
         {
           subpath: "./client/placement",
@@ -43,6 +43,10 @@ export default Object.freeze({
         {
           subpath: "./client/bootstrap",
           summary: "Exports the shared client bootstrap handler registry used to extend /api/bootstrap handling."
+        },
+        {
+          subpath: "./test/adaptiveShellSmoke",
+          summary: "Exports reusable Playwright smoke coverage for generated adaptive shell layouts."
         }
       ],
       containerTokens: {
@@ -51,8 +55,7 @@ export default Object.freeze({
           "runtime.web-placement.client",
           "runtime.web-bootstrap.client",
           "runtime.web-error.client",
-          "runtime.web-error.presentation-store.client",
-          "shell.web.query-client"
+          "runtime.web-error.presentation-store.client"
         ]
       }
     },
@@ -74,11 +77,26 @@ export default Object.freeze({
             surfaces: ["*"],
             source: "src/client/components/ShellLayout.vue"
           },
+          {
+            target: "shell-layout:primary-bottom-nav",
+            surfaces: ["*"],
+            source: "src/client/components/ShellLayout.vue"
+          },
           {
             target: "shell-layout:secondary-menu",
             surfaces: ["*"],
             source: "src/client/components/ShellLayout.vue"
           },
+          {
+            target: "shell-layout:supporting-bottom-sheet",
+            surfaces: ["*"],
+            source: "src/client/components/ShellLayout.vue"
+          },
+          {
+            target: "shell-layout:supporting-side-panel",
+            surfaces: ["*"],
+            source: "src/client/components/ShellLayout.vue"
+          },
           {
             target: "home-settings:primary-menu",
             surfaces: ["home"],
@@ -94,9 +112,9 @@ export default Object.freeze({
               default: true,
               variants: {
                 compact: {
-                  outlet: "shell-layout:primary-menu",
+                  outlet: "shell-layout:primary-bottom-nav",
                   renderers: {
-                    link: "local.main.ui.surface-aware-menu-link-item"
+                    link: "local.main.ui.tab-link-item"
                   }
                 },
                 medium: {
@@ -170,6 +188,47 @@ export default Object.freeze({
                 }
               }
             },
+            {
+              id: "shell.global-actions",
+              description: "Global surface actions that should stay outside primary navigation.",
+              surfaces: ["*"],
+              variants: {
+                compact: {
+                  outlet: "shell-layout:top-right",
+                  renderers: {
+                    link: "local.main.ui.surface-aware-menu-link-item"
+                  }
+                },
+                medium: {
+                  outlet: "shell-layout:top-right",
+                  renderers: {
+                    link: "local.main.ui.surface-aware-menu-link-item"
+                  }
+                },
+                expanded: {
+                  outlet: "shell-layout:top-right",
+                  renderers: {
+                    link: "local.main.ui.surface-aware-menu-link-item"
+                  }
+                }
+              }
+            },
+            {
+              id: "page.supporting-content",
+              description: "Supporting page content that opens as a bottom sheet on compact layouts and a side panel on wider layouts.",
+              surfaces: ["*"],
+              variants: {
+                compact: {
+                  outlet: "shell-layout:supporting-bottom-sheet"
+                },
+                medium: {
+                  outlet: "shell-layout:supporting-side-panel"
+                },
+                expanded: {
+                  outlet: "shell-layout:supporting-side-panel"
+                }
+              }
+            },
             {
               id: "page.section-nav",
               owner: "home-settings",
@@ -232,9 +291,7 @@ export default Object.freeze({
     dependencies: {
       runtime: {
         "@mdi/js": "^7.4.47",
-        "@tanstack/vue-query": "^5.90.5",
-        "@jskit-ai/kernel": "0.1.66",
-        "vuetify": "^4.0.0"
+        "@jskit-ai/kernel": "0.1.67"
       },
       dev: {}
     },
@@ -419,6 +476,14 @@ export default Object.freeze({
         reason: "Install shell-driven general settings child page with a tiny browser-local shell preference example.",
         category: "shell-web",
         id: "shell-web-page-home-settings-general"
+      },
+      {
+        from: "templates/tests/e2e/adaptive-shell.spec.ts",
+        to: "tests/e2e/adaptive-shell.spec.ts",
+        ownership: "app",
+        reason: "Install compact/medium/expanded Playwright smoke coverage for the adaptive shell.",
+        category: "shell-web",
+        id: "shell-web-test-adaptive-shell-smoke"
       }
     ]
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/shell-web",
-  "version": "0.1.65",
+  "version": "0.1.66",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -15,22 +15,23 @@
     "./client/components/ShellLayout": "./src/client/components/ShellLayout.vue",
     "./client/components/ShellOutlet": "./src/client/components/ShellOutlet.vue",
     "./client/components/ShellOutletMenuWidget": "./src/client/components/ShellOutletMenuWidget.vue",
+    "./client/components/ShellRouteTransition": "./src/client/components/ShellRouteTransition.vue",
     "./client/components/ShellErrorHost": "./src/client/components/ShellErrorHost.vue",
     "./client/components/ShellMenuLinkItem": "./src/client/components/ShellMenuLinkItem.vue",
     "./client/components/ShellSurfaceAwareMenuLinkItem": "./src/client/components/ShellSurfaceAwareMenuLinkItem.vue",
     "./client/components/ShellTabLinkItem": "./src/client/components/ShellTabLinkItem.vue",
     "./client/composables/useShellLayoutState": "./src/client/composables/useShellLayoutState.js",
-    "./client/providers/ShellWebClientProvider": "./src/client/providers/ShellWebClientProvider.js"
+    "./client/providers/ShellWebClientProvider": "./src/client/providers/ShellWebClientProvider.js",
+    "./test/adaptiveShellSmoke": "./src/test/adaptiveShellSmoke.js"
   },
   "dependencies": {
     "@mdi/js": "^7.4.47",
-    "@tanstack/vue-query": "^5.90.5",
-    "@jskit-ai/kernel": "0.1.66",
-    "pinia": "^3.0.4",
-    "vuetify": "^4.0.0"
+    "@jskit-ai/kernel": "0.1.67"
   },
   "peerDependencies": {
+    "pinia": "^3.0.4",
     "vue": "^3.5.13",
-    "vue-router": "^5.0.4"
+    "vue-router": "^5.0.4",
+    "vuetify": "^4.0.0"
   }
 }

package/src/client/components/ShellErrorHost.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import {
   useShellWebErrorRuntime
 } from "../error/inject.js";
@@ -8,9 +8,57 @@ import { useShellErrorPresentationStore } from "../stores/useShellErrorPresentat
 const runtime = useShellWebErrorRuntime();
 const store = useShellErrorPresentationStore();
 
-const snackbarEntry = computed(() => store.channels.snackbar[0] || null);
+const snackbarEntries = computed(() => store.channels.snackbar || []);
 const bannerEntries = computed(() => store.channels.banner || []);
 const dialogEntry = computed(() => store.channels.dialog[0] || null);
+const displayedSnackbarEntry = ref(null);
+const snackbarOpen = ref(false);
+
+function isSameSnackbarEntry(left = null, right = null) {
+  return Boolean(left?.id && right?.id && left.id === right.id);
+}
+
+function hasSnackbarEntry(entry = null) {
+  if (!entry?.id) {
+    return false;
+  }
+
+  return snackbarEntries.value.some((candidate) => isSameSnackbarEntry(candidate, entry));
+}
+
+function openNextSnackbarEntry() {
+  const nextEntry = snackbarEntries.value[0] || null;
+  if (!nextEntry) {
+    displayedSnackbarEntry.value = null;
+    snackbarOpen.value = false;
+    return;
+  }
+
+  displayedSnackbarEntry.value = nextEntry;
+  snackbarOpen.value = true;
+}
+
+watch(
+  snackbarEntries,
+  (entries) => {
+    const currentEntry = displayedSnackbarEntry.value;
+    if (!currentEntry) {
+      openNextSnackbarEntry();
+      return;
+    }
+
+    const matchingEntry = entries.find((entry) => isSameSnackbarEntry(entry, currentEntry)) || null;
+    if (matchingEntry) {
+      displayedSnackbarEntry.value = matchingEntry;
+      return;
+    }
+
+    snackbarOpen.value = false;
+  },
+  {
+    immediate: true
+  }
+);
 
 function resolveSeverityColor(severity = "error") {
   const normalized = String(severity || "error").trim().toLowerCase();
@@ -26,6 +74,20 @@ function resolveSeverityColor(severity = "error") {
   return "error";
 }
 
+function resolveSeverityIcon(severity = "error") {
+  const normalized = String(severity || "error").trim().toLowerCase();
+  if (normalized === "info") {
+    return "mdi-information-outline";
+  }
+  if (normalized === "success") {
+    return "mdi-check-circle-outline";
+  }
+  if (normalized === "warning") {
+    return "mdi-alert-outline";
+  }
+  return "mdi-alert-outline";
+}
+
 function resolveTimeout(entry) {
   if (!entry) {
     return -1;
@@ -56,8 +118,8 @@ function runAction(entry) {
       source: "shell-web.error-host.action",
       message: "Error action failed.",
       cause: error,
-      severity: "error",
-      channel: "dialog"
+      intent: "blocking",
+      severity: "error"
     });
   }
 
@@ -67,8 +129,9 @@ function runAction(entry) {
 }
 
 function onSnackbarModelValue(nextValue) {
-  if (nextValue === false && snackbarEntry.value) {
-    dismiss(snackbarEntry.value);
+  if (nextValue === false && displayedSnackbarEntry.value) {
+    snackbarOpen.value = false;
+    dismiss(displayedSnackbarEntry.value);
   }
 }
 
@@ -77,6 +140,14 @@ function onDialogModelValue(nextValue) {
     dismiss(dialogEntry.value);
   }
 }
+
+function onSnackbarAfterLeave() {
+  if (hasSnackbarEntry(displayedSnackbarEntry.value)) {
+    return;
+  }
+
+  openNextSnackbarEntry();
+}
 </script>
 
 <template>
@@ -87,6 +158,7 @@ function onDialogModelValue(nextValue) {
           v-for="entry in bannerEntries"
           :key="entry.id"
           :type="resolveSeverityColor(entry.severity)"
+          :icon="resolveSeverityIcon(entry.severity)"
           variant="elevated"
           density="comfortable"
           rounded="lg"
@@ -113,28 +185,29 @@ function onDialogModelValue(nextValue) {
     </div>
 
     <v-snackbar
-      :model-value="Boolean(snackbarEntry)"
+      :model-value="snackbarOpen"
       location="bottom end"
-      :timeout="resolveTimeout(snackbarEntry)"
-      :color="resolveSeverityColor(snackbarEntry?.severity)"
+      :timeout="resolveTimeout(displayedSnackbarEntry)"
+      :color="displayedSnackbarEntry ? resolveSeverityColor(displayedSnackbarEntry.severity) : undefined"
       @update:model-value="onSnackbarModelValue"
+      @after-leave="onSnackbarAfterLeave"
     >
-      <span v-if="snackbarEntry">{{ snackbarEntry.message }}</span>
+      <span v-if="displayedSnackbarEntry">{{ displayedSnackbarEntry.message }}</span>
 
       <template #actions>
         <v-btn
-          v-if="snackbarEntry?.action"
+          v-if="displayedSnackbarEntry?.action"
           variant="text"
           size="small"
-          @click="runAction(snackbarEntry)"
+          @click="runAction(displayedSnackbarEntry)"
         >
-          {{ snackbarEntry.action.label }}
+          {{ displayedSnackbarEntry.action.label }}
         </v-btn>
         <v-btn
-          v-if="snackbarEntry"
+          v-if="displayedSnackbarEntry"
           variant="text"
           size="small"
-          @click="dismiss(snackbarEntry)"
+          @click="dismiss(displayedSnackbarEntry)"
         >
           Dismiss
         </v-btn>