@jskit-ai/agent-docs 0.1.274 → 0.1.276

package/patterns/shell-foundation/example/src/main.js

@@ -4,9 +4,11 @@ import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";
 import { createRouter, createWebHistory } from "vue-router/auto";
 import { routes } from "vue-router/auto-routes";
 import "vuetify/styles";
+import "@jskit-ai/material-web/client/material.css";
 import { createVuetify } from "vuetify";
-import { aliases as mdiAliases, mdi } from "vuetify/iconsets/mdi-svg";
+import { createMaterialVuetifyOptions } from "@jskit-ai/material-web/client";
 import App from "./App.vue";
+import { theme } from "./theme/index.js";
 import NotFoundView from "./views/NotFound.vue";
 import { bootInstalledClientModules } from "virtual:jskit-client-bootstrap";
 import { createSurfaceRuntime } from "@jskit-ai/kernel/shared/surface/runtime";
@@ -39,16 +41,8 @@ const { router, fallbackRoute } = createShellRouter({
   }
 });
 
-const vuetify = createVuetify({
-  theme: {
-    defaultTheme: "light"
-  },
-  icons: {
-    defaultSet: "mdi",
-    aliases: mdiAliases,
-    sets: { mdi }
-  }
-});
+// Material 3 from the app's theme (src/theme/index.js), with Material Symbols behind every icon alias.
+const vuetify = createVuetify(createMaterialVuetifyOptions(theme));
 const pinia = createPinia();
 const queryClient = new QueryClient({
   defaultOptions: {

package/patterns/shell-foundation/example/src/pages/home/index.vue

@@ -1,7 +1,9 @@
 <script setup>
 import { computed } from "vue";
 import { useQuery } from "@tanstack/vue-query";
+import { usePaths } from "@jskit-ai/shell-web/client/navigation/usePaths";
 
+const paths = usePaths();
 const healthQuery = useQuery({
   queryKey: ["shell-web", "health"],
   queryFn: async () => {
@@ -28,63 +30,25 @@ const healthPending = computed(
 </script>
 
 <template>
-  <section class="home-surface-screen d-flex flex-column ga-4">
-    <div class="home-surface-screen__actions">
-      <v-btn color="primary" variant="flat" to="/home/settings/general">Settings</v-btn>
+  <section class="d-flex flex-column ga-4">
+    <v-card>
+      <v-list>
+        <v-list-item subtitle="Service health">
+          <template #title>
+            <v-skeleton-loader
+              v-if="healthPending"
+              aria-label="Loading service health"
+              type="text"
+              max-width="80"
+            />
+            <span v-else>{{ health }}</span>
+          </template>
+        </v-list-item>
+        <v-list-item title="/home" subtitle="Route" />
+      </v-list>
+    </v-card>
+    <div class="d-flex justify-end">
+      <v-btn color="secondary-container" prepend-icon="$settings" :to="paths.page('/settings')">Settings</v-btn>
     </div>
-
-    <v-sheet rounded="lg" border class="home-surface-screen__panel">
-      <div class="home-surface-screen__status">
-        <span class="text-caption text-medium-emphasis">Service health</span>
-        <v-skeleton-loader
-          v-if="healthPending"
-          aria-label="Loading service health"
-          class="home-surface-screen__health-skeleton"
-          type="text"
-        />
-        <strong v-else>{{ health }}</strong>
-      </div>
-      <v-divider vertical class="d-none d-sm-block" />
-      <div class="home-surface-screen__status">
-        <span class="text-caption text-medium-emphasis">Route</span>
-        <strong>/home</strong>
-      </div>
-    </v-sheet>
   </section>
 </template>
-
-<style scoped>
-.home-surface-screen {
-  --home-surface-panel-padding: 1rem;
-}
-
-.home-surface-screen__actions {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.home-surface-screen__panel {
-  align-items: stretch;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  padding: var(--home-surface-panel-padding);
-}
-
-.home-surface-screen__status {
-  display: grid;
-  gap: 0.15rem;
-  min-width: 9rem;
-}
-
-.home-surface-screen__health-skeleton {
-  max-width: 5rem;
-}
-
-@media (max-width: 640px) {
-  .home-surface-screen__actions :deep(.v-btn) {
-    min-height: 48px;
-    width: 100%;
-  }
-}
-</style>

package/patterns/shell-foundation/example/src/pages/home/settings/general/index.vue

@@ -2,6 +2,15 @@
 import { computed } from "vue";
 import { useShellLayoutState } from "@jskit-ai/shell-web/client/composables/useShellLayoutState";
 
+definePage({
+  meta: {
+    jskit: {
+      title: "General",
+      parent: "/settings"
+    }
+  }
+});
+
 const { drawerDefaultOpen, setDrawerDefaultOpen } = useShellLayoutState();
 
 const drawerDefaultOpenModel = computed({
@@ -15,23 +24,19 @@ const drawerDefaultOpenModel = computed({
 </script>
 
 <template>
-  <section class="settings-general-screen d-flex flex-column ga-4">
-    <p class="text-body-2 text-medium-emphasis mb-0">
-      On wider screens, collapsed navigation remains available as a rail. Phone layouts close the drawer and keep primary navigation in the bottom bar.
-    </p>
-
-    <v-switch
-      v-model="drawerDefaultOpenModel"
-      color="primary"
-      inset
-      hide-details="auto"
-      label="Start with expanded navigation on wider screens"
-    />
-  </section>
+  <v-card>
+    <v-list lines="three">
+      <v-list-item
+        title="Start with expanded navigation on wider screens"
+        subtitle="On wider screens, collapsed navigation remains available as a rail. Phone layouts close the drawer and keep primary navigation in the bottom bar."
+      >
+        <template #append>
+          <v-switch
+            v-model="drawerDefaultOpenModel"
+            aria-label="Start with expanded navigation on wider screens"
+          />
+        </template>
+      </v-list-item>
+    </v-list>
+  </v-card>
 </template>
-
-<style scoped>
-.settings-general-screen :deep(.v-switch) {
-  min-height: 48px;
-}
-</style>

package/patterns/shell-foundation/example/src/pages/home/settings.vue

@@ -1,90 +1,33 @@
 <script setup>
+import { computed } from "vue";
+import { RouterView, useRoute } from "vue-router";
+import ShellListDetail from "@jskit-ai/shell-web/client/components/ShellListDetail";
 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-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="compact" rounded="lg">
-            <ShellOutlet target="home-settings:primary-menu" />
-          </v-list>
-        </nav>
-
-        <main class="settings-shell__content">
-          <RouterView />
-        </main>
-      </div>
-    </v-sheet>
-  </section>
-</template>
-
-<style scoped>
-.settings-shell {
-  --settings-shell-panel-padding: 1rem;
-}
-
-.settings-shell__panel {
-  overflow: hidden;
-}
-
-.settings-shell__body {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
-  padding: var(--settings-shell-panel-padding);
-}
-
-.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) {
-  .settings-shell__body {
-    grid-template-columns: 1fr;
-  }
-
-  .settings-shell__nav :deep(.v-list) {
-    display: flex;
-    gap: 0.25rem;
-    overflow-x: auto;
-    scrollbar-width: thin;
+definePage({
+  meta: {
+    jskit: {
+      title: "Settings"
+    }
   }
+});
 
-  .settings-shell__nav :deep(.v-list-item) {
-    flex: 0 0 auto;
-    min-height: 48px;
-  }
+const route = useRoute();
+// The section list shows beside the open section on wide windows, and on its own at /home/settings.
+const detailOpen = computed(() => !/\/settings\/?$/u.test(route.path));
+</script>
 
-  .settings-shell__content {
-    border-left: 0;
-    padding-left: 0;
-  }
-}
-</style>
+<template>
+  <ShellListDetail :detail-open="detailOpen">
+    <template #list>
+      <nav aria-label="Home settings sections">
+        <v-list nav>
+          <ShellOutlet target="home-settings:primary-menu" />
+        </v-list>
+      </nav>
+    </template>
+    <template #detail>
+      <RouterView />
+    </template>
+  </ShellListDetail>
+</template>

package/patterns/shell-foundation/example/src/theme/index.js

@@ -0,0 +1,9 @@
+// The app's only theme facts. Material 3's light and dark colour schemes are generated from this one seed colour and
+// follow the device's setting: change the seed to rebrand. A colour the app really owns goes in `colors` by camelCase
+// name (it gets its own container roles, harmonized to the seed), and an icon of its own goes in `icons` as
+// `{ name: "<24x24 SVG path>" }`, used as `$name`.
+export const theme = {
+  seed: "#6750A4",
+  colors: {},
+  icons: {}
+};

package/patterns/shell-foundation/example/src/views/NotFound.vue

@@ -1,13 +1,15 @@
 <script setup>
-const title = "Not Found";
+import ShellLayout from "@/components/ShellLayout.vue";
+
 const message = "The page you requested does not exist.";
 </script>
 
 <template>
-  <v-container class="fill-height d-flex align-center justify-center">
-    <v-card class="pa-6 text-center" max-width="560" rounded="lg">
-      <v-card-title class="text-h4">{{ title }}</v-card-title>
-      <v-card-text class="text-medium-emphasis">{{ message }}</v-card-text>
-    </v-card>
-  </v-container>
+  <!-- The shell's top app bar carries the title, and its navigation leads back into the app. -->
+  <ShellLayout title="Not Found" subtitle="">
+    <section class="d-flex flex-column align-center text-center on-surface-variant py-16">
+      <v-icon icon="$searchOff" size="48" />
+      <p class="text-body-large mt-4 mb-0">{{ message }}</p>
+    </section>
+  </ShellLayout>
 </template>