@vc-shell/vc-app-skill 2.0.5 → 2.0.6

package/runtime/knowledge/docs/ui/components/atoms/vc-status-icon/vc-status-icon.docs.md

@@ -39,15 +39,30 @@ import { VcStatusIcon } from "@vc-shell/framework";
 
 ### Boolean Column in a Table
 
+For a simple yes/no indicator, declare the column with `type="status-icon"` — `VcDataTable` renders the icon based on the boolean cell value, no slot needed:
+
+```vue
+<template>
+  <VcColumn
+    id="isActive"
+    title="Active"
+    type="status-icon"
+    width="80px"
+  />
+</template>
+```
+
+Reach for the `#body` slot only when you need a custom predicate or a non-boolean source:
+
 ```vue
 <template>
   <VcColumn
     id="isActive"
-    header="Active"
-    :width="80"
+    title="Active"
+    width="80px"
   >
-    <template #default="{ row }">
-      <VcStatusIcon :status="row.isActive" />
+    <template #body="{ data }">
+      <VcStatusIcon :status="data.isActive && data.confirmed" />
     </template>
   </VcColumn>
 </template>
@@ -57,35 +72,26 @@ import { VcStatusIcon } from "@vc-shell/framework";
 
 ```vue
 <template>
-  <VcDataTable
-    :columns="columns"
-    :items="users"
-  >
+  <VcDataTable :items="users">
     <VcColumn
       id="emailVerified"
-      header="Email"
-      :width="70"
-    >
-      <template #default="{ row }">
-        <VcStatusIcon :status="row.emailVerified" />
-      </template>
-    </VcColumn>
+      title="Email"
+      type="status-icon"
+      width="70px"
+    />
     <VcColumn
       id="isActive"
-      header="Active"
-      :width="70"
-    >
-      <template #default="{ row }">
-        <VcStatusIcon :status="row.isActive" />
-      </template>
-    </VcColumn>
+      title="Active"
+      type="status-icon"
+      width="70px"
+    />
     <VcColumn
       id="hasAvatar"
-      header="Avatar"
-      :width="70"
+      title="Avatar"
+      width="70px"
     >
-      <template #default="{ row }">
-        <VcStatusIcon :status="!!row.avatarUrl" />
+      <template #body="{ data }">
+        <VcStatusIcon :status="!!data.avatarUrl" />
       </template>
     </VcColumn>
   </VcDataTable>

package/runtime/knowledge/docs/ui/components/atoms/vc-tooltip/vc-tooltip.docs.md

@@ -143,7 +143,7 @@ Set a maximum width to prevent wide tooltips from stretching across the screen:
 <VcTooltip>...</VcTooltip>
 
 <!-- Wider tooltip for long content -->
-<VcTooltip :max-width="400">...</VcTooltip>
+<VcTooltip max-width="400px">...</VcTooltip>
 
 <!-- CSS string value -->
 <VcTooltip max-width="50vw">...</VcTooltip>
@@ -165,7 +165,7 @@ Suppress the tooltip dynamically without removing it from the template:
 The `#tooltip` slot accepts any HTML or Vue components, not just text:
 
 ```vue
-<VcTooltip placement="top" :max-width="320">
+<VcTooltip placement="top" max-width="320px">
   <span class="tw-underline tw-decoration-dotted tw-cursor-help">
     Fulfillment status
   </span>
@@ -225,7 +225,7 @@ const actions = [
 <template>
   <VcTooltip
     placement="top"
-    :max-width="400"
+    max-width="400px"
   >
     <span class="tw-truncate tw-max-w-[200px] tw-block">
       {{ longProductName }}

package/runtime/knowledge/docs/ui/components/molecules/multilanguage-selector/multilanguage-selector.docs.md

@@ -144,4 +144,4 @@ onMounted(async () => {
 
 ## Related Components
 
-- [LanguageSelector](../language-selector/language-selector.docs.md) -- settings menu entry for UI locale switching (different purpose)
+- **LanguageSelector** -- shell-internal settings menu entry for UI locale switching (different purpose)

package/runtime/knowledge/docs/ui/components/molecules/vc-accordion/vc-accordion.docs.md

@@ -275,7 +275,7 @@ interface AccordionItem {
 
 ## Related Components
 
-- [VcAccordionItem](./_internal/vc-accordion-item/) -- individual accordion panel (used internally and available via the default slot)
+- **VcAccordionItem** -- internal sub-component for individual accordion panels (used internally and available via the default slot)
 
 ::storybook id="action-vcaccordion--skeleton"
 

package/runtime/knowledge/docs/ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs.docs.md

@@ -288,7 +288,7 @@ clickHandler: () => { navigate(); return true; }
 ## Related Components
 
 - [VcDropdown](../vc-dropdown/) -- Used internally to render the overflow menu
-- [VcBreadcrumbsItem](./_internal/vc-breadcrumbs-item/) -- Internal sub-component for individual breadcrumb rendering
+- **VcBreadcrumbsItem** -- internal sub-component for individual breadcrumb rendering
 - [VcButton](../../atoms/vc-button/) -- Can be used inside the `trigger` slot for a styled overflow button
 
 <!-- internal:start -->

package/runtime/knowledge/docs/ui/components/molecules/vc-dropdown-panel/vc-dropdown-panel.docs.md

@@ -49,18 +49,18 @@ const open = ref(false);
 
 ## Key Props
 
-| Prop                  | Type                  | Default          | Description                                                        |
-| --------------------- | --------------------- | ---------------- | ------------------------------------------------------------------ |
-| `show`                | `boolean`             | —                | Panel visibility (v-model:show)                                    |
-| `anchorRef`           | `HTMLElement \| null` | `null`           | Anchor element for floating positioning                            |
-| `title`               | `string`              | `""`             | Header title text (header hidden when empty and no `#header` slot) |
-| `placement`           | `Placement`           | `"bottom-start"` | Floating UI placement relative to anchor                           |
-| `width`               | `string`              | `"280px"`        | Panel min-width                                                    |
-| `maxWidth`            | `string`              | `"400px"`        | Panel max-width                                                    |
-| `maxHeight`           | `number`              | `350`            | Max height in pixels (clamped by viewport)                         |
-| `contentScrollable`   | `boolean`             | `true`           | Enable scrolling in the content area                               |
-| `closeOnClickOutside` | `boolean`             | `true`           | Close when clicking outside                                        |
-| `closeOnEscape`       | `boolean`             | `true`           | Close on Escape key                                                |
+| Prop                  | Type                       | Default          | Description                                                                                                                                                                                                                                                                                                                                                                               |
+| --------------------- | -------------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show`                | `boolean`                  | —                | Panel visibility (v-model:show)                                                                                                                                                                                                                                                                                                                                                           |
+| `anchorRef`           | `ReferenceElement \| null` | `null`           | Anchor for floating positioning — accepts an `HTMLElement` or a floating-ui `VirtualElement` (`{ getBoundingClientRect, contextElement? }`). Use a `VirtualElement` when the underlying DOM root can swap dynamically — e.g. wrapping a component whose root changes via internal `v-if` — so `getBoundingClientRect` is resolved fresh on every update instead of caching a stale `$el`. |
+| `title`               | `string`                   | `""`             | Header title text (header hidden when empty and no `#header` slot)                                                                                                                                                                                                                                                                                                                        |
+| `placement`           | `Placement`                | `"bottom-start"` | Floating UI placement relative to anchor                                                                                                                                                                                                                                                                                                                                                  |
+| `width`               | `string`                   | `"280px"`        | Panel min-width                                                                                                                                                                                                                                                                                                                                                                           |
+| `maxWidth`            | `string`                   | `"400px"`        | Panel max-width                                                                                                                                                                                                                                                                                                                                                                           |
+| `maxHeight`           | `number`                   | `350`            | Max height in pixels (clamped by viewport)                                                                                                                                                                                                                                                                                                                                                |
+| `contentScrollable`   | `boolean`                  | `true`           | Enable scrolling in the content area                                                                                                                                                                                                                                                                                                                                                      |
+| `closeOnClickOutside` | `boolean`                  | `true`           | Close when clicking outside                                                                                                                                                                                                                                                                                                                                                               |
+| `closeOnEscape`       | `boolean`                  | `true`           | Close on Escape key                                                                                                                                                                                                                                                                                                                                                                       |
 
 ## Events
 
@@ -158,7 +158,7 @@ const open = ref(false);
 ## Architecture Notes
 
 - Click-outside detection uses a `pointerdown` listener on `document` rather than a backdrop overlay. This ensures clicks on high-z-index siblings (sidebar, other teleported panels) are still caught.
-- `panelAnchorRegistry` (`panel-anchor-registry.ts`) is a `WeakMap<Element, HTMLElement | null>` that maps each open panel's DOM element to its anchor. This is used to distinguish child panels (whose anchor lives inside this panel) from sibling/parent panels when deciding whether to close on outside click.
+- `panelAnchorRegistry` (`panel-anchor-registry.ts`) is a `WeakMap<Element, Element | null>` that maps each open panel's DOM element to its anchor element. When `anchorRef` is a floating-ui `VirtualElement`, the registry stores its `contextElement` (the live DOM element backing the virtual reference). This is used to distinguish child panels (whose anchor lives inside this panel) from sibling/parent panels when deciding whether to close on outside click.
 - Nested VcSelect dropdowns teleported to `<body>` are exempt from click-outside via an ARIA `aria-controls` check: if the clicked `.vc-select__dropdown` has an `id` that matches an `aria-controls` attribute inside this panel, the close is suppressed.
 - The panel exposes a `close()` method via `defineExpose` for use with template refs.
 - `useTeleportTarget` resolves the teleport destination (typically `body`) respecting any custom portal container.

package/runtime/knowledge/docs/ui/components/molecules/vc-form/vc-form.docs.md

@@ -538,6 +538,6 @@ disabled: computed(() => !modified.value),
 - **[VcCheckbox](../vc-checkbox/)** -- checkbox input
 - **[VcRow](../../atoms/vc-row/)** -- horizontal flex row for form layout
 - **[VcCol](../../atoms/vc-col/)** -- column within a VcRow
-- **[VcCard](../vc-card/)** -- collapsible card for grouping form sections
+- **[VcCard](../../atoms/vc-card/vc-card.docs.md)** -- collapsible card for grouping form sections
 - **[VcBlade](../../organisms/vc-blade/)** -- blade container that hosts the form
 - **[VcPopup](../../organisms/vc-popup/)** -- modal dialog, often used for inline forms

package/runtime/knowledge/docs/ui/components/molecules/vc-pagination/vc-pagination.docs.md

@@ -301,7 +301,7 @@ currentPage.value = Math.min(currentPage.value, totalPages.value);
 
 ## Related Components
 
-- [VcDataTable](../../organisms/vc-table) -- Data table that commonly pairs with pagination for large datasets
+- [VcDataTable](../../organisms/vc-data-table/vc-data-table.docs.md) -- Data table that commonly pairs with pagination for large datasets
 - [VcSelect](../vc-select/) -- Can be used alongside pagination for a "rows per page" selector
 
 <!-- internal:start -->

package/runtime/knowledge/docs/ui/components/organisms/vc-app/vc-app.docs.md

@@ -38,7 +38,7 @@ import { VcApp } from "@vc-shell/framework";
 
 const isReady = ref(true);
 const logoUrl = "/logo.svg";
-const appTitle = "Vendor Portal";
+const appTitle = "Operations Console";
 const user = reactive({ name: "John", role: "Admin" });
 </script>
 ```
@@ -146,8 +146,8 @@ Modules registered via `useDynamicModules()` are loaded at runtime. Each module
 
 The App Hub is a popover panel (desktop) or a swipeable tab (mobile) that combines two sections:
 
-- **Applications** — tile grid of registered apps (e.g., Vendor Portal, Marketplace Admin). Clicking an app switches context without a full page reload. This section can be hidden with `disableAppHub` or customized via the `app-hub` slot. The list is searchable via a built-in search input inside the hub.
-- **Widgets** — registered app bar widgets (notifications, background tasks, etc.). Clicking a widget expands its content inline (desktop) or navigates to its panel (mobile). Widgets are registered via `useAppBarWidget()` and can display badges for unread counts.
+- **Applications** — tile grid of registered apps (for example, Operations Console or Marketplace Admin). Clicking an app switches context without a full page reload. This section can be hidden with `disableAppHub` or customized via the `app-hub` slot. The list is searchable via a built-in search input inside the hub.
+- **Widgets** — cross-app widgets registered through `useAppBarWidget()` (sync status, background tasks, language picker, and the like). Clicking a widget either runs its `onClick` (for action widgets) or expands its component inline inside the popover with a back-arrow to return (for component widgets). On mobile, the content flies out below the panel. Widgets can display badges for unread counts.
 
 On desktop, the App Hub opens from the sidebar header menu button (`AppHubPopover`). On mobile, it appears as a second tab ("Hub") in the slide-out navigation panel — users can swipe between Menu and Hub tabs.
 
@@ -225,7 +225,7 @@ Replace the default user info section with a custom footer:
 - The `disableMenu` prop is useful for single-purpose apps that do not need sidebar navigation (e.g., a standalone settings page or an embedded widget).
 - Use the `layout` slot only as a last resort for completely custom layouts. For most customizations, the more specific slots (`menu`, `sidebar-header`, `sidebar-footer`) are sufficient.
 - The `version` prop is informational and can be displayed in the sidebar footer or a settings page. It does not affect any runtime behavior.
-- VcApp provides shell services via Vue's provide/inject system. Child components access them through composables like `useMenuService()`, `useToolbarService()`, etc.
+- VcApp provides shell services via Vue's provide/inject system. Child components access them through composables like `useMenuService()`, `useToolbar()`, `useAppBarWidget()`, `useSettingsMenu()`, and `useDashboard()`.
 
 ## Accessibility
 

package/runtime/knowledge/docs/ui/components/organisms/vc-blade/vc-blade.docs.md

@@ -12,16 +12,18 @@ The foundational container component of the VirtoCommerce admin shell. Blades ar
 
 Traditional admin panels use page-based routing: click a link, the entire viewport changes. Context is lost. Blades solve this by **stacking panels horizontally**. When a user clicks an item in a list, a details blade slides in from the right while the list remains visible. This preserves context, enables comparison, and supports deep drill-down workflows without losing your place.
 
-```
-+----------------+-------------------+---------------------+
-|                |                   |                     |
-|  Products      |  Product Details  |  Edit Variant       |
-|  (workspace)   |  (child blade)    |  (grandchild blade) |
-|                |                   |                     |
-|  [list...]     |  Name: Widget     |  Color: Red         |
-|  [list...]     |  SKU: WDG-001     |  Size: Large        |
-|                |                   |                     |
-+----------------+-------------------+---------------------+
+```mermaid
+flowchart LR
+    subgraph WS["Products (workspace)"]
+        L1["[list...]<br/>[list...]"]
+    end
+    subgraph CH["Product Details (child blade)"]
+        L2["Name: Widget<br/>SKU: WDG-001"]
+    end
+    subgraph GC["Edit Variant (grandchild blade)"]
+        L3["Color: Red<br/>Size: Large"]
+    end
+    WS --> CH --> GC
 ```
 
 | Aspect    | Pages/Routes         | Blades                           |
@@ -33,12 +35,12 @@ Traditional admin panels use page-based routing: click a link, the entire viewpo
 
 ## When to Use
 
-| Scenario                                          | Component                                    |
-| ------------------------------------------------- | -------------------------------------------- |
-| Stacked panel with toolbar, header, and lifecycle | **VcBlade**                                  |
-| One-off confirmation or input dialog              | [VcPopup](../../molecules/vc-popup/)         |
-| Full-page route without blade stack               | Vue Router view                              |
-| Scrollable content section inside a blade         | [VcContainer](../../molecules/vc-container/) |
+| Scenario                                          | Component                                                    |
+| ------------------------------------------------- | ------------------------------------------------------------ |
+| Stacked panel with toolbar, header, and lifecycle | **VcBlade**                                                  |
+| One-off confirmation or input dialog              | [VcPopup](../vc-popup/vc-popup.docs.md)                      |
+| Full-page route without blade stack               | Vue Router view                                              |
+| Scrollable content section inside a blade         | [VcContainer](../../atoms/vc-container/vc-container.docs.md) |
 
 ::storybook id="navigation-vcblade--default"
 
@@ -58,12 +60,12 @@ Use VcBlade for every screen in a vc-shell application -- it is the standard con
 </template>
 
 <script setup lang="ts">
-defineOptions({ name: "MyFirstBlade", url: "/my-first-blade" });
+defineBlade({ name: "MyFirstBlade", url: "/my-first-blade" });
 </script>
 ```
 
 !!! tip "Every blade needs a name"
-Every blade must define a `name` in `defineOptions`. This is how other blades reference it: `openBlade({ name: "MyFirstBlade" })`. The `url` is optional and controls the URL segment.
+Every blade must define a `name` in `defineBlade`. This is how other blades reference it: `openBlade({ name: "MyFirstBlade" })`. The `url` is optional and controls the URL segment.
 
 ## Blade Anatomy
 
@@ -87,7 +89,7 @@ A blade has four visual zones, rendered top-to-bottom:
 
 **Toolbar** -- Action buttons from the `toolbarItems` prop. Overflow items automatically collapse into a "More" dropdown (via `ResizeObserver`).
 
-**Status Banners** -- Unified, priority-sorted banner area. System banners: yellow when `modified` is `true`, red when the blade has an error (via `setError()`). Custom banners can be added programmatically via `useBlade().addBanner()` — see [useBlade docs](../../../core/composables/useBlade/useBlade.docs.md#banner-management).
+**Status Banners** -- Unified, priority-sorted banner area. System banners: yellow when `modified` is `true`, red when the blade has an error (via `setError()`). Custom banners can be added programmatically via `useBlade().addBanner()` — see [useBlade docs](../../../../core/composables/useBlade/useBlade.docs.md#banner-management).
 
 **Content Area** -- The `default` slot. Scrolls independently of header and toolbar.
 
@@ -117,7 +119,7 @@ import { computed, ref } from "vue";
 import { useBlade, type IBladeToolbar } from "@vc-shell/framework";
 
 // Registration metadata
-defineOptions({
+defineBlade({
   name: "OfferDetails", // Required: unique blade name
   url: "/offer", // Optional: URL segment
   routable: false, // Optional: exclude from direct URL access
@@ -447,12 +449,12 @@ addBanner({
 </script>
 ```
 
-Four variants are available: `danger`, `warning`, `info`, `success`. System banners (error and unsaved changes) are always present and cannot be removed by `clearBanners()`. For the full API reference, see [useBlade — Banner Management](../../../core/composables/useBlade/useBlade.docs.md#banner-management).
+Four variants are available: `danger`, `warning`, `info`, `success`. System banners (error and unsaved changes) are always present and cannot be removed by `clearBanners()`. For the full API reference, see [useBlade — Banner Management](../../../../core/composables/useBlade/useBlade.docs.md#banner-management).
 
 ## Blade Width Control
 
 ```vue
-<VcBlade :width="350">          <!-- Pixels (number) -->
+<VcBlade width="350px">          <!-- Pixels (number) -->
 <VcBlade width="50%">           <!-- CSS value (string) -->
 <VcBlade>                       <!-- Default: "30%" -->
 ```
@@ -463,12 +465,12 @@ On mobile, width is forced to `100%`. When `expanded` is `true`, the blade fills
 
 ### Master-Detail (List + Details)
 
-The most common vc-shell pattern. Key points from real-world usage (see `offers-list.vue` and `offers-details.vue`):
+The most common vc-shell pattern. Key points:
 
 **List blade** -- Opens a details blade on row click, tracks selected item:
 
 ```ts
-defineOptions({ name: "Offers", url: "/offers", isWorkspace: true });
+defineBlade({ name: "Offers", url: "/offers", isWorkspace: true });
 
 const { openBlade } = useBlade();
 const selectedItemId = ref<string>();
@@ -493,7 +495,7 @@ defineExpose({ title: bladeTitle, reload });
 **Details blade** -- Loads entity, saves, notifies parent, replaces self on create:
 
 ```ts
-defineOptions({ name: "Offer", url: "/offer", routable: false });
+defineBlade({ name: "Offer", url: "/offer", routable: false });
 
 const { callParent, replaceWith, onBeforeClose } = useBlade();
 
@@ -577,7 +579,7 @@ const toolbar = ref([
 defineOptions({});
 
 // CORRECT
-defineOptions({ name: "ProductDetails", url: "/product" });
+defineBlade({ name: "ProductDetails", url: "/product" });
 ```
 
 ### Forgetting to expose the title
@@ -624,17 +626,17 @@ openBlade({ name: "ProductsList" });
 
 ## Props
 
-| Prop           | Type               | Default     | Description                                                  |
-| -------------- | ------------------ | ----------- | ------------------------------------------------------------ |
-| `title`        | `string`           | `undefined` | Title text in the blade header.                              |
-| `subtitle`     | `string`           | `undefined` | Secondary text below the title.                              |
-| `icon`         | `string`           | `undefined` | Icon name (e.g., `"lucide-box"`) displayed before the title. |
-| `width`        | `number \| string` | `"30%"`     | Blade width. Numbers are pixels; strings are CSS values.     |
-| `expanded`     | `boolean`          | `false`     | Whether the blade fills all available width.                 |
-| `closable`     | `boolean`          | `true`      | Whether the close button is shown.                           |
-| `toolbarItems` | `IBladeToolbar[]`  | `[]`        | Action buttons in the toolbar zone.                          |
-| `modified`     | `boolean`          | `undefined` | Shows unsaved changes indicator and banner.                  |
-| `loading`      | `boolean`          | `false`     | Shows skeleton placeholders for all blade zones.             |
+| Prop           | Type               | Default     | Description                                                                                                                                                                               |
+| -------------- | ------------------ | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`        | `string`           | `undefined` | Title text in the blade header.                                                                                                                                                           |
+| `subtitle`     | `string`           | `undefined` | Secondary text below the title.                                                                                                                                                           |
+| `icon`         | `string`           | `undefined` | Icon name (e.g., `"lucide-box"`) displayed before the title.                                                                                                                              |
+| `width`        | `number \| string` | `"30%"`     | Blade width. Numbers are pixels; strings are CSS values.                                                                                                                                  |
+| `expanded`     | `boolean`          | `undefined` | Whether the blade fills all available width. Inside a blade-navigation context this prop is overridden by the active blade's expanded state; in standalone use the prop is read directly. |
+| `closable`     | `boolean`          | `true`      | Whether the close button is shown.                                                                                                                                                        |
+| `toolbarItems` | `IBladeToolbar[]`  | `[]`        | Action buttons in the toolbar zone.                                                                                                                                                       |
+| `modified`     | `boolean`          | `undefined` | Shows unsaved changes indicator and banner.                                                                                                                                               |
+| `loading`      | `boolean`          | `undefined` | Shows skeleton placeholders for all blade zones.                                                                                                                                          |
 
 ## Events
 

package/runtime/knowledge/docs/ui/components/organisms/vc-data-table/vc-data-table.docs.md

@@ -167,7 +167,7 @@ Formats as currency. Reads the currency code from each row's `currency` field by
 ### Image
 
 ```vue
-<VcColumn id="thumbnail" field="imgSrc" title="Image" type="image" :width="60" />
+<VcColumn id="thumbnail" field="imgSrc" title="Image" type="image" width="60px" />
 ```
 
 Renders a small thumbnail from the field's URL value.
@@ -351,7 +351,7 @@ For explicit control over checkbox column placement:
 
 ```vue
 <VcDataTable :items="products" v-model:selection="selected">
-  <VcColumn id="select" selection-mode="multiple" :width="40" />
+  <VcColumn id="select" selection-mode="multiple" width="40px" />
   <VcColumn id="name" field="name" title="Name" />
 </VcDataTable>
 ```
@@ -485,7 +485,7 @@ A row enters edit mode when the user clicks the edit button. All editable cells
   <VcColumn id="name" field="name" title="Name" editable />
   <VcColumn id="price" field="price" title="Price" type="money" editable />
   <VcColumn id="stock" field="stock" title="Stock" type="number" editable />
-  <VcColumn id="actions" :row-editor="true" title="" :width="80" />
+  <VcColumn id="actions" :row-editor="true" title="" width="80px" />
 </VcDataTable>
 ```
 
@@ -550,7 +550,7 @@ Columns are resizable by default. Drag the right border of any column header to
 Set per-column min/max constraints:
 
 ```vue
-<VcColumn id="name" field="name" title="Name" :min-width="100" :max-width="400" />
+<VcColumn id="name" field="name" title="Name" min-width="100px" max-width="400px" />
 ```
 
 ### Reorder
@@ -583,11 +583,11 @@ VcDataTable uses a **weight-based engine** to compute exact pixel widths for eve
 
 **Width prop contract:**
 
-| Declaration                     | Meaning                                                      |
-| ------------------------------- | ------------------------------------------------------------ |
-| `width="200"` or `:width="200"` | Initial 200 px hint                                          |
-| `width="20%"`                   | Initial hint based on 20% of available width                 |
-| `width` omitted                 | Auto — splits remaining space equally among all auto columns |
+| Declaration                      | Meaning                                                      |
+| -------------------------------- | ------------------------------------------------------------ |
+| `width="200"` or `width="200px"` | Initial 200 px hint                                          |
+| `width="20%"`                    | Initial hint based on 20% of available width                 |
+| `width` omitted                  | Auto — splits remaining space equally among all auto columns |
 
 After initialization the column lives in the weight model. Container resizes recompute px values without changing weights.
 
@@ -628,7 +628,7 @@ When a blade narrows (e.g., a second blade opens), only `alwaysVisible` columns
 
 ```vue
 <VcDataTable :items="products" :show-all-columns="!isBladeNarrow">
-  <VcColumn id="image" field="imgSrc" type="image" :width="60" :always-visible="true" />
+  <VcColumn id="image" field="imgSrc" type="image" width="60px" :always-visible="true" />
   <VcColumn id="name" field="name" title="Name" :always-visible="true" />
   <VcColumn id="price" field="price" title="Price" type="money" />
   <VcColumn id="stock" field="stock" title="Stock" type="number" />
@@ -653,7 +653,7 @@ Enable drag-and-drop row reordering with a drag handle column:
     <VcColumn
       id="drag"
       :row-reorder="true"
-      :width="40"
+      width="40px"
     />
     <VcColumn
       id="name"
@@ -695,7 +695,7 @@ Show additional detail below a row when the user clicks the expand toggle:
     <VcColumn
       id="expand"
       :expander="true"
-      :width="40"
+      width="40px"
     />
     <VcColumn
       id="orderNumber"
@@ -752,7 +752,7 @@ Use `isRowExpandable` to control which rows show the expand toggle. Rows that fa
     <VcColumn
       id="expand"
       :expander="true"
-      :width="40"
+      width="40px"
     />
     <VcColumn
       id="orderNumber"
@@ -1028,9 +1028,9 @@ async function loadNextPage() {
 ## State Persistence
 
 !!! tip "Use unique state keys"
-Every table in your application must have a distinct `state-key`. Two tables sharing the same key will silently overwrite each other's persisted column widths, order, and sort state.
+Every table in your application must have a distinct `state-key`. Two tables sharing the same key will silently overwrite each other's persisted column widths, order, and hidden/shown column lists.
 
-Persist column widths, column order, hidden columns, sort, and filters across page reloads:
+Persist column widths, column order, and column visibility across page reloads. Sort, filters, pagination, selection, and search input are session-scoped — they are deliberately excluded from the persisted state so the blade owns them through its own URL or store:
 
 ```vue
 <VcDataTable :items="products" state-key="product-list">
@@ -1135,7 +1135,7 @@ On mobile screens, VcDataTable automatically switches from a table to a card lay
 
 ```vue
 <VcDataTable :items="products">
-  <VcColumn id="image" field="imgSrc" type="image" mobile-role="image" :width="60" />
+  <VcColumn id="image" field="imgSrc" type="image" mobile-role="image" width="60px" />
   <VcColumn id="name" field="name" title="Name" mobile-role="title" />
   <VcColumn id="price" field="price" title="Price" type="money" mobile-role="field" />
   <VcColumn id="stock" field="stock" title="Stock" type="number" mobile-role="field" />
@@ -1589,7 +1589,7 @@ function onRowRemove(event: { data: Product; index: number; cancel: () => void }
 
 ### Recipe 1: Products List Blade
 
-A typical list blade with search, pagination, row actions, and empty states -- modeled after real vendor-portal usage.
+A typical list blade with search, pagination, row actions, and empty states.
 
 ```vue
 <template>

package/runtime/knowledge/docs/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.docs.md

@@ -22,19 +22,28 @@ Renders a VirtoCommerce platform dynamic property as the appropriate form contro
 ```vue
 <template>
   <VcDynamicProperty
-    :property="dynamicProperty"
-    :model-value="propertyValue"
-    :value-type="dynamicProperty.valueType"
-    :name="dynamicProperty.name"
-    :required="dynamicProperty.isRequired"
-    :dictionary="dynamicProperty.isDictionary"
-    :multivalue="dynamicProperty.isMultivalue"
+    :property="property"
+    :model-value="property.value"
+    :value-type="property.valueType ?? ''"
+    :name="property.name"
+    :required="property.required"
+    :dictionary="property.dictionary"
+    :multivalue="property.multivalue"
+    :multilanguage="property.multilanguage"
+    :current-language="currentLocale"
+    :rules="{
+      min: property.validationRule?.charCountMin,
+      max: property.validationRule?.charCountMax,
+      regex: property.validationRule?.regExp,
+    }"
     :options-getter="loadDictionaryOptions"
     @update:model-value="handlePropertyUpdate"
   />
 </template>
 ```
 
+The prop names match the `DynamicObjectProperty` shape returned by the platform — pass `property.dictionary`, `property.multivalue`, `property.required` directly without renaming. Always pass `valueType` with a string fallback because the API can return `undefined` for newly-created properties. The `:multilanguage` and `:current-language` props are required when the property supports localized values; the `:rules` object maps the property's `validationRule` to the form-validation engine.
+
 ## Key Props
 
 | Prop                 | Type       | Default | Description                                                                   |

package/runtime/knowledge/docs/ui/components/organisms/vc-sidebar/vc-sidebar.docs.md

@@ -126,7 +126,7 @@ Override with the `width` or `height` prop for custom dimensions.
 ### Elevated Variant with Custom Width
 
 ```vue
-<VcSidebar v-model="open" variant="elevated" :width="480" title="Details">
+<VcSidebar v-model="open" variant="elevated" width="480px" title="Details">
   <div class="tw-p-5">Content</div>
 </VcSidebar>
 ```