@vc-shell/vc-app-skill 2.0.0-alpha.33 → 2.0.0-alpha.34

package/runtime/knowledge/docs/shell/auth/ResetPasswordPage/reset-password-page.docs.md

@@ -36,13 +36,13 @@ With custom branding:
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `userId` | `string` | **required** | User ID from the reset link |
-| `userName` | `string` | **required** | Username/email for auto-sign-in after reset |
-| `token` | `string` | **required** | Reset token from the email link |
-| `logo` | `string` | `/assets/logo-white.svg` | Logo image URL |
-| `background` | `string` | `/assets/background.jpg` | Background image URL |
+| Prop         | Type     | Default                  | Description                                 |
+| ------------ | -------- | ------------------------ | ------------------------------------------- |
+| `userId`     | `string` | **required**             | User ID from the reset link                 |
+| `userName`   | `string` | **required**             | Username/email for auto-sign-in after reset |
+| `token`      | `string` | **required**             | Reset token from the email link             |
+| `logo`       | `string` | `/assets/logo-white.svg` | Logo image URL                              |
+| `background` | `string` | `/assets/background.jpg` | Background image URL                        |
 
 ## Recipe: Router Configuration
 
@@ -67,6 +67,7 @@ const routes = [
 ```
 
 The reset email link typically looks like:
+
 ```
 https://your-app.com/reset-password?userId=abc123&userName=jane@example.com&token=xyz789...
 ```

package/runtime/knowledge/docs/shell/auth/sign-in/sign-in.docs.md

@@ -34,18 +34,18 @@ onMounted(async () => {
 
 ## Components
 
-| Component | Props | Description |
-|-----------|-------|-------------|
+| Component           | Props                                     | Description                                     |
+| ------------------- | ----------------------------------------- | ----------------------------------------------- |
 | `ExternalProviders` | `providers: ExternalSignInProviderInfo[]` | Renders a vertical list of SSO provider buttons |
 
 ## API (`useExternalProvider`)
 
-| Method | Signature | Description |
-|--------|-----------|-------------|
-| `getProviders` | `() => Promise<ExternalSignInProviderInfo[]>` | Fetch available SSO providers from the platform API |
-| `signIn` | `(authenticationType: string) => Promise<void>` | Redirect to external provider login |
-| `signOut` | `(authenticationType: string) => Promise<void>` | Redirect to external provider logout |
-| `storage` | `Ref<{ providerType?: string }>` | Persisted localStorage ref tracking the active provider |
+| Method         | Signature                                       | Description                                             |
+| -------------- | ----------------------------------------------- | ------------------------------------------------------- |
+| `getProviders` | `() => Promise<ExternalSignInProviderInfo[]>`   | Fetch available SSO providers from the platform API     |
+| `signIn`       | `(authenticationType: string) => Promise<void>` | Redirect to external provider login                     |
+| `signOut`      | `(authenticationType: string) => Promise<void>` | Redirect to external provider logout                    |
+| `storage`      | `Ref<{ providerType?: string }>`                | Persisted localStorage ref tracking the active provider |
 
 ## Recipe: Custom Login Page with SSO and Credentials
 
@@ -67,18 +67,31 @@ onMounted(async () => {
   <VcAuthLayout>
     <!-- Standard credentials form -->
     <form @submit.prevent="handleLogin">
-      <VcInput v-model="username" label="Email" />
-      <VcInput v-model="password" label="Password" type="password" />
+      <VcInput
+        v-model="username"
+        label="Email"
+      />
+      <VcInput
+        v-model="password"
+        label="Password"
+        type="password"
+      />
       <VcButton type="submit">Sign In</VcButton>
     </form>
 
     <!-- Divider between credentials and SSO -->
-    <div v-if="hasProviders" class="tw-my-4 tw-text-center tw-text-gray-400">
+    <div
+      v-if="hasProviders"
+      class="tw-my-4 tw-text-center tw-text-gray-400"
+    >
       or continue with
     </div>
 
     <!-- SSO provider buttons -->
-    <ExternalProviders v-if="hasProviders" :providers="providers" />
+    <ExternalProviders
+      v-if="hasProviders"
+      :providers="providers"
+    />
   </VcAuthLayout>
 </template>
 ```
@@ -89,7 +102,10 @@ When the platform is configured for SSO-only authentication, use the `LoginPage`
 
 ```vue
 <template>
-  <Login sso-only title="Sign in with your corporate account" />
+  <Login
+    sso-only
+    title="Sign in with your corporate account"
+  />
 </template>
 ```
 

package/runtime/knowledge/docs/shell/components/change-password/change-password.docs.md

@@ -8,20 +8,21 @@ The `ChangePassword` component renders a `VcPopup` with three validated input fi
 
 ## Props
 
-| Prop | Type | Default | Description |
-|---|---|---|---|
+| Prop     | Type      | Default | Description                                                                                  |
+| -------- | --------- | ------- | -------------------------------------------------------------------------------------------- |
 | `forced` | `boolean` | `false` | When true, the user cannot dismiss the dialog -- cancelling signs out and redirects to login |
-| `login` | `string` | -- | The current user's login name (for context) |
+| `login`  | `string`  | --      | The current user's login name (for context)                                                  |
 
 ## Events
 
-| Event | Description |
-|---|---|
+| Event   | Description                                                                                  |
+| ------- | -------------------------------------------------------------------------------------------- |
 | `close` | Emitted when the dialog should close (cancel in non-forced mode, or after successful change) |
 
 ## Behavior
 
 ### Normal mode (`forced: false`)
+
 - User fills in current password, new password, and confirmation.
 - Real-time validation runs on each keystroke (via `validatePassword` API call).
 - Errors are shown inline (field-level) and below the footer (API errors like password policy violations).
@@ -29,6 +30,7 @@ The `ChangePassword` component renders a `VcPopup` with three validated input fi
 - Save button calls `changeUserPassword()`. On success, emits `close`.
 
 ### Forced mode (`forced: true`)
+
 - An info banner explains that a password change is required.
 - Cancel button signs the user out and redirects to `/login`.
 - Save button changes the password and redirects to `/` on success.
@@ -43,12 +45,7 @@ The `ChangePassword` component renders a `VcPopup` with three validated input fi
 ## Usage
 
 ```vue
-<ChangePassword
-  v-if="showChangePassword"
-  :forced="mustChangePassword"
-  :login="currentUser.userName"
-  @close="showChangePassword = false"
-/>
+<ChangePassword v-if="showChangePassword" :forced="mustChangePassword" :login="currentUser.userName" @close="showChangePassword = false" />
 ```
 
 ### Typical trigger locations
@@ -58,11 +55,11 @@ The `ChangePassword` component renders a `VcPopup` with three validated input fi
 
 ## Form Fields
 
-| Field | Validation | Description |
-|---|---|---|
-| Current Password | `required`, `min:6` | Verifies the user knows their current password |
-| New Password | `required`, `min:6`, platform policy | The desired new password |
-| Confirm Password | `required`, `min:6`, must match new | Confirmation of the new password |
+| Field            | Validation                           | Description                                    |
+| ---------------- | ------------------------------------ | ---------------------------------------------- |
+| Current Password | `required`, `min:6`                  | Verifies the user knows their current password |
+| New Password     | `required`, `min:6`, platform policy | The desired new password                       |
+| Confirm Password | `required`, `min:6`, must match new  | Confirmation of the new password               |
 
 ## Error Codes
 

package/runtime/knowledge/docs/shell/components/change-password-button/change-password-button.docs.md

@@ -45,13 +45,7 @@ Combine with other account-related settings entries in a module setup:
 
 ```ts
 // my-module/index.ts
-import {
-  useSettingsMenu,
-  ChangePasswordButton,
-  LogoutButton,
-  ThemeSelector,
-  LanguageSelector,
-} from "@vc-shell/framework";
+import { useSettingsMenu, ChangePasswordButton, LogoutButton, ThemeSelector, LanguageSelector } from "@vc-shell/framework";
 
 export default {
   install() {

package/runtime/knowledge/docs/shell/components/error-interceptor/error-interceptor.docs.md

@@ -17,16 +17,16 @@ The component is renderless -- it renders its default slot and passes the curren
 
 ## Props
 
-| Prop | Type | Default | Description |
-|---|---|---|---|
+| Prop      | Type      | Default | Description                                      |
+| --------- | --------- | ------- | ------------------------------------------------ |
 | `capture` | `boolean` | `false` | Force error capture even outside a blade context |
 
 ## Slot Props
 
-| Prop | Type | Description |
-|---|---|---|
+| Prop    | Type                       | Description                             |
+| ------- | -------------------------- | --------------------------------------- |
 | `error` | `DisplayableError \| null` | The captured error, or null if no error |
-| `reset` | `() => void` | Clears the error state |
+| `reset` | `() => void`               | Clears the error state                  |
 
 ## Usage
 

package/runtime/knowledge/docs/shell/components/language-selector/language-selector.docs.md

@@ -87,7 +87,7 @@ async function onLogin(user) {
 ## Tips
 
 - The component only shows locales that have been registered with vue-i18n. If a locale file is missing, the language will not appear in the selector.
-- Use the `check-locales` script (`yarn check-locales`) to validate that all locale files have the same keys. Missing keys fall back to the `fallbackLocale`.
+- Use the `check:locales` script (`yarn check:locales`) to validate that all locale files have the same keys. Missing keys fall back to the `fallbackLocale`.
 - The `LanguageSelector` changes the UI language. To let users switch the content editing language for multilingual fields (e.g., product names), use the `MultilanguageSelector` component instead.
 
 ## Related Components

package/runtime/knowledge/docs/shell/components/logout-button/logout-button.docs.md

@@ -61,7 +61,7 @@ export default {
     settingsMenu.register({
       id: "logout-button",
       group: "account",
-      order: 100,  // High order places it at the bottom
+      order: 100, // High order places it at the bottom
       component: LogoutButton,
     });
   },

package/runtime/knowledge/docs/shell/components/notification-template/notification-template.docs.md

@@ -31,13 +31,13 @@ const notification = computed(() => notificationRef.value);
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | -- | Notification headline text |
-| `notification` | `IPushNotification` | -- | Full notification object (required for timestamp) |
-| `icon` | `string` | `undefined` | Icon name displayed in a circular badge |
-| `color` | `string` | `undefined` | Background color for the icon badge |
-| `severity` | `string` | `undefined` | Semantic severity level |
+| Prop           | Type                | Default     | Description                                       |
+| -------------- | ------------------- | ----------- | ------------------------------------------------- |
+| `title`        | `string`            | --          | Notification headline text                        |
+| `notification` | `IPushNotification` | --          | Full notification object (required for timestamp) |
+| `icon`         | `string`            | `undefined` | Icon name displayed in a circular badge           |
+| `color`        | `string`            | `undefined` | Background color for the icon badge               |
+| `severity`     | `string`            | `undefined` | Semantic severity level                           |
 
 ## Recipe: Custom Notification for Order Events
 
@@ -129,7 +129,10 @@ const isRunning = computed(() => (notification.value as any).isRunning ?? false)
     icon="lucide-upload"
     color="var(--info-500)"
   >
-    <div v-if="isRunning" class="tw-mt-1">
+    <div
+      v-if="isRunning"
+      class="tw-mt-1"
+    >
       <div class="tw-h-2 tw-bg-gray-200 tw-rounded">
         <div
           class="tw-h-full tw-bg-blue-500 tw-rounded tw-transition-all"
@@ -138,7 +141,12 @@ const isRunning = computed(() => (notification.value as any).isRunning ?? false)
       </div>
       <span class="tw-text-xs tw-text-gray-500">{{ progress }}% complete</span>
     </div>
-    <p v-else class="tw-text-sm tw-text-green-600">Import completed.</p>
+    <p
+      v-else
+      class="tw-text-sm tw-text-green-600"
+    >
+      Import completed.
+    </p>
   </NotificationTemplate>
 </template>
 ```

package/runtime/knowledge/docs/shell/components/settings-menu/settings-menu.docs.md

@@ -48,13 +48,7 @@ A typical module registers all its settings entries during the module install ph
 ```ts
 // vendor-portal-module/index.ts
 import { markRaw } from "vue";
-import {
-  useSettingsMenu,
-  ThemeSelector,
-  LanguageSelector,
-  ChangePasswordButton,
-  LogoutButton,
-} from "@vc-shell/framework";
+import { useSettingsMenu, ThemeSelector, LanguageSelector, ChangePasswordButton, LogoutButton } from "@vc-shell/framework";
 
 export default {
   install() {
@@ -97,21 +91,21 @@ export default {
 
 ### Registration options
 
-| Option | Type | Required | Description |
-|--------|------|----------|-------------|
-| `id` | `string` | Yes | Unique identifier for the entry |
-| `group` | `string` | Yes | Group name (entries are grouped and separated by dividers) |
-| `order` | `number` | Yes | Sort order within the group (lower = higher position) |
-| `component` | `Component` | Yes | Vue component to render as the menu item |
+| Option      | Type        | Required | Description                                                |
+| ----------- | ----------- | -------- | ---------------------------------------------------------- |
+| `id`        | `string`    | Yes      | Unique identifier for the entry                            |
+| `group`     | `string`    | Yes      | Group name (entries are grouped and separated by dividers) |
+| `order`     | `number`    | Yes      | Sort order within the group (lower = higher position)      |
+| `component` | `Component` | Yes      | Vue component to render as the menu item                   |
 
 ### Group rendering
 
 Groups are separated by a horizontal divider and items within each group are sorted by `order`. Common group names used by convention:
 
-| Group | Description | Typical order range |
-|-------|-------------|-------------------|
-| `"preferences"` | User preferences (theme, language) | 10-29 |
-| `"account"` | Account actions (change password, logout) | 30-100 |
+| Group           | Description                               | Typical order range |
+| --------------- | ----------------------------------------- | ------------------- |
+| `"preferences"` | User preferences (theme, language)        | 10-29               |
+| `"account"`     | Account actions (change password, logout) | 30-100              |
 
 ## Details
 

package/runtime/knowledge/docs/shell/components/settings-menu-item/settings-menu-item.docs.md

@@ -44,34 +44,34 @@ import { SettingsMenuItem } from "@vc-shell/framework";
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | `undefined` | Menu item label |
-| `icon` | `string \| Component` | `undefined` | Icon name or component |
-| `image` | `string` | `undefined` | Image URL (alternative to icon) |
-| `value` | `string` | `undefined` | Current value displayed on the right |
-| `showChevron` | `boolean` | `false` | Shows right chevron for sub-menus (auto-enabled when `submenu` slot is provided) |
-| `isActive` | `boolean` | `false` | Highlights the item (auto-managed when `submenu` slot is provided) |
-| `disabled` | `boolean` | `false` | Disables click interaction |
-| `triggerAction` | `"click" \| "hover" \| "none"` | `"click"` | What interaction opens the item |
+| Prop            | Type                           | Default     | Description                                                                      |
+| --------------- | ------------------------------ | ----------- | -------------------------------------------------------------------------------- |
+| `title`         | `string`                       | `undefined` | Menu item label                                                                  |
+| `icon`          | `string \| Component`          | `undefined` | Icon name or component                                                           |
+| `image`         | `string`                       | `undefined` | Image URL (alternative to icon)                                                  |
+| `value`         | `string`                       | `undefined` | Current value displayed on the right                                             |
+| `showChevron`   | `boolean`                      | `false`     | Shows right chevron for sub-menus (auto-enabled when `submenu` slot is provided) |
+| `isActive`      | `boolean`                      | `false`     | Highlights the item (auto-managed when `submenu` slot is provided)               |
+| `disabled`      | `boolean`                      | `false`     | Disables click interaction                                                       |
+| `triggerAction` | `"click" \| "hover" \| "none"` | `"click"`   | What interaction opens the item                                                  |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `trigger:click` | -- | Emitted when the item is clicked (only when `triggerAction="click"`) |
-| `trigger:hover` | -- | Emitted when hovered (only when `triggerAction="hover"`) |
+| Event           | Payload | Description                                                          |
+| --------------- | ------- | -------------------------------------------------------------------- |
+| `trigger:click` | --      | Emitted when the item is clicked (only when `triggerAction="click"`) |
+| `trigger:hover` | --      | Emitted when hovered (only when `triggerAction="hover"`)             |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| `trigger` | Custom trigger content (replaces the entire row) |
-| `icon` | Custom icon area |
-| `title` | Custom title content |
-| `additional` | Custom right-side content (replaces `value` display) |
-| `submenu` | **Sub-menu items.** Desktop: floating dropdown. Mobile: inline accordion. Chevron auto-shown. |
-| `content` | Legacy slot for arbitrary content below the trigger |
+| Slot         | Description                                                                                   |
+| ------------ | --------------------------------------------------------------------------------------------- |
+| `trigger`    | Custom trigger content (replaces the entire row)                                              |
+| `icon`       | Custom icon area                                                                              |
+| `title`      | Custom title content                                                                          |
+| `additional` | Custom right-side content (replaces `value` display)                                          |
+| `submenu`    | **Sub-menu items.** Desktop: floating dropdown. Mobile: inline accordion. Chevron auto-shown. |
+| `content`    | Legacy slot for arbitrary content below the trigger                                           |
 
 ## Common Patterns
 
@@ -95,7 +95,7 @@ const currentTheme = ref("light");
   <SettingsMenuItem
     icon="lucide-palette"
     title="Theme"
-    :value="themes.find(t => t.key === currentTheme)?.name"
+    :value="themes.find((t) => t.key === currentTheme)?.name"
   >
     <template #submenu>
       <VcDropdownItem
@@ -112,42 +112,27 @@ const currentTheme = ref("light");
 
 **What happens on each platform:**
 
-| Platform | Behavior |
-|----------|----------|
-| Desktop | Click triggers a floating panel to the right of the item |
-| Mobile | Click expands an inline list below the item with chevron rotation |
+| Platform | Behavior                                                          |
+| -------- | ----------------------------------------------------------------- |
+| Desktop  | Click triggers a floating panel to the right of the item          |
+| Mobile   | Click expands an inline list below the item with chevron rotation |
 
 ### Simple action item (no sub-menu)
 
 ```vue
-<SettingsMenuItem
-  icon="lucide-log-out"
-  title="Sign Out"
-  @trigger:click="handleSignOut"
-/>
+<SettingsMenuItem icon="lucide-log-out" title="Sign Out" @trigger:click="handleSignOut" />
 ```
 
 ### Item with user avatar image
 
 ```vue
-<SettingsMenuItem
-  :image="user.avatarUrl"
-  :title="user.displayName"
-  :value="user.roleName"
-  :show-chevron="true"
-  @trigger:click="openUserMenu"
-/>
+<SettingsMenuItem :image="user.avatarUrl" :title="user.displayName" :value="user.roleName" :show-chevron="true" @trigger:click="openUserMenu" />
 ```
 
 ### Disabled item
 
 ```vue
-<SettingsMenuItem
-  icon="lucide-shield"
-  title="Security Settings"
-  disabled
-  value="Admin only"
-/>
+<SettingsMenuItem icon="lucide-shield" title="Security Settings" disabled value="Admin only" />
 ```
 
 ### Custom submenu content
@@ -169,21 +154,8 @@ The `submenu` slot can contain any content, not just `VcDropdownItem`:
 Before (manual dropdown management):
 
 ```vue
-<SettingsMenuItem
-  ref="menuItemRef"
-  icon="lucide-palette"
-  title="Theme"
-  :value="currentTheme"
-  :show-chevron="true"
-  :is-active="isOpen"
-  @trigger:click="isOpen = !isOpen"
-/>
-<VcDropdownPanel
-  v-model:show="isOpen"
-  :anchor-ref="menuItemRef?.triggerRef ?? null"
-  placement="right-start"
-  width="180px"
->
+<SettingsMenuItem ref="menuItemRef" icon="lucide-palette" title="Theme" :value="currentTheme" :show-chevron="true" :is-active="isOpen" @trigger:click="isOpen = !isOpen" />
+<VcDropdownPanel v-model:show="isOpen" :anchor-ref="menuItemRef?.triggerRef ?? null" placement="right-start" width="180px">
   <!-- options -->
 </VcDropdownPanel>
 ```
@@ -191,11 +163,7 @@ Before (manual dropdown management):
 After (submenu slot):
 
 ```vue
-<SettingsMenuItem
-  icon="lucide-palette"
-  title="Theme"
-  :value="currentTheme"
->
+<SettingsMenuItem icon="lucide-palette" title="Theme" :value="currentTheme">
   <template #submenu>
     <!-- same options, no wrapper needed -->
   </template>
@@ -203,6 +171,7 @@ After (submenu slot):
 ```
 
 **What changes:**
+
 - Remove `ref`, `isOpen`, `:show-chevron`, `:is-active`, `@trigger:click` toggle -- all auto-managed
 - Remove `VcDropdownPanel` wrapper entirely
 - Move dropdown content into `#submenu` slot

package/runtime/knowledge/docs/shell/components/sidebar/sidebar.docs.md

@@ -10,37 +10,31 @@ On mobile, the sidebar teleports itself out of the normal DOM flow to overlay th
 
 ## Props
 
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `isExpanded` | `boolean` | (required) | Whether the sidebar is currently open |
-| `position` | `"left" \| "right"` | `"right"` | Slide-in direction |
-| `render` | `"always" \| "mobile" \| "desktop"` | `"always"` | When to render as a sidebar vs. inline |
-| `title` | `string` | -- | Optional title shown in the sidebar header |
-| `closeCross` | `boolean` | `true` | Whether to show the close button |
+| Prop         | Type                                | Default    | Description                                |
+| ------------ | ----------------------------------- | ---------- | ------------------------------------------ |
+| `isExpanded` | `boolean`                           | (required) | Whether the sidebar is currently open      |
+| `position`   | `"left" \| "right"`                 | `"right"`  | Slide-in direction                         |
+| `render`     | `"always" \| "mobile" \| "desktop"` | `"always"` | When to render as a sidebar vs. inline     |
+| `title`      | `string`                            | --         | Optional title shown in the sidebar header |
+| `closeCross` | `boolean`                           | `true`     | Whether to show the close button           |
 
 ## Events
 
-| Event | Payload | Description |
-|---|---|---|
-| `close` | -- | Emitted when the user closes the sidebar |
+| Event   | Payload | Description                              |
+| ------- | ------- | ---------------------------------------- |
+| `close` | --      | Emitted when the user closes the sidebar |
 
 ## Slots
 
-| Slot | Scope | Description |
-|---|---|---|
-| `header` | `{ close: () => void }` | Custom header content; receives a `close` function |
-| `content` | -- | The main sidebar body content |
+| Slot      | Scope                   | Description                                        |
+| --------- | ----------------------- | -------------------------------------------------- |
+| `header`  | `{ close: () => void }` | Custom header content; receives a `close` function |
+| `content` | --                      | The main sidebar body content                      |
 
 ## Usage
 
 ```vue
-<Sidebar
-  :is-expanded="showFilters"
-  position="right"
-  render="always"
-  title="Filters"
-  @close="showFilters = false"
->
+<Sidebar :is-expanded="showFilters" position="right" render="always" title="Filters" @close="showFilters = false">
   <template #content>
     <FilterPanel />
   </template>
@@ -50,11 +44,7 @@ On mobile, the sidebar teleports itself out of the normal DOM flow to overlay th
 ### Mobile-only sidebar
 
 ```vue
-<Sidebar
-  :is-expanded="showDetails"
-  render="mobile"
-  @close="showDetails = false"
->
+<Sidebar :is-expanded="showDetails" render="mobile" @close="showDetails = false">
   <template #content>
     <DetailView />
   </template>

package/runtime/knowledge/docs/shell/components/theme-selector/theme-selector.docs.md

@@ -50,8 +50,8 @@ const { register, setTheme, currentTheme } = useTheme();
 
 // Register available themes during app initialization
 register([
-  { key: "light" },    // Default light theme
-  { key: "dark" },     // Dark mode
+  { key: "light" }, // Default light theme
+  { key: "dark" }, // Dark mode
   { key: "contrast" }, // High-contrast accessibility theme
 ]);
 

package/runtime/knowledge/docs/shell/components/user-dropdown-button/user-dropdown-button.docs.md

@@ -26,12 +26,12 @@ import { UserDropdownButton } from "@vc-shell/framework";
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | `undefined` | User display name |
-| `role` | `string` | `undefined` | User role label |
-| `avatarUrl` | `string` | `undefined` | URL for the user avatar image |
-| `disabled` | `boolean` | `false` | Prevents menu from opening |
+| Prop        | Type      | Default     | Description                   |
+| ----------- | --------- | ----------- | ----------------------------- |
+| `name`      | `string`  | `undefined` | User display name             |
+| `role`      | `string`  | `undefined` | User role label               |
+| `avatarUrl` | `string`  | `undefined` | URL for the user avatar image |
+| `disabled`  | `boolean` | `false`     | Prevents menu from opening    |
 
 ## Recipe: Wiring to User Management Composable
 
@@ -45,9 +45,7 @@ import { useUserManagement } from "@vc-shell/framework";
 
 const { currentUser } = useUserManagement();
 
-const displayName = computed(() =>
-  currentUser.value ? `${currentUser.value.firstName} ${currentUser.value.lastName}` : ""
-);
+const displayName = computed(() => (currentUser.value ? `${currentUser.value.firstName} ${currentUser.value.lastName}` : ""));
 const role = computed(() => currentUser.value?.roles?.[0]?.name ?? "");
 const avatarUrl = computed(() => currentUser.value?.photoUrl);
 </script>