@jskit-ai/shell-web 0.1.83 → 0.1.85

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/shell-web",
-  version: "0.1.83",
+  version: "0.1.85",
   kind: "runtime",
   description: "Web shell layout runtime with outlet-based placement contributions.",
   dependsOn: [],
@@ -291,7 +291,7 @@ export default Object.freeze({
     dependencies: {
       runtime: {
         "@mdi/js": "^7.4.47",
-        "@jskit-ai/kernel": "0.1.84"
+        "@jskit-ai/kernel": "0.1.86"
       },
       dev: {}
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/shell-web",
-  "version": "0.1.83",
+  "version": "0.1.85",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@mdi/js": "^7.4.47",
-    "@jskit-ai/kernel": "0.1.84"
+    "@jskit-ai/kernel": "0.1.86"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",

package/src/client/components/ShellRouteTransition.vue

@@ -24,6 +24,7 @@ import {
   normalizeMenuLinkPathname,
   resolveMenuLinkTarget
 } from "../support/menuLinkTarget.js";
+import { resolveShellRouteTransitionKey } from "../support/routeTransitionKey.js";
 
 const props = defineProps({
   enabled: {
@@ -232,7 +233,16 @@ const routeTransitionName = computed(() => {
   return "";
 });
 
-const routeTransitionKey = computed(() => normalizeComparablePathname(route?.path || route?.fullPath || "/") || "/");
+const routeTransitionKey = computed(() => {
+  const routePathKey = routeTransitionName.value
+    ? normalizeComparablePathname(route?.path || route?.fullPath || "/")
+    : "";
+  return resolveShellRouteTransitionKey({
+    routePathKey,
+    routeTransitionName: routeTransitionName.value,
+    surfaceId: currentSurfaceId.value
+  });
+});
 
 const swipeNavigationEnabled = computed(() =>
   Boolean(
@@ -409,7 +419,12 @@ function isSwipeIgnoredTarget(target) {
 <style scoped>
 .shell-route-transition {
   --shell-route-transition-distance: 100%;
+  align-items: stretch;
   --shell-route-transition-opacity: 1;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
   overflow-x: clip;
   position: relative;
 }
@@ -420,6 +435,10 @@ function isSwipeIgnoredTarget(target) {
 
 .shell-route-transition__pane {
   background: rgb(var(--v-theme-background));
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
   width: 100%;
 }
 

package/src/client/support/routeTransitionKey.js

@@ -0,0 +1,22 @@
+function normalizeText(value = "") {
+  return String(value || "").trim();
+}
+
+function resolveShellRouteTransitionKey({
+  routePathKey = "",
+  routeTransitionName = "",
+  surfaceId = ""
+} = {}) {
+  if (normalizeText(routeTransitionName)) {
+    return normalizeText(routePathKey) || "/";
+  }
+
+  const surfaceKey = normalizeText(surfaceId);
+  if (surfaceKey && surfaceKey !== "*") {
+    return `surface:${surfaceKey}`;
+  }
+
+  return "stable";
+}
+
+export { resolveShellRouteTransitionKey };

package/templates/src/pages/home/settings.vue

@@ -14,7 +14,7 @@ import { RouterView } from "vue-router";
     <v-sheet rounded="lg" border class="settings-shell__panel">
       <div class="settings-shell__body">
         <nav class="settings-shell__nav" aria-label="Home settings sections">
-          <v-list nav density="comfortable" rounded="lg" border>
+          <v-list nav density="compact" rounded="lg">
             <ShellOutlet target="home-settings:primary-menu" />
           </v-list>
         </nav>
@@ -53,7 +53,31 @@ import { RouterView } from "vue-router";
 }
 
 .settings-shell__content {
+  border-left: 1px solid rgba(var(--v-theme-on-surface), 0.18);
   min-width: 0;
+  padding-left: 1rem;
+}
+
+.settings-shell__nav :deep(.v-list) {
+  padding: 0.35rem;
+}
+
+.settings-shell__nav :deep(.v-list-item) {
+  min-height: 48px;
+  padding-inline: 0.6rem 0.7rem;
+}
+
+.settings-shell__nav :deep(.v-list-item__prepend) {
+  margin-inline-end: 0;
+}
+
+.settings-shell__nav :deep(.v-list-item__spacer) {
+  min-width: 0.5rem;
+  width: 0.5rem;
+}
+
+.settings-shell__nav :deep(.v-list-item-title) {
+  line-height: 1.2;
 }
 
 @media (max-width: 960px) {
@@ -72,5 +96,10 @@ import { RouterView } from "vue-router";
     flex: 0 0 auto;
     min-height: 48px;
   }
+
+  .settings-shell__content {
+    border-left: 0;
+    padding-left: 0;
+  }
 }
 </style>

package/test/menuIcons.test.js

@@ -4,6 +4,7 @@ import test from "node:test";
 import { readFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 import {
+  mdiAccountKeyOutline,
   mdiCogOutline,
   mdiConsoleNetworkOutline,
   mdiViewListOutline
@@ -29,6 +30,10 @@ test("shell-web leaves unknown explicit mdi metadata icons unchanged", () => {
   assert.equal(resolveMenuLinkIcon({ icon: "mdi-not-a-real-supported-icon" }), "mdi-not-a-real-supported-icon");
 });
 
+test("shell-web accepts imported @mdi/js path constants as explicit menu icons", () => {
+  assert.equal(resolveMenuLinkIcon({ icon: mdiAccountKeyOutline }), mdiAccountKeyOutline);
+});
+
 test("shell-web menu icon resolution does not import the full mdi namespace", async () => {
   const source = await readFile(path.join(PACKAGE_DIR, "src", "client", "lib", "menuIcons.js"), "utf8");
 

package/test/settingsPlacementContract.test.js

@@ -5,6 +5,7 @@ import { readFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 import { assertGeneratedUiSourceContract } from "@jskit-ai/kernel/shared/support/generatedUiContract";
 import descriptor from "../package.descriptor.mjs";
+import { resolveShellRouteTransitionKey } from "../src/client/support/routeTransitionKey.js";
 
 const TEST_DIRECTORY = path.dirname(fileURLToPath(import.meta.url));
 const PACKAGE_DIR = path.resolve(TEST_DIRECTORY, "..");
@@ -159,10 +160,54 @@ test("shell-web route transition keeps mobile route motion placement-driven", as
   assert.match(source, /router\.push\(nextEntry\.href\)/);
   assert.match(source, /isSwipeIgnoredTarget/);
   assert.match(source, /touch-action:\s*pan-y/);
+  assert.match(source, /\.shell-route-transition\s*\{[\s\S]*display:\s*flex/);
+  assert.match(source, /\.shell-route-transition\s*\{[\s\S]*min-height:\s*0/);
+  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, /prefers-reduced-motion:\s*reduce/);
 });
 
+test("shell-web route transition key preserves no-motion surfaces and animated path transitions", () => {
+  const previewSurfaceKey = "surface:vibe64-preview";
+  assert.equal(
+    resolveShellRouteTransitionKey({
+      routeTransitionName: "",
+      routePathKey: "/preview",
+      surfaceId: "vibe64-preview"
+    }),
+    previewSurfaceKey
+  );
+  assert.equal(
+    resolveShellRouteTransitionKey({
+      routeTransitionName: "",
+      routePathKey: "/preview/dashboard",
+      surfaceId: "vibe64-preview"
+    }),
+    previewSurfaceKey
+  );
+  assert.equal(
+    resolveShellRouteTransitionKey({
+      routeTransitionName: "shell-route-slide-forward",
+      routePathKey: "/dashboard",
+      surfaceId: "home"
+    }),
+    "/dashboard"
+  );
+  assert.equal(
+    resolveShellRouteTransitionKey({
+      routeTransitionName: "",
+      routePathKey: "/dashboard",
+      surfaceId: "*"
+    }),
+    "stable"
+  );
+});
+
 test("shell-web settings landing page redirects to the starter child page", async () => {
   const source = await readFile(path.join(PACKAGE_DIR, "templates", "src", "pages", "home", "settings", "index.vue"), "utf8");