@vc-shell/vc-app-skill 2.0.0-alpha.32 → 2.0.0-alpha.33-pr220.455e322

package/runtime/knowledge/docs/injection-keys.docs.md

@@ -9,6 +9,7 @@ The vc-shell framework uses Vue's provide/inject mechanism extensively to share
 All keys are defined in a single file (`framework/injection-keys.ts`) to avoid symbol duplication and ensure type safety. The app shell provides these values at the root during bootstrap; components and composables inject them using the corresponding key.
 
 This centralized approach has several advantages:
+
 - **Type safety**: `inject(MenuServiceKey)` returns `MenuService | undefined`, not `unknown`
 - **No symbol collisions**: each key is a unique `Symbol`, preventing accidental overwrites
 - **Testability**: services can be mocked by providing different values in test wrappers
@@ -18,76 +19,76 @@ This centralized approach has several advantages:
 
 ### Blade Navigation
 
-| Key | Type | Description |
-|-----|------|-------------|
-| `NavigationViewLocationKey` | `BladeVNode` | Current blade VNode location in navigation |
-| `BladeDescriptorKey` | `ComputedRef<BladeDescriptor>` | Current blade descriptor metadata |
-| `BladeBackButtonKey` | `Component \| undefined` | Custom back button component for a blade |
-| `BladeDataKey` | *(from blade-navigation types)* | Data passed between parent/child blades |
-| `BladeContextKey` | `ComputedRef<Record<string, unknown>>` | Blade-exposed context for widgets/extensions |
-| `BladeRoutesKey` | `BladeRoutesRecord[]` | Registered blade routes |
-| `InternalRoutesKey` | `BladeRoutesRecord[]` | Internal framework routes |
+| Key                         | Type                                   | Description                                  |
+| --------------------------- | -------------------------------------- | -------------------------------------------- |
+| `NavigationViewLocationKey` | `BladeVNode`                           | Current blade VNode location in navigation   |
+| `BladeDescriptorKey`        | `ComputedRef<BladeDescriptor>`         | Current blade descriptor metadata            |
+| `BladeBackButtonKey`        | `Component \| undefined`               | Custom back button component for a blade     |
+| `BladeDataKey`              | _(from blade-navigation types)_        | Data passed between parent/child blades      |
+| `BladeContextKey`           | `ComputedRef<Record<string, unknown>>` | Blade-exposed context for widgets/extensions |
+| `BladeRoutesKey`            | `BladeRoutesRecord[]`                  | Registered blade routes                      |
+| `InternalRoutesKey`         | `BladeRoutesRecord[]`                  | Internal framework routes                    |
 
 ### Notifications
 
-| Key | Type | Description |
-|-----|------|-------------|
+| Key                        | Type                                | Description                                 |
+| -------------------------- | ----------------------------------- | ------------------------------------------- |
 | `NotificationTemplatesKey` | `NotificationTemplateConstructor[]` | Registered notification template components |
-| `NotificationStoreKey` | `NotificationStore` | Shared notification store singleton |
+| `NotificationStoreKey`     | `NotificationStore`                 | Shared notification store singleton         |
 
 ### Services
 
-| Key | Type | Description |
-|-----|------|-------------|
-| `WidgetServiceKey` | `IWidgetService` | Widget registration and lookup |
-| `DashboardServiceKey` | `IDashboardService` | Dashboard widget management |
-| `GlobalSearchKey` | `GlobalSearchState` | Global search state |
-| `MenuServiceKey` | `MenuService` | Main navigation menu |
-| `SettingsMenuServiceKey` | `ISettingsMenuService` | Settings sidebar menu |
-| `AppBarWidgetServiceKey` | `IAppBarWidgetService` | App bar widget slots |
-| `AppBarMobileButtonsServiceKey` | `IAppBarMobileButtonsService` | Mobile app bar buttons |
-| `LanguageServiceKey` | `ILanguageService` | Localization service |
-| `ToolbarServiceKey` | `IToolbarService` | Blade toolbar actions |
-| `AiAgentServiceKey` | `IAiAgentService` | AI agent integration |
+| Key                             | Type                          | Description                    |
+| ------------------------------- | ----------------------------- | ------------------------------ |
+| `WidgetServiceKey`              | `IWidgetService`              | Widget registration and lookup |
+| `DashboardServiceKey`           | `IDashboardService`           | Dashboard widget management    |
+| `GlobalSearchKey`               | `GlobalSearchState`           | Global search state            |
+| `MenuServiceKey`                | `MenuService`                 | Main navigation menu           |
+| `SettingsMenuServiceKey`        | `ISettingsMenuService`        | Settings sidebar menu          |
+| `AppBarWidgetServiceKey`        | `IAppBarWidgetService`        | App bar widget slots           |
+| `AppBarMobileButtonsServiceKey` | `IAppBarMobileButtonsService` | Mobile app bar buttons         |
+| `LanguageServiceKey`            | `ILanguageService`            | Localization service           |
+| `ToolbarServiceKey`             | `IToolbarService`             | Blade toolbar actions          |
+| `AiAgentServiceKey`             | `IAiAgentService`             | AI agent integration           |
 
 ### Module System
 
-| Key | Type | Description |
-|-----|------|-------------|
-| `DynamicModulesKey` | `DynamicModuleRegistry \| undefined` | Registry of loaded dynamic modules (extensible via declaration merging) |
-| `ModulesReadyKey` | `Ref<boolean>` | Whether all modules have finished loading |
-| `ModulesLoadErrorKey` | `Ref<boolean>` | Whether all modules failed to load |
+| Key                   | Type                                 | Description                                                             |
+| --------------------- | ------------------------------------ | ----------------------------------------------------------------------- |
+| `DynamicModulesKey`   | `DynamicModuleRegistry \| undefined` | Registry of loaded dynamic modules (extensible via declaration merging) |
+| `ModulesReadyKey`     | `Ref<boolean>`                       | Whether all modules have finished loading                               |
+| `ModulesLoadErrorKey` | `Ref<boolean>`                       | Whether all modules failed to load                                      |
 
 ### UI State
 
-| Key | Type | Description |
-|-----|------|-------------|
-| `WidgetScopeKey` | `IWidgetScope` | Widget scope (provided by WidgetContainer for component-based widgets via `WidgetScope.vue`) |
-| `AppRootElementKey` | `Ref<HTMLElement \| undefined>` | App root element for scoped Teleport |
-| `EmbeddedModeKey` | `boolean` | Whether the app runs in embedded mode |
-| `ShellIndicatorsKey` | `ComputedRef<boolean>` | Unread indicator state for sidebar |
-| `CloseSettingsMenuKey` | `() => void` | Callback to close the settings menu |
+| Key                    | Type                            | Description                                                                                  |
+| ---------------------- | ------------------------------- | -------------------------------------------------------------------------------------------- |
+| `WidgetScopeKey`       | `IWidgetScope`                  | Widget scope (provided by WidgetContainer for component-based widgets via `WidgetScope.vue`) |
+| `AppRootElementKey`    | `Ref<HTMLElement \| undefined>` | App root element for scoped Teleport                                                         |
+| `EmbeddedModeKey`      | `boolean`                       | Whether the app runs in embedded mode                                                        |
+| `ShellIndicatorsKey`   | `ComputedRef<boolean>`          | Unread indicator state for sidebar                                                           |
+| `CloseSettingsMenuKey` | `() => void`                    | Callback to close the settings menu                                                          |
 
 ### Breakpoints
 
-| Key | Type | Description |
-|-----|------|-------------|
-| `IsMobileKey` | `Ref<boolean>` | Mobile breakpoint |
-| `IsDesktopKey` | `Ref<boolean>` | Desktop breakpoint |
-| `IsPhoneKey` | `Ref<boolean>` | Phone breakpoint |
-| `IsTabletKey` | `Ref<boolean>` | Tablet breakpoint |
-| `IsTouchKey` | `boolean` | Touch device detection |
+| Key            | Type           | Description            |
+| -------------- | -------------- | ---------------------- |
+| `IsMobileKey`  | `Ref<boolean>` | Mobile breakpoint      |
+| `IsDesktopKey` | `Ref<boolean>` | Desktop breakpoint     |
+| `IsPhoneKey`   | `Ref<boolean>` | Phone breakpoint       |
+| `IsTabletKey`  | `Ref<boolean>` | Tablet breakpoint      |
+| `IsTouchKey`   | `boolean`      | Touch device detection |
 
 ### Legacy Aliases (Deprecated)
 
-| Deprecated | Use Instead |
-|------------|-------------|
-| `navigationViewLocation` | `NavigationViewLocationKey` |
-| `BladeDescriptor` | `BladeDescriptorKey` |
-| `NotificationTemplatesSymbol` | `NotificationTemplatesKey` |
-| `BLADE_BACK_BUTTON` | `BladeBackButtonKey` |
-| `TOOLBAR_SERVICE` | `ToolbarServiceKey` |
-| `EMBEDDED_MODE` | `EmbeddedModeKey` |
+| Deprecated                    | Use Instead                 |
+| ----------------------------- | --------------------------- |
+| `navigationViewLocation`      | `NavigationViewLocationKey` |
+| `BladeDescriptor`             | `BladeDescriptorKey`        |
+| `NotificationTemplatesSymbol` | `NotificationTemplatesKey`  |
+| `BLADE_BACK_BUTTON`           | `BladeBackButtonKey`        |
+| `TOOLBAR_SERVICE`             | `ToolbarServiceKey`         |
+| `EMBEDDED_MODE`               | `EmbeddedModeKey`           |
 
 ## Usage Examples
 

package/runtime/knowledge/docs/modules/assets-manager/assets-manager.docs.md

@@ -21,12 +21,12 @@ The module exports `AssetsManagerModule` (a Vue plugin) and the `AssetsManager`
 
 The blade reads its configuration from `options` via `useBlade<AssetsManagerOptions>()` (not props):
 
-| Option | Type | Description |
-|---|---|---|
-| `title` | `string?` | Custom blade title (defaults to i18n `ASSETS_MANAGER.TITLE`) |
-| `manager` | `UseAssetsManagerReturn` | The asset manager instance from `useAssetsManager()`. **Must be wrapped in `markRaw()`** |
-| `disabled` | `boolean?` | When true, hides upload/delete actions and disables reordering |
-| `hiddenFields` | `string[]?` | Fields to hide in the detail view |
+| Option         | Type                     | Description                                                                              |
+| -------------- | ------------------------ | ---------------------------------------------------------------------------------------- |
+| `title`        | `string?`                | Custom blade title (defaults to i18n `ASSETS_MANAGER.TITLE`)                             |
+| `manager`      | `UseAssetsManagerReturn` | The asset manager instance from `useAssetsManager()`. **Must be wrapped in `markRaw()`** |
+| `disabled`     | `boolean?`               | When true, hides upload/delete actions and disables reordering                           |
+| `hiddenFields` | `string[]?`              | Fields to hide in the detail view                                                        |
 
 > **Breaking change:** The old options (`assets`, `loading`, `assetsUploadHandler`, `assetsEditHandler`, `assetsRemoveHandler`) have been removed. Pass a single `manager` instance instead. See [migration guide #32](../../../migration/32-use-assets-manager.md).
 
@@ -71,9 +71,9 @@ openBlade({
 
 ## Toolbar
 
-| Button | Condition | Action |
-|---|---|---|
-| Add | `!disabled` | Opens file picker for upload |
+| Button | Condition                      | Action                                           |
+| ------ | ------------------------------ | ------------------------------------------------ |
+| Add    | `!disabled`                    | Opens file picker for upload                     |
 | Delete | `!disabled` and items selected | Calls `manager.removeMany()` with selected items |
 
 ## Tips

package/runtime/knowledge/docs/shell/_internal/popup/common/popup-common.docs.md

@@ -12,18 +12,18 @@ These components provide ready-to-use modal dialogs for common scenarios. Each v
 
 The foundation component. Wraps `VcPopup` and adds footer action buttons based on the `mode`.
 
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `title` | `string` | -- | Dialog title |
-| `variant` | `PopupVariant` | `"default"` | Visual style: `"default"`, `"warning"`, `"error"`, `"info"` |
-| `mode` | `"acknowledge" \| "confirm"` | `"acknowledge"` | `acknowledge` = single OK button; `confirm` = Confirm + Cancel |
-| `actionLabel` | `string` | `""` | Label for the single button in acknowledge mode |
-| `confirmLabel` | `string` | `""` | Label for the confirm button |
-| `cancelLabel` | `string` | `""` | Label for the cancel button |
-| `confirmAsText` | `boolean` | `false` | Render confirm button as text-only style |
-| `closable` | `boolean` | `true` | Show close (X) button in the header |
-| `isMobileFullscreen` | `boolean` | `true` | Expand to fullscreen on mobile |
-| `closeOnConfirm` | `boolean` | `false` | Auto-close the popup after confirm is emitted |
+| Prop                 | Type                         | Default         | Description                                                    |
+| -------------------- | ---------------------------- | --------------- | -------------------------------------------------------------- |
+| `title`              | `string`                     | --              | Dialog title                                                   |
+| `variant`            | `PopupVariant`               | `"default"`     | Visual style: `"default"`, `"warning"`, `"error"`, `"info"`    |
+| `mode`               | `"acknowledge" \| "confirm"` | `"acknowledge"` | `acknowledge` = single OK button; `confirm` = Confirm + Cancel |
+| `actionLabel`        | `string`                     | `""`            | Label for the single button in acknowledge mode                |
+| `confirmLabel`       | `string`                     | `""`            | Label for the confirm button                                   |
+| `cancelLabel`        | `string`                     | `""`            | Label for the cancel button                                    |
+| `confirmAsText`      | `boolean`                    | `false`         | Render confirm button as text-only style                       |
+| `closable`           | `boolean`                    | `true`          | Show close (X) button in the header                            |
+| `isMobileFullscreen` | `boolean`                    | `true`          | Expand to fullscreen on mobile                                 |
+| `closeOnConfirm`     | `boolean`                    | `false`         | Auto-close the popup after confirm is emitted                  |
 
 Events: `close`, `confirm`
 
@@ -34,17 +34,13 @@ Slots: `header`, `default` (content), `footer` (receives `{ close, confirm }`)
 A confirm dialog styled with the `warning` variant. Shows Confirm and Cancel buttons.
 
 ```vue
-<VcPopupWarning
-  title="Delete item?"
-  @close="onCancel"
-  @confirm="onDelete"
->
+<VcPopupWarning title="Delete item?" @close="onCancel" @confirm="onDelete">
   <p>This action cannot be undone.</p>
 </VcPopupWarning>
 ```
 
-| Prop | Type | Description |
-|---|---|---|
+| Prop    | Type     | Description  |
+| ------- | -------- | ------------ |
 | `title` | `string` | Dialog title |
 
 Events: `close`, `confirm`
@@ -55,16 +51,13 @@ Slots: `header`, `default`
 An acknowledge dialog styled with the `error` variant. Shows a single OK button.
 
 ```vue
-<VcPopupError
-  title="Operation Failed"
-  @close="dismiss"
->
+<VcPopupError title="Operation Failed" @close="dismiss">
   <p>Could not save changes. Please try again.</p>
 </VcPopupError>
 ```
 
-| Prop | Type | Description |
-|---|---|---|
+| Prop    | Type     | Description  |
+| ------- | -------- | ------------ |
 | `title` | `string` | Dialog title |
 
 Events: `close`
@@ -75,16 +68,13 @@ Slots: `header`, `default`
 An acknowledge dialog styled with the `info` variant. Shows a single OK button.
 
 ```vue
-<VcPopupInfo
-  title="Information"
-  @close="dismiss"
->
+<VcPopupInfo title="Information" @close="dismiss">
   <p>Your changes have been saved successfully.</p>
 </VcPopupInfo>
 ```
 
-| Prop | Type | Description |
-|---|---|---|
+| Prop    | Type     | Description  |
+| ------- | -------- | ------------ |
 | `title` | `string` | Dialog title |
 
 Events: `close`
@@ -95,12 +85,7 @@ Slots: `header`, `default`
 ### Confirmation before destructive action
 
 ```vue
-<VcPopupWarning
-  v-if="showDeleteConfirm"
-  title="Delete Order"
-  @confirm="deleteOrder"
-  @close="showDeleteConfirm = false"
->
+<VcPopupWarning v-if="showDeleteConfirm" title="Delete Order" @confirm="deleteOrder" @close="showDeleteConfirm = false">
   Are you sure you want to delete this order?
 </VcPopupWarning>
 ```
@@ -108,12 +93,7 @@ Slots: `header`, `default`
 ### Custom footer in VcPopupBase
 
 ```vue
-<VcPopupBase
-  variant="warning"
-  mode="confirm"
-  title="Custom Actions"
-  @close="onClose"
->
+<VcPopupBase variant="warning" mode="confirm" title="Custom Actions" @close="onClose">
   <template #footer="{ close, confirm }">
     <VcButton variant="danger" @click="confirm">Delete Forever</VcButton>
     <VcButton @click="close">Keep</VcButton>

package/runtime/knowledge/docs/shell/auth/ChangePasswordPage/change-password-page.docs.md

@@ -0,0 +1,102 @@
+# ChangePasswordPage
+
+Change password page with current, new, and confirm password fields. Supports a `forced` mode for expired passwords that displays an info banner and is triggered by post-login redirect. This full-page variant is used when the user must change their password before accessing the application (e.g., expired password policy). For voluntary password changes from within the app, the `ChangePasswordButton` in the settings menu opens a popup instead.
+
+## When to Use
+
+- When a signed-in user wants to change their password (full-page flow)
+- In `forced` mode after login when the user's password has expired
+- The standard vc-shell routing maps `/change-password` to this page
+
+## Basic Usage
+
+```vue
+<template>
+  <ChangePassword />
+</template>
+
+<!-- Forced mode (expired password) -->
+<template>
+  <ChangePassword forced />
+</template>
+```
+
+With custom branding:
+
+```vue
+<template>
+  <ChangePassword
+    forced
+    logo="/assets/my-company-logo.svg"
+    background="/assets/custom-background.jpg"
+  />
+</template>
+```
+
+## Key Props
+
+| Prop         | Type      | Default | Description                                          |
+| ------------ | --------- | ------- | ---------------------------------------------------- |
+| `forced`     | `boolean` | `false` | Show expired-password info banner and adjusted title |
+| `logo`       | `string`  | -       | Override logo image URL                              |
+| `background` | `string`  | -       | Custom background image URL                          |
+
+## Recipe: Router Configuration with Forced Mode
+
+Set up the route so the login page can redirect here when the password is expired:
+
+```ts
+import ChangePassword from "@vc-shell/framework/shared/pages/ChangePasswordPage";
+
+const routes = [
+  {
+    path: "/change-password",
+    name: "ChangePassword",
+    component: ChangePassword,
+    props: (route) => ({
+      forced: route.query.forced === "true",
+    }),
+  },
+];
+```
+
+In the login flow, redirect when the user's password has expired:
+
+```ts
+async function handleLogin() {
+  const result = await signIn(username.value, password.value);
+  if (result.passwordExpired) {
+    router.push({ name: "ChangePassword", query: { forced: "true" } });
+  } else {
+    router.push("/");
+  }
+}
+```
+
+## Features
+
+- **Real-time password policy validation**: Uses `useUserManagement().validatePassword` to check the new password against the platform's policy as the user types (minimum length, required uppercase, lowercase, digits, special characters)
+- **Equal password detection**: Shows a specific "Equal-passwords" error when the new password matches the current password, without making an API call
+- **Confirm-password mismatch detection**: Validates that the new password and confirm password fields match
+- **Forced mode banner**: When `forced` is `true`, displays an info banner explaining that the password has expired and must be changed
+- **Cancel behavior**: Cancel button signs out the user and redirects to `/login`
+- **Success redirect**: On successful password change, redirects to `/` (main application)
+
+## Details
+
+- **Auth layout**: Renders inside `VcAuthLayout`, providing the centered card design with logo and background.
+- **Password policy**: The validation rules are fetched from the platform API and include configurable requirements (minimum length, character classes, etc.). The component displays these rules as a checklist.
+- **Forced vs voluntary**: In forced mode (`forced=true`), the page title changes to reflect the expired password scenario, and an info banner explains why the change is required. The form fields and behavior are otherwise identical.
+- **Sign-out on cancel**: If the user cancels during a forced password change, they are signed out. This prevents access to the application with an expired password.
+
+## Tips
+
+- The `forced` prop is typically set via a route query parameter, not hardcoded. The login page detects expired passwords and redirects with the appropriate flag.
+- Password policy validation runs on keyup, providing immediate feedback. The submit button is disabled until all policy requirements are met and the passwords match.
+- This page is distinct from the `ChangePasswordButton` popup. The page is for full-screen flow (forced changes), while the popup is for voluntary in-app password changes.
+
+## Related Components
+
+- **VcAuthLayout** - The underlying centered card layout
+- **LoginPage** - Redirects here when `user.passwordExpired` is true
+- **ChangePasswordButton** - Settings menu popup variant for voluntary password changes

package/runtime/knowledge/docs/shell/auth/ForgotPasswordPage/forgot-password-page.docs.md

@@ -31,11 +31,11 @@ With custom branding:
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `logo` | `string` | - | Override logo image URL |
-| `background` | `string` | - | Custom background image URL |
-| `composable` | `() => { forgotPassword }` | - | Custom composable providing `forgotPassword(args)` |
+| Prop         | Type                       | Default | Description                                        |
+| ------------ | -------------------------- | ------- | -------------------------------------------------- |
+| `logo`       | `string`                   | -       | Override logo image URL                            |
+| `background` | `string`                   | -       | Custom background image URL                        |
+| `composable` | `() => { forgotPassword }` | -       | Custom composable providing `forgotPassword(args)` |
 
 ## Recipe: Custom Reset Flow with a Different API
 

package/runtime/knowledge/docs/shell/auth/InvitePage/invite-page.docs.md

@@ -36,13 +36,13 @@ With custom branding:
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `userId` | `string` | **required** | Invited user's ID from the link |
-| `userName` | `string` | **required** | Invited user's email (shown as disabled field) |
-| `token` | `string` | **required** | Invitation 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**             | Invited user's ID from the link                |
+| `userName`   | `string` | **required**             | Invited user's email (shown as disabled field) |
+| `token`      | `string` | **required**             | Invitation 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 invitation email link typically looks like:
+
 ```
 https://your-app.com/invite?userId=abc123&userName=jane@example.com&token=xyz789...
 ```

package/runtime/knowledge/docs/shell/auth/LoginPage/login-page.docs.md

@@ -34,13 +34,13 @@ SSO-only mode:
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `logo` | `string` | - | Override logo image URL |
-| `background` | `string` | - | Custom background image URL |
-| `title` | `string` | i18n `LOGIN.TITLE` | Page heading text |
-| `subtitle` | `string` | i18n `LOGIN.SUBTITLE` | Page subheading text |
-| `ssoOnly` | `boolean` | `false` | Hide credentials form, show only SSO providers |
+| Prop         | Type      | Default               | Description                                    |
+| ------------ | --------- | --------------------- | ---------------------------------------------- |
+| `logo`       | `string`  | -                     | Override logo image URL                        |
+| `background` | `string`  | -                     | Custom background image URL                    |
+| `title`      | `string`  | i18n `LOGIN.TITLE`    | Page heading text                              |
+| `subtitle`   | `string`  | i18n `LOGIN.SUBTITLE` | Page subheading text                           |
+| `ssoOnly`    | `boolean` | `false`               | Hide credentials form, show only SSO providers |
 
 ## Recipe: Router Configuration
 

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