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

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

@@ -11,7 +11,7 @@ Aggregates multiple reactive boolean loading refs into a single computed that is
 ## Quick Start
 
 ```typescript
-import { useLoading } from '@vc-shell/framework';
+import { useLoading } from "@vc-shell/framework";
 
 const combinedLoading = useLoading(loadingA, loadingB, loadingC);
 // combinedLoading.value === true when ANY of the three is true
@@ -21,14 +21,14 @@ const combinedLoading = useLoading(loadingA, loadingB, loadingC);
 
 ### Parameters
 
-| Parameter | Type | Required | Description |
-|-----------|------|----------|-------------|
-| `...args` | `Readonly<Ref<boolean>>[]` | Yes | One or more reactive boolean refs to aggregate. Accepts `Ref<boolean>`, `ComputedRef<boolean>`, or any `Readonly<Ref<boolean>>`. |
+| Parameter | Type                       | Required | Description                                                                                                                      |
+| --------- | -------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `...args` | `Readonly<Ref<boolean>>[]` | Yes      | One or more reactive boolean refs to aggregate. Accepts `Ref<boolean>`, `ComputedRef<boolean>`, or any `Readonly<Ref<boolean>>`. |
 
 ### Returns
 
-| Type | Description |
-|------|-------------|
+| Type                   | Description                                                                                            |
+| ---------------------- | ------------------------------------------------------------------------------------------------------ |
 | `ComputedRef<boolean>` | `true` if any of the input refs is `true`, `false` otherwise. Re-evaluates whenever any input changes. |
 
 ## How It Works
@@ -36,7 +36,7 @@ const combinedLoading = useLoading(loadingA, loadingB, loadingC);
 The implementation is a single `computed` that calls `Array.some()` on the input refs:
 
 ```typescript
-computed(() => args.some((item) => item.value))
+computed(() => args.some((item) => item.value));
 ```
 
 Because `computed` tracks all `.value` accesses, Vue knows to re-evaluate whenever any of the input refs changes. The `some()` short-circuits on the first `true`, so it is efficient even with many inputs.
@@ -45,7 +45,10 @@ Because `computed` tracks all `.value` accesses, Vue knows to re-evaluate whenev
 
 ```vue
 <template>
-  <VcBlade title="Order Details" :loading="isLoading">
+  <VcBlade
+    title="Order Details"
+    :loading="isLoading"
+  >
     <div class="tw-grid tw-grid-cols-2 tw-gap-4">
       <VcCard title="Order Info">
         <p>{{ order?.number }}</p>
@@ -54,15 +57,18 @@ Because `computed` tracks all `.value` accesses, Vue knows to re-evaluate whenev
         <p>{{ customer?.name }}</p>
       </VcCard>
     </div>
-    <VcDataTable :items="lineItems" :columns="columns" />
+    <VcDataTable
+      :items="lineItems"
+      :columns="columns"
+    />
   </VcBlade>
 </template>
 
 <script setup lang="ts">
-import { useLoading } from '@vc-shell/framework';
-import { useOrder } from '../composables/useOrder';
-import { useCustomer } from '../composables/useCustomer';
-import { useLineItems } from '../composables/useLineItems';
+import { useLoading } from "@vc-shell/framework";
+import { useOrder } from "../composables/useOrder";
+import { useCustomer } from "../composables/useCustomer";
+import { useLineItems } from "../composables/useLineItems";
 
 const { order, loading: orderLoading } = useOrder(props.orderId);
 const { customer, loading: customerLoading } = useCustomer(props.customerId);
@@ -76,8 +82,8 @@ const isLoading = useLoading(orderLoading, customerLoading, lineItemsLoading);
 ## Recipe: Combining with useAsync
 
 ```typescript
-import { useLoading } from '@vc-shell/framework';
-import { useAsync } from '@vc-shell/framework';
+import { useLoading } from "@vc-shell/framework";
+import { useAsync } from "@vc-shell/framework";
 
 const { loading: saveLoading, action: save } = useAsync(saveItem);
 const { loading: deleteLoading, action: remove } = useAsync(deleteItem);
@@ -92,8 +98,8 @@ const isBusy = useLoading(saveLoading, deleteLoading, validateLoading);
 If you have a variable number of loading sources (e.g., loaded from a plugin system), collect them into an array and spread:
 
 ```typescript
-import { useLoading } from '@vc-shell/framework';
-import { Ref } from 'vue';
+import { useLoading } from "@vc-shell/framework";
+import { Ref } from "vue";
 
 const loadingRefs: Ref<boolean>[] = [];
 

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

@@ -11,7 +11,7 @@ Manages the sidebar menu expanded/collapsed and hover-expanded state with localS
 ## Basic Usage
 
 ```typescript
-import { useMenuExpanded } from '@vc-shell/framework';
+import { useMenuExpanded } from "@vc-shell/framework";
 
 const { isExpanded, toggleExpanded, isHoverExpanded, toggleHoverExpanded } = useMenuExpanded();
 
@@ -19,19 +19,19 @@ const { isExpanded, toggleExpanded, isHoverExpanded, toggleHoverExpanded } = use
 toggleExpanded();
 
 // Hover expand with 200ms delay
-toggleHoverExpanded(true);   // opens after delay
-toggleHoverExpanded(false);  // closes immediately
+toggleHoverExpanded(true); // opens after delay
+toggleHoverExpanded(false); // closes immediately
 ```
 
 ## API
 
 ### Returns
 
-| Property | Type | Description |
-|---|---|---|
-| `isExpanded` | `Ref<boolean>` | Pinned state, persisted via `useLocalStorage` |
-| `toggleExpanded` | `() => void` | Toggle the pinned state |
-| `isHoverExpanded` | `Ref<boolean>` | Temporary hover expansion (not persisted) |
+| Property              | Type                               | Description                                                      |
+| --------------------- | ---------------------------------- | ---------------------------------------------------------------- |
+| `isExpanded`          | `Ref<boolean>`                     | Pinned state, persisted via `useLocalStorage`                    |
+| `toggleExpanded`      | `() => void`                       | Toggle the pinned state                                          |
+| `isHoverExpanded`     | `Ref<boolean>`                     | Temporary hover expansion (not persisted)                        |
 | `toggleHoverExpanded` | `(shouldExpand?: boolean) => void` | Set hover state; opening has a 200ms delay, closing is immediate |
 
 ## Recipe: Custom Sidebar with Hover Expand
@@ -59,7 +59,7 @@ const isVisuallyExpanded = computed(() => isExpanded.value || isHoverExpanded.va
       <!-- menu items -->
     </nav>
     <button @click="toggleExpanded">
-      {{ isExpanded ? 'Unpin' : 'Pin' }}
+      {{ isExpanded ? "Unpin" : "Pin" }}
     </button>
   </aside>
 </template>
@@ -67,7 +67,7 @@ const isVisuallyExpanded = computed(() => isExpanded.value || isHoverExpanded.va
 
 ## Details
 
-- **Storage key scoping**: The key is scoped per application using the first URL path segment: `VC_APP_MENU_EXPANDED_{appName}`. For example, if the app is hosted at `/vendor-portal/`, the key is `VC_APP_MENU_EXPANDED_vendor-portal`. This allows multiple vc-shell apps on the same domain to maintain independent sidebar states.
+- **Storage key scoping**: The key is scoped per application using the first URL path segment: `VC_APP_MENU_EXPANDED_{appName}`. For example, if the app is hosted at `/my-app/`, the key is `VC_APP_MENU_EXPANDED_my-app`. This allows multiple vc-shell apps on the same domain to maintain independent sidebar states.
 - **Hover delay**: Opening uses a 200ms debounce to prevent accidental expansion when the cursor briefly passes over the sidebar. Closing is immediate to feel responsive.
 - **Cleanup**: Pending hover timeouts are cleaned up via `onScopeDispose` to prevent memory leaks when the composable's effect scope is destroyed.
 - **Default state**: The sidebar starts pinned open (`true`) on first visit, which is the most user-friendly default for new users.

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

@@ -277,63 +277,63 @@ Returns the injected `MenuService` instance. Throws `InjectionError` if the serv
 
 #### MenuService Interface
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `addMenuItem` | `(item: MenuItem) => void` | Add a menu item (deduplicates by identity) |
-| `removeMenuItem` | `(item: MenuItem) => void` | Remove a menu item |
-| `menuItems` | `Ref<MenuItem[]>` | Reactive array of all registered menu items (grouped and sorted) |
-| `menuBadges` | `Ref<Map<string, MenuItemBadgeConfig>>` | Reactive map of badge configs keyed by routeId or groupId |
+| Property         | Type                                    | Description                                                      |
+| ---------------- | --------------------------------------- | ---------------------------------------------------------------- |
+| `addMenuItem`    | `(item: MenuItem) => void`              | Add a menu item (deduplicates by identity)                       |
+| `removeMenuItem` | `(item: MenuItem) => void`              | Remove a menu item                                               |
+| `menuItems`      | `Ref<MenuItem[]>`                       | Reactive array of all registered menu items (grouped and sorted) |
+| `menuBadges`     | `Ref<Map<string, MenuItemBadgeConfig>>` | Reactive map of badge configs keyed by routeId or groupId        |
 
 ### Standalone Exports
 
-| Function | Description |
-|----------|-------------|
-| `addMenuItem(item)` | Pre-register a menu item before the service is initialized |
+| Function                         | Description                                                        |
+| -------------------------------- | ------------------------------------------------------------------ |
+| `addMenuItem(item)`              | Pre-register a menu item before the service is initialized         |
 | `removeRegisteredMenuItem(item)` | Remove a pre-registered item (works before and after service init) |
-| `setMenuBadge(id, config)` | Set a badge on a menu item by routeId or groupId |
-| `getMenuBadge(id)` | Get badge config for a menu item |
-| `removeMenuBadge(id)` | Remove a badge from a menu item |
-| `getMenuBadges()` | Get the reactive badge registry map |
-| `provideMenuService()` | Create and provide the service in a root component |
+| `setMenuBadge(id, config)`       | Set a badge on a menu item by routeId or groupId                   |
+| `getMenuBadge(id)`               | Get badge config for a menu item                                   |
+| `removeMenuBadge(id)`            | Remove a badge from a menu item                                    |
+| `getMenuBadges()`                | Get the reactive badge registry map                                |
+| `provideMenuService()`           | Create and provide the service in a root component                 |
 
 ### MenuItem Properties
 
-| Property | Type | Required | Description |
-|----------|------|----------|-------------|
-| `title` | `string` | Yes | Display text |
-| `icon` | `string` | Yes | Icon class (e.g., `"fas fa-shopping-cart"`) |
-| `priority` | `number` | Yes | Sort order (lower = higher in the list) |
-| `routeId` | `string` | No | Blade route name (also used as identity key) |
-| `url` | `string` | No | External URL |
-| `id` | `string \| number` | No | Explicit identity key |
-| `permissions` | `string \| string[]` | No | Required permissions for visibility |
-| `group` | `string` | No | Group name (deprecated, use `groupConfig`) |
-| `groupIcon` | `string` | No | Group icon (deprecated, use `groupConfig`) |
-| `groupConfig` | `object` | No | Group configuration: `{ id, title?, icon?, priority?, permissions?, badge? }` |
-| `inGroupPriority` | `number` | No | Sort order within a group (deprecated, use item's `priority`) |
-| `badge` | `MenuItemBadgeConfig` | No | Inline badge configuration |
-| `children` | `MenuItem[]` | No | Child items (populated automatically for groups) |
+| Property          | Type                  | Required | Description                                                                   |
+| ----------------- | --------------------- | -------- | ----------------------------------------------------------------------------- |
+| `title`           | `string`              | Yes      | Display text                                                                  |
+| `icon`            | `string`              | Yes      | Icon class (e.g., `"fas fa-shopping-cart"`)                                   |
+| `priority`        | `number`              | Yes      | Sort order (lower = higher in the list)                                       |
+| `routeId`         | `string`              | No       | Blade route name (also used as identity key)                                  |
+| `url`             | `string`              | No       | External URL                                                                  |
+| `id`              | `string \| number`    | No       | Explicit identity key                                                         |
+| `permissions`     | `string \| string[]`  | No       | Required permissions for visibility                                           |
+| `group`           | `string`              | No       | Group name (deprecated, use `groupConfig`)                                    |
+| `groupIcon`       | `string`              | No       | Group icon (deprecated, use `groupConfig`)                                    |
+| `groupConfig`     | `object`              | No       | Group configuration: `{ id, title?, icon?, priority?, permissions?, badge? }` |
+| `inGroupPriority` | `number`              | No       | Sort order within a group (deprecated, use item's `priority`)                 |
+| `badge`           | `MenuItemBadgeConfig` | No       | Inline badge configuration                                                    |
+| `children`        | `MenuItem[]`          | No       | Child items (populated automatically for groups)                              |
 
 ### MenuItemBadgeConfig
 
 Accepts a full object or shorthand values:
 
-| Form | Example | Description |
-|------|---------|-------------|
-| `number` | `5` | Numeric count |
-| `string` | `"New"` | Text label |
-| `Ref<number \| string>` | `ref(3)` | Reactive value |
-| `ComputedRef<number \| string>` | `computed(() => count.value)` | Computed value |
-| `() => number \| string` | `() => items.length` | Getter function |
-| `MenuItemBadge` | `{ content: 5, variant: "danger", isDot: false }` | Full config object |
+| Form                            | Example                                           | Description        |
+| ------------------------------- | ------------------------------------------------- | ------------------ |
+| `number`                        | `5`                                               | Numeric count      |
+| `string`                        | `"New"`                                           | Text label         |
+| `Ref<number \| string>`         | `ref(3)`                                          | Reactive value     |
+| `ComputedRef<number \| string>` | `computed(() => count.value)`                     | Computed value     |
+| `() => number \| string`        | `() => items.length`                              | Getter function    |
+| `MenuItemBadge`                 | `{ content: 5, variant: "danger", isDot: false }` | Full config object |
 
 #### MenuItemBadge Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `content` | `string \| number \| Ref \| ComputedRef \| Function` | -- | Badge content |
-| `variant` | `"primary" \| "success" \| "warning" \| "danger" \| "info" \| "secondary"` | `"primary"` | Color variant |
-| `isDot` | `boolean` | `false` | Show as dot indicator only (ignores content) |
+| Property  | Type                                                                       | Default     | Description                                  |
+| --------- | -------------------------------------------------------------------------- | ----------- | -------------------------------------------- |
+| `content` | `string \| number \| Ref \| ComputedRef \| Function`                       | --          | Badge content                                |
+| `variant` | `"primary" \| "success" \| "warning" \| "danger" \| "info" \| "secondary"` | `"primary"` | Color variant                                |
+| `isDot`   | `boolean`                                                                  | `false`     | Show as dot indicator only (ignores content) |
 
 ## Related
 

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

@@ -14,10 +14,10 @@ The composable maintains two copies of the data: the `pristineValue` (the clean
 ## Basic Usage
 
 ```typescript
-import { useModificationTracker } from '@vc-shell/framework';
+import { useModificationTracker } from "@vc-shell/framework";
 
 // With a static initial value
-const { currentValue, isModified, resetModificationState } = useModificationTracker({ name: '', price: 0 });
+const { currentValue, isModified, resetModificationState } = useModificationTracker({ name: "", price: 0 });
 
 // With a reactive source (e.g., data loaded from API)
 const { currentValue, isModified, resetModificationState } = useModificationTracker(apiData);
@@ -34,17 +34,17 @@ resetModificationState(); // currentValue becomes the new pristine baseline
 
 ### Parameters
 
-| Parameter | Type | Required | Description |
-|---|---|---|---|
-| `initialValueProp` | `T \| Ref<T>` | Yes | Initial value or reactive ref to track |
+| Parameter          | Type          | Required | Description                            |
+| ------------------ | ------------- | -------- | -------------------------------------- |
+| `initialValueProp` | `T \| Ref<T>` | Yes      | Initial value or reactive ref to track |
 
 ### Returns
 
-| Property | Type | Description |
-|---|---|---|
-| `currentValue` | `Ref<T>` | The working value (bind to v-model) |
-| `pristineValue` | `Ref<T>` | The "clean" baseline value |
-| `isModified` | `DeepReadonly<Ref<boolean>>` | `true` when `currentValue` differs from `pristineValue` |
+| Property                 | Type                                  | Description                                                |
+| ------------------------ | ------------------------------------- | ---------------------------------------------------------- |
+| `currentValue`           | `Ref<T>`                              | The working value (bind to v-model)                        |
+| `pristineValue`          | `Ref<T>`                              | The "clean" baseline value                                 |
+| `isModified`             | `DeepReadonly<Ref<boolean>>`          | `true` when `currentValue` differs from `pristineValue`    |
 | `resetModificationState` | `(newBaseline?: T \| Ref<T>) => void` | Reset modification tracking; optionally set a new baseline |
 
 ## Recipe: Blade with Save/Discard and Unsaved Changes Guard
@@ -81,8 +81,18 @@ function discard() {
     <input v-model.number="currentValue.price" />
 
     <div class="tw-flex tw-gap-2">
-      <button :disabled="!isModified" @click="save">Save</button>
-      <button :disabled="!isModified" @click="discard">Discard</button>
+      <button
+        :disabled="!isModified"
+        @click="save"
+      >
+        Save
+      </button>
+      <button
+        :disabled="!isModified"
+        @click="discard"
+      >
+        Discard
+      </button>
     </div>
   </VcBlade>
 </template>

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

@@ -13,21 +13,14 @@ Provides access to the push-notification system: reading notification history, f
 ## Quick Start
 
 ```typescript
-import { useNotifications } from '@vc-shell/framework';
+import { useNotifications } from "@vc-shell/framework";
 
 // Subscribe to specific notification types
-const {
-  notifications,
-  moduleNotifications,
-  loadFromHistory,
-  markAsRead,
-  markAllAsRead,
-  setNotificationHandler,
-} = useNotifications('OrderStatusChanged');
+const { notifications, moduleNotifications, loadFromHistory, markAsRead, markAllAsRead, setNotificationHandler } = useNotifications("OrderStatusChanged");
 
 // Register a handler for real-time notifications
 setNotificationHandler((notification) => {
-  console.log('Order status changed:', notification);
+  console.log("Order status changed:", notification);
   refreshOrderList();
 });
 
@@ -39,20 +32,20 @@ onMounted(() => loadFromHistory(50));
 
 ### Parameters
 
-| Parameter | Type | Required | Description |
-|-----------|------|----------|-------------|
-| `notifyType` | `string \| string[]` | No | Notification type(s) to subscribe to (e.g., `'OrderStatusChanged'` or `['OrderCreated', 'OrderCancelled']`). Omit to receive all notifications. |
+| Parameter    | Type                 | Required | Description                                                                                                                                     |
+| ------------ | -------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `notifyType` | `string \| string[]` | No       | Notification type(s) to subscribe to (e.g., `'OrderStatusChanged'` or `['OrderCreated', 'OrderCancelled']`). Omit to receive all notifications. |
 
 ### Returns
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `notifications` | `ComputedRef<PushNotification[]>` | All notification history, sorted newest first. Includes both read and unread. |
-| `moduleNotifications` | `ComputedRef<PushNotification[]>` | New real-time notifications matching the subscribed types. Only includes items where `isNew` is `true`. |
-| `loadFromHistory` | `(take?: number) => Promise<void>` | Loads notification history from the server. `take` controls how many to fetch. |
-| `addNotification` | `(message: PushNotification) => void` | Manually ingests a notification into the store (e.g., for testing or synthetic events). |
-| `markAsRead` | `(message: PushNotification) => void` | Marks a single notification as read. |
-| `markAllAsRead` | `() => void` | Marks all notifications as read. |
+| Property                 | Type                                                          | Description                                                                                                                    |
+| ------------------------ | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `notifications`          | `ComputedRef<PushNotification[]>`                             | All notification history, sorted newest first. Includes both read and unread.                                                  |
+| `moduleNotifications`    | `ComputedRef<PushNotification[]>`                             | New real-time notifications matching the subscribed types. Only includes items where `isNew` is `true`.                        |
+| `loadFromHistory`        | `(take?: number) => Promise<void>`                            | Loads notification history from the server. `take` controls how many to fetch.                                                 |
+| `addNotification`        | `(message: PushNotification) => void`                         | Manually ingests a notification into the store (e.g., for testing or synthetic events).                                        |
+| `markAsRead`             | `(message: PushNotification) => void`                         | Marks a single notification as read.                                                                                           |
+| `markAllAsRead`          | `() => void`                                                  | Marks all notifications as read.                                                                                               |
 | `setNotificationHandler` | `(handler: (notification: PushNotification) => void) => void` | Registers a callback for incoming real-time notifications matching subscribed types. Only one handler per composable instance. |
 
 ## How It Works
@@ -71,21 +64,14 @@ onMounted(() => loadFromHistory(50));
 
 ```vue
 <script setup lang="ts">
-import { useNotifications } from '@vc-shell/framework';
-import { onMounted } from 'vue';
-
-const {
-  notifications,
-  moduleNotifications,
-  loadFromHistory,
-  markAsRead,
-  markAllAsRead,
-  setNotificationHandler,
-} = useNotifications(['OrderCreated', 'OrderStatusChanged', 'OrderCancelled']);
+import { useNotifications } from "@vc-shell/framework";
+import { onMounted } from "vue";
+
+const { notifications, moduleNotifications, loadFromHistory, markAsRead, markAllAsRead, setNotificationHandler } = useNotifications(["OrderCreated", "OrderStatusChanged", "OrderCancelled"]);
 
 // Play a sound on new notifications
 setNotificationHandler((notification) => {
-  const audio = new Audio('/sounds/notification.mp3');
+  const audio = new Audio("/sounds/notification.mp3");
   audio.play().catch(() => {});
 });
 
@@ -95,15 +81,21 @@ onMounted(() => loadFromHistory(100));
 <template>
   <div class="notification-panel">
     <div class="tw-flex tw-justify-between tw-items-center tw-p-2">
-      <span class="tw-font-semibold">
-        Notifications ({{ moduleNotifications.length }} new)
-      </span>
-      <VcButton size="sm" variant="ghost" @click="markAllAsRead">
+      <span class="tw-font-semibold"> Notifications ({{ moduleNotifications.length }} new) </span>
+      <VcButton
+        size="sm"
+        variant="ghost"
+        @click="markAllAsRead"
+      >
         Mark all read
       </VcButton>
     </div>
 
-    <div v-for="item in notifications" :key="item.id" class="tw-p-2 tw-border-b">
+    <div
+      v-for="item in notifications"
+      :key="item.id"
+      class="tw-p-2 tw-border-b"
+    >
       <div class="tw-flex tw-justify-between">
         <span :class="{ 'tw-font-bold': item.isNew }">
           {{ item.title }}
@@ -127,10 +119,10 @@ onMounted(() => loadFromHistory(100));
 
 ```vue
 <script setup lang="ts">
-import { useNotifications } from '@vc-shell/framework';
-import { onMounted } from 'vue';
+import { useNotifications } from "@vc-shell/framework";
+import { onMounted } from "vue";
 
-const { setNotificationHandler } = useNotifications('InventoryChanged');
+const { setNotificationHandler } = useNotifications("InventoryChanged");
 
 const items = ref<InventoryItem[]>([]);
 

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

@@ -26,21 +26,21 @@ if (hasAccess("order:update")) {
 
 The `hasAccess` function evaluates permissions from the current user object (loaded via `useUserManagement`). The behavior depends on the input type and the user's role.
 
-| Input | Result |
-|-------|--------|
-| `undefined` | `true` -- no permission required, everyone has access |
-| `"order:read"` | `true` if the user has this exact permission string |
+| Input                            | Result                                                              |
+| -------------------------------- | ------------------------------------------------------------------- |
+| `undefined`                      | `true` -- no permission required, everyone has access               |
+| `"order:read"`                   | `true` if the user has this exact permission string                 |
 | `["order:read", "order:update"]` | `true` if the user has **any** of the listed permissions (OR logic) |
-| Any value, administrator user | Always `true` -- administrators bypass all checks |
+| Any value, administrator user    | Always `true` -- administrators bypass all checks                   |
 
 Permission strings follow the VirtoCommerce platform format: `"module:action"`. Common examples:
 
-| Permission | Meaning |
-|------------|---------|
-| `"order:read"` | View orders |
-| `"order:update"` | Edit orders |
-| `"order:delete"` | Delete orders |
-| `"catalog:create"` | Create catalog items |
+| Permission          | Meaning                  |
+| ------------------- | ------------------------ |
+| `"order:read"`      | View orders              |
+| `"order:update"`    | Edit orders              |
+| `"order:delete"`    | Delete orders            |
+| `"catalog:create"`  | Create catalog items     |
 | `"customer:manage"` | Full customer management |
 
 ## Conditional Rendering in Templates
@@ -255,15 +255,15 @@ if (hasAccess("order:delete")) {
 
 ### Returns: `UsePermissionsReturn`
 
-| Property | Type | Description |
-|----------|------|-------------|
+| Property    | Type                                                        | Description                                              |
+| ----------- | ----------------------------------------------------------- | -------------------------------------------------------- |
 | `hasAccess` | `(permissions: string \| string[] \| undefined) => boolean` | Check if the current user has the required permission(s) |
 
 ### hasAccess Parameters
 
-| Parameter | Type | Required | Description |
-|-----------|------|----------|-------------|
-| `permissions` | `string \| string[] \| undefined` | No | Permission string, array of strings (OR logic), or `undefined` (always true) |
+| Parameter     | Type                              | Required | Description                                                                  |
+| ------------- | --------------------------------- | -------- | ---------------------------------------------------------------------------- |
+| `permissions` | `string \| string[] \| undefined` | No       | Permission string, array of strings (OR logic), or `undefined` (always true) |
 
 ### Internal Behavior
 

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

@@ -18,9 +18,7 @@ import { usePopup } from "@vc-shell/framework";
 const { showConfirmation, showError } = usePopup();
 
 async function deleteProduct(id: string) {
-  const confirmed = await showConfirmation(
-    "Are you sure you want to delete this product?"
-  );
+  const confirmed = await showConfirmation("Are you sure you want to delete this product?");
   if (!confirmed) return;
 
   try {
@@ -33,7 +31,10 @@ async function deleteProduct(id: string) {
 
 <template>
   <VcBlade title="Product">
-    <VcButton variant="danger" @click="deleteProduct(product.id)">
+    <VcButton
+      variant="danger"
+      @click="deleteProduct(product.id)"
+    >
       Delete
     </VcButton>
   </VcBlade>
@@ -44,28 +45,28 @@ async function deleteProduct(id: string) {
 
 ### Parameters
 
-| Parameter | Type | Required | Description |
-|---|---|---|---|
-| `options` | `MaybeRef<UsePopupProps<T>>` | No | Configuration for a custom popup component. Omit for built-in dialogs only. |
+| Parameter | Type                         | Required | Description                                                                 |
+| --------- | ---------------------------- | -------- | --------------------------------------------------------------------------- |
+| `options` | `MaybeRef<UsePopupProps<T>>` | No       | Configuration for a custom popup component. Omit for built-in dialogs only. |
 
 #### `UsePopupProps<T>`
 
-| Field | Type | Required | Description |
-|---|---|---|---|
-| `component` | `ComponentPublicInstanceConstructor` | Yes | The popup component to render |
-| `props` | `RawProps<T>` | No | Props to pass to the component (typed from the component's `defineProps`) |
-| `emits` | `RawEmits<T>` | No | Event handlers (typed from the component's `defineEmits`) |
-| `slots` | `Record<string, string \| Component \| Slot>` | No | Named slots — strings render as text, components render as VNodes |
+| Field       | Type                                          | Required | Description                                                               |
+| ----------- | --------------------------------------------- | -------- | ------------------------------------------------------------------------- |
+| `component` | `ComponentPublicInstanceConstructor`          | Yes      | The popup component to render                                             |
+| `props`     | `RawProps<T>`                                 | No       | Props to pass to the component (typed from the component's `defineProps`) |
+| `emits`     | `RawEmits<T>`                                 | No       | Event handlers (typed from the component's `defineEmits`)                 |
+| `slots`     | `Record<string, string \| Component \| Slot>` | No       | Named slots — strings render as text, components render as VNodes         |
 
 ### Returns (`IUsePopup`)
 
-| Method | Signature | Description |
-|---|---|---|
-| `open` | `() => void` | Push the popup onto the stack and render it |
-| `close` | `() => void` | Remove the popup from the stack |
+| Method             | Signature                                              | Description                                                                                         |
+| ------------------ | ------------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
+| `open`             | `() => void`                                           | Push the popup onto the stack and render it                                                         |
+| `close`            | `() => void`                                           | Remove the popup from the stack                                                                     |
 | `showConfirmation` | `(message: string \| Ref<string>) => Promise<boolean>` | Warning dialog with Confirm/Cancel buttons. Resolves `true` on confirm, `false` on cancel or close. |
-| `showError` | `(message: string \| Ref<string>) => void` | Error-styled popup with a close button |
-| `showInfo` | `(message: string \| Ref<string>) => void` | Info-styled popup with a close button |
+| `showError`        | `(message: string \| Ref<string>) => void`             | Error-styled popup with a close button                                                              |
+| `showInfo`         | `(message: string \| Ref<string>) => void`             | Info-styled popup with a close button                                                               |
 
 ## How It Works
 
@@ -86,9 +87,7 @@ const { showConfirmation, showError } = usePopup();
 const { closeSelf } = useBlade();
 
 async function deleteOrder(id: string) {
-  const confirmed = await showConfirmation(
-    "Are you sure you want to delete this order? This action cannot be undone."
-  );
+  const confirmed = await showConfirmation("Are you sure you want to delete this order? This action cannot be undone.");
   if (!confirmed) return;
 
   try {
@@ -139,14 +138,20 @@ const { open, close } = usePopup(
   computed(() => ({
     component: ConfirmPopup,
     props: { message: `Delete ${selectedCount.value} items?` },
-    emits: { onConfirm: () => { performDelete(); close(); } },
-  }))
+    emits: {
+      onConfirm: () => {
+        performDelete();
+        close();
+      },
+    },
+  })),
 );
 ```
 
 ## Common Mistakes
 
 **Wrong: not awaiting showConfirmation**
+
 ```ts
 // The delete runs immediately — confirmation is ignored
 showConfirmation("Delete?");
@@ -154,6 +159,7 @@ await api.deleteProduct(id); // runs before user clicks!
 ```
 
 **Correct: await the result**
+
 ```ts
 const confirmed = await showConfirmation("Delete?");
 if (!confirmed) return;
@@ -163,6 +169,7 @@ await api.deleteProduct(id);
 ---
 
 **Wrong: nesting many popups**
+
 ```ts
 // 3+ deep popup stacks confuse users
 const a = await showConfirmation("Step 1?");
@@ -175,6 +182,7 @@ if (a) {
 ```
 
 **Correct: use a blade for multi-step workflows**
+
 ```ts
 // Complex flows belong in blades, not popups
 openBlade({ name: "WizardBlade", options: { step: 1 } });