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

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

@@ -40,38 +40,40 @@ 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 |
-| `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 |
+| 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()
 ```
 
 ### Pre-filled (create from template)
+
 ```
 Mount → Pre-fill data → markReady() → canSave = true immediately
                                        └→ Save → setBaseline()
@@ -139,12 +141,12 @@ onMounted(async () => {
 
 ### 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" |
+|                                | `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
 

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',
+    id: "OffersWidget",
+    icon: "lucide-tag",
+    title: "OFFERS.TITLE",
     badge: offersCount,
     loading: offersLoading,
-    onClick: () => openBlade({ name: 'OffersList' }),
+    onClick: () => openBlade({ name: "OffersList" }),
     onRefresh: () => reloadOffers(),
   },
   {
-    id: 'ReviewsWidget',
-    icon: 'lucide-star',
-    title: 'REVIEWS.TITLE',
+    id: "ReviewsWidget",
+    icon: "lucide-star",
+    title: "REVIEWS.TITLE",
     badge: reviewsCount,
     isVisible: computed(() => !!item.value?.id),
-    onClick: () => openBlade({ name: 'ReviewsList' }),
+    onClick: () => openBlade({ name: "ReviewsList" }),
   },
 ]);
 
@@ -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
 
@@ -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 ?? "");
@@ -183,7 +177,7 @@ const { refresh, refreshAll } = useBladeWidgets([]);
 
 async function save() {
   await api.saveProduct(product.value);
-  refreshAll();           // refresh all widgets (including MessageWidget)
+  refreshAll(); // refresh all widgets (including MessageWidget)
   // or: refresh("MessageWidget");  // refresh a specific widget by ID
 }
 </script>
@@ -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
 

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

@@ -16,42 +16,41 @@ Internally uses a strategy pattern — each property type (regular, boolean, dic
 ```typescript
 import { useDynamicProperties } from "@vc-shell/framework";
 
-const { getPropertyValue, setPropertyValue, loadDictionaries, loadMeasurements, loading } =
-  useDynamicProperties({
-    searchDictionary: (criteria) => api.searchPropertyDictionaryItems(criteria),
-    searchMeasurements: (measureId, locale) => api.searchMeasurements(measureId, locale),
-  });
+const { getPropertyValue, setPropertyValue, loadDictionaries, loadMeasurements, loading } = useDynamicProperties({
+  searchDictionary: (criteria) => api.searchPropertyDictionaryItems(criteria),
+  searchMeasurements: (measureId, locale) => api.searchMeasurements(measureId, locale),
+});
 ```
 
 ## API
 
 ### Options
 
-| Option | Type | Required | Description |
-|--------|------|----------|-------------|
-| `searchDictionary` | `(criteria: IBasePropertyDictionaryItemSearchCriteria) => Promise<IBasePropertyDictionaryItem[] \| undefined>` | Yes | API function to search dictionary items by property ID and keyword |
-| `searchMeasurements` | `(measureId: string, locale?: string) => Promise<IBaseMeasurementDictionaryItem[] \| undefined>` | No | API function for loading measurement units. Only needed for measure-type properties |
+| Option               | Type                                                                                                           | Required | Description                                                                         |
+| -------------------- | -------------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------- |
+| `searchDictionary`   | `(criteria: IBasePropertyDictionaryItemSearchCriteria) => Promise<IBasePropertyDictionaryItem[] \| undefined>` | Yes      | API function to search dictionary items by property ID and keyword                  |
+| `searchMeasurements` | `(measureId: string, locale?: string) => Promise<IBaseMeasurementDictionaryItem[] \| undefined>`               | No       | API function for loading measurement units. Only needed for measure-type properties |
 
 ### Returns
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `getPropertyValue` | `(property, locale) => PropertyDisplayValue` | Read display value for a property. Returns string, boolean, or array depending on type. Does NOT mutate the property. |
-| `setPropertyValue` | `(params: SetPropertyValueParams) => void` | Write value to a property. Handles type-specific transformation and empty cleanup. |
-| `loadDictionaries` | `(propertyId, keyword?, locale?) => Promise<...>` | Load dictionary items. If locale is provided, resolves localized values. |
-| `loadMeasurements` | `(measureId, keyword?, locale?) => Promise<...>` | Load measurement units. No-op if `searchMeasurements` was not provided. |
-| `loading` | `ComputedRef<boolean>` | Whether a dictionary lookup is in progress. |
+| Property           | Type                                              | Description                                                                                                           |
+| ------------------ | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| `getPropertyValue` | `(property, locale) => PropertyDisplayValue`      | Read display value for a property. Returns string, boolean, or array depending on type. Does NOT mutate the property. |
+| `setPropertyValue` | `(params: SetPropertyValueParams) => void`        | Write value to a property. Handles type-specific transformation and empty cleanup.                                    |
+| `loadDictionaries` | `(propertyId, keyword?, locale?) => Promise<...>` | Load dictionary items. If locale is provided, resolves localized values.                                              |
+| `loadMeasurements` | `(measureId, keyword?, locale?) => Promise<...>`  | Load measurement units. No-op if `searchMeasurements` was not provided.                                               |
+| `loading`          | `ComputedRef<boolean>`                            | Whether a dictionary lookup is in progress.                                                                           |
 
 ### SetPropertyValueParams
 
-| Field | Type | Description |
-|-------|------|-------------|
-| `property` | `IBaseProperty` | The property object to update. Modified in place. |
-| `value` | `string \| IBasePropertyValue[] \| (IBasePropertyDictionaryItem & { value: string })[]` | The new value. Type depends on property configuration. |
-| `dictionary` | `IBasePropertyDictionaryItem[]?` | Dictionary items. Required when setting a dictionary value. |
-| `locale` | `string?` | Current locale for multilanguage properties. |
-| `unitOfMeasureId` | `string?` | Unit of measure ID for measure-type properties. |
-| `colorCode` | `string?` | Color hex code for color-type properties. |
+| Field             | Type                                                                                    | Description                                                 |
+| ----------------- | --------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
+| `property`        | `IBaseProperty`                                                                         | The property object to update. Modified in place.           |
+| `value`           | `string \| IBasePropertyValue[] \| (IBasePropertyDictionaryItem & { value: string })[]` | The new value. Type depends on property configuration.      |
+| `dictionary`      | `IBasePropertyDictionaryItem[]?`                                                        | Dictionary items. Required when setting a dictionary value. |
+| `locale`          | `string?`                                                                               | Current locale for multilanguage properties.                |
+| `unitOfMeasureId` | `string?`                                                                               | Unit of measure ID for measure-type properties.             |
+| `colorCode`       | `string?`                                                                               | Color hex code for color-type properties.                   |
 
 ### PropertyDisplayValue
 
@@ -65,13 +64,13 @@ type PropertyDisplayValue = string | IBasePropertyValue[] | boolean;
 
 The composable resolves a strategy handler based on property flags:
 
-| Priority | Condition | Strategy | Handles |
-|----------|-----------|----------|---------|
-| 1 | `valueType === "Measure"` | measureStrategy | Numeric input with unit dropdown |
-| 2 | `valueType === "Color"` && !dictionary | colorStrategy | Color picker, multivalue colors |
-| 3 | `valueType === "Boolean"` | booleanStrategy | Checkbox/switch |
-| 4 | `dictionary === true` | dictionaryStrategy | Select dropdowns with localized options |
-| 5 | (default) | regularStrategy | ShortText, LongText, Number, Integer, DateTime |
+| Priority | Condition                              | Strategy           | Handles                                        |
+| -------- | -------------------------------------- | ------------------ | ---------------------------------------------- |
+| 1        | `valueType === "Measure"`              | measureStrategy    | Numeric input with unit dropdown               |
+| 2        | `valueType === "Color"` && !dictionary | colorStrategy      | Color picker, multivalue colors                |
+| 3        | `valueType === "Boolean"`              | booleanStrategy    | Checkbox/switch                                |
+| 4        | `dictionary === true`                  | dictionaryStrategy | Select dropdowns with localized options        |
+| 5        | (default)                              | regularStrategy    | ShortText, LongText, Number, Integer, DateTime |
 
 ### Value Getting
 
@@ -124,11 +123,10 @@ This ensures that `useBladeForm`'s deep comparison correctly detects "no change"
 <script setup lang="ts">
 import { useDynamicProperties } from "@vc-shell/framework";
 
-const { getPropertyValue, setPropertyValue, loadDictionaries, loadMeasurements } =
-  useDynamicProperties({
-    searchDictionary: searchDictionaryItems,
-    searchMeasurements: searchMeasurementItems,
-  });
+const { getPropertyValue, setPropertyValue, loadDictionaries, loadMeasurements } = useDynamicProperties({
+  searchDictionary: searchDictionaryItems,
+  searchMeasurements: searchMeasurementItems,
+});
 </script>
 ```