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

package/runtime/agents/promote-agent.md

@@ -16,9 +16,9 @@ description: Performs surgical edits on a prototype module to replace mock data
       "entityName": "string — PascalCase entity name"
     },
     "dataSource": {
-      "clientClass": "string — NSwag client class name (e.g., 'VcmpSellerSecurityClient')",
-      "entityType": "string — PascalCase entity type (e.g., 'SellerUser')",
-      "entityTypePath": "string — import path for entity types (e.g., '../../api_client/virtocommerce.marketplace')",
+      "clientClass": "string — NSwag client class name (e.g., 'MyEntityClient')",
+      "entityType": "string — PascalCase entity type (e.g., 'MyEntity')",
+      "entityTypePath": "string — import path for entity types (e.g., '../../api_client/virtocommerce.mymodule')",
       "searchMethod": "string? — camelCase search method on client",
       "getMethod": "string? — camelCase get method on client",
       "createMethod": "string? — camelCase create method on client",
@@ -61,6 +61,7 @@ If `bladeTypes` is `"details-only"`, skip all list composable and list blade fil
 ### Step 1: Validate generated files
 
 For each path in `prototypeMetadata.generatedFiles`:
+
 1. Check that `{targetDir}/{path}` exists on disk
 2. Read the file contents
 3. If a file is missing, record a warning: `"MISSING: {path} — listed in prototypeMetadata but not found on disk"`
@@ -76,11 +77,13 @@ Process each composable file (`.ts` files under `composables/`) listed in `gener
 Search for `// vc-app:mock-start` and `// vc-app:mock-end` markers in the file.
 
 **Primary path (markers found):**
+
 - Extract the entire block between `// vc-app:mock-start` and `// vc-app:mock-end` (inclusive of the marker lines)
 - Replace the block with the real API integration code (see Step 2c)
 - Remove the marker comments themselves
 
 **Fallback path (markers NOT found):**
+
 - Pattern-match mock function signatures: look for functions that return hardcoded arrays/objects, `const mockData`, `const mock`, `setTimeout` simulating async, or inline `Promise.resolve(...)` with literal data
 - Replace matched regions with real API integration code
 - Set status to `DONE_WITH_CONCERNS` with concern: `"Mock markers not found in {filePath} — used pattern-matching fallback. Verify edits manually."`
@@ -90,6 +93,7 @@ Search for `// vc-app:mock-start` and `// vc-app:mock-end` markers in the file.
 At the top of the file, apply these import changes:
 
 **Add** (if not already present):
+
 ```ts
 import { useApiClient } from "@vc-shell/framework";
 import { {dataSource.clientClass} } from "{dataSource.entityTypePath}";
@@ -97,6 +101,7 @@ import { {dataSource.entityType}, /* SearchQuery, SearchResult types as needed *
 ```
 
 **Remove:**
+
 - Any imports that reference mock data files or mock type definitions that no longer exist
 - Do NOT remove other existing imports (framework composables, Vue imports, etc.)
 
@@ -109,6 +114,7 @@ const apiClient = useApiClient({dataSource.clientClass});
 ```
 
 Then replace mock function bodies:
+
 - **List composable** (`useList` / `use{EntityPlural}`):
   - Mock search/fetch function → `apiClient.{dataSource.searchMethod}(query)`
   - Mock remove function → `apiClient.{dataSource.deleteMethod}(ids)`
@@ -118,6 +124,7 @@ Then replace mock function bodies:
   - Mock delete function → `apiClient.{dataSource.deleteMethod}(ids)`
 
 If a method is not provided in `dataSource` (e.g., `deleteMethod` is undefined), leave a TODO comment:
+
 ```ts
 // TODO [vc-app:promote]: deleteMethod not provided — implement manually
 ```
@@ -139,11 +146,13 @@ For each entry in `fieldMap`:
   - Computed property keys and template literals referencing the field
 
 - **`action: "delete"`** — Remove code blocks that reference the deleted field. If the field appears in a return statement or interface, remove it. If it appears in logic that cannot be cleanly removed, comment it out with:
+
   ```ts
   // TODO [vc-app:promote]: removed field "{mockFieldName}" — clean up surrounding logic
   ```
 
 - **`action: "keep-stub"`** — Leave the existing code for this field in place and add a comment:
+
   ```ts
   // TODO [vc-app:promote]: {mockFieldName} — kept as stub, provide implementation
   ```
@@ -156,6 +165,7 @@ For each entry in `fieldMap`:
 #### 2f: Preserve untouched code
 
 All code outside the mock block and the renamed/deleted field references must remain exactly as-is. This includes:
+
 - Computed properties
 - Watchers
 - Validation logic
@@ -235,7 +245,7 @@ Compile the final report with:
   - `DONE_WITH_CONCERNS` — transformations applied but with fallback pattern-matching or ambiguities
   - `BLOCKED` — cannot proceed (all files missing, or critical error)
 
-- **Files modified:** list each file with a one-line summary of changes (e.g., `"composables/useTeamMembers/index.ts — replaced mock data source with VcmpSellerSecurityClient API calls, renamed 3 fields"`)
+- **Files modified:** list each file with a one-line summary of changes (e.g., `"composables/useTeamMembers/index.ts — replaced mock data source with UserSecurityClient API calls, renamed 3 fields"`)
 
 - **Warnings:** list all warnings collected during Steps 1-5
 
@@ -244,6 +254,7 @@ Compile the final report with:
 ## Output Contract
 
 Report format:
+
 ```
 Status: DONE | DONE_WITH_CONCERNS | BLOCKED
 Files modified:

package/runtime/agents/type-checker.md

@@ -23,11 +23,13 @@ No pattern files needed. This agent works with TypeScript diagnostics directly.
 ### Step 1: Run vue-tsc
 
 From `projectRoot`, run:
+
 ```bash
 cd {projectRoot} && npx vue-tsc --noEmit 2>&1
 ```
 
 Capture all output. If `vue-tsc` is not available, fall back to:
+
 ```bash
 cd {projectRoot} && npx tsc --noEmit 2>&1
 ```
@@ -35,6 +37,7 @@ cd {projectRoot} && npx tsc --noEmit 2>&1
 ### Step 2: Filter errors to generated files only
 
 Parse the output for TypeScript error lines. Each error line has format:
+
 ```
 {filepath}({line},{col}): error TS{code}: {message}
 ```
@@ -48,27 +51,34 @@ If no errors match the generated files, report **PASS** and stop.
 For each error in the generated files, attempt to fix using these patterns:
 
 **TS2339 — Property does not exist on type:**
+
 - If `entity.{field}` and `{field}` is not on the entity type, add `?` optional chaining: `entity.value?.{field}`
 - If it's a missing property on an imported type, add a type assertion: `(entity.value as any).{field}` as a last resort
 
 **TS2345 — Argument type mismatch:**
+
 - If passing `string | undefined` where `string` is expected, add non-null assertion: `value!`
 - If command class is missing a required field, add it from the entity with a comment
 
 **TS2304 — Cannot find name:**
+
 - If a composable function name is wrong, check the composable file and correct the import/destructure
 - If an imported type is missing, check the api client file for the correct class name
 
 **TS7006 — Parameter implicitly has 'any' type:**
+
 - Add explicit type annotation from context (e.g., `(query: ISearch{Entity}Query)`)
 
 **TS2554 — Expected N arguments but got M:**
+
 - Check the method signature in the api client file and adjust the call
 
 **TS1005 — Expected token:**
+
 - Syntax error — re-read the generated file and fix malformed syntax
 
 For each fix:
+
 1. Read the affected generated file
 2. Apply the minimal fix (Edit tool, targeted replacement)
 3. Note the fix applied
@@ -108,6 +118,7 @@ Returns a text report with PASS/FAIL status, fixes applied, and any remaining er
 ## Self-Check
 
 Before completing, verify:
+
 - [ ] `vue-tsc` (or `tsc`) was run from `projectRoot`, not from a subdirectory
 - [ ] Only errors in `generatedFiles` were addressed — no fixes to unrelated files
 - [ ] Fixes were minimal (targeted Edit calls, not full file rewrites)

package/runtime/knowledge/docs/_BUILD_HASH.md

@@ -1 +1 @@
-Synced from framework at commit fc29b1e1b on 2026-04-02T05:22:47.427Z
+Synced from framework at commit b399787ff on 2026-04-14T15:15:27.844Z

package/runtime/knowledge/docs/core/api/platform.docs.md

@@ -21,38 +21,38 @@ Each API client class extends `AuthApiBase`, which automatically attaches the Be
 
 All clients extend `AuthApiBase` and accept an optional `baseUrl` and `http` fetch implementation.
 
-| Client | Description |
-|--------|-------------|
-| `ExternalSignInClient` | External authentication provider sign-in |
-| `AppsClient` | Application descriptor operations |
-| `AuthorizationClient` | Permission and role checking |
-| `ChangeLogClient` | Platform change log / audit trail |
-| `DiagnosticsClient` | System diagnostics and health |
-| `DynamicPropertiesClient` | Dynamic property CRUD and dictionary management |
-| `JobsClient` | Background job management |
-| `LocalizableSettingsClient` | Localizable setting values |
-| `ModulesClient` | Platform module management (install, update, restart) |
-| `OAuthAppsClient` | OAuth application registration |
-| `PushNotificationClient` | Push notification search and mark-as-read |
-| `SecurityClient` | User management, roles, permissions, password operations |
-| `SettingClient` | Platform settings CRUD |
+| Client                      | Description                                              |
+| --------------------------- | -------------------------------------------------------- |
+| `ExternalSignInClient`      | External authentication provider sign-in                 |
+| `AppsClient`                | Application descriptor operations                        |
+| `AuthorizationClient`       | Permission and role checking                             |
+| `ChangeLogClient`           | Platform change log / audit trail                        |
+| `DiagnosticsClient`         | System diagnostics and health                            |
+| `DynamicPropertiesClient`   | Dynamic property CRUD and dictionary management          |
+| `JobsClient`                | Background job management                                |
+| `LocalizableSettingsClient` | Localizable setting values                               |
+| `ModulesClient`             | Platform module management (install, update, restart)    |
+| `OAuthAppsClient`           | OAuth application registration                           |
+| `PushNotificationClient`    | Push notification search and mark-as-read                |
+| `SecurityClient`            | User management, roles, permissions, password operations |
+| `SettingClient`             | Platform settings CRUD                                   |
 
 ## Key DTOs (Interfaces)
 
-| Interface | Description |
-|-----------|-------------|
-| `PushNotification` | Push notification payload: `id`, `title`, `notifyType`, `isNew`, `finished`, etc. |
-| `PushNotificationSearchCriteria` | Search criteria for notification queries |
-| `ApplicationUser` | Platform user with roles, permissions, logins |
-| `Role` | Security role with permissions |
-| `Permission` | Individual permission entry |
-| `DynamicProperty` | Dynamic property definition |
-| `DynamicObjectProperty` | Property value bound to an object |
-| `ModuleDescriptor` | Module metadata (id, version, dependencies) |
-| `ChangeLogSearchCriteria` | Audit log search parameters |
-| `ChangeLogSearchResult` | Paginated audit log results |
-| `ObjectSettingEntry` | Setting entry with value and metadata |
-| `License` | Platform license information |
+| Interface                        | Description                                                                       |
+| -------------------------------- | --------------------------------------------------------------------------------- |
+| `PushNotification`               | Push notification payload: `id`, `title`, `notifyType`, `isNew`, `finished`, etc. |
+| `PushNotificationSearchCriteria` | Search criteria for notification queries                                          |
+| `ApplicationUser`                | Platform user with roles, permissions, logins                                     |
+| `Role`                           | Security role with permissions                                                    |
+| `Permission`                     | Individual permission entry                                                       |
+| `DynamicProperty`                | Dynamic property definition                                                       |
+| `DynamicObjectProperty`          | Property value bound to an object                                                 |
+| `ModuleDescriptor`               | Module metadata (id, version, dependencies)                                       |
+| `ChangeLogSearchCriteria`        | Audit log search parameters                                                       |
+| `ChangeLogSearchResult`          | Paginated audit log results                                                       |
+| `ObjectSettingEntry`             | Setting entry with value and metadata                                             |
+| `License`                        | Platform license information                                                      |
 
 ## Base Class
 
@@ -93,7 +93,7 @@ const securityClient = new SecurityClient();
 const user = await securityClient.getCurrentUser();
 
 console.log(`Logged in as: ${user.userName}`);
-console.log(`Roles: ${user.roles?.map(r => r.name).join(", ")}`);
+console.log(`Roles: ${user.roles?.map((r) => r.name).join(", ")}`);
 console.log(`Is admin: ${user.isAdministrator}`);
 ```
 

package/runtime/knowledge/docs/core/blade-navigation/blade-nav-composables.docs.md

@@ -34,27 +34,27 @@ Creates a new stack instance. Called once by the navigation plugin.
 
 ### API
 
-| Method | Description |
-|---|---|
-| `openWorkspace(event)` | Sets the root blade (index 0). Closes all existing blades unconditionally. |
-| `openBlade(event)` | Opens a child blade after a parent. Closes any blades deeper than the parent (with guard checks). |
-| `closeBlade(bladeId)` | Closes a blade and all its children. Returns `true` if a guard prevented closing. |
-| `closeChildren(parentId)` | Closes all blades after the given parent. |
-| `replaceCurrentBlade(event)` | Destroys the current active blade and creates a new one at the same stack index with the same `parentId`. |
-| `coverCurrentBlade(event)` | Hides the current active blade (keeps it in the stack) and opens a new blade on top. Closing the covering blade restores the hidden blade. |
-| `registerBeforeClose(bladeId, guard)` | Registers a guard function. Return `true` from the guard to PREVENT closing. |
-| `unregisterBeforeClose(bladeId)` | Removes a close guard. |
-| `setBladeError(bladeId, error)` | Sets an error on a blade descriptor (displayed as error banner). |
-| `clearBladeError(bladeId)` | Clears a blade's error. |
-| `setBladeTitle(bladeId, title)` | Updates the blade's title in the descriptor. |
+| Method                                | Description                                                                                                                                |
+| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `openWorkspace(event)`                | Sets the root blade (index 0). Closes all existing blades unconditionally.                                                                 |
+| `openBlade(event)`                    | Opens a child blade after a parent. Closes any blades deeper than the parent (with guard checks).                                          |
+| `closeBlade(bladeId)`                 | Closes a blade and all its children. Returns `true` if a guard prevented closing.                                                          |
+| `closeChildren(parentId)`             | Closes all blades after the given parent.                                                                                                  |
+| `replaceCurrentBlade(event)`          | Destroys the current active blade and creates a new one at the same stack index with the same `parentId`.                                  |
+| `coverCurrentBlade(event)`            | Hides the current active blade (keeps it in the stack) and opens a new blade on top. Closing the covering blade restores the hidden blade. |
+| `registerBeforeClose(bladeId, guard)` | Registers a guard function. Return `true` from the guard to PREVENT closing.                                                               |
+| `unregisterBeforeClose(bladeId)`      | Removes a close guard.                                                                                                                     |
+| `setBladeError(bladeId, error)`       | Sets an error on a blade descriptor (displayed as error banner).                                                                           |
+| `clearBladeError(bladeId)`            | Clears a blade's error.                                                                                                                    |
+| `setBladeTitle(bladeId, title)`       | Updates the blade's title in the descriptor.                                                                                               |
 
 ### Computed
 
-| Property | Type | Description |
-|---|---|---|
-| `workspace` | `BladeDescriptor` | The root blade (index 0) |
-| `blades` | `readonly BladeDescriptor[]` | Full ordered stack |
-| `activeBlade` | `BladeDescriptor` | The last visible blade |
+| Property      | Type                         | Description              |
+| ------------- | ---------------------------- | ------------------------ |
+| `workspace`   | `BladeDescriptor`            | The root blade (index 0) |
+| `blades`      | `readonly BladeDescriptor[]` | Full ordered stack       |
+| `activeBlade` | `BladeDescriptor`            | The last visible blade   |
 
 ### Composable: `useBladeStack()`
 
@@ -66,11 +66,11 @@ Inter-blade communication via exposed methods.
 
 ### Factory: `createBladeMessaging(bladeStack)`
 
-| Method | Description |
-|---|---|
-| `exposeToChildren(bladeId, methods)` | Registers methods that child blades can call |
+| Method                                     | Description                                                               |
+| ------------------------------------------ | ------------------------------------------------------------------------- |
+| `exposeToChildren(bladeId, methods)`       | Registers methods that child blades can call                              |
 | `callParent(callerBladeId, method, args?)` | Calls a method on the caller's parent blade. Returns the method's result. |
-| `cleanup(bladeId)` | Removes exposed methods for a blade (called on close). |
+| `cleanup(bladeId)`                         | Removes exposed methods for a blade (called on close).                    |
 
 ### Composable: `useBladeMessaging()`
 
@@ -84,13 +84,13 @@ The primary composable for module developers. Maps the legacy `IUseBladeNavigati
 
 ```typescript
 const {
-  openBlade,              // Open a child blade
-  closeBlade,             // Close by index (deprecated -- use useBlade().closeSelf())
-  resolveBladeByName,     // Look up a blade component by name
-  onParentCall,           // Call parent blade method (deprecated -- use useBlade().callParent())
-  onBeforeClose,          // Register close guard (deprecated -- use useBlade().onBeforeClose())
-  blades,                 // Reactive blade array (shim objects)
-  activeWorkspace,        // Current workspace blade
+  openBlade, // Open a child blade
+  closeBlade, // Close by index (deprecated -- use useBlade().closeSelf())
+  resolveBladeByName, // Look up a blade component by name
+  onParentCall, // Call parent blade method (deprecated -- use useBlade().callParent())
+  onBeforeClose, // Register close guard (deprecated -- use useBlade().onBeforeClose())
+  blades, // Reactive blade array (shim objects)
+  activeWorkspace, // Current workspace blade
 } = useBladeNavigation();
 ```
 
@@ -124,18 +124,18 @@ openBlade({
 
 The plain data object stored in the stack for each blade:
 
-| Field | Type | Description |
-|---|---|---|
-| `id` | `string` | Unique instance ID (auto-generated) |
-| `name` | `string` | Blade registration name |
-| `url` | `string?` | URL segment for address bar sync |
-| `param` | `unknown` | Parameter passed when opening (e.g., entity ID) |
-| `query` | `Record?` | Query parameters |
-| `options` | `unknown` | Arbitrary options passed to the blade |
-| `parentId` | `string?` | ID of the parent blade |
-| `visible` | `boolean` | Whether the blade is rendered (false when covered via `coverCurrentBlade`) |
-| `error` | `unknown?` | Error state for the error banner |
-| `title` | `string?` | Dynamic title override |
+| Field      | Type       | Description                                                                |
+| ---------- | ---------- | -------------------------------------------------------------------------- |
+| `id`       | `string`   | Unique instance ID (auto-generated)                                        |
+| `name`     | `string`   | Blade registration name                                                    |
+| `url`      | `string?`  | URL segment for address bar sync                                           |
+| `param`    | `unknown`  | Parameter passed when opening (e.g., entity ID)                            |
+| `query`    | `Record?`  | Query parameters                                                           |
+| `options`  | `unknown`  | Arbitrary options passed to the blade                                      |
+| `parentId` | `string?`  | ID of the parent blade                                                     |
+| `visible`  | `boolean`  | Whether the blade is rendered (false when covered via `coverCurrentBlade`) |
+| `error`    | `unknown?` | Error state for the error banner                                           |
+| `title`    | `string?`  | Dynamic title override                                                     |
 
 ## Tips
 

package/runtime/knowledge/docs/core/composables/bladeContext/index.docs.md

@@ -15,7 +15,7 @@ The pattern follows a "define once, inject anywhere" approach: the blade compone
 
 ```typescript
 // In a blade's <script setup>
-import { defineBladeContext, injectBladeContext } from '@vc-shell/framework';
+import { defineBladeContext, injectBladeContext } from "@vc-shell/framework";
 
 // Provide context — refs/computeds are auto-unwrapped for consumers
 defineBladeContext({ item, disabled, loading });
@@ -26,7 +26,7 @@ defineBladeContext(computed(() => ({ id: item.value?.id })));
 
 ```typescript
 // In a widget or nested component
-import { injectBladeContext } from '@vc-shell/framework';
+import { injectBladeContext } from "@vc-shell/framework";
 
 const ctx = injectBladeContext();
 // Refs are already unwrapped — access values directly, no .value needed
@@ -38,9 +38,9 @@ const item = computed(() => ctx.value.item as { id: string; name: string });
 
 ### defineBladeContext
 
-| Parameter | Type | Required | Description |
-|---|---|---|---|
-| `data` | `MaybeRefOrGetter<Record<string, unknown>>` | Yes | Plain object, ref, or getter to expose |
+| Parameter | Type                                        | Required | Description                            |
+| --------- | ------------------------------------------- | -------- | -------------------------------------- |
+| `data`    | `MaybeRefOrGetter<Record<string, unknown>>` | Yes      | Plain object, ref, or getter to expose |
 
 Returns `void`. Must be called in the blade's `<script setup>`.
 
@@ -82,11 +82,13 @@ const customer = ref({ id: "cust-1", name: "Acme Corp" });
 const loading = ref(false);
 
 // Expose the customer data to all descendant widgets
-defineBladeContext(computed(() => ({
-  id: customer.value?.id,
-  name: customer.value?.name,
-  loading: loading.value,
-})));
+defineBladeContext(
+  computed(() => ({
+    id: customer.value?.id,
+    name: customer.value?.name,
+    loading: loading.value,
+  })),
+);
 </script>
 ```
 

package/runtime/knowledge/docs/core/composables/useApiClient/useApiClient.docs.md

@@ -187,10 +187,7 @@ const { action: loadDashboardData } = useAsync(async () => {
   const orderClient = await getOrderClient();
   const customerClient = await getCustomerClient();
 
-  const [orders, customers] = await Promise.all([
-    orderClient.searchOrders({ take: 5, sort: "createdDate:DESC" }),
-    customerClient.searchCustomers({ take: 5, sort: "createdDate:DESC" }),
-  ]);
+  const [orders, customers] = await Promise.all([orderClient.searchOrders({ take: 5, sort: "createdDate:DESC" }), customerClient.searchCustomers({ take: 5, sort: "createdDate:DESC" })]);
 
   recentOrders.value = orders.results ?? [];
   recentCustomers.value = customers.results ?? [];
@@ -263,25 +260,25 @@ const response = await fetch("https://api.weather.com/forecast");
 
 ### Parameters
 
-| Parameter | Type | Required | Description |
-|-----------|------|----------|-------------|
-| `c` | `new (baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) => ApiClient` | Yes | API client constructor class. Must implement `IAuthApiBase`. |
+| Parameter | Type                                                                                                             | Required | Description                                                  |
+| --------- | ---------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------ |
+| `c`       | `new (baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) => ApiClient` | Yes      | API client constructor class. Must implement `IAuthApiBase`. |
 
 ### Returns: `UseApiClientReturn<ApiClient>`
 
-| Property | Type | Description |
-|----------|------|-------------|
+| Property       | Type                       | Description                                                            |
+| -------------- | -------------------------- | ---------------------------------------------------------------------- |
 | `getApiClient` | `() => Promise<ApiClient>` | Async factory that returns a configured, authenticated client instance |
 
 ### IAuthApiBase Interface
 
 All generated API client classes implement this interface:
 
-| Property / Method | Type | Description |
-|-------------------|------|-------------|
-| `authToken` | `string` | Current authentication token |
-| `setAuthToken` | `(token: string) => void` | Sets the authentication token |
-| `getBaseUrl` | `(defaultUrl: string, baseUrl: string) => string` | Resolves the API base URL |
+| Property / Method | Type                                              | Description                   |
+| ----------------- | ------------------------------------------------- | ----------------------------- |
+| `authToken`       | `string`                                          | Current authentication token  |
+| `setAuthToken`    | `(token: string) => void`                         | Sets the authentication token |
+| `getBaseUrl`      | `(defaultUrl: string, baseUrl: string) => string` | Resolves the API base URL     |
 
 ### Generated Client Classes
 

package/runtime/knowledge/docs/core/composables/useAppBarMobileButtons/useAppBarMobileButtons.docs.md

@@ -13,15 +13,15 @@ Manages custom action buttons in the mobile app bar. Uses provide/inject to shar
 
 ```vue
 <script setup lang="ts">
-import { useAppBarMobileButtons } from '@vc-shell/framework';
-import { onUnmounted, computed, ref } from 'vue';
+import { useAppBarMobileButtons } from "@vc-shell/framework";
+import { onUnmounted, computed, ref } from "vue";
 
 const { register, unregister } = useAppBarMobileButtons();
 const unreadCount = ref(3);
 
 register({
-  id: 'notifications-btn',
-  icon: 'fas fa-bell',
+  id: "notifications-btn",
+  icon: "fas fa-bell",
   onClick: () => openNotificationsPanel(),
   order: 10,
   badge: computed(() => unreadCount.value > 0),
@@ -29,7 +29,7 @@ register({
 });
 
 // Always clean up when the component is destroyed
-onUnmounted(() => unregister('notifications-btn'));
+onUnmounted(() => unregister("notifications-btn"));
 </script>
 ```
 
@@ -37,27 +37,27 @@ onUnmounted(() => unregister('notifications-btn'));
 
 ### Returns
 
-| Property | Type | Description |
-|---|---|---|
-| `registeredButtons` | `ComputedRef<AppBarButtonContent[]>` | All registered buttons (unfiltered, unsorted). Useful for debugging. |
-| `register` | `(button: AppBarButtonContent) => void` | Add or update a button by `id`. If a button with the same ID already exists, it is replaced. |
-| `unregister` | `(buttonId: string) => void` | Remove a button by `id`. No-op if the ID does not exist. |
-| `getButton` | `(buttonId: string) => AppBarButtonContent \| undefined` | Look up a single button by ID. |
-| `getButtons` | `ComputedRef<AppBarButtonContent[]>` | Visible buttons sorted by `order` (ascending). Filters out buttons where `isVisible` is `false`. |
+| Property            | Type                                                     | Description                                                                                      |
+| ------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| `registeredButtons` | `ComputedRef<AppBarButtonContent[]>`                     | All registered buttons (unfiltered, unsorted). Useful for debugging.                             |
+| `register`          | `(button: AppBarButtonContent) => void`                  | Add or update a button by `id`. If a button with the same ID already exists, it is replaced.     |
+| `unregister`        | `(buttonId: string) => void`                             | Remove a button by `id`. No-op if the ID does not exist.                                         |
+| `getButton`         | `(buttonId: string) => AppBarButtonContent \| undefined` | Look up a single button by ID.                                                                   |
+| `getButtons`        | `ComputedRef<AppBarButtonContent[]>`                     | Visible buttons sorted by `order` (ascending). Filters out buttons where `isVisible` is `false`. |
 
 ### AppBarButtonContent
 
-| Field | Type | Required | Description |
-|---|---|---|---|
-| `id` | `string` | Yes | Unique identifier. Used for register/unregister/lookup. |
-| `icon` | `Component \| string` | No | Icon component or CSS class string (e.g., `'fas fa-bell'`). |
-| `component` | `Component` | No | Custom Vue component to render instead of a default icon button. |
-| `props` | `Record<string, unknown>` | No | Props passed to the custom `component`. |
-| `onClick` | `() => void` | No | Click handler for the default button rendering. |
-| `onClose` | `() => void` | No | Close/dismiss handler (e.g., for popover-style buttons). |
-| `order` | `number` | No | Sort priority. Lower values appear first. Defaults to 0 if omitted. |
-| `isVisible` | `MaybeRef<boolean>` | No | Reactive visibility toggle. When `false`, the button is excluded from `getButtons`. Defaults to `true`. |
-| `badge` | `MaybeRef<boolean>` | No | Show a small badge indicator on the button (e.g., for unread notifications). |
+| Field       | Type                      | Required | Description                                                                                             |
+| ----------- | ------------------------- | -------- | ------------------------------------------------------------------------------------------------------- |
+| `id`        | `string`                  | Yes      | Unique identifier. Used for register/unregister/lookup.                                                 |
+| `icon`      | `Component \| string`     | No       | Icon component or CSS class string (e.g., `'fas fa-bell'`).                                             |
+| `component` | `Component`               | No       | Custom Vue component to render instead of a default icon button.                                        |
+| `props`     | `Record<string, unknown>` | No       | Props passed to the custom `component`.                                                                 |
+| `onClick`   | `() => void`              | No       | Click handler for the default button rendering.                                                         |
+| `onClose`   | `() => void`              | No       | Close/dismiss handler (e.g., for popover-style buttons).                                                |
+| `order`     | `number`                  | No       | Sort priority. Lower values appear first. Defaults to 0 if omitted.                                     |
+| `isVisible` | `MaybeRef<boolean>`       | No       | Reactive visibility toggle. When `false`, the button is excluded from `getButtons`. Defaults to `true`. |
+| `badge`     | `MaybeRef<boolean>`       | No       | Show a small badge indicator on the button (e.g., for unread notifications).                            |
 
 ## Setup
 
@@ -65,7 +65,7 @@ onUnmounted(() => unregister('notifications-btn'));
 
 ```typescript
 // Inside VcApp.vue setup
-import { provideAppBarMobileButtonsService } from '@vc-shell/framework';
+import { provideAppBarMobileButtonsService } from "@vc-shell/framework";
 
 provideAppBarMobileButtonsService();
 ```
@@ -74,15 +74,15 @@ provideAppBarMobileButtonsService();
 
 ```vue
 <script setup lang="ts">
-import { useAppBarMobileButtons } from '@vc-shell/framework';
-import { ref, computed, onUnmounted } from 'vue';
+import { useAppBarMobileButtons } from "@vc-shell/framework";
+import { ref, computed, onUnmounted } from "vue";
 
 const { register, unregister } = useAppBarMobileButtons();
 const isFilterActive = ref(false);
 
 register({
-  id: 'product-list-filter',
-  icon: computed(() => isFilterActive.value ? 'fas fa-filter' : 'far fa-filter'),
+  id: "product-list-filter",
+  icon: computed(() => (isFilterActive.value ? "fas fa-filter" : "far fa-filter")),
   onClick: () => {
     isFilterActive.value = !isFilterActive.value;
     // Open or close the filter panel
@@ -91,7 +91,7 @@ register({
   badge: isFilterActive,
 });
 
-onUnmounted(() => unregister('product-list-filter'));
+onUnmounted(() => unregister("product-list-filter"));
 </script>
 ```
 
@@ -101,20 +101,20 @@ If you need more than an icon and a click handler (e.g., a dropdown or popover),
 
 ```vue
 <script setup lang="ts">
-import { useAppBarMobileButtons } from '@vc-shell/framework';
-import { onUnmounted, markRaw } from 'vue';
-import LanguageSwitcher from './LanguageSwitcher.vue';
+import { useAppBarMobileButtons } from "@vc-shell/framework";
+import { onUnmounted, markRaw } from "vue";
+import LanguageSwitcher from "./LanguageSwitcher.vue";
 
 const { register, unregister } = useAppBarMobileButtons();
 
 register({
-  id: 'language-switcher',
+  id: "language-switcher",
   component: markRaw(LanguageSwitcher),
-  props: { position: 'bottom-right' },
+  props: { position: "bottom-right" },
   order: 50,
 });
 
-onUnmounted(() => unregister('language-switcher'));
+onUnmounted(() => unregister("language-switcher"));
 </script>
 ```