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

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

@@ -40,33 +40,43 @@ const toolbar = ref<IBladeToolbar[]>([
 
 ### Options
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `data` | `Ref<T>` | required | Reactive data object for the form |
-| `canSaveOverride` | `ComputedRef<boolean>` | — | Additional condition for canSave |
-| `autoBeforeClose` | `boolean \| ComputedRef<boolean>` | `true` | Close guard behavior |
-| `autoBeforeUnload` | `boolean` | `true` | Browser tab close guard |
-| `closeConfirmMessage` | `MaybeRefOrGetter<string>` | — | Custom unsaved changes message |
-| `onRevert` | `() => void \| Promise<void>` | — | Custom revert handler |
+| Option                | Type                              | Default  | Description                       |
+| --------------------- | --------------------------------- | -------- | --------------------------------- |
+| `data`                | `Ref<T>`                          | required | Reactive data object for the form |
+| `canSaveOverride`     | `ComputedRef<boolean>`            | —        | Additional condition for canSave  |
+| `autoBeforeClose`     | `boolean \| ComputedRef<boolean>` | `true`   | Close guard behavior              |
+| `autoBeforeUnload`    | `boolean`                         | `true`   | Browser tab close guard           |
+| `closeConfirmMessage` | `MaybeRefOrGetter<string>`        | —        | Custom unsaved changes message    |
+| `onRevert`            | `() => void \| Promise<void>`     | —        | Custom revert handler             |
 
 ### Returns
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `setBaseline()` | `() => void` | Snapshot current data as pristine. Call after load and after save |
-| `revert()` | `() => void \| Promise<void>` | Revert data to pristine (or call onRevert) |
-| `canSave` | `ComputedRef<boolean>` | `isReady && valid && modified && canSaveOverride` |
-| `isModified` | `ComputedRef<boolean>` | Data differs from pristine (false until setBaseline) |
-| `isReady` | `ComputedRef<boolean>` | setBaseline() called at least once |
-| `formMeta` | vee-validate meta | Form validation state |
-| `setFieldError` | function | Set field error programmatically |
-| `errorBag` | Ref | All field errors |
+| Property        | Type                          | Description                                                                                                               |
+| --------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `setBaseline()` | `() => void`                  | Snapshot current data as pristine. Call after load and after save                                                         |
+| `markReady()`   | `() => void`                  | Mark form ready without resetting pristine snapshot. Computes modification state from current data vs setup-time snapshot |
+| `revert()`      | `() => void \| Promise<void>` | Revert data to pristine (or call onRevert)                                                                                |
+| `canSave`       | `ComputedRef<boolean>`        | `isReady && valid && modified && canSaveOverride`                                                                         |
+| `isModified`    | `ComputedRef<boolean>`        | Data differs from pristine (false until setBaseline)                                                                      |
+| `isReady`       | `ComputedRef<boolean>`        | setBaseline() called at least once                                                                                        |
+| `formMeta`      | vee-validate meta             | Form validation state                                                                                                     |
+| `setFieldError` | function                      | Set field error programmatically                                                                                          |
+| `errorBag`      | Ref                           | All field errors                                                                                                          |
 
 ## Lifecycle
 
+### Standard (edit existing entity)
+
 ```
 Mount → Load data → setBaseline() → User edits → Save → setBaseline()
-                                                 └→ Cancel → revert()
+                                                  └→ Cancel → revert()
+```
+
+### Pre-filled (create from template)
+
+```
+Mount → Pre-fill data → markReady() → canSave = true immediately
+                                       └→ Save → setBaseline()
 ```
 
 ## VcBlade Integration
@@ -102,6 +112,52 @@ const form = useBladeForm({
 });
 ```
 
+## Advanced: Pre-filled Entity (markReady)
+
+When creating a new entity that is pre-populated from a parent (e.g. new offer from a product), the form should be immediately saveable. Use `markReady()` instead of `setBaseline()`:
+
+```ts
+const form = useBladeForm({ data: item });
+
+onMounted(async () => {
+  // Populate base fields
+  item.value.sku = generateSku();
+  await addEmptyInventory();
+
+  const hasTemplate = !param.value && !!options.value?.templateId;
+
+  if (hasTemplate) {
+    // Fill from template — data diverges from the setup-time snapshot
+    await fillFromTemplate(options.value.templateId);
+    // Mark ready: compares current data to setup-time snapshot → isModified = true
+    form.markReady();
+  } else {
+    // Standard load — current state becomes the pristine baseline
+    await loadItem({ id: param.value });
+    form.setBaseline();
+  }
+});
+```
+
+### setBaseline vs markReady
+
+|                                | `setBaseline()`                         | `markReady()`                                       |
+| ------------------------------ | --------------------------------------- | --------------------------------------------------- |
+| Sets `isReady`                 | yes                                     | yes                                                 |
+| Updates pristine snapshot      | yes (current data → pristine)           | no (keeps setup-time snapshot)                      |
+| `trackerIsModified` after call | `false`                                 | computed: `data !== pristineSnapshot`               |
+| Use case                       | Load / Save — "this is the clean state" | Pre-fill — "form is ready, changes are intentional" |
+
+### How it works
+
+At composable creation, `useBladeForm` takes a snapshot of `data` (the **setup-time snapshot**). When `markReady()` is called:
+
+1. `isReady` → `true` (gates `canSave` and the deep watcher)
+2. `trackerIsModified` = `!semanticEqual(data, setupTimeSnapshot)` — since data was mutated during `onMounted`, this evaluates to `true`
+3. Subsequent edits are tracked normally by the deep watcher
+
+After save, call `setBaseline()` as usual to capture the saved state as the new pristine snapshot.
+
 ## Constraints
 
 - **Must be called from component `setup()`** (or `<script setup>`). Do NOT call from shared data-composables.

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

@@ -32,22 +32,22 @@ const component = getBladeComponent("OrderDetails");
 
 ### Returns
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `registeredBladesMap` | `ComputedRef<ReadonlyMap<string, IBladeRegistrationData>>` | Reactive readonly map of all registered blades |
-| `getBlade` | `(name: string) => IBladeRegistrationData \| undefined` | Get registration data (component, route, permissions) by blade name |
-| `getBladeComponent` | `(name: string) => BladeInstanceConstructor \| undefined` | Get the Vue component for a blade name (falls back to global components) |
-| `getBladeByRoute` | `(route: string) => { name, data } \| undefined` | Reverse lookup: find a blade by its URL route segment (O(1)) |
+| Property              | Type                                                       | Description                                                              |
+| --------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------ |
+| `registeredBladesMap` | `ComputedRef<ReadonlyMap<string, IBladeRegistrationData>>` | Reactive readonly map of all registered blades                           |
+| `getBlade`            | `(name: string) => IBladeRegistrationData \| undefined`    | Get registration data (component, route, permissions) by blade name      |
+| `getBladeComponent`   | `(name: string) => BladeInstanceConstructor \| undefined`  | Get the Vue component for a blade name (falls back to global components) |
+| `getBladeByRoute`     | `(route: string) => { name, data } \| undefined`           | Reverse lookup: find a blade by its URL route segment (O(1))             |
 
 ### IBladeRegistrationData
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `component` | `BladeInstanceConstructor` | The Vue component for the blade |
-| `route` | `string?` | URL route segment (e.g. `"orders"`) |
-| `isWorkspace` | `boolean?` | Whether this blade opens as a workspace root |
-| `routable` | `boolean?` | Whether this blade supports URL-based navigation |
-| `permissions` | `string \| string[]?` | Required permissions to access this blade |
+| Property      | Type                       | Description                                      |
+| ------------- | -------------------------- | ------------------------------------------------ |
+| `component`   | `BladeInstanceConstructor` | The Vue component for the blade                  |
+| `route`       | `string?`                  | URL route segment (e.g. `"orders"`)              |
+| `isWorkspace` | `boolean?`                 | Whether this blade opens as a workspace root     |
+| `routable`    | `boolean?`                 | Whether this blade supports URL-based navigation |
+| `permissions` | `string \| string[]?`      | Required permissions to access this blade        |
 
 ## Common Patterns
 
@@ -91,8 +91,8 @@ function resolveDeepLink(routeSegment: string) {
 }
 
 // Works with or without leading slash
-resolveDeepLink("orders");   // { name: "OrdersList", data: { ... } }
-resolveDeepLink("/orders");  // Same result
+resolveDeepLink("orders"); // { name: "OrdersList", data: { ... } }
+resolveDeepLink("/orders"); // Same result
 ```
 
 ### Listing all registered blades

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

@@ -2,9 +2,9 @@
 
 Two composables for the widget system — one for the **blade side**, one for the **widget side**.
 
-| Composable | Called from | Purpose |
-|---|---|---|
-| `useBladeWidgets` | Blade component | Register headless widgets + get `refresh()` / `refreshAll()` |
+| Composable         | Called from               | Purpose                                                                |
+| ------------------ | ------------------------- | ---------------------------------------------------------------------- |
+| `useBladeWidgets`  | Blade component           | Register headless widgets + get `refresh()` / `refreshAll()`           |
 | `useWidgetTrigger` | External widget component | Register trigger callbacks (`onRefresh`, `onClick`) via provide/inject |
 
 Headless widgets are defined as plain configuration objects with reactive refs for dynamic values like badge counts and loading states. External component-based widgets use `useWidgetTrigger` to register their refresh callbacks so the hosting blade can trigger them.
@@ -18,25 +18,25 @@ Headless widgets are defined as plain configuration objects with reactive refs f
 ## Basic Usage
 
 ```typescript
-import { useBladeWidgets } from '@vc-shell/framework';
+import { useBladeWidgets } from "@vc-shell/framework";
 
 const { refreshAll } = useBladeWidgets([
   {
-    id: 'OffersWidget',
-    icon: 'lucide-tag',
-    title: 'OFFERS.TITLE',
-    badge: offersCount,
-    loading: offersLoading,
-    onClick: () => openBlade({ name: 'OffersList' }),
-    onRefresh: () => reloadOffers(),
+    id: "ChildListWidget",
+    icon: "lucide-tag",
+    title: "MODULE.WIDGETS.CHILD_LIST.TITLE",
+    badge: childCount,
+    loading: childLoading,
+    onClick: () => openBlade({ name: "ChildList" }),
+    onRefresh: () => reloadChildren(),
   },
   {
-    id: 'ReviewsWidget',
-    icon: 'lucide-star',
-    title: 'REVIEWS.TITLE',
-    badge: reviewsCount,
+    id: "NotesWidget",
+    icon: "lucide-star",
+    title: "MODULE.WIDGETS.NOTES.TITLE",
+    badge: notesCount,
     isVisible: computed(() => !!item.value?.id),
-    onClick: () => openBlade({ name: 'ReviewsList' }),
+    onClick: () => openBlade({ name: "NotesList" }),
   },
 ]);
 
@@ -49,30 +49,30 @@ refreshAll();
 
 ### Parameters
 
-| Parameter | Type | Required | Description |
-|---|---|---|---|
-| `widgets` | `HeadlessWidgetDeclaration[]` | Yes | Array of widget declarations |
+| Parameter | Type                          | Required | Description                  |
+| --------- | ----------------------------- | -------- | ---------------------------- |
+| `widgets` | `HeadlessWidgetDeclaration[]` | Yes      | Array of widget declarations |
 
 ### HeadlessWidgetDeclaration
 
-| Field | Type | Required | Description |
-|---|---|---|---|
-| `id` | `string` | Yes | Unique widget identifier |
-| `icon` | `string` | Yes | Icon name (e.g., `"lucide-tag"`) |
-| `title` | `string` | Yes | i18n key or display title |
-| `badge` | `Ref<number \| string>` | No | Badge counter value |
-| `loading` | `Ref<boolean>` | No | Show loading indicator |
-| `disabled` | `Ref<boolean> \| boolean` | No | Disable the widget |
-| `isVisible` | `ComputedRef<boolean> \| boolean` | No | Toggle visibility |
-| `onClick` | `() => void` | No | Action when widget is clicked |
-| `onRefresh` | `() => void \| Promise<void>` | No | Called by `refresh(id)` or `refreshAll()` |
+| Field       | Type                              | Required | Description                               |
+| ----------- | --------------------------------- | -------- | ----------------------------------------- |
+| `id`        | `string`                          | Yes      | Unique widget identifier                  |
+| `icon`      | `string`                          | Yes      | Icon name (e.g., `"lucide-tag"`)          |
+| `title`     | `string`                          | Yes      | i18n key or display title                 |
+| `badge`     | `Ref<number \| string>`           | No       | Badge counter value                       |
+| `loading`   | `Ref<boolean>`                    | No       | Show loading indicator                    |
+| `disabled`  | `Ref<boolean> \| boolean`         | No       | Disable the widget                        |
+| `isVisible` | `ComputedRef<boolean> \| boolean` | No       | Toggle visibility                         |
+| `onClick`   | `() => void`                      | No       | Action when widget is clicked             |
+| `onRefresh` | `() => void \| Promise<void>`     | No       | Called by `refresh(id)` or `refreshAll()` |
 
 ### Returns
 
-| Property | Type | Description |
-|---|---|---|
-| `refresh` | `(widgetId: string) => void` | Trigger `onRefresh` on a specific widget |
-| `refreshAll` | `() => void` | Trigger `onRefresh` on all widgets that have one |
+| Property     | Type                         | Description                                      |
+| ------------ | ---------------------------- | ------------------------------------------------ |
+| `refresh`    | `(widgetId: string) => void` | Trigger `onRefresh` on a specific widget         |
+| `refreshAll` | `() => void`                 | Trigger `onRefresh` on all widgets that have one |
 
 ## useWidgetTrigger
 
@@ -81,7 +81,7 @@ Widget-side composable for external component-based widgets. Registers a trigger
 ### Basic Usage
 
 ```typescript
-import { useWidgetTrigger } from '@vc-shell/framework';
+import { useWidgetTrigger } from "@vc-shell/framework";
 
 // Inside an external widget component:
 useWidgetTrigger({ onRefresh: loadData });
@@ -89,14 +89,14 @@ useWidgetTrigger({ onRefresh: loadData });
 
 ### IWidgetTrigger
 
-| Field | Type | Required | Description |
-|---|---|---|---|
-| `icon` | `string` | No | Lucide icon name for dropdown rendering |
-| `title` | `string` | No | Display title (fallback: widget's title) |
-| `badge` | `Ref<number \| string>` | No | Reactive badge value |
-| `onClick` | `() => void` | No | Handler called when widget is clicked in dropdown |
-| `onRefresh` | `() => void \| Promise<void>` | No | Handler called to refresh widget data |
-| `disabled` | `Ref<boolean> \| boolean` | No | Disabled state |
+| Field       | Type                          | Required | Description                                       |
+| ----------- | ----------------------------- | -------- | ------------------------------------------------- |
+| `icon`      | `string`                      | No       | Lucide icon name for dropdown rendering           |
+| `title`     | `string`                      | No       | Display title (fallback: widget's title)          |
+| `badge`     | `Ref<number \| string>`       | No       | Reactive badge value                              |
+| `onClick`   | `() => void`                  | No       | Handler called when widget is clicked in dropdown |
+| `onRefresh` | `() => void \| Promise<void>` | No       | Handler called to refresh widget data             |
+| `disabled`  | `Ref<boolean> \| boolean`     | No       | Disabled state                                    |
 
 ### How It Works
 
@@ -119,7 +119,7 @@ import { MessageWidget } from "./components/widgets";
 registerExternalWidget({
   id: "MessageWidget",
   component: markRaw(MessageWidget),
-  targetBlades: ["ProductDetails", "OrderDetails"],
+  targetBlades: ["EntityDetails", "AnotherDetails"],
   isVisible: (blade?: BladeDescriptor) => !!blade?.param,
 });
 ```
@@ -139,13 +139,7 @@ registerExternalWidget({
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue";
-import {
-  loading as vLoading,
-  useBlade,
-  injectBladeContext,
-  useWidgetTrigger,
-  VcWidget,
-} from "@vc-shell/framework";
+import { loading as vLoading, useBlade, injectBladeContext, useWidgetTrigger, VcWidget } from "@vc-shell/framework";
 
 const ctx = injectBladeContext();
 const entityId = computed(() => (ctx.value.item as { id?: string })?.id ?? "");
@@ -182,61 +176,61 @@ import { useBladeWidgets } from "@vc-shell/framework";
 const { refresh, refreshAll } = useBladeWidgets([]);
 
 async function save() {
-  await api.saveProduct(product.value);
-  refreshAll();           // refresh all widgets (including MessageWidget)
+  await api.saveEntity(entity.value);
+  refreshAll(); // refresh all widgets (including MessageWidget)
   // or: refresh("MessageWidget");  // refresh a specific widget by ID
 }
 </script>
 ```
 
-## Recipe: Product Detail Blade with Multiple Widgets
+## Recipe: Entity Detail Blade with Multiple Widgets
 
 ```vue
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { useBladeWidgets, defineBladeContext } from "@vc-shell/framework";
 
-const product = ref({ id: "prod-1", name: "Widget A" });
-const offersCount = ref(0);
-const reviewsCount = ref(0);
-const offersLoading = ref(false);
+const entity = ref({ id: "ent-1", name: "Sample" });
+const childCount = ref(0);
+const notesCount = ref(0);
+const childLoading = ref(false);
 
-// Expose product data to widgets
-defineBladeContext(computed(() => ({ id: product.value?.id })));
+// Expose entity data to widgets
+defineBladeContext(computed(() => ({ id: entity.value?.id })));
 
-async function reloadOffers() {
-  offersLoading.value = true;
+async function reloadChildren() {
+  childLoading.value = true;
   try {
-    const result = await api.searchOffers({ productId: product.value.id });
-    offersCount.value = result.totalCount;
+    const result = await api.searchChildren({ entityId: entity.value.id });
+    childCount.value = result.totalCount;
   } finally {
-    offersLoading.value = false;
+    childLoading.value = false;
   }
 }
 
 const { refreshAll } = useBladeWidgets([
   {
-    id: "OffersWidget",
+    id: "ChildListWidget",
     icon: "lucide-tag",
-    title: "PRODUCT.WIDGETS.OFFERS",
-    badge: offersCount,
-    loading: offersLoading,
-    isVisible: computed(() => !!product.value?.id),
-    onClick: () => openBlade({ name: "OffersList" }),
-    onRefresh: reloadOffers,
+    title: "MODULE.WIDGETS.CHILD_LIST",
+    badge: childCount,
+    loading: childLoading,
+    isVisible: computed(() => !!entity.value?.id),
+    onClick: () => openBlade({ name: "ChildList" }),
+    onRefresh: reloadChildren,
   },
   {
-    id: "ReviewsWidget",
+    id: "NotesWidget",
     icon: "lucide-star",
-    title: "PRODUCT.WIDGETS.REVIEWS",
-    badge: reviewsCount,
-    isVisible: computed(() => !!product.value?.id),
-    onClick: () => openBlade({ name: "ReviewsList" }),
+    title: "MODULE.WIDGETS.NOTES",
+    badge: notesCount,
+    isVisible: computed(() => !!entity.value?.id),
+    onClick: () => openBlade({ name: "NotesList" }),
   },
 ]);
 
 async function save() {
-  await api.saveProduct(product.value);
+  await api.saveEntity(entity.value);
   // Refresh all widget counts after saving
   refreshAll();
 }
@@ -246,11 +240,13 @@ async function save() {
 ## Prerequisites
 
 **`useBladeWidgets`**:
+
 - Must be called inside a blade component rendered by `VcBladeSlot` (requires `BladeDescriptorKey` injection).
 - `WidgetService` must be provided in the component tree (automatically available in vc-shell apps).
 - Calling outside a blade context throws an error with a descriptive message.
 
 **`useWidgetTrigger`**:
+
 - Must be called inside a widget component rendered by `WidgetContainer` (requires `WidgetScopeKey` injection).
 - If called outside a widget scope, logs a warning and does nothing (does not throw).
 

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

@@ -34,20 +34,20 @@ push({
 
 ### Returns
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `breadcrumbs` | `ComputedRef<Breadcrumbs[]>` | Reactive array of current breadcrumb items |
-| `push` | `(breadcrumb: Breadcrumbs) => void` | Add a breadcrumb (deduplicates by `id`, updates in place if exists) |
-| `remove` | `(ids: string[]) => void` | Remove breadcrumbs by their IDs |
+| Property      | Type                                | Description                                                         |
+| ------------- | ----------------------------------- | ------------------------------------------------------------------- |
+| `breadcrumbs` | `ComputedRef<Breadcrumbs[]>`        | Reactive array of current breadcrumb items                          |
+| `push`        | `(breadcrumb: Breadcrumbs) => void` | Add a breadcrumb (deduplicates by `id`, updates in place if exists) |
+| `remove`      | `(ids: string[]) => void`           | Remove breadcrumbs by their IDs                                     |
 
 ### Breadcrumbs Interface
 
-| Property | Type | Required | Description |
-|----------|------|----------|-------------|
-| `id` | `string` | Yes | Unique identifier for the breadcrumb |
-| `title` | `MaybeRef<string \| undefined>` | Yes | Display text (can be reactive) |
-| `icon` | `string?` | No | Icon identifier |
-| `clickHandler` | `(id: string) => void \| boolean \| Promise<void \| boolean>` | No | Click callback; return `false` to prevent trail trimming |
+| Property       | Type                                                          | Required | Description                                              |
+| -------------- | ------------------------------------------------------------- | -------- | -------------------------------------------------------- |
+| `id`           | `string`                                                      | Yes      | Unique identifier for the breadcrumb                     |
+| `title`        | `MaybeRef<string \| undefined>`                               | Yes      | Display text (can be reactive)                           |
+| `icon`         | `string?`                                                     | No       | Icon identifier                                          |
+| `clickHandler` | `(id: string) => void \| boolean \| Promise<void \| boolean>` | No       | Click callback; return `false` to prevent trail trimming |
 
 ## Common Patterns
 

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

@@ -12,18 +12,25 @@ Monitors the browser's network connectivity and shows a persistent notification
 
 ```vue
 <script setup lang="ts">
-import { useConnectionStatus } from '@vc-shell/framework';
+import { useConnectionStatus } from "@vc-shell/framework";
 
 const { isOnline } = useConnectionStatus();
 </script>
 
 <template>
   <VcBlade title="Order Details">
-    <div v-if="!isOnline" class="tw-bg-yellow-100 tw-p-2 tw-rounded tw-mb-4">
+    <div
+      v-if="!isOnline"
+      class="tw-bg-yellow-100 tw-p-2 tw-rounded tw-mb-4"
+    >
       You are offline. Changes will not be saved until connectivity is restored.
     </div>
 
-    <VcButton :disabled="!isOnline" @click="save">Save Order</VcButton>
+    <VcButton
+      :disabled="!isOnline"
+      @click="save"
+      >Save Order</VcButton
+    >
   </VcBlade>
 </template>
 ```
@@ -32,8 +39,8 @@ const { isOnline } = useConnectionStatus();
 
 ### Returns
 
-| Property | Type | Description |
-|---|---|---|
+| Property   | Type                     | Description                                                                                                     |
+| ---------- | ------------------------ | --------------------------------------------------------------------------------------------------------------- |
 | `isOnline` | `Readonly<Ref<boolean>>` | `true` when the browser has network connectivity, `false` when offline. Read-only to prevent external mutation. |
 
 ## How It Works
@@ -41,6 +48,7 @@ const { isOnline } = useConnectionStatus();
 On the very first call to `useConnectionStatus()`, the composable initializes a watcher on `@vueuse/core`'s `useNetwork().isOnline`. This watcher runs with `{ immediate: true }`, so the state is correct from the start. Subsequent calls skip initialization and return the same shared reactive state.
 
 When the network drops:
+
 1. A warning notification is shown with a stable ID (`vc-framework-offline-status`) so it cannot be duplicated.
 2. The CSS class `vc-offline` is added to `document.documentElement`.
 3. A warning is logged via `createLogger`.
@@ -51,21 +59,25 @@ When connectivity is restored, the notification is removed, the CSS class is cle
 
 ```vue
 <script setup lang="ts">
-import { useConnectionStatus } from '@vc-shell/framework';
-import { watch, ref } from 'vue';
+import { useConnectionStatus } from "@vc-shell/framework";
+import { watch, ref } from "vue";
 
 const { isOnline } = useConnectionStatus();
 const pendingSave = ref(false);
-const formData = ref({ name: '' });
+const formData = ref({ name: "" });
 
 // Auto-save on changes, but only when online
-watch(formData, () => {
-  if (isOnline.value) {
-    saveToServer(formData.value);
-  } else {
-    pendingSave.value = true;
-  }
-}, { deep: true });
+watch(
+  formData,
+  () => {
+    if (isOnline.value) {
+      saveToServer(formData.value);
+    } else {
+      pendingSave.value = true;
+    }
+  },
+  { deep: true },
+);
 
 // Flush pending save when connectivity returns
 watch(isOnline, (online) => {

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

@@ -98,19 +98,19 @@ registerDashboardWidget({
 
 The `size` property defines the widget's grid dimensions:
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `width` | `number` | Number of grid columns the widget spans |
-| `height` | `number` | Number of grid rows the widget spans |
+| Property | Type     | Description                             |
+| -------- | -------- | --------------------------------------- |
+| `width`  | `number` | Number of grid columns the widget spans |
+| `height` | `number` | Number of grid rows the widget spans    |
 
 ### Widget position
 
 The optional `position` property sets the initial grid coordinates:
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `x` | `number` | Column index (0-based) |
-| `y` | `number` | Row index (0-based) |
+| Property | Type     | Description            |
+| -------- | -------- | ---------------------- |
+| `x`      | `number` | Column index (0-based) |
+| `y`      | `number` | Row index (0-based)    |
 
 ### Custom props
 
@@ -357,38 +357,38 @@ Returns the injected `IDashboardService` instance. Throws `InjectionError` if th
 
 #### IDashboardService Interface
 
-| Method | Type | Description |
-|--------|------|-------------|
-| `registerWidget` | `(widget: DashboardWidget) => void` | Register a widget (throws on duplicate ID) |
-| `getWidgets` | `() => DashboardWidget[]` | Get all registered widgets filtered by current user's permissions |
-| `updateWidgetPosition` | `(widgetId: string, position: DashboardWidgetPosition) => void` | Update a widget's grid position (throws if widget not found) |
-| `getLayout` | `() => ReadonlyMap<string, DashboardWidgetPosition>` | Get the current layout map |
+| Method                 | Type                                                            | Description                                                       |
+| ---------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------- |
+| `registerWidget`       | `(widget: DashboardWidget) => void`                             | Register a widget (throws on duplicate ID)                        |
+| `getWidgets`           | `() => DashboardWidget[]`                                       | Get all registered widgets filtered by current user's permissions |
+| `updateWidgetPosition` | `(widgetId: string, position: DashboardWidgetPosition) => void` | Update a widget's grid position (throws if widget not found)      |
+| `getLayout`            | `() => ReadonlyMap<string, DashboardWidgetPosition>`            | Get the current layout map                                        |
 
 ### Standalone Exports
 
-| Function | Description |
-|----------|-------------|
+| Function                          | Description                                             |
+| --------------------------------- | ------------------------------------------------------- |
 | `registerDashboardWidget(widget)` | Pre-register a widget before the service is initialized |
-| `provideDashboardService()` | Create and provide the service in a root component |
+| `provideDashboardService()`       | Create and provide the service in a root component      |
 
 ### DashboardWidget
 
-| Property | Type | Required | Description |
-|----------|------|----------|-------------|
-| `id` | `string` | Yes | Unique widget identifier |
-| `name` | `string` | Yes | Display title |
-| `component` | `Component` | Yes | Vue component to render |
-| `size` | `{ width: number; height: number }` | Yes | Grid size (columns x rows) |
-| `position` | `{ x: number; y: number }` | No | Initial grid position |
-| `permissions` | `string[]` | No | Required permissions for visibility (OR logic) |
-| `props` | `Record<string, unknown>` | No | Props passed to the widget component |
+| Property      | Type                                | Required | Description                                    |
+| ------------- | ----------------------------------- | -------- | ---------------------------------------------- |
+| `id`          | `string`                            | Yes      | Unique widget identifier                       |
+| `name`        | `string`                            | Yes      | Display title                                  |
+| `component`   | `Component`                         | Yes      | Vue component to render                        |
+| `size`        | `{ width: number; height: number }` | Yes      | Grid size (columns x rows)                     |
+| `position`    | `{ x: number; y: number }`          | No       | Initial grid position                          |
+| `permissions` | `string[]`                          | No       | Required permissions for visibility (OR logic) |
+| `props`       | `Record<string, unknown>`           | No       | Props passed to the widget component           |
 
 ### DashboardWidgetPosition
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `x` | `number` | Column index (0-based) |
-| `y` | `number` | Row index (0-based) |
+| Property | Type     | Description            |
+| -------- | -------- | ---------------------- |
+| `x`      | `number` | Column index (0-based) |
+| `y`      | `number` | Row index (0-based)    |
 
 ## Related