@jskit-ai/console-web 0.1.34 → 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.34",
+  version: "0.1.35",
   kind: "runtime",
   description: "Authenticated console surface scaffold and surface policy wiring.",
   dependsOn: [
@@ -103,9 +103,9 @@ export default Object.freeze({
   mutations: {
     dependencies: {
       runtime: {
-        "@jskit-ai/auth-web": "0.1.67",
-        "@jskit-ai/console-core": "0.1.29",
-        "@jskit-ai/shell-web": "0.1.65",
+        "@jskit-ai/auth-web": "0.1.68",
+        "@jskit-ai/console-core": "0.1.30",
+        "@jskit-ai/shell-web": "0.1.66",
       },
       dev: {}
     },

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@jskit-ai/console-web",
-  "version": "0.1.34",
+  "version": "0.1.35",
   "type": "module",
   "scripts": {
     "test": "node --test"
   },
   "dependencies": {
-    "@jskit-ai/auth-web": "0.1.67",
-    "@jskit-ai/console-core": "0.1.29",
-    "@jskit-ai/shell-web": "0.1.65"
+    "@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,25 +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" />
-            </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

@@ -164,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.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/);
 });