@jskit-ai/shell-web 0.1.28 → 0.1.30

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/shell-web",
-  version: "0.1.28",
+  version: "0.1.30",
   kind: "runtime",
   description: "Web shell layout runtime with outlet-based placement contributions.",
   dependsOn: [],
@@ -82,13 +82,7 @@ export default Object.freeze({
             host: "home-settings",
             position: "primary-menu",
             surfaces: ["home"],
-            source: "templates/src/pages/home/settings/index.vue"
-          },
-          {
-            host: "home-settings",
-            position: "forms",
-            surfaces: ["home"],
-            source: "templates/src/pages/home/settings/index.vue"
+            source: "templates/src/pages/home/settings.vue"
           }
         ],
         contributions: []
@@ -99,7 +93,7 @@ export default Object.freeze({
     dependencies: {
       runtime: {
         "@tanstack/vue-query": "^5.90.5",
-        "@jskit-ai/kernel": "0.1.29",
+        "@jskit-ai/kernel": "0.1.31",
         "vuetify": "^4.0.0"
       },
       dev: {}
@@ -158,11 +152,19 @@ export default Object.freeze({
         category: "shell-web",
         id: "shell-web-page-home"
       },
+      {
+        from: "templates/src/pages/home/settings.vue",
+        toSurface: "home",
+        toSurfacePath: "settings.vue",
+        reason: "Install shell-driven home settings shell route with section navigation.",
+        category: "shell-web",
+        id: "shell-web-page-home-settings-shell"
+      },
       {
         from: "templates/src/pages/home/settings/index.vue",
         toSurface: "home",
         toSurfacePath: "settings/index.vue",
-        reason: "Install shell-driven home settings page scaffold with surface-derived settings outlets.",
+        reason: "Install shell-driven home settings landing page scaffold.",
         category: "shell-web",
         id: "shell-web-page-home-settings"
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/shell-web",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@tanstack/vue-query": "^5.90.5",
-    "@jskit-ai/kernel": "0.1.29",
+    "@jskit-ai/kernel": "0.1.31",
     "vuetify": "^4.0.0"
   }
 }

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

@@ -1,17 +1,8 @@
 <template>
-  <section class="settings-page">
-    <ShellOutlet host="home-settings" position="primary-menu" />
-    <ShellOutlet host="home-settings" position="forms" />
-  </section>
+  <v-sheet rounded="lg" border class="pa-6">
+    <h2 class="text-h6 mb-2">Settings</h2>
+    <p class="text-body-2 text-medium-emphasis mb-0">
+      Select a settings section from the menu.
+    </p>
+  </v-sheet>
 </template>
-
-<script setup>
-import ShellOutlet from "@jskit-ai/shell-web/client/components/ShellOutlet";
-</script>
-
-<style scoped>
-.settings-page {
-  display: grid;
-  gap: 1rem;
-}
-</style>

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

@@ -0,0 +1,29 @@
+<script setup>
+import ShellOutlet from "@jskit-ai/shell-web/client/components/ShellOutlet";
+import { RouterView } from "vue-router";
+</script>
+
+<template>
+  <section class="settings-shell d-flex flex-column ga-4">
+    <v-card rounded="lg" elevation="1" border>
+      <v-card-item>
+        <v-card-title>Home settings</v-card-title>
+        <v-card-subtitle>Manage settings pages for the home surface.</v-card-subtitle>
+      </v-card-item>
+      <v-divider />
+      <v-card-text class="pt-4">
+        <v-row no-gutters>
+          <v-col cols="12" md="3" lg="2" class="pr-md-4 mb-4 mb-md-0">
+            <v-list nav density="comfortable" rounded="lg" border>
+              <ShellOutlet host="home-settings" position="primary-menu" />
+            </v-list>
+          </v-col>
+
+          <v-col cols="12" md="9" lg="10">
+            <RouterView />
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </section>
+</template>

package/test/settingsPlacementContract.test.js

@@ -23,10 +23,9 @@ function findFileMutation(id) {
 }
 
 test("shell-web home settings template exposes surface-derived settings outlets", async () => {
-  const source = await readFile(path.join(PACKAGE_DIR, "templates", "src", "pages", "home", "settings", "index.vue"), "utf8");
+  const source = await readFile(path.join(PACKAGE_DIR, "templates", "src", "pages", "home", "settings.vue"), "utf8");
 
   assert.match(source, /<ShellOutlet host="home-settings" position="primary-menu" \/>/);
-  assert.match(source, /<ShellOutlet host="home-settings" position="forms" \/>/);
 });
 
 test("shell-web descriptor metadata advertises home settings outlets and installs the scaffold page", () => {
@@ -37,22 +36,25 @@ test("shell-web descriptor metadata advertises home settings outlets and install
         host: "home-settings",
         position: "primary-menu",
         surfaces: ["home"],
-        source: "templates/src/pages/home/settings/index.vue"
-      },
-      {
-        host: "home-settings",
-        position: "forms",
-        surfaces: ["home"],
-        source: "templates/src/pages/home/settings/index.vue"
+        source: "templates/src/pages/home/settings.vue"
       }
     ]
   );
 
+  assert.deepEqual(findFileMutation("shell-web-page-home-settings-shell"), {
+    from: "templates/src/pages/home/settings.vue",
+    toSurface: "home",
+    toSurfacePath: "settings.vue",
+    reason: "Install shell-driven home settings shell route with section navigation.",
+    category: "shell-web",
+    id: "shell-web-page-home-settings-shell"
+  });
+
   assert.deepEqual(findFileMutation("shell-web-page-home-settings"), {
     from: "templates/src/pages/home/settings/index.vue",
     toSurface: "home",
     toSurfacePath: "settings/index.vue",
-    reason: "Install shell-driven home settings page scaffold with surface-derived settings outlets.",
+    reason: "Install shell-driven home settings landing page scaffold.",
     category: "shell-web",
     id: "shell-web-page-home-settings"
   });