@jskit-ai/agent-docs 0.1.278 → 0.1.280

package/skills/jskit/references/patterns/app/shell-foundation/example/vite.config.mjs

@@ -4,6 +4,7 @@ import vue from "@vitejs/plugin-vue";
 import vuetify from "vite-plugin-vuetify";
 import VueRouter from "vue-router/vite";
 import { createJskitClientBootstrapPlugin } from "@jskit-ai/kernel/client/vite";
+import { testConcurrency } from "@jskit-ai/jskit-catalog/test-budget";
 
 const configuredDevPort = Number.parseInt(String(process.env.VITE_DEV_PORT || "").trim(), 10);
 const devPort = Number.isInteger(configuredDevPort) && configuredDevPort > 0 ? configuredDevPort : 5173;
@@ -52,7 +53,8 @@ export default defineConfig({
     }
   ],
   test: {
-    include: ["tests/client/**/*.vitest.js"]
+    include: ["tests/client/**/*.vitest.js"],
+    maxWorkers: testConcurrency()
   },
   optimizeDeps: {
     include: ["vuetify/components/**", "vuetify/directives/**"],

package/skills/jskit/references/patterns/auth/accounts-hub/example/package.json

@@ -2,7 +2,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@jskit-ai/database-runtime-mysql": "0.1.257",
-    "@jskit-ai/oidc-issuer-core": "0.1.17"
+    "@jskit-ai/database-runtime-mysql": "0.1.258",
+    "@jskit-ai/oidc-issuer-core": "0.1.19"
   }
 }

package/skills/jskit/references/patterns/auth/auth-surface/PATTERN.md

@@ -27,8 +27,14 @@ Those choices must be known before adapting the example.
 ## Framework APIs
 
 Use the views, auth guard, HTTP client integration, sign-out runtime, providers,
-and Playwright auth helper exported by `@jskit-ai/auth-web`. Use auth policies
-from `@jskit-ai/auth-core` for server authorization.
+and Playwright auth helper exported by `@jskit-ai/auth-web`. The sign-in, reset
+and sign-out screens show the app's identity: the pages render the app's view
+wrappers (`src/views/auth/`), and each wrapper fills the default view's `brand`
+slot (given `{ compact }`) with `src/components/AppBrand.vue`, the app's name
+as `index.html`'s `<title>` spells it. JSKIT lays the slot out as a pane beside
+the card on wide windows and a row above it on phones; never restyle the views'
+own classes. Use auth policies from `@jskit-ai/auth-core` for server
+authorization.
 
 Every application with accounts includes the managed-preview login. It is
 standard, not optional: adding this pattern adds it, so a managed host's
@@ -92,6 +98,10 @@ a user as a side effect.
 - Public auth routes do not require an existing session.
 - Protected routes use the framework auth policy rather than page-local checks.
 - Login, sign-out, and reset views use the public auth components/composables.
+- The sign-in, reset and sign-out pages render the app's view wrappers, which
+  fill the `brand` slot with the app's identity (`AppBrand.vue`): a person
+  always sees which app they are signing in to. Renaming the app renames
+  `AppBrand.vue` with `index.html`'s `<title>`; the brand adds no heading.
 - A custom login view must preserve the default view's initial session check:
   already authenticated people return to the validated requested destination.
   Process incoming login callbacks before that redirect, and keep signed-out
@@ -102,8 +112,9 @@ a user as a side effect.
 
 ## Example files
 
-`example/` contains concrete route wrappers, editable view wrappers, and the
-client runtime helpers needed by an authentication surface. It also contains
+`example/` contains concrete route wrappers, editable view wrappers that show
+the app's brand (`src/components/AppBrand.vue`), and the client runtime helpers
+needed by an authentication surface. It also contains
 the standard app-owned managed-preview identity executable,
 `tools/preview-identity`. Compose their
 surface and placement declarations into the application's ordinary config and
@@ -116,7 +127,9 @@ placements, and post-auth destinations while retaining the runtime contracts.
 
 ## Verification
 
-Exercise failed and successful login, sign-out, reset, protected navigation,
+Check that the sign-in, reset and sign-out screens show the app's name, in the
+pane on a wide window and in the row on a phone. Exercise failed and successful
+login, sign-out, reset, protected navigation,
 keyboard interaction, warm-cache return navigation, and browser refresh.
 Open the login route with an existing authenticated session and confirm it
 returns to the requested screen; repeat signed out and confirm the form remains.

package/skills/jskit/references/patterns/auth/auth-surface/example/src/components/AppBrand.vue

@@ -0,0 +1,17 @@
+<script setup>
+// The app's identity on its sign-in, reset and sign-out screens. The auth views place it in their brand slot: a pane
+// beside the card on wide windows, and a row above the card on phones (`compact`). It is the app's name as
+// index.html's <title> spells it, so renaming the app renames both. It holds no heading: each screen's h1 is its own.
+defineProps({
+  compact: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const APP_NAME = "Reading Room";
+</script>
+
+<template>
+  <div :class="compact ? 'text-title-medium' : 'text-title-large'" data-testid="app-brand">{{ APP_NAME }}</div>
+</template>

package/skills/jskit/references/patterns/auth/auth-surface/example/src/pages/auth/login.vue

@@ -9,9 +9,9 @@
 </route>
 
 <script setup>
-import DefaultLoginView from "@jskit-ai/auth-web/client/views/DefaultLoginView";
+import LoginView from "@/views/auth/LoginView.vue";
 </script>
 
 <template>
-  <DefaultLoginView />
+  <LoginView />
 </template>

package/skills/jskit/references/patterns/auth/auth-surface/example/src/pages/auth/reset-password.vue

@@ -9,9 +9,9 @@
 </route>
 
 <script setup>
-import DefaultResetPasswordView from "@jskit-ai/auth-web/client/views/DefaultResetPasswordView";
+import ResetPasswordView from "@/views/auth/ResetPasswordView.vue";
 </script>
 
 <template>
-  <DefaultResetPasswordView />
+  <ResetPasswordView />
 </template>

package/skills/jskit/references/patterns/auth/auth-surface/example/src/pages/auth/signout.vue

@@ -9,9 +9,9 @@
 </route>
 
 <script setup>
-import DefaultSignOutView from "@jskit-ai/auth-web/client/views/DefaultSignOutView";
+import SignOutView from "@/views/auth/SignOutView.vue";
 </script>
 
 <template>
-  <DefaultSignOutView />
+  <SignOutView />
 </template>

package/skills/jskit/references/patterns/auth/auth-surface/example/src/views/auth/LoginView.vue

@@ -1,7 +1,12 @@
 <script setup>
 import DefaultLoginView from "@jskit-ai/auth-web/client/views/DefaultLoginView";
+import AppBrand from "@/components/AppBrand.vue";
 </script>
 
 <template>
-  <DefaultLoginView />
+  <DefaultLoginView>
+    <template #brand="{ compact }">
+      <AppBrand :compact="compact" />
+    </template>
+  </DefaultLoginView>
 </template>

package/skills/jskit/references/patterns/auth/auth-surface/example/src/views/auth/ResetPasswordView.vue

@@ -1,7 +1,12 @@
 <script setup>
 import DefaultResetPasswordView from "@jskit-ai/auth-web/client/views/DefaultResetPasswordView";
+import AppBrand from "@/components/AppBrand.vue";
 </script>
 
 <template>
-  <DefaultResetPasswordView />
+  <DefaultResetPasswordView>
+    <template #brand="{ compact }">
+      <AppBrand :compact="compact" />
+    </template>
+  </DefaultResetPasswordView>
 </template>

package/skills/jskit/references/patterns/auth/auth-surface/example/src/views/auth/SignOutView.vue

@@ -1,7 +1,12 @@
 <script setup>
 import DefaultSignOutView from "@jskit-ai/auth-web/client/views/DefaultSignOutView";
+import AppBrand from "@/components/AppBrand.vue";
 </script>
 
 <template>
-  <DefaultSignOutView />
+  <DefaultSignOutView>
+    <template #brand="{ compact }">
+      <AppBrand :compact="compact" />
+    </template>
+  </DefaultSignOutView>
 </template>

package/skills/jskit/references/patterns/auth/oidc-sign-in/example/package.json

@@ -2,7 +2,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@jskit-ai/auth-provider-oidc-core": "0.2.16",
-    "@jskit-ai/auth-web": "0.2.14"
+    "@jskit-ai/auth-provider-oidc-core": "0.2.18",
+    "@jskit-ai/auth-web": "0.2.16"
   }
 }

package/skills/jskit/references/patterns/auth/supabase-auth/example/package.json

@@ -2,6 +2,6 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@jskit-ai/auth-provider-supabase-core": "0.2.12"
+    "@jskit-ai/auth-provider-supabase-core": "0.2.13"
   }
 }

package/skills/jskit/references/patterns/connectors/aws-storage-queries/example/formats/package.json

@@ -2,7 +2,7 @@
   "name": "s3-native-format-example",
   "private": true,
   "type": "module",
-  "scripts": { "test": "node --test --test-concurrency=1 verify-formats.mjs" },
+  "scripts": { "test": "node verify-formats.mjs" },
   "dependencies": {
     "csv-parse": "7.0.2",
     "csv-stringify": "6.8.3",

package/skills/jskit/references/patterns/connectors/calendar-cli/example/package.json

@@ -7,10 +7,10 @@
     "db:migrate:status": "knex --knexfile ./knexfile.js migrate:list"
   },
   "dependencies": {
-    "@jskit-ai/connectors-core": "0.2.11",
-    "@jskit-ai/connector-google-calendar": "0.2.11",
-    "@jskit-ai/database-runtime": "0.1.259",
-    "@jskit-ai/database-runtime-mysql": "0.1.257",
+    "@jskit-ai/connectors-core": "0.2.12",
+    "@jskit-ai/connector-google-calendar": "0.2.12",
+    "@jskit-ai/database-runtime": "0.1.260",
+    "@jskit-ai/database-runtime-mysql": "0.1.258",
     "knex": "^3.1.0"
   }
 }

package/skills/jskit/references/patterns/console/console-surface/example/src/pages/console.vue

@@ -14,7 +14,7 @@ import { RouterView } from "vue-router";
 </script>
 
 <template>
-  <ShellLayout title="" subtitle="">
+  <ShellLayout>
     <RouterView />
   </ShellLayout>
 </template>

package/skills/jskit/references/patterns/crud/json-api-resource-package/example/packages/books/package.json

@@ -9,8 +9,8 @@
     "./shared": "./src/shared/index.js"
   },
   "dependencies": {
-    "@jskit-ai/crud-core": "0.2.11",
-    "@jskit-ai/resource-crud-core": "0.1.201"
+    "@jskit-ai/crud-core": "0.2.12",
+    "@jskit-ai/resource-crud-core": "0.1.202"
   },
   "jskit": {
     "kind": "runtime",

package/skills/jskit/references/patterns/database/mysql-application/example/package.json

@@ -8,6 +8,6 @@
     "db:migrate:status": "knex --knexfile ./knexfile.js migrate:list"
   },
   "dependencies": {
-    "@jskit-ai/database-runtime-mysql": "0.1.257"
+    "@jskit-ai/database-runtime-mysql": "0.1.258"
   }
 }

package/skills/jskit/references/patterns/database/postgres-application/example/package.json

@@ -8,6 +8,6 @@
     "db:migrate:status": "knex --knexfile ./knexfile.js migrate:list"
   },
   "dependencies": {
-    "@jskit-ai/database-runtime-postgres": "0.1.256"
+    "@jskit-ai/database-runtime-postgres": "0.1.257"
   }
 }

package/skills/jskit/references/patterns/realtime/realtime-application/example/package.json

@@ -2,7 +2,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@jskit-ai/realtime": "0.2.15",
-    "@jskit-ai/shell-web": "0.2.12"
+    "@jskit-ai/realtime": "0.2.17",
+    "@jskit-ai/shell-web": "0.2.14"
   }
 }

package/skills/jskit/references/patterns/rewards/google-rewarded/example/googlePublisherTag.js

@@ -72,8 +72,10 @@ function launchGoogleRewardedAd({
 
         let readySeen = false;
         let settled = false;
+        let availabilityTimer = null;
 
         const cleanup = () => {
+          window.clearTimeout(availabilityTimer);
           pubads.removeEventListener("rewardedSlotReady", handleReady);
           pubads.removeEventListener("rewardedSlotGranted", handleGranted);
           pubads.removeEventListener("rewardedSlotClosed", handleClosed);
@@ -120,8 +122,8 @@ function launchGoogleRewardedAd({
           gptServicesEnabled = true;
         }
 
-        googletag.display(slot);
-        window.setTimeout(() => {
+        // Started before display, so a slot that settles at once still clears it.
+        availabilityTimer = window.setTimeout(() => {
           if (settled || readySeen) {
             return;
           }
@@ -131,6 +133,7 @@ function launchGoogleRewardedAd({
             reject(new Error("No rewarded ad was available."));
           });
         }, 10000);
+        googletag.display(slot);
       });
     })
   );

package/skills/jskit/references/patterns/server/feature-package/example/booking-engine/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@jskit-ai/kernel": "0.2.10",
+    "@jskit-ai/kernel": "0.2.11",
     "json-rest-schema": "^1.0.17"
   },
   "exports": {

package/skills/jskit/references/patterns/shell/application-shell/PATTERN.md

@@ -55,12 +55,17 @@ placement registry, topology, and adaptive smoke helper exported by
   border widths to `0` and gives navigation a tonal surface, for example
   `rgb(var(--v-theme-surface-container-low))` when the theme defines it.
 - `createShellRouter()` from `@jskit-ai/kernel/client` installs
-  `shellScrollBehavior`: a new screen opens at the top (or its hash target),
-  Back/Forward restore the saved position, and query, hash, tab or sub-view
-  changes within the same page keep it. A tab or sub-view is the same page when
-  both locations share a parent page record below the surface root. Pass
-  `scrollBehavior` to replace it, or `scrollBehavior: false` to disable it; do
-  not wrap the router or reset scroll in page components.
+  `shellScrollBehavior`: a new screen opens at the top (or its hash target,
+  below the target's `scroll-margin-top`), Back/Forward restore the saved
+  position, and query, hash, tab or sub-view changes within the same page keep
+  it. A tab or sub-view is the same page when both locations share a parent
+  page record below the surface root that draws a component, a layout hosting
+  the tabs; a folder's component-less record, as file routing creates for
+  `bookings/`, makes its pages different pages. Pass `scrollBehavior` to replace it
+  (calling `shellScrollBehavior` for what it leaves to the shell), or
+  `scrollBehavior: false` to disable it. A `createRouter` that replaces the
+  behaviour it is given throws, so never set one there; do not wrap the router
+  or reset scroll in page components.
 - The adaptive browser check closes navigation through its public close control.
 
 ## Example files

package/skills/jskit/references/patterns/shell/application-shell/example/src/components/menus/SectionTabLinkItem.vue

@@ -0,0 +1,42 @@
+<script setup>
+import ShellSectionTabLinkItem from "@jskit-ai/shell-web/client/components/ShellSectionTabLinkItem";
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: ""
+  },
+  to: {
+    type: String,
+    default: ""
+  },
+  icon: {
+    type: String,
+    default: ""
+  },
+  surface: {
+    type: String,
+    default: ""
+  },
+  scopedSuffix: {
+    type: String,
+    default: "/"
+  },
+  unscopedSuffix: {
+    type: String,
+    default: "/"
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  exact: {
+    type: Boolean,
+    default: false
+  }
+});
+</script>
+
+<template>
+  <ShellSectionTabLinkItem v-bind="props" />
+</template>

package/skills/jskit/references/patterns/shell/application-shell/example/src/pages/home.vue

@@ -14,7 +14,7 @@ import { RouterView } from "vue-router";
 </script>
 
 <template>
-  <ShellLayout title="" subtitle="">
+  <ShellLayout>
     <RouterView />
   </ShellLayout>
 </template>

package/skills/jskit/references/patterns/shell/application-shell/example/src/views/NotFound.vue

@@ -6,7 +6,7 @@ const message = "The page you requested does not exist.";
 
 <template>
   <!-- The shell's top app bar carries the title, and its navigation leads back into the app. -->
-  <ShellLayout title="Not Found" subtitle="">
+  <ShellLayout title="Not Found">
     <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>

package/skills/jskit/references/patterns/ui/page-and-placement/PATTERN.md

@@ -35,6 +35,12 @@ a filename alone.
 - Child links share an explicit section owner.
 - Topology maps each semantic placement to concrete responsive outlets.
 - Placed components are registered by token through a client provider.
+- Section navigation is Material 3 primary tabs: the section's `page.section-nav`
+  topology names a section-tab renderer (`ShellSectionTabLinkItem`, registered as
+  `local.main.ui.section-tab-link-item`), and the page draws the tab row (one
+  row over a 1dp `outline-variant` divider that scrolls sideways). A navigation
+  bar destination (`ShellTabLinkItem`) belongs to the shell's navigation bar
+  only; placed in a page it draws a section tab.
 - Compact navigation controls remain accessible and at least 48 CSS pixels.
 - Application source has no generated-file marker, receipt, or overwrite state.
 

package/skills/jskit/references/patterns/ui/page-and-placement/example/src/pages/home/reports.vue

@@ -8,10 +8,9 @@ definePage({ meta: { jskit: { title: "Reports" } } });
 
 <template>
   <section class="reports-section d-flex flex-column ga-4">
-    <nav aria-label="Report sections">
-      <v-tabs>
-        <ShellOutlet target="reports:section-nav" />
-      </v-tabs>
+    <!-- Material 3 primary tabs: one row over a divider, scrolling sideways when the tabs don't fit. -->
+    <nav class="reports-section__tabs" aria-label="Report sections">
+      <ShellOutlet target="reports:section-nav" />
     </nav>
 
     <div class="reports-section__content">
@@ -25,4 +24,10 @@ definePage({ meta: { jskit: { title: "Reports" } } });
 .reports-section__content {
   min-width: 0;
 }
+
+.reports-section__tabs {
+  border-bottom: 1px solid rgb(var(--v-theme-outline-variant));
+  display: flex;
+  overflow-x: auto;
+}
 </style>

package/skills/jskit/references/patterns/ui/page-and-placement/example/src/placementTopology.js

@@ -4,6 +4,8 @@ function addPlacementTopology(value = {}) {
   placements.push(value);
 }
 
+// The section's tabs: Material 3 primary tabs at every width (the shell's section-tab renderer), never navigation bar
+// destinations, which belong to the shell's navigation bar alone.
 addPlacementTopology({
   id: "page.section-nav",
   owner: "reports",
@@ -12,15 +14,15 @@ addPlacementTopology({
   variants: {
     compact: {
       outlet: "reports:section-nav",
-      renderers: { link: "local.main.ui.tab-link-item" }
+      renderers: { link: "local.main.ui.section-tab-link-item" }
     },
     medium: {
       outlet: "reports:section-nav",
-      renderers: { link: "local.main.ui.tab-link-item" }
+      renderers: { link: "local.main.ui.section-tab-link-item" }
     },
     expanded: {
       outlet: "reports:section-nav",
-      renderers: { link: "local.main.ui.tab-link-item" }
+      renderers: { link: "local.main.ui.section-tab-link-item" }
     }
   }
 });

package/skills/jskit/references/patterns/users/account-settings/PATTERN.md

@@ -38,6 +38,18 @@ app's language; the app does, for example
 `watch(useAccountLocale(), (code) => { if (code) i18n.global.locale.value = code; }, { immediate: true })`.
 Section titles may be plain text, a message key or `{ key, fallback }`.
 
+Sections are pages of the account surface, in Material 3's list-detail layout
+(shell-web's `ShellListDetail`): `/account` is the section list
+(`src/pages/account/index.vue`) and `/account/<section>` one section
+(`src/pages/account/[section].vue`, its `value`, such as
+`/account/preferences`), both rendering `AccountSettingsClientElement`, which
+reads the section from the route's `section` param. The section page's parent
+is the list, the surface's `"/"`. A phone or medium window shows the list or one
+section, and Up returns from the section to the list; an expanded or large
+window shows the list beside the open section, or beside the first section on
+the list's own page. A link to a section is its path, `/account/invites`, with
+`returnTo` in the query for Done.
+
 `runtime.signInMethods.methods` lists the auth provider's OAuth sign-in
 methods as `{ provider, label, linked, canLink, canUnlink }`, read from the
 settings security status. `link(provider)` leaves for the provider through
@@ -57,10 +69,22 @@ provider offers provider linking (`providerLinking` in its capabilities).
 - Loading uses layout-stable skeletons, never an indeterminate spinner.
 - Pending controls keep stable labels and prevent duplicate submission.
 - The route and placement owner agree.
+- The account surface renders in its own layout, `src/pages/account.vue`
+  (`ShellLayout` around `<RouterView />`, `meta.jskit.surface: "account"`), so
+  the settings page's title and Up arrow are in the top app bar. Up is the
+  page's only way out; `AccountSettingsClientElement` adds a Done action only
+  where Up can't go back (no parent, a section beside the list on a wide
+  window, or a returnTo on another origin).
+  With no navigation items, the surface shows no navigation bar, rail or drawer.
+- Each section has its own address, `/account/<section>`, served by
+  `src/pages/account/[section].vue` with parent `"/"`; nothing selects a
+  section through the query.
 
 ## Example files
 
-`example/` contains an account route and four concrete settings sections.
+`example/` contains the account surface's layout, the section list's route
+(`account/index.vue`), a section's route (`account/[section].vue`) and four
+concrete settings sections.
 Adapt their fields and copy while retaining the shared account runtime.
 
 ## Variation points
@@ -72,7 +96,9 @@ notification vocabulary while keeping server-owned validation authoritative.
 
 Navigate away and back with warm cache, exercise browser back/forward, save and
 clear fields, verify toast errors, inspect skeleton geometry, and test keyboard
-operation at compact and expanded widths.
+operation at compact and expanded widths. At 390 px check that the list and a
+section show one at a time and Up returns from the section to the list; at
+1280 px that the list shows beside the open section, with no Up.
 
 ## Avoid
 

package/skills/jskit/references/patterns/users/account-settings/example/src/components/account/settings/AccountSettingsNotificationsSection.vue

@@ -35,11 +35,11 @@ const notifications = props.runtime.notifications;
           color="primary"
           hide-details
           disabled
-          class="mb-4"
         />
         <v-btn
           type="submit"
           color="primary"
+          class="mt-4"
           :loading="notifications.isSaving.value"
           :disabled="notifications.isRefreshing.value"
         >

package/skills/jskit/references/patterns/users/account-settings/example/src/components/account/settings/AccountSettingsPreferencesSection.vue

@@ -94,7 +94,7 @@ const preferences = props.runtime.preferences;
             />
           </v-col>
 
-          <v-col cols="12" md="3">
+          <v-col cols="12" md="4">
             <v-select
               v-model.number="preferences.form.avatarSize"
               label="Avatar size"
@@ -110,6 +110,7 @@ const preferences = props.runtime.preferences;
         <v-btn
           type="submit"
           color="primary"
+          class="mt-4"
           :loading="preferences.isSaving.value"
           :disabled="preferences.isRefreshing.value"
         >

package/skills/jskit/references/patterns/users/account-settings/example/src/components/account/settings/AccountSettingsProfileSection.vue

@@ -51,7 +51,7 @@ const profile = props.runtime.profile;
         </v-row>
 
         <v-row>
-          <v-col cols="12" md="6">
+          <v-col cols="12">
             <v-text-field
               v-model="profile.form.displayName"
               label="Display name"
@@ -63,7 +63,7 @@ const profile = props.runtime.profile;
             />
           </v-col>
 
-          <v-col cols="12" md="6">
+          <v-col cols="12">
             <v-text-field
               v-model="profile.form.email"
               label="Email"
@@ -79,6 +79,7 @@ const profile = props.runtime.profile;
         <v-btn
           type="submit"
           color="primary"
+          class="mt-4"
           :loading="profile.isSaving.value"
           :disabled="profile.isDeletingAvatar.value || profile.isRefreshing.value"
         >

package/skills/jskit/references/patterns/users/account-settings/example/src/pages/account/[section].vue

@@ -0,0 +1,23 @@
+<route lang="json">
+{
+  "meta": {
+    "guard": {
+      "policy": "authenticated"
+    },
+    "jskit": {
+      "title": "Account settings",
+      "parent": "/"
+    }
+  }
+}
+</route>
+
+<template>
+  <AccountSettingsClientElement />
+</template>
+
+<script setup>
+// One section of account settings (/account/preferences). Its parent is the section list, the surface's "/", so on a
+// phone Up returns to the list; a wide window shows the list beside the section.
+import AccountSettingsClientElement from "@jskit-ai/users-web/client/components/AccountSettingsClientElement";
+</script>

package/skills/jskit/references/patterns/users/account-settings/example/src/pages/account.vue

@@ -0,0 +1,23 @@
+<route lang="json">
+{
+  "meta": {
+    "jskit": {
+      "surface": "account"
+    }
+  }
+}
+</route>
+
+<script setup>
+// The account surface's layout: the shell's top app bar carries the settings page's title and its Up arrow back to
+// home, the page's only way out (a Done action shows only where Up can't go back, such as a returnTo on another of
+// the app's origins). The surface has no navigation items, so the shell draws no navigation bar, rail or drawer.
+import ShellLayout from "@/components/ShellLayout.vue";
+import { RouterView } from "vue-router";
+</script>
+
+<template>
+  <ShellLayout>
+    <RouterView />
+  </ShellLayout>
+</template>