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

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/usePlatformLocaleSync/usePlatformLocaleSync.docs.md

@@ -0,0 +1,28 @@
+# usePlatformLocaleSync
+
+One-way reactive bridge from the VirtoCommerce platform's locale storage key (`NG_TRANSLATE_LANG_KEY`, set by AngularJS + angular-translate) to the shell's language service.
+
+Call this composable only when the shell runs embedded inside the platform — `useShellBootstrap` invokes it automatically when `options.isEmbedded === true`. In standalone mode the shell owns its own locale via `VC_LANGUAGE_SETTINGS`, and this composable should not be used.
+
+## When to Use
+
+- Never call directly from feature code. This is a framework-internal sync primitive.
+- It is invoked once per `VcApp` mount from `useShellBootstrap`.
+
+## Behaviour
+
+- Reads `localStorage["NG_TRANSLATE_LANG_KEY"]` via VueUse's `useLocalStorage`, which subscribes to `storage` events for cross-tab reactivity.
+- On setup, if the value is non-empty, calls `LanguageService.setLocale(value)`. `setLocale` normalises the value (e.g. `en-US` → `en-us`), falls back to `en` for unsupported locales, updates `vue-i18n`, reconfigures `vee-validate`, and persists to `VC_LANGUAGE_SETTINGS`.
+- On subsequent changes of the platform key, re-applies the value.
+- Skips empty strings (platform clearing the key does not blank the shell locale).
+- Skips values equal to `currentLocale` to avoid redundant re-configuration.
+
+## How It Works
+
+`useLocalStorage("NG_TRANSLATE_LANG_KEY", "")` returns a `Ref<string>` that VueUse keeps in sync with `localStorage` and the DOM `storage` event (which fires in tabs other than the writer). The composable applies the current ref value once synchronously and then registers a `watch` on it; any cross-tab mutation flows through the ref into `setLocale`.
+
+The watcher is bound to the active effect scope (typically `VcApp`'s setup). When `VcApp` unmounts, the watcher stops; `useLocalStorage` cleans up its own `storage` listener.
+
+## Relationship to `VC_LANGUAGE_SETTINGS`
+
+The sync is strictly one-directional. `setLocale` writes to `VC_LANGUAGE_SETTINGS` as a side effect, but this composable never writes to `NG_TRANSLATE_LANG_KEY`. In embedded mode the in-shell `LanguageSelector` is unreachable (it lives inside `UserDropdownButton`, which is hidden when `isEmbedded` is `true`), so there is no competing writer from the shell side.

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 } });

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

@@ -21,7 +21,10 @@ const { isMobile, isDesktop } = useResponsive();
 <template>
   <VcBlade title="Orders">
     <!-- Vue auto-unwraps refs from script setup — no .value needed -->
-    <div v-if="isDesktop" class="tw-flex tw-gap-4">
+    <div
+      v-if="isDesktop"
+      class="tw-flex tw-gap-4"
+    >
       <OrdersTable />
       <OrdersSummary />
     </div>
@@ -38,13 +41,13 @@ None. The composable reads breakpoint state from the framework's provide/inject
 
 ### Returns (`UseResponsiveReturn`)
 
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `isMobile` | `Ref<boolean>` | `false` | `true` when viewport width < 1024px |
-| `isDesktop` | `Ref<boolean>` | `true` | `true` when viewport width >= 1024px |
-| `isPhone` | `Ref<boolean>` | `false` | `true` when viewport width < 480px |
-| `isTablet` | `Ref<boolean>` | `false` | `true` when 480px <= viewport width < 1024px |
-| `isTouch` | `boolean` | `false` | `true` on touch-capable devices (not reactive — set once at app init) |
+| Property    | Type           | Default | Description                                                           |
+| ----------- | -------------- | ------- | --------------------------------------------------------------------- |
+| `isMobile`  | `Ref<boolean>` | `false` | `true` when viewport width < 1024px                                   |
+| `isDesktop` | `Ref<boolean>` | `true`  | `true` when viewport width >= 1024px                                  |
+| `isPhone`   | `Ref<boolean>` | `false` | `true` when viewport width < 480px                                    |
+| `isTablet`  | `Ref<boolean>` | `false` | `true` when 480px <= viewport width < 1024px                          |
+| `isTouch`   | `boolean`      | `false` | `true` on touch-capable devices (not reactive — set once at app init) |
 
 Breakpoint thresholds: phone < 480px, tablet 480–1023px, desktop >= 1024px. These match the framework's `setupBreakpoints()` configuration.
 
@@ -89,9 +92,23 @@ const { openBlade } = useBlade();
         mobile-role="title"
       />
       <!-- Extra columns visible only on desktop -->
-      <VcColumn id="sku" :title="t('SKU')" :sortable="true" />
-      <VcColumn id="price" :title="t('PRICE')" type="money" :sortable="true" />
-      <VcColumn id="createdDate" :title="t('DATE')" type="date-ago" :sortable="true" />
+      <VcColumn
+        id="sku"
+        :title="t('SKU')"
+        :sortable="true"
+      />
+      <VcColumn
+        id="price"
+        :title="t('PRICE')"
+        type="money"
+        :sortable="true"
+      />
+      <VcColumn
+        id="createdDate"
+        :title="t('DATE')"
+        type="date-ago"
+        :sortable="true"
+      />
     </VcDataTable>
   </VcBlade>
 </template>
@@ -120,6 +137,7 @@ const { isTouch } = useResponsive();
 ## Common Mistakes
 
 **Wrong: using `$isMobile.value` in template (deprecated)**
+
 ```vue
 <template>
   <!-- $isMobile is a global property — requires .value, no auto-unwrap -->
@@ -128,6 +146,7 @@ const { isTouch } = useResponsive();
 ```
 
 **Correct: using `useResponsive()` destructure**
+
 ```vue
 <script setup lang="ts">
 import { useResponsive } from "@vc-shell/framework";
@@ -142,6 +161,7 @@ const { isMobile } = useResponsive();
 ---
 
 **Wrong: using `inject(IsMobileKey)` directly**
+
 ```vue
 <script setup lang="ts">
 import { inject, ref } from "vue";
@@ -152,6 +172,7 @@ const isMobile = inject(IsMobileKey, ref(false));
 ```
 
 **Correct: using `useResponsive()`**
+
 ```vue
 <script setup lang="ts">
 import { useResponsive } from "@vc-shell/framework";