@jskit-ai/console-web 0.1.33 → 0.1.35

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/console-web",
-  version: "0.1.33",
+  version: "0.1.35",
   kind: "runtime",
   description: "Authenticated console surface scaffold and surface policy wiring.",
   dependsOn: [
@@ -43,27 +43,56 @@ export default Object.freeze({
         outlets: [
           {
             target: "console-settings:primary-menu",
-            defaultLinkComponentToken: "local.main.ui.surface-aware-menu-link-item",
             surfaces: ["console"],
             source: "templates/src/pages/console/settings.vue"
           }
         ],
+        topology: {
+          placements: [
+            {
+              id: "page.section-nav",
+              owner: "console-settings",
+              description: "Navigation between console settings child pages.",
+              surfaces: ["console"],
+              variants: {
+                compact: {
+                  outlet: "console-settings:primary-menu",
+                  renderers: {
+                    link: "local.main.ui.surface-aware-menu-link-item"
+                  }
+                },
+                medium: {
+                  outlet: "console-settings:primary-menu",
+                  renderers: {
+                    link: "local.main.ui.surface-aware-menu-link-item"
+                  }
+                },
+                expanded: {
+                  outlet: "console-settings:primary-menu",
+                  renderers: {
+                    link: "local.main.ui.surface-aware-menu-link-item"
+                  }
+                }
+              }
+            }
+          ]
+        },
         contributions: [
           {
             id: "console.web.profile.menu.console",
-            target: "auth-profile-menu:primary-menu",
+            target: "auth.profile-menu",
+            kind: "link",
             surfaces: ["*"],
             order: 600,
-            componentToken: "auth.web.profile.menu.link-item",
             when: "auth.authenticated === true && surfaceAccess.consoleowner === true && surface !== \"console\"",
             source: "mutations.text#console-web-profile-menu-console-placement"
           },
           {
             id: "console.web.menu.settings",
-            target: "shell-layout:primary-menu",
+            target: "shell.primary-nav",
+            kind: "link",
             surfaces: ["console"],
             order: 100,
-            componentToken: "local.main.ui.menu-link-item",
             when: "auth.authenticated === true",
             source: "mutations.text#console-web-console-settings-placement"
           }
@@ -74,9 +103,9 @@ export default Object.freeze({
   mutations: {
     dependencies: {
       runtime: {
-        "@jskit-ai/auth-web": "0.1.66",
-        "@jskit-ai/console-core": "0.1.28",
-        "@jskit-ai/shell-web": "0.1.64",
+        "@jskit-ai/auth-web": "0.1.68",
+        "@jskit-ai/console-core": "0.1.30",
+        "@jskit-ai/shell-web": "0.1.66",
       },
       dev: {}
     },
@@ -154,7 +183,7 @@ export default Object.freeze({
         position: "bottom",
         skipIfContains: "id: \"console.web.profile.menu.console\"",
         value:
-          "\naddPlacement({\n  id: \"console.web.profile.menu.console\",\n  target: \"auth-profile-menu:primary-menu\",\n  surfaces: [\"*\"],\n  order: 600,\n  componentToken: \"auth.web.profile.menu.link-item\",\n  props: {\n    label: \"Go to console\",\n    to: \"/console\",\n    icon: \"mdi-console-network-outline\"\n  },\n  when: ({ auth, surfaceAccess, surface }) => {\n    return auth?.authenticated === true && surfaceAccess?.consoleowner === true && surface !== \"console\";\n  }\n});\n",
+          "\naddPlacement({\n  id: \"console.web.profile.menu.console\",\n  target: \"auth.profile-menu\",\n  kind: \"link\",\n  surfaces: [\"*\"],\n  order: 600,\n  props: {\n    label: \"Go to console\",\n    to: \"/console\",\n    icon: \"mdi-console-network-outline\"\n  },\n  when: ({ auth, surfaceAccess, surface }) => {\n    return auth?.authenticated === true && surfaceAccess?.consoleowner === true && surface !== \"console\";\n  }\n});\n",
         reason: "Append owner-only console navigation entry into the authenticated profile menu outside the console surface.",
         category: "console-web",
         id: "console-web-profile-menu-console-placement"
@@ -165,10 +194,21 @@ export default Object.freeze({
         position: "bottom",
         skipIfContains: "id: \"console.web.menu.settings\"",
         value:
-          "\naddPlacement({\n  id: \"console.web.menu.settings\",\n  target: \"shell-layout:primary-menu\",\n  surfaces: [\"console\"],\n  order: 100,\n  componentToken: \"local.main.ui.menu-link-item\",\n  props: {\n    label: \"Settings\",\n    to: \"/console/settings\",\n    icon: \"mdi-cog-outline\"\n  },\n  when: ({ auth }) => auth?.authenticated === true\n});\n",
+          "\naddPlacement({\n  id: \"console.web.menu.settings\",\n  target: \"shell.primary-nav\",\n  kind: \"link\",\n  surfaces: [\"console\"],\n  order: 100,\n  props: {\n    label: \"Settings\",\n    to: \"/console/settings\",\n    icon: \"mdi-cog-outline\"\n  },\n  when: ({ auth }) => auth?.authenticated === true\n});\n",
         reason: "Append console-web settings menu placement into app-owned placement registry.",
         category: "console-web",
         id: "console-web-console-settings-placement"
+      },
+      {
+        op: "append-text",
+        file: "src/placementTopology.js",
+        position: "bottom",
+        skipIfContains: "owner: \"console-settings\"",
+        value:
+          "\naddPlacementTopology({\n  id: \"page.section-nav\",\n  owner: \"console-settings\",\n  description: \"Navigation between console settings child pages.\",\n  surfaces: [\"console\"],\n  variants: {\n    compact: {\n      outlet: \"console-settings:primary-menu\",\n      renderers: {\n        link: \"local.main.ui.surface-aware-menu-link-item\"\n      }\n    },\n    medium: {\n      outlet: \"console-settings:primary-menu\",\n      renderers: {\n        link: \"local.main.ui.surface-aware-menu-link-item\"\n      }\n    },\n    expanded: {\n      outlet: \"console-settings:primary-menu\",\n      renderers: {\n        link: \"local.main.ui.surface-aware-menu-link-item\"\n      }\n    }\n  }\n});\n",
+        reason: "Append console settings semantic topology into app-owned placement topology.",
+        category: "console-web",
+        id: "console-web-settings-placement-topology"
       }
     ]
   }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@jskit-ai/console-web",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "type": "module",
   "scripts": {
     "test": "node --test"
   },
   "dependencies": {
-    "@jskit-ai/auth-web": "0.1.66",
-    "@jskit-ai/console-core": "0.1.28",
-    "@jskit-ai/shell-web": "0.1.64"
+    "@jskit-ai/auth-web": "0.1.68",
+    "@jskit-ai/console-core": "0.1.30",
+    "@jskit-ai/shell-web": "0.1.66"
   }
 }

package/templates/src/pages/console/index.vue

@@ -1,24 +1,62 @@
 <template>
-  <v-card rounded="lg" elevation="1" border>
-    <v-card-item>
-      <template #prepend>
-        <v-chip color="primary" size="small" label>Console</v-chip>
-      </template>
-      <v-card-title class="text-h5">Operations Console</v-card-title>
-      <v-card-subtitle>Operator tools, scripts, and diagnostics.</v-card-subtitle>
-    </v-card-item>
-    <v-divider />
-    <v-card-text class="d-flex flex-column ga-4">
-      <div class="d-flex flex-wrap ga-3">
+  <section class="console-home-screen d-flex flex-column ga-4">
+    <header class="console-home-screen__header">
+      <div>
+        <p class="text-overline text-medium-emphasis mb-1">Console</p>
+        <h1 class="console-home-screen__title">Operations Console</h1>
+        <p class="text-body-2 text-medium-emphasis mb-0">Operator tools, scripts, and diagnostics.</p>
+      </div>
+      <v-btn color="primary" variant="flat" to="/home">Back to home</v-btn>
+    </header>
+
+    <v-sheet rounded="lg" border class="console-home-screen__panel">
+      <div class="console-home-screen__status-row">
         <v-chip color="secondary" variant="tonal" label>Route: /console</v-chip>
         <v-chip color="info" variant="tonal" label>Surface status: enabled</v-chip>
       </div>
-      <p class="text-medium-emphasis mb-0">
-        Ideal for operator actions, scripts, and technical insights not meant for end users.
+      <p class="text-body-2 text-medium-emphasis mb-0">
+        Use this surface for operator actions and technical insights that should stay out of the end-user app.
       </p>
-      <div>
-        <v-btn color="primary" variant="flat" to="/home">Back to home</v-btn>
-      </div>
-    </v-card-text>
-  </v-card>
+    </v-sheet>
+  </section>
 </template>
+
+<style scoped>
+.console-home-screen__header {
+  align-items: flex-start;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.console-home-screen__title {
+  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+  margin: 0 0 0.4rem;
+}
+
+.console-home-screen__panel {
+  display: grid;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.console-home-screen__status-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+@media (max-width: 640px) {
+  .console-home-screen__header {
+    flex-direction: column;
+  }
+
+  .console-home-screen__header :deep(.v-btn) {
+    min-height: 48px;
+    width: 100%;
+  }
+}
+</style>

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

@@ -1,11 +1,17 @@
-<script setup>
-// To redirect this settings shell to a child page, uncomment and edit the example below.
-// import { redirectToChild } from "@jskit-ai/kernel/client/pageRedirects";
-// definePage({
-//   redirect: redirectToChild("your_child_segment")
-// });
-</script>
-
 <template>
-  <div />
+  <section class="console-settings-empty">
+    <h2 class="text-h6 mb-2">No console settings yet</h2>
+    <p class="text-body-2 text-medium-emphasis mb-0">
+      Console settings sections will appear here when installed.
+    </p>
+  </section>
 </template>
+
+<style scoped>
+.console-settings-empty {
+  margin-inline: auto;
+  max-width: 34rem;
+  padding: 2rem 1.25rem;
+  text-align: center;
+}
+</style>

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

@@ -5,28 +5,66 @@ import { RouterView } from "vue-router";
 
 <template>
   <section class="settings-shell d-flex flex-column ga-4">
-    <v-card rounded="lg" elevation="1" border>
-      <v-card-item>
-        <v-card-title>Console settings</v-card-title>
-        <v-card-subtitle>Global configuration and reference data for the whole app.</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
-                target="console-settings:primary-menu"
-                default-link-component-token="local.main.ui.surface-aware-menu-link-item"
-              />
-            </v-list>
-          </v-col>
-
-          <v-col cols="12" md="9" lg="10">
-            <RouterView />
-          </v-col>
-        </v-row>
-      </v-card-text>
-    </v-card>
+    <header>
+      <p class="text-overline text-medium-emphasis mb-1">Console</p>
+      <h1 class="settings-shell__title">Console settings</h1>
+      <p class="text-body-2 text-medium-emphasis mb-0">Global configuration and reference data for the whole app.</p>
+    </header>
+
+    <v-sheet rounded="lg" border class="settings-shell__panel">
+      <nav class="settings-shell__nav" aria-label="Console settings sections">
+        <v-list nav density="comfortable" class="settings-shell__nav-list">
+          <ShellOutlet target="console-settings:primary-menu" />
+        </v-list>
+      </nav>
+      <main class="settings-shell__content">
+        <RouterView />
+      </main>
+    </v-sheet>
   </section>
 </template>
+
+<style scoped>
+.settings-shell__title {
+  font-size: clamp(1.35rem, 2vw, 1.85rem);
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  margin: 0 0 0.35rem;
+}
+
+.settings-shell__panel {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
+  padding: 1rem;
+}
+
+.settings-shell__nav-list {
+  padding: 0;
+}
+
+.settings-shell__content {
+  min-width: 0;
+}
+
+@media (max-width: 960px) {
+  .settings-shell__panel {
+    grid-template-columns: 1fr;
+  }
+
+  .settings-shell__nav {
+    overflow-x: auto;
+  }
+
+  .settings-shell__nav-list {
+    display: flex;
+    gap: 0.5rem;
+    min-width: max-content;
+  }
+
+  .settings-shell__nav-list :deep(.v-list-item) {
+    min-height: 48px;
+  }
+}
+</style>

package/test/packageDescriptor.test.js

@@ -22,6 +22,34 @@ function findTextMutation(id) {
     : null;
 }
 
+function readOutlets(target = "") {
+  const outlets = descriptor?.metadata?.ui?.placements?.outlets;
+  const normalizedTarget = String(target || "").trim();
+  return Array.isArray(outlets)
+    ? outlets.filter((entry) => String(entry?.target || "").trim() === normalizedTarget)
+    : [];
+}
+
+function findTopology(id, owner = "") {
+  const placements = descriptor?.metadata?.ui?.placements?.topology?.placements;
+  const normalizedId = String(id || "").trim();
+  const normalizedOwner = String(owner || "").trim();
+  return Array.isArray(placements)
+    ? placements.find((entry) => {
+        const entryId = String(entry?.id || "").trim();
+        const entryOwner = String(entry?.owner || "").trim();
+        return entryId === normalizedId && entryOwner === normalizedOwner;
+      }) || null
+    : null;
+}
+
+function findContribution(id) {
+  const contributions = descriptor?.metadata?.ui?.placements?.contributions;
+  return Array.isArray(contributions)
+    ? contributions.find((entry) => String(entry?.id || "").trim() === id) || null
+    : null;
+}
+
 test("console-web installs console surface scripts and files", () => {
   assert.deepEqual(descriptor?.mutations?.packageJson?.scripts, {
     "server:console": "SERVER_SURFACE=console node ./bin/server.js",
@@ -82,6 +110,49 @@ test("console-web wires console surface policy into app config", () => {
     /surfaceAccess\?\.consoleowner === true && surface !== "console"/
   );
   assert.equal(findTextMutation("console-web-console-settings-placement")?.file, "src/placement.js");
+  assert.equal(findTextMutation("console-web-settings-placement-topology")?.file, "src/placementTopology.js");
+  assert.deepEqual(readOutlets("console-settings:primary-menu"), [
+    {
+      target: "console-settings:primary-menu",
+      surfaces: ["console"],
+      source: "templates/src/pages/console/settings.vue"
+    }
+  ]);
+  assert.deepEqual(findTopology("page.section-nav", "console-settings"), {
+    id: "page.section-nav",
+    owner: "console-settings",
+    description: "Navigation between console settings child pages.",
+    surfaces: ["console"],
+    variants: {
+      compact: {
+        outlet: "console-settings:primary-menu",
+        renderers: {
+          link: "local.main.ui.surface-aware-menu-link-item"
+        }
+      },
+      medium: {
+        outlet: "console-settings:primary-menu",
+        renderers: {
+          link: "local.main.ui.surface-aware-menu-link-item"
+        }
+      },
+      expanded: {
+        outlet: "console-settings:primary-menu",
+        renderers: {
+          link: "local.main.ui.surface-aware-menu-link-item"
+        }
+      }
+    }
+  });
+  assert.deepEqual(findContribution("console.web.menu.settings"), {
+    id: "console.web.menu.settings",
+    target: "shell.primary-nav",
+    kind: "link",
+    surfaces: ["console"],
+    order: 100,
+    when: "auth.authenticated === true",
+    source: "mutations.text#console-web-console-settings-placement"
+  });
 });
 
 test("console-web console templates stay shell-driven", async () => {
@@ -93,9 +164,12 @@ test("console-web console templates stay shell-driven", async () => {
   assert.match(wrapperSource, /ShellLayout/);
   assert.match(wrapperSource, /"surface": "console"/);
   assert.match(indexSource, /Operations Console/);
+  assert.match(indexSource, /console-home-screen__panel/);
+  assert.doesNotMatch(indexSource, /<v-card\b|v-card-title|v-card-subtitle/);
   assert.match(settingsSource, /target="console-settings:primary-menu"/);
-  assert.match(settingsSource, /default-link-component-token="local\.main\.ui\.surface-aware-menu-link-item"/);
+  assert.doesNotMatch(settingsSource, /default-link-component-token/);
+  assert.doesNotMatch(settingsSource, /<v-card\b/);
   assert.match(settingsSource, /<RouterView \/>/);
-  assert.match(settingsIndexSource, /definePage/);
-  assert.match(settingsIndexSource, /your_child_segment/);
+  assert.match(settingsIndexSource, /No console settings yet/);
+  assert.doesNotMatch(settingsIndexSource, /your_child_segment|To redirect this settings shell/);
 });