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

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

@@ -34,30 +34,30 @@ const user = reactive({ name: "John", role: "Admin" });
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `isReady` | `boolean` | *required* | When false, shows a full-screen loading spinner. |
-| `logo` | `string` | -- | Logo image URL for the sidebar/top bar. |
-| `title` | `string` | -- | Application title shown in the sidebar. |
-| `version` | `string` | -- | App version string (informational). |
-| `avatar` | `string` | -- | User avatar image URL. |
-| `name` | `string` | -- | Current user display name. |
-| `role` | `string` | -- | Current user role label. |
-| `disableMenu` | `boolean` | `false` | Hide navigation menu items. |
-| `disableAppHub` | `boolean` | `false` | Hide the Applications section inside the App Hub. |
-| `showSearch` | `boolean` | `false` | Show a search input in the sidebar that filters menu items by title. |
-| `searchPlaceholder` | `string` | `"Search keyword"` | Placeholder text for the sidebar search input. Falls back to i18n key `SHELL.SIDEBAR.SEARCH_PLACEHOLDER`. |
+| Prop                | Type      | Default            | Description                                                                                               |
+| ------------------- | --------- | ------------------ | --------------------------------------------------------------------------------------------------------- |
+| `isReady`           | `boolean` | _required_         | When false, shows a full-screen loading spinner.                                                          |
+| `logo`              | `string`  | --                 | Logo image URL for the sidebar/top bar.                                                                   |
+| `title`             | `string`  | --                 | Application title shown in the sidebar.                                                                   |
+| `version`           | `string`  | --                 | App version string (informational).                                                                       |
+| `avatar`            | `string`  | --                 | User avatar image URL.                                                                                    |
+| `name`              | `string`  | --                 | Current user display name.                                                                                |
+| `role`              | `string`  | --                 | Current user role label.                                                                                  |
+| `disableMenu`       | `boolean` | `false`            | Hide navigation menu items.                                                                               |
+| `disableAppHub`     | `boolean` | `false`            | Hide the Applications section inside the App Hub.                                                         |
+| `showSearch`        | `boolean` | `false`            | Show a search input in the sidebar that filters menu items by title.                                      |
+| `searchPlaceholder` | `string`  | `"Search keyword"` | Placeholder text for the sidebar search input. Falls back to i18n key `SHELL.SIDEBAR.SEARCH_PLACEHOLDER`. |
 
 ## Slots
 
-| Slot | Props | Description |
-|------|-------|-------------|
-| `layout` | `{ isMobile, sidebar, appsList, switchApp, openRoot, handleMenuItemClick }` | Override the entire layout (sidebar + navigation). |
-| `menu` | `{ expanded, onItemClick, searchQuery }` | Custom navigation menu. `searchQuery` contains the current search input value (empty string when search is inactive). |
-| `sidebar-header` | `{ logo, expanded, isMobile }` | Custom sidebar header. |
-| `sidebar-footer` | `{ avatar, name, role }` | Custom sidebar footer (user info). |
-| `workspace` | `{ isAuthenticated }` | Override the blade navigation workspace. |
-| `app-hub` | `{ appsList, switchApp }` | Custom content for the Applications section of the App Hub. |
+| Slot             | Props                                                                       | Description                                                                                                           |
+| ---------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| `layout`         | `{ isMobile, sidebar, appsList, switchApp, openRoot, handleMenuItemClick }` | Override the entire layout (sidebar + navigation).                                                                    |
+| `menu`           | `{ expanded, onItemClick, searchQuery }`                                    | Custom navigation menu. `searchQuery` contains the current search input value (empty string when search is inactive). |
+| `sidebar-header` | `{ logo, expanded, isMobile }`                                              | Custom sidebar header.                                                                                                |
+| `sidebar-footer` | `{ avatar, name, role }`                                                    | Custom sidebar footer (user info).                                                                                    |
+| `workspace`      | `{ isAuthenticated }`                                                       | Override the blade navigation workspace.                                                                              |
+| `app-hub`        | `{ appsList, switchApp }`                                                   | Custom content for the Applications section of the App Hub.                                                           |
 
 ## Architecture
 
@@ -88,7 +88,13 @@ If you use the `menu` slot to provide a custom menu, the `searchQuery` prop is p
 
 ```vue
 <template>
-  <VcApp :is-ready="true" logo="/logo.svg" title="Admin" show-search search-placeholder="Find a module...">
+  <VcApp
+    :is-ready="true"
+    logo="/logo.svg"
+    title="Admin"
+    show-search
+    search-placeholder="Find a module..."
+  >
     <!-- Default menu with built-in filtering — no extra code needed -->
   </VcApp>
 </template>
@@ -98,7 +104,12 @@ If you use the `menu` slot to provide a custom menu, the `searchQuery` prop is p
 
 ```vue
 <template>
-  <VcApp :is-ready="true" logo="/logo.svg" title="Admin" show-search>
+  <VcApp
+    :is-ready="true"
+    logo="/logo.svg"
+    title="Admin"
+    show-search
+  >
     <template #menu="{ expanded, onItemClick, searchQuery }">
       <MyCustomMenu
         :expanded="expanded"
@@ -157,15 +168,27 @@ Replace the default user info section with a custom footer:
 
 ```vue
 <template>
-  <VcApp :is-ready="true" logo="/logo.svg" title="Admin">
+  <VcApp
+    :is-ready="true"
+    logo="/logo.svg"
+    title="Admin"
+  >
     <template #sidebar-footer="{ avatar, name, role }">
       <div class="tw-flex tw-items-center tw-gap-3 tw-p-3">
-        <img :src="avatar" class="tw-w-8 tw-h-8 tw-rounded-full" />
+        <img
+          :src="avatar"
+          class="tw-w-8 tw-h-8 tw-rounded-full"
+        />
         <div>
           <div class="tw-text-sm tw-font-medium">{{ name }}</div>
           <div class="tw-text-xs tw-text-gray-500">{{ role }}</div>
         </div>
-        <VcButton variant="ghost" size="icon" icon="lucide-log-out" @click="logout" />
+        <VcButton
+          variant="ghost"
+          size="icon"
+          icon="lucide-log-out"
+          @click="logout"
+        />
       </div>
     </template>
   </VcApp>

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

@@ -18,34 +18,39 @@ A full-page centered authentication layout for login, registration, password res
     subtitle="Welcome back"
   >
     <form @submit.prevent="handleLogin">
-      <VcInput v-model="email" label="Email" />
-      <VcInput v-model="password" label="Password" type="password" />
+      <VcInput
+        v-model="email"
+        label="Email"
+      />
+      <VcInput
+        v-model="password"
+        label="Password"
+        type="password"
+      />
       <button type="submit">Sign In</button>
     </form>
-    <template #footer>
-      <a href="/terms">Terms of Service</a> | <a href="/privacy">Privacy Policy</a>
-    </template>
+    <template #footer> <a href="/terms">Terms of Service</a> | <a href="/privacy">Privacy Policy</a> </template>
   </VcAuthLayout>
 </template>
 ```
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `logo` | `string` | - | Path or URL to the logo image |
-| `logoAlt` | `string` | `"Logo"` | Alt text for the logo |
-| `title` | `string` | - | Card heading |
-| `subtitle` | `string` | - | Card subheading |
-| `background` | `string` | - | Background image URL (preloaded) |
-| `bgColor` | `string` | - | Background color CSS override |
+| Prop         | Type     | Default  | Description                      |
+| ------------ | -------- | -------- | -------------------------------- |
+| `logo`       | `string` | -        | Path or URL to the logo image    |
+| `logoAlt`    | `string` | `"Logo"` | Alt text for the logo            |
+| `title`      | `string` | -        | Card heading                     |
+| `subtitle`   | `string` | -        | Card subheading                  |
+| `background` | `string` | -        | Background image URL (preloaded) |
+| `bgColor`    | `string` | -        | Background color CSS override    |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot      | Description                                           |
+| --------- | ----------------------------------------------------- |
 | `default` | Form content (fields, buttons, SSO providers, errors) |
-| `footer` | Below-card area (terms, privacy links) |
+| `footer`  | Below-card area (terms, privacy links)                |
 
 ## Features
 
@@ -71,10 +76,27 @@ The layout uses a `<main>` element as the page landmark and an `<h2>` for the ca
     subtitle="Enter your credentials or use a social provider"
     background="/img/auth-bg.jpg"
   >
-    <form @submit.prevent="handleLogin" class="tw-space-y-4">
-      <VcInput v-model="email" label="Email" type="email" required />
-      <VcInput v-model="password" label="Password" type="password" required />
-      <VcButton type="submit" variant="primary" class="tw-w-full">
+    <form
+      @submit.prevent="handleLogin"
+      class="tw-space-y-4"
+    >
+      <VcInput
+        v-model="email"
+        label="Email"
+        type="email"
+        required
+      />
+      <VcInput
+        v-model="password"
+        label="Password"
+        type="password"
+        required
+      />
+      <VcButton
+        type="submit"
+        variant="primary"
+        class="tw-w-full"
+      >
         Sign In
       </VcButton>
     </form>
@@ -82,16 +104,27 @@ The layout uses a `<main>` element as the page landmark and an `<h2>` for the ca
     <div class="tw-my-4 tw-text-center tw-text-sm tw-text-gray-500">or</div>
 
     <div class="tw-space-y-2">
-      <VcButton variant="outline" class="tw-w-full" @click="loginWithGoogle">
+      <VcButton
+        variant="outline"
+        class="tw-w-full"
+        @click="loginWithGoogle"
+      >
         Continue with Google
       </VcButton>
-      <VcButton variant="outline" class="tw-w-full" @click="loginWithAzure">
+      <VcButton
+        variant="outline"
+        class="tw-w-full"
+        @click="loginWithAzure"
+      >
         Continue with Azure AD
       </VcButton>
     </div>
 
     <template #footer>
-      <nav aria-label="Legal links" class="tw-text-sm tw-text-gray-500">
+      <nav
+        aria-label="Legal links"
+        class="tw-text-sm tw-text-gray-500"
+      >
         <a href="/terms">Terms</a> &middot; <a href="/privacy">Privacy</a>
       </nav>
     </template>
@@ -108,15 +141,36 @@ The layout uses a `<main>` element as the page landmark and an `<h2>` for the ca
     title="Reset Password"
     subtitle="Enter your email to receive a reset link"
   >
-    <form @submit.prevent="sendResetLink" class="tw-space-y-4">
-      <VcInput v-model="email" label="Email" type="email" required />
-      <VcBanner v-if="successMessage" variant="success" icon="lucide-circle-check">
+    <form
+      @submit.prevent="sendResetLink"
+      class="tw-space-y-4"
+    >
+      <VcInput
+        v-model="email"
+        label="Email"
+        type="email"
+        required
+      />
+      <VcBanner
+        v-if="successMessage"
+        variant="success"
+        icon="lucide-circle-check"
+      >
         {{ successMessage }}
       </VcBanner>
-      <VcBanner v-if="errorMessage" variant="danger" icon="lucide-circle-alert">
+      <VcBanner
+        v-if="errorMessage"
+        variant="danger"
+        icon="lucide-circle-alert"
+      >
         {{ errorMessage }}
       </VcBanner>
-      <VcButton type="submit" variant="primary" class="tw-w-full" :disabled="isSending">
+      <VcButton
+        type="submit"
+        variant="primary"
+        class="tw-w-full"
+        :disabled="isSending"
+      >
         Send Reset Link
       </VcButton>
     </form>

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

@@ -18,21 +18,21 @@ Traditional admin panels use page-based routing: click a link, the entire viewpo
 +----------------+-------------------+---------------------+
 ```
 
-| Aspect | Pages/Routes | Blades |
-|--------|-------------|--------|
-| Context | Lost on navigate | Parent remains visible |
+| Aspect    | Pages/Routes         | Blades                           |
+| --------- | -------------------- | -------------------------------- |
+| Context   | Lost on navigate     | Parent remains visible           |
 | Data flow | Query params / store | `param`, `options`, `callParent` |
-| Layout | Full viewport | Side-by-side panels |
-| Depth | Flat (1 level) | Unlimited nesting |
+| Layout    | Full viewport        | Side-by-side panels              |
+| Depth     | Flat (1 level)       | Unlimited nesting                |
 
 ## 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](../../molecules/vc-popup/)         |
+| Full-page route without blade stack               | Vue Router view                              |
+| Scrollable content section inside a blade         | [VcContainer](../../molecules/vc-container/) |
 
 Use VcBlade for every screen in a vc-shell application -- it is the standard container that integrates with the navigation system, toolbar, breadcrumbs, and unsaved-changes guards. **Do not use** VcBlade for transient dialogs (use `VcPopup` / `usePopup()`) or for content areas that do not need their own header and close button.
 
@@ -40,7 +40,11 @@ Use VcBlade for every screen in a vc-shell application -- it is the standard con
 
 ```vue
 <template>
-  <VcBlade title="My First Blade" icon="lucide-box" @close="$emit('close:blade')">
+  <VcBlade
+    title="My First Blade"
+    icon="lucide-box"
+    @close="$emit('close:blade')"
+  >
     <div class="tw-p-4">Hello from a blade!</div>
   </VcBlade>
 </template>
@@ -105,16 +109,16 @@ import { useBlade, type IBladeToolbar } from "@vc-shell/framework";
 
 // Registration metadata
 defineOptions({
-  name: "OfferDetails",       // Required: unique blade name
-  url: "/offer",              // Optional: URL segment
-  routable: false,            // Optional: exclude from direct URL access
+  name: "OfferDetails", // Required: unique blade name
+  url: "/offer", // Optional: URL segment
+  routable: false, // Optional: exclude from direct URL access
 });
 
 // Standard props injected by the navigation system
 export interface Props {
   expanded: boolean;
   closable: boolean;
-  param?: string;             // Entity ID
+  param?: string; // Entity ID
   options?: { sellerProduct?: object };
 }
 
@@ -132,7 +136,7 @@ const emit = defineEmits<Emits>();
 
 const { openBlade, closeSelf, callParent, onBeforeClose } = useBlade();
 
-const title = computed(() => props.param ? "Edit Offer" : "New Offer");
+const title = computed(() => (props.param ? "Edit Offer" : "New Offer"));
 const isLoading = ref(false);
 const hasChanges = ref(false);
 
@@ -153,13 +157,13 @@ defineExpose({ title });
 
 ### defineOptions Reference
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `name` | `string` | **Required.** Unique blade identifier for `openBlade({ name: "..." })`. |
-| `url` | `string` | URL path segment (e.g., `"/offers"` produces `/#/.../offers`). |
-| `isWorkspace` | `boolean` | Marks blade as a workspace (root-level, not closable). |
-| `routable` | `boolean` | When `false`, blade cannot be opened via direct URL navigation. |
-| `menuItem` | `object` | Registers a sidebar menu entry: `{ id, title, icon, priority }`. |
+| Property      | Type      | Description                                                             |
+| ------------- | --------- | ----------------------------------------------------------------------- |
+| `name`        | `string`  | **Required.** Unique blade identifier for `openBlade({ name: "..." })`. |
+| `url`         | `string`  | URL path segment (e.g., `"/offers"` produces `/#/.../offers`).          |
+| `isWorkspace` | `boolean` | Marks blade as a workspace (root-level, not closable).                  |
+| `routable`    | `boolean` | When `false`, blade cannot be opened via direct URL navigation.         |
+| `menuItem`    | `object`  | Registers a sidebar menu entry: `{ id, title, icon, priority }`.        |
 
 ### defineExpose
 
@@ -191,8 +195,12 @@ openBlade({
 openBlade({
   name: "ProductDetails",
   param: item.id,
-  onOpen()  { selectedItemId.value = item.id; },
-  onClose() { selectedItemId.value = undefined; },
+  onOpen() {
+    selectedItemId.value = item.id;
+  },
+  onClose() {
+    selectedItemId.value = undefined;
+  },
 });
 
 // Open a workspace (replaces entire blade stack)
@@ -225,8 +233,9 @@ openBlade({ name: "OrderDetails", param: order.id });
 
 // In child blade
 onMounted(async () => {
-  if (props.param) await loadOrder(props.param);   // Existing
-  else initNewOrder();                               // New
+  if (props.param)
+    await loadOrder(props.param); // Existing
+  else initNewOrder(); // New
 });
 ```
 
@@ -301,8 +310,8 @@ const entityId = computed(() => ctx.value.item?.id);
 ```ts
 const { closeSelf, closeChildren } = useBlade();
 
-await closeSelf();         // Close this blade
-await closeChildren();     // Close all children, keep this blade
+await closeSelf(); // Close this blade
+await closeChildren(); // Close all children, keep this blade
 ```
 
 ### Preventing Close (Unsaved Changes Guard)
@@ -316,7 +325,7 @@ const { showConfirmation } = usePopup();
 onBeforeClose(async () => {
   if (hasUnsavedChanges.value) {
     const confirmed = await showConfirmation("Discard unsaved changes?");
-    return !confirmed;  // true = prevent close, false = allow
+    return !confirmed; // true = prevent close, false = allow
   }
   return false;
 });
@@ -340,7 +349,7 @@ const toolbar = ref<IBladeToolbar[]>([
     title: "Delete",
     icon: "lucide-trash-2",
     clickHandler: () => confirmDelete(),
-    isVisible: computed(() => !!props.param),  // Only for existing entities
+    isVisible: computed(() => !!props.param), // Only for existing entities
   },
 ]);
 ```
@@ -354,8 +363,7 @@ interface IBladeToolbar {
   icon?: string | (() => string);
   clickHandler?(): void;
   disabled?: boolean | ComputedRef<boolean>;
-  isVisible?: boolean | Ref<boolean> | ComputedRef<boolean>
-             | ((blade?: BladeDescriptor) => boolean);
+  isVisible?: boolean | Ref<boolean> | ComputedRef<boolean> | ((blade?: BladeDescriptor) => boolean);
   separator?: "left" | "right" | "both";
 }
 ```
@@ -396,7 +404,7 @@ Combine with `onBeforeClose` and `useBeforeUnload` for full protection:
 
 ```ts
 import { useBeforeUnload } from "@vc-shell/framework";
-useBeforeUnload(hasChanges);  // Browser tab close warning
+useBeforeUnload(hasChanges); // Browser tab close warning
 ```
 
 ## Custom Banners
@@ -441,6 +449,7 @@ On mobile, width is forced to `100%`. When `expanded` is `true`, the blade fills
 The most common vc-shell pattern. Key points from real-world usage (see `offers-list.vue` and `offers-details.vue`):
 
 **List blade** -- Opens a details blade on row click, tracks selected item:
+
 ```ts
 defineOptions({ name: "Offers", url: "/offers", isWorkspace: true });
 
@@ -451,8 +460,12 @@ const onItemClick = (event: { data: Offer }) => {
   openBlade({
     name: "Offer",
     param: event.data.id,
-    onOpen()  { selectedItemId.value = event.data.id; },
-    onClose() { selectedItemId.value = undefined; },
+    onOpen() {
+      selectedItemId.value = event.data.id;
+    },
+    onClose() {
+      selectedItemId.value = undefined;
+    },
   });
 };
 
@@ -461,6 +474,7 @@ defineExpose({ title: bladeTitle, reload });
 ```
 
 **Details blade** -- Loads entity, saves, notifies parent, replaces self on create:
+
 ```ts
 defineOptions({ name: "Offer", url: "/offer", routable: false });
 
@@ -508,20 +522,21 @@ Using `vee-validate` with `Field` components:
 ```ts
 const { meta } = useForm({ validateOnMount: false });
 
-const toolbar = ref([{
-  id: "save",
-  title: "Save",
-  icon: "lucide-save",
-  clickHandler: () => meta.value.valid ? save() : showError("Fix validation errors."),
-  disabled: computed(() => !meta.value.valid || !modified.value),
-}]);
+const toolbar = ref([
+  {
+    id: "save",
+    title: "Save",
+    icon: "lucide-save",
+    clickHandler: () => (meta.value.valid ? save() : showError("Fix validation errors.")),
+    disabled: computed(() => !meta.value.valid || !modified.value),
+  },
+]);
 ```
 
 ### Blade with Data Table
 
 ```vue
-<VcBlade :title="$t('ORDERS.LIST.TITLE')" icon="lucide-file-text" width="50%"
-  :expanded="expanded" :closable="closable" :toolbar-items="toolbar">
+<VcBlade :title="$t('ORDERS.LIST.TITLE')" icon="lucide-file-text" width="50%" :expanded="expanded" :closable="closable" :toolbar-items="toolbar">
   <VcDataTable
     v-model:sort-field="sortField" v-model:sort-order="sortOrder"
     v-model:search-value="searchValue" v-model:active-item-id="selectedItemId"
@@ -592,31 +607,31 @@ 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`          | `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.             |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `close` | -- | Close button clicked. Re-emit as `close:blade`. |
-| `expand` | -- | Blade expanded. Re-emit as `expand:blade`. |
-| `collapse` | -- | Blade collapsed. Re-emit as `collapse:blade`. |
+| Event      | Payload | Description                                     |
+| ---------- | ------- | ----------------------------------------------- |
+| `close`    | --      | Close button clicked. Re-emit as `close:blade`. |
+| `expand`   | --      | Blade expanded. Re-emit as `expand:blade`.      |
+| `collapse` | --      | Blade collapsed. Re-emit as `collapse:blade`.   |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| `default` | Main scrollable content area. |
+| Slot      | Description                                        |
+| --------- | -------------------------------------------------- |
+| `default` | Main scrollable content area.                      |
 | `actions` | Custom elements in the header, right of the title. |
 
 ## CSS Custom Properties
@@ -649,13 +664,43 @@ openBlade({ name: "ProductsList" });
 
 ## Related
 
-| Resource | Description |
-|----------|-------------|
-| `useBlade()` | Unified composable: identity, navigation, communication, guards, error management. |
-| `defineBladeContext()` / `injectBladeContext()` | Provide/inject reactive data for widgets and extensions. |
-| `VcBladeNavigation` | Manages blade stack and horizontal scroll (part of `vc-app.vue`). |
-| `IBladeToolbar` | TypeScript interface for toolbar button definitions. |
-| `useBeforeUnload()` | Browser tab close warning for unsaved changes. |
-| `useLoading()` | Merges multiple loading refs into a single boolean. |
-| `usePopup()` | Confirmation dialogs and error messages. |
-| `useBladeWidgets()` | Register contextual widgets for the blade widget area. |
+| Resource                                        | Description                                                                        |
+| ----------------------------------------------- | ---------------------------------------------------------------------------------- |
+| `useBlade()`                                    | Unified composable: identity, navigation, communication, guards, error management. |
+| `defineBladeContext()` / `injectBladeContext()` | Provide/inject reactive data for widgets and extensions.                           |
+| `VcBladeNavigation`                             | Manages blade stack and horizontal scroll (part of `vc-app.vue`).                  |
+| `IBladeToolbar`                                 | TypeScript interface for toolbar button definitions.                               |
+| `useBeforeUnload()`                             | Browser tab close warning for unsaved changes.                                     |
+| `useLoading()`                                  | Merges multiple loading refs into a single boolean.                                |
+| `usePopup()`                                    | Confirmation dialogs and error messages.                                           |
+| `useBladeWidgets()`                             | Register contextual widgets for the blade widget area.                             |
+
+## Content Skeleton Mode
+
+When `loading=true`, VcBlade provides `BladeLoadingKey` to all descendant components via Vue's provide/inject. Each framework UI component automatically renders a skeleton placeholder matching its visual footprint.
+
+### How It Works
+
+1. Set `loading` prop on VcBlade (typically bound to your data-fetching composable's loading ref)
+2. All child components (`VcInput`, `VcSelect`, `VcCard`, etc.) detect the loading state and render skeletons
+3. Layout containers (`VcContainer`, `VcRow`, `VcCol`, `VcForm`) are transparent — they preserve layout structure
+4. When loading completes, components switch to their normal rendering
+
+### What Shows During Loading
+
+- **Config-gated fields** (`v-if="config.showName"`) — config is available immediately, so these fields show skeletons
+- **Data-gated fields** (`v-if="item.productData"`) — data not yet loaded, so these fields don't appear in the skeleton
+- **Header and toolbar** — have their own dedicated skeletons (unchanged)
+
+No changes to existing blade pages are required.
+
+### Custom Components
+
+To make custom components skeleton-aware:
+
+```ts
+import { useBladeLoading } from "@vc-shell/framework";
+
+const bladeLoading = useBladeLoading();
+// bladeLoading.value === true when parent VcBlade is loading
+```