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

package/runtime/knowledge/docs/core/plugins/modularity/modularity.docs.md

@@ -37,8 +37,8 @@ If you are building anything in vc-shell -- a new page, a CRUD flow, a dashboard
   - [Registering Notification Types](#registering-notification-types)
   - [Adding Locales](#adding-locales)
   - [Registering Dashboard Widgets](#registering-dashboard-widgets)
-  - [Module Version Compatibility](#module-version-compatibility)
-  - [Remote Modules (Module Federation)](#remote-modules-module-federation)
+  - [Plugin Compatibility](#plugin-compatibility)
+  - [Plugin Loading (Module Federation)](#plugin-loading-module-federation)
 - [Recipes](#recipes)
   - [Minimal Module (Blades Only)](#minimal-module-blades-only)
   - [Module with CRUD Blades (List + Details)](#module-with-crud-blades-list--details)
@@ -69,24 +69,15 @@ export default defineAppModule({
 ```vue
 <!-- modules/my-feature/pages/MyFeatureList.vue -->
 <template>
-  <VcBlade
-    title="My Feature"
-    :closable="closable"
-    @close="$emit('close:blade')"
-  >
+  <VcBlade title="My Feature">
     <p>Hello from my first module!</p>
   </VcBlade>
 </template>
 
 <script setup lang="ts">
-import { VcBlade } from "@vc-shell/framework";
+import { VcBlade } from "@vc-shell/framework/ui";
 
-defineProps<{ closable?: boolean }>();
-defineEmits(["close:blade"]);
-</script>
-
-<script lang="ts">
-defineOptions({
+defineBlade({
   name: "MyFeatureList",
   url: "/my-feature",
   isWorkspace: true,
@@ -99,6 +90,8 @@ defineOptions({
 </script>
 ```
 
+`VcBlade` reads `expanded` and `closable` directly from the blade descriptor and emits its own close action — blade pages no longer declare those as props or wire up `@close` / `@expand` / `@collapse` emits.
+
 ```json
 // modules/my-feature/locales/en.json
 {
@@ -153,31 +146,12 @@ my-feature-module/
 
 When the host application calls `app.use(module)`, the `install()` function runs the following steps **synchronously and in order**:
 
-```
-app.use(module)
-  |
-  v
-1. BLADE REGISTRATION
-   For each entry in `blades`:
-     - Register in BladeRegistry (name, component, route, permissions)
-     - If blade has `url` + `menuItem` --> register sidebar menu entry
-  |
-  v
-2. NOTIFICATION REGISTRATION (new API)
-   For each entry in `notifications`:
-     - Register type + config in NotificationStore
-  |
-  v
-3. LEGACY NOTIFICATION COMPAT (deprecated)
-   If `notifications` is NOT provided but `notificationTemplates` is:
-     - Register templates with notifyType in NotificationStore
-   If any blade has `notifyType`:
-     - Create automatic toast subscription (with deprecation warning)
-  |
-  v
-4. LOCALE MERGE
-   For each entry in `locales`:
-     - mergeLocaleMessage(langCode, messages) into vue-i18n
+```mermaid
+flowchart TD
+    Entry["app.use(module)"] --> S1["1. BLADE REGISTRATION<br/>For each entry in <code>blades</code>:<br/>• Register in BladeRegistry (name, component, route, permissions)<br/>• If blade has <code>url</code> + <code>menuItem</code> → register sidebar menu entry"]
+    S1 --> S2["2. NOTIFICATION REGISTRATION<br/>For each entry in <code>notifications</code>:<br/>• Register type + config in NotificationStore"]
+    S2 --> S3["3. LEGACY NOTIFICATION COMPAT (deprecated)<br/>If <code>notifications</code> is NOT provided but <code>notificationTemplates</code> is:<br/>• Register templates with notifyType<br/>If any blade has <code>notifyType</code>:<br/>• Create automatic toast subscription (with deprecation warning)"]
+    S3 --> S4["4. LOCALE MERGE<br/>For each entry in <code>locales</code>:<br/>• mergeLocaleMessage(langCode, messages) into vue-i18n"]
 ```
 
 > **Why this order matters:** Blades must be registered before anything references them (e.g., menu items link to blade routes). Notifications are independent. Locales come last because they are purely additive.
@@ -274,15 +248,15 @@ Each blade is registered in the `BladeRegistry` with:
 | `routable`    | `component.routable`               | `true` = gets a Vue Router route (default: `true`) |
 | `permissions` | `component.permissions`            | Required permissions to access the blade           |
 
-> **Tip:** The export key (e.g., `ProductsList` in `{ ProductsList }`) is used as a fallback name when `component.name` is not defined. Always set `defineOptions({ name: "..." })` for clarity.
+> **Tip:** The export key (e.g., `ProductsList` in `{ ProductsList }`) is used as a fallback name when `defineBlade` does not set a name. Always set `defineBlade({ name: "..." })` explicitly.
 
 ### Blade Static Properties
 
-Blades declare their routing, permissions, and menu behavior through **static properties** set via `defineOptions`:
+Blades declare their routing, permissions, and menu behavior through `defineBlade`:
 
 ```vue
-<script lang="ts">
-defineOptions({
+<script setup lang="ts">
+defineBlade({
   // REQUIRED: Unique name for the blade (used in BladeRegistry)
   name: "OrdersList",
 
@@ -310,13 +284,13 @@ defineOptions({
 </script>
 ```
 
-> **Note:** `defineOptions` is a Vue 3.3+ compiler macro. Static properties like `url`, `isWorkspace`, and `menuItem` are vc-shell conventions -- they are read by `defineAppModule` during the install phase, not by Vue itself.
+> **Note:** `defineBlade` is compiled by the VC-Shell Vite plugin. It emits Vue component options and registers blade metadata before module installation.
 
 **Child blades** (detail pages opened from a list) typically do NOT need `url`, `isWorkspace`, or `menuItem`:
 
 ```vue
-<script lang="ts">
-defineOptions({
+<script setup lang="ts">
+defineBlade({
   name: "OrderDetails",
   // No url, no menuItem -- this blade is opened programmatically via openBlade()
 });
@@ -328,8 +302,8 @@ defineOptions({
 Menu items are created **automatically** when a blade has both `url` and `menuItem` static properties. You do not call any menu API yourself.
 
 ```vue
-<script lang="ts">
-defineOptions({
+<script setup lang="ts">
+defineBlade({
   name: "ProductsList",
   url: "/products",
   isWorkspace: true,
@@ -509,64 +483,31 @@ export default defineAppModule({ blades: pages, locales });
 | `permissions` | `string[]`                          | Required permissions (optional)          |
 | `props`       | `Record<string, unknown>`           | Props passed to the component (optional) |
 
-### Module Version Compatibility
-
-Remote modules loaded via Module Federation can declare framework compatibility using semver ranges. The host checks these ranges at load time and skips incompatible modules:
-
-```json
-// Remote module's manifest (served by the backend)
-{
-  "id": "my-remote-module",
-  "entry": "https://cdn.example.com/my-module/remoteEntry.js",
-  "version": "1.2.0",
-  "compatibleWith": {
-    "dependencies": {
-      "@vc-shell/framework": ">=2.0.0 <3.0.0"
-    }
-  }
-}
-```
-
-At startup, the host:
+### Plugin Compatibility
 
-1. Reads the current `@vc-shell/framework` version from `package.json`
-2. Checks each remote module's `compatibleWith.dependencies["@vc-shell/framework"]` range
-3. Skips modules that fail the semver check (with a console warning)
-4. Loads and installs compatible modules
+Plugin compatibility is settled on the Platform side, not in the browser. The Platform validates each plugin's `<dependency>` declarations in **module.manifest** at .NET module install time and refuses incompatible installs. By the time a plugin appears in the manifest endpoint, the dependency graph has already approved it — there is no client-side semver filter.
 
-This ensures that a framework major version upgrade does not break deployed remote modules.
+Upgrading the host's framework does not silently drop older plugins; if a plugin becomes incompatible, the Platform admin sees an install-time error first.
 
-### Remote Modules (Module Federation)
+### Plugin Loading (Module Federation)
 
-vc-shell supports loading modules from remote servers at runtime using Module Federation. This is the primary deployment model for production applications where modules are developed and deployed independently.
+vc-shell loads plugin extensions at runtime via Module Federation. A plugin remote is built by a .NET module's Vue subpackage and discovered by the Platform from the dependency graph. The host fetches a manifest of plugins for its `appId` at boot and installs each as a Vue plugin.
 
 The loading sequence:
 
+```mermaid
+flowchart TD
+    A["App Start (host main.ts)"] --> N1["1. Fetch plugin manifest<br/>GET /api/apps/{appId}/manifest"]
+    N1 --> N2["2. Initialize MF runtime<br/>with shared deps from @vc-shell/mf-config"]
+    N2 --> N3["3. Load each plugin's remoteEntry.js<br/>(Promise.allSettled in parallel)"]
+    N3 --> N4["4. Resolve Vue plugins from each remote's default export"]
+    N4 --> N5["5. app.use(plugin, { router }) for each<br/>→ triggers defineAppModule's install()"]
+    N5 --> N6["6. provide(ModulesReadyKey, true)<br/>→ app.mount('#app')"]
 ```
-App Start
-  |
-  v
-1. Fetch module registry from /api/frontend-modules
-  |
-  v
-2. Filter by framework version compatibility (semver check)
-  |
-  v
-3. Initialize Module Federation runtime with shared deps
-   (vue, vue-router, vue-i18n, @vc-shell/framework, etc.)
-  |
-  v
-4. Load all compatible remote modules in parallel
-  |
-  v
-5. Resolve Vue plugins from each module's exports
-  |
-  v
-6. app.use(plugin) for each module --> triggers defineAppModule's install()
-  |
-  v
-7. Set modulesReady = true --> app renders
-```
+
+Non-OK manifest responses (401 / 403 / 404 / 5xx) are treated as "no plugins" — the host logs a `console.warn`, sets `modulesReady=true`, and mounts without extensions. Only network or parse failures set `modulesLoadError=true`.
+
+See the [Module Federation guide](../guides/module-federation/index.md) for the full plugin-author + host-app walkthrough.
 
 The host shares singleton instances of core dependencies (Vue, Vue Router, vue-i18n, @vc-shell/framework) so that remote modules use the same runtime. This is critical for reactivity, routing, and DI to work across module boundaries.
 
@@ -626,8 +567,12 @@ The list blade (workspace):
 
 ```vue
 <!-- pages/ProductsList.vue -->
-<script lang="ts">
-defineOptions({
+<script setup lang="ts">
+import { useBlade } from "@vc-shell/framework";
+import { VcBlade, VcDataTable, VcColumn } from "@vc-shell/framework/ui";
+import useProducts from "../composables/useProducts";
+
+defineBlade({
   name: "ProductsList",
   url: "/products",
   isWorkspace: true,
@@ -638,11 +583,6 @@ defineOptions({
     priority: 10,
   },
 });
-</script>
-
-<script setup lang="ts">
-import { useBlade, VcBlade, VcDataTable, VcColumn } from "@vc-shell/framework";
-import useProducts from "../composables/useProducts";
 
 const { openBlade } = useBlade();
 const { items, loading, totalCount, load } = useProducts();
@@ -660,15 +600,13 @@ The details blade (child):
 
 ```vue
 <!-- pages/ProductDetails.vue -->
-<script lang="ts">
-defineOptions({
+<script setup lang="ts">
+import { VcBlade } from "@vc-shell/framework/ui";
+
+defineBlade({
   name: "ProductDetails",
   // No url, no menuItem -- opened programmatically
 });
-</script>
-
-<script setup lang="ts">
-import { VcBlade } from "@vc-shell/framework";
 
 const props = defineProps<{
   param?: { productId: string };
@@ -758,7 +696,7 @@ import { ExtensionPoint } from "@vc-shell/framework";
 
 ## Common Mistakes
 
-### Forgetting `defineOptions` on a blade
+### Forgetting `defineBlade` on a blade
 
 ```typescript
 // module/index.ts
@@ -770,11 +708,11 @@ export default defineAppModule({
 ```vue
 <!-- MyBlade.vue -->
 <script setup lang="ts">
-// No defineOptions!
+// No defineBlade!
 </script>
 ```
 
-The blade will be registered with the export key (`"MyBlade"`) as its name, but it will have **no route and no menu entry**. Always add `defineOptions` with at least a `name`.
+The blade will be registered with the export key (`"MyBlade"`) as its name, but it will have **no route and no menu entry** because `defineBlade` is what writes routing, permissions, and menu config into the blade config registry. Always call `defineBlade({ name, url?, menuItem?, ... })` at the top of `<script setup>`.
 
 ### Using `createAppModule` with the new notifications API
 
@@ -821,11 +759,11 @@ export default defineAppModule({
 
 // Module B
 export default defineAppModule({
-  blades: { Dashboard: DashboardB }, // Overwrites Module A's Dashboard!
+  blades: { Dashboard: DashboardB }, // Throws at install time!
 });
 ```
 
-Blade names must be globally unique. Use descriptive, module-prefixed names: `OrdersDashboard`, `ProductsDashboard`.
+`BladeRegistry` throws when a name is registered twice: `Blade 'Dashboard' is already registered`. The error halts module installation, so duplicate names are caught at startup rather than silently shadowing each other. Use descriptive, module-prefixed names: `OrdersDashboard`, `ProductsDashboard`.
 
 ### Locale key collisions
 

package/runtime/knowledge/docs/core/plugins/permissions/permissions.docs.md

@@ -122,10 +122,14 @@ export default defineAppModule({
 
 ### Toolbar Button Visibility
 
-Toolbar buttons support a `permissions` property that works the same way:
+Toolbar items are declared as an `IBladeToolbar[]` array and bound to `<VcBlade :toolbar-items>`. The `permissions` property on each entry is filtered out before render when the user lacks the listed permission(s):
 
-```typescript
-const toolbar = useToolbar([
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { VcBlade, type IBladeToolbar } from "@vc-shell/framework";
+
+const bladeToolbar = ref<IBladeToolbar[]>([
   {
     id: "save",
     title: "Save",
@@ -141,6 +145,11 @@ const toolbar = useToolbar([
     clickHandler: () => deleteOrder(),
   },
 ]);
+</script>
+
+<template>
+  <VcBlade :toolbar-items="bladeToolbar" />
+</template>
 ```
 
 ## Tip: Permission Naming Convention

package/runtime/knowledge/docs/core/plugins/signalR/signalR.docs.md

@@ -67,26 +67,26 @@ Module developers do not install this plugin. It is registered once by the frame
 
 ## Connection Lifecycle
 
-```
-User logs in (isAuthenticated = true)
-  |
-  v
-connection.start()  ------>  /pushNotificationHub (WebSocket)
-  |                              |
-  |  <--- "Send" messages -------+
-  |  <--- "SendSystemEvents" ----+  (filtered by creator)
-  |                              |
-  v                              |
-store.ingest(message)            |
-  |                              |
-  +--- toast notification        |
-  +--- subscriber callbacks      |
-  +--- history update            |
-  |                              |
-User logs out                    |
-  |                              |
-  v                              |
-connection.stop()  ------------>-+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant C as SignalR client
+    participant Hub as /pushNotificationHub
+    participant Store as NotificationStore
+
+    U->>C: log in (isAuthenticated = true)
+    C->>Hub: connection.start() (WebSocket)
+    Note over C,Hub: connection open
+
+    Hub-->>C: "Send" (targeted)
+    C->>Store: ingest(message)
+    Hub-->>C: "SendSystemEvents" (broadcast, filtered by creator)
+    C->>Store: ingest(message, { broadcast: true })
+
+    Store->>Store: toast • subscriber callbacks • history update
+
+    U->>C: log out
+    C->>Hub: connection.stop()
 ```
 
 ### Reconnection Behavior

package/runtime/knowledge/docs/injection-keys.docs.md

@@ -49,7 +49,7 @@ This centralized approach has several advantages:
 | `DashboardServiceKey`           | `IDashboardService`           | Dashboard widget management    |
 | `MenuServiceKey`                | `MenuService`                 | Main navigation menu           |
 | `SettingsMenuServiceKey`        | `ISettingsMenuService`        | Settings sidebar menu          |
-| `AppBarWidgetServiceKey`        | `IAppBarWidgetService`        | App bar widget slots           |
+| `AppBarWidgetServiceKey`        | `IAppBarWidgetService`        | App hub widget registry        |
 | `AppBarMobileButtonsServiceKey` | `IAppBarMobileButtonsService` | Mobile app bar buttons         |
 | `LanguageServiceKey`            | `ILanguageService`            | Localization service           |
 | `ToolbarServiceKey`             | `IToolbarService`             | Blade toolbar actions          |

package/runtime/knowledge/docs/shell/auth/LoginPage/login-page.docs.md

@@ -61,7 +61,7 @@ const routes = [
     component: Login,
     meta: { public: true },
     props: {
-      title: "Vendor Portal",
+      title: "Operations Console",
       subtitle: "Sign in to manage your store",
       logo: "/assets/vendor-logo.svg",
     },

package/runtime/knowledge/docs/shell/components/language-selector/language-selector.docs.md

@@ -102,4 +102,4 @@ async function onLogin(user) {
 - [SettingsMenu](../settings-menu/settings-menu.docs.md) -- parent container
 - [SettingsMenuItem](../settings-menu-item/settings-menu-item.docs.md) -- base menu item used internally
 - [ThemeSelector](../theme-selector/theme-selector.docs.md) -- sibling preference entry
-- [MultilanguageSelector](../multilanguage-selector/multilanguage-selector.docs.md) -- content language picker (different purpose)
+- [MultilanguageSelector](../../../ui/components/molecules/multilanguage-selector/multilanguage-selector.docs.md) -- content language picker (different purpose)

package/runtime/knowledge/docs/shell/components/notification-dropdown/notification-dropdown.docs.md

@@ -123,4 +123,4 @@ When a notification's `notifyType` matches a registered template key, that compo
 ## Related Components
 
 - [NotificationTemplate](../notification-template/notification-template.docs.md) -- base template for each notification row
-- [Notifications](../notifications/notifications.docs.md) -- toast notification system (different from push notifications)
+- [Notifications](../../../core/notifications/notifications.docs.md) -- push notification system (store, registration, blade-scoped subscriptions)

package/runtime/knowledge/docs/shell/components/notification-template/notification-template.docs.md

@@ -175,4 +175,4 @@ const isRunning = computed(() => (notification.value as any).isRunning ?? false)
 ## Related Components
 
 - [NotificationDropdown](../notification-dropdown/notification-dropdown.docs.md) -- parent dropdown container
-- [Notifications](../notifications/notifications.docs.md) -- toast notification system (different from push notifications)
+- [Notifications](../../../core/notifications/notifications.docs.md) -- push notification system (store, registration, blade-scoped subscriptions)

package/runtime/knowledge/docs/shell/components/settings-menu/settings-menu.docs.md

@@ -53,7 +53,7 @@ This component has no props. All content is driven by the settings menu service
 A typical module registers all its settings entries during the module install phase:
 
 ```ts
-// vendor-portal-module/index.ts
+// settings-module/index.ts
 import { markRaw } from "vue";
 import { useSettingsMenu, ThemeSelector, LanguageSelector, ChangePasswordButton, LogoutButton } from "@vc-shell/framework";
 
@@ -98,12 +98,12 @@ export default {
 
 ### Registration options
 
-| Option      | Type        | Required | Description                                                |
-| ----------- | ----------- | -------- | ---------------------------------------------------------- |
-| `id`        | `string`    | Yes      | Unique identifier for the entry                            |
-| `group`     | `string`    | Yes      | Group name (entries are grouped and separated by dividers) |
-| `order`     | `number`    | Yes      | Sort order within the group (lower = higher position)      |
-| `component` | `Component` | Yes      | Vue component to render as the menu item                   |
+| Option      | Type        | Required | Description                                                                                                                                    |
+| ----------- | ----------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`        | `string`    | No       | Unique identifier for the entry. Auto-generated when omitted.                                                                                  |
+| `group`     | `string`    | No       | Group name (entries are grouped and separated by dividers). Defaults to `"general"`.                                                           |
+| `order`     | `number`    | No       | Sort order within the group (lower = higher position). Defaults to the current registry size at registration time, preserving insertion order. |
+| `component` | `Component` | Yes      | Vue component to render as the menu item.                                                                                                      |
 
 ### Group rendering
 

package/runtime/knowledge/docs/shell/components/settings-menu-item/settings-menu-item.docs.md

@@ -201,5 +201,5 @@ Do not set `triggerAction="none"` and then rely on `@trigger:click` -- the event
 - [SettingsMenu](../settings-menu/settings-menu.docs.md) -- parent container
 - [ThemeSelector](../theme-selector/theme-selector.docs.md) -- uses SettingsMenuItem with submenu slot
 - [LanguageSelector](../language-selector/language-selector.docs.md) -- uses SettingsMenuItem with submenu slot
-- [VcDropdownPanel](../../ui/components/molecules/vc-dropdown-panel/) -- used internally for desktop sub-menus
-- [VcDropdownItem](../../ui/components/molecules/vc-dropdown/) -- recommended for sub-menu option rows
+- [VcDropdownPanel](../../../ui/components/molecules/vc-dropdown-panel/vc-dropdown-panel.docs.md) -- used internally for desktop sub-menus
+- [VcDropdown](../../../ui/components/molecules/vc-dropdown/vc-dropdown.docs.md) -- recommended for sub-menu option rows

package/runtime/knowledge/docs/shell/dashboard/draggable-dashboard/draggable-dashboard.docs.md

@@ -11,7 +11,7 @@ Gridstack.js-powered dashboard container that renders registered widgets in a dr
 
 ## When to Use
 
-- Use as the main dashboard view for the shell or vendor portal
+- Use as the main dashboard view for a shell application
 - When you need a customizable widget grid with drag-and-drop rearrangement
 - Do NOT use for static, non-rearrangeable layouts (use a regular grid/flex layout instead)
 

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

@@ -85,12 +85,12 @@ A small indicator component for displaying counts, status dots, or short text la
 ## Recipe: Status Tags in a Table Cell
 
 ```vue
-<VcColumn id="status" header="Status" :width="120">
-  <template #default="{ row }">
+<VcColumn id="status" title="Status" width="120px">
+  <template #body="{ data }">
     <VcBadge
       inline
-      :content="row.status"
-      :variant="statusVariantMap[row.status]"
+      :content="data.status"
+      :variant="statusVariantMap[data.status]"
       size="s"
     />
   </template>

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

@@ -328,5 +328,5 @@ All visual properties are customizable through CSS custom properties. Each varia
 
 - VcButton calls `e.preventDefault()` on click to support `link` variant pattern. Form submit buttons must use `type="submit"` to bypass this.
 - `VcButtonGroup` integration is via provide/inject (`vcButtonGroupSize` injection key in `framework/injection-keys.ts`).
-- Size aliases `xs`/`base` are kept for vendor-portal backward compatibility — slated for removal in v3.
+- Size aliases `xs`/`base` are kept for backward compatibility — slated for removal in v3.
 <!-- internal:end -->

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

@@ -19,11 +19,31 @@ A scrollable content wrapper that fills its parent, provides configurable paddin
 
 ## Basic Usage
 
+The most common form is a bare `<VcContainer>` wrapping the blade's body — it fills the parent, scrolls when content overflows, and applies a 16px default padding.
+
+```vue
+<VcContainer>
+  <p>Scrollable content goes here...</p>
+</VcContainer>
+```
+
+When the contained child already manages its own padding (a `VcDataTable`, for example), set `:no-padding="true"` so the wrapper does not stack extra space around it:
+
+```vue
+<VcContainer :no-padding="true">
+  <VcDataTable :items="items">
+    <VcColumn id="name" title="Name" />
+  </VcDataTable>
+</VcContainer>
+```
+
+The `shadow` prop adds an inset shadow as a scroll cue. Use it for content that genuinely overflows by a long way (long forms, free-text editors); the default no-shadow rendering is preferable everywhere else.
+
 ::storybook id="layout-vccontainer--with-shadow" height="300"
 
 ```vue
 <VcContainer shadow>
-  <p>Scrollable content goes here...</p>
+  <p>Long-form content that benefits from a scroll cue...</p>
 </VcContainer>
 ```
 

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

@@ -72,13 +72,29 @@ function openDetails() {
 
 ### Inline Action in a Table Cell
 
+For row actions in a `VcDataTable`, the framework's `:row-actions` builder is the recommended path — it renders a consistent action menu per row without an extra column declaration:
+
+```vue
+<VcDataTable :items="items" :row-actions="actionBuilder" row-actions-position="column" />
+
+<script setup lang="ts">
+import type { TableAction } from "@vc-shell/framework";
+
+function actionBuilder(item: Item): TableAction[] {
+  return [
+    { icon: "lucide-pencil", title: "Edit", clickHandler: () => editItem(item) },
+    { icon: "lucide-copy", title: "Copy", clickHandler: () => duplicateItem(item) },
+  ];
+}
+</script>
+```
+
+Inline `VcLink` in a cell still fits non-action navigation (open another blade from a name, jump to a docs URL):
+
 ```vue
-<VcColumn id="actions" header="Actions" :width="120">
-  <template #default="{ row }">
-    <div class="tw-flex tw-gap-3">
-      <VcLink @click="editItem(row)">Edit</VcLink>
-      <VcLink @click="duplicateItem(row)">Copy</VcLink>
-    </div>
+<VcColumn id="name" title="Name">
+  <template #body="{ data }">
+    <VcLink @click="openItem(data.id)">{{ data.name }}</VcLink>
   </template>
 </VcColumn>
 ```

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

@@ -52,7 +52,7 @@ The last row automatically renders at 60% width for a natural paragraph feel.
 ### Avatar Placeholder
 
 ```vue
-<VcSkeleton variant="circle" :width="48" :height="48" />
+<VcSkeleton variant="circle" width="48px" :height="48" />
 ```
 
 ::storybook id="layout-vcskeleton--card-skeleton" height="450"
@@ -93,7 +93,7 @@ The last row automatically renders at 60% width for a natural paragraph feel.
     >
       <VcSkeleton
         variant="circle"
-        :width="40"
+        width="40px"
         :height="40"
       />
       <div class="tw-flex-1">