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

package/runtime/knowledge/docs/shell/components/change-password-button/change-password-button.docs.md

@@ -45,13 +45,7 @@ Combine with other account-related settings entries in a module setup:
 
 ```ts
 // my-module/index.ts
-import {
-  useSettingsMenu,
-  ChangePasswordButton,
-  LogoutButton,
-  ThemeSelector,
-  LanguageSelector,
-} from "@vc-shell/framework";
+import { useSettingsMenu, ChangePasswordButton, LogoutButton, ThemeSelector, LanguageSelector } from "@vc-shell/framework";
 
 export default {
   install() {

package/runtime/knowledge/docs/shell/components/error-interceptor/error-interceptor.docs.md

@@ -17,16 +17,16 @@ The component is renderless -- it renders its default slot and passes the curren
 
 ## Props
 
-| Prop | Type | Default | Description |
-|---|---|---|---|
+| Prop      | Type      | Default | Description                                      |
+| --------- | --------- | ------- | ------------------------------------------------ |
 | `capture` | `boolean` | `false` | Force error capture even outside a blade context |
 
 ## Slot Props
 
-| Prop | Type | Description |
-|---|---|---|
+| Prop    | Type                       | Description                             |
+| ------- | -------------------------- | --------------------------------------- |
 | `error` | `DisplayableError \| null` | The captured error, or null if no error |
-| `reset` | `() => void` | Clears the error state |
+| `reset` | `() => void`               | Clears the error state                  |
 
 ## Usage
 

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

@@ -87,7 +87,7 @@ async function onLogin(user) {
 ## Tips
 
 - The component only shows locales that have been registered with vue-i18n. If a locale file is missing, the language will not appear in the selector.
-- Use the `check-locales` script (`yarn check-locales`) to validate that all locale files have the same keys. Missing keys fall back to the `fallbackLocale`.
+- Use the `check:locales` script (`yarn check:locales`) to validate that all locale files have the same keys. Missing keys fall back to the `fallbackLocale`.
 - The `LanguageSelector` changes the UI language. To let users switch the content editing language for multilingual fields (e.g., product names), use the `MultilanguageSelector` component instead.
 
 ## Related Components

package/runtime/knowledge/docs/shell/components/logout-button/logout-button.docs.md

@@ -61,7 +61,7 @@ export default {
     settingsMenu.register({
       id: "logout-button",
       group: "account",
-      order: 100,  // High order places it at the bottom
+      order: 100, // High order places it at the bottom
       component: LogoutButton,
     });
   },

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

@@ -31,13 +31,13 @@ const notification = computed(() => notificationRef.value);
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | -- | Notification headline text |
-| `notification` | `IPushNotification` | -- | Full notification object (required for timestamp) |
-| `icon` | `string` | `undefined` | Icon name displayed in a circular badge |
-| `color` | `string` | `undefined` | Background color for the icon badge |
-| `severity` | `string` | `undefined` | Semantic severity level |
+| Prop           | Type                | Default     | Description                                       |
+| -------------- | ------------------- | ----------- | ------------------------------------------------- |
+| `title`        | `string`            | --          | Notification headline text                        |
+| `notification` | `IPushNotification` | --          | Full notification object (required for timestamp) |
+| `icon`         | `string`            | `undefined` | Icon name displayed in a circular badge           |
+| `color`        | `string`            | `undefined` | Background color for the icon badge               |
+| `severity`     | `string`            | `undefined` | Semantic severity level                           |
 
 ## Recipe: Custom Notification for Order Events
 
@@ -129,7 +129,10 @@ const isRunning = computed(() => (notification.value as any).isRunning ?? false)
     icon="lucide-upload"
     color="var(--info-500)"
   >
-    <div v-if="isRunning" class="tw-mt-1">
+    <div
+      v-if="isRunning"
+      class="tw-mt-1"
+    >
       <div class="tw-h-2 tw-bg-gray-200 tw-rounded">
         <div
           class="tw-h-full tw-bg-blue-500 tw-rounded tw-transition-all"
@@ -138,7 +141,12 @@ const isRunning = computed(() => (notification.value as any).isRunning ?? false)
       </div>
       <span class="tw-text-xs tw-text-gray-500">{{ progress }}% complete</span>
     </div>
-    <p v-else class="tw-text-sm tw-text-green-600">Import completed.</p>
+    <p
+      v-else
+      class="tw-text-sm tw-text-green-600"
+    >
+      Import completed.
+    </p>
   </NotificationTemplate>
 </template>
 ```

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

@@ -46,15 +46,9 @@ 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
+// my-module/index.ts
 import { markRaw } from "vue";
-import {
-  useSettingsMenu,
-  ThemeSelector,
-  LanguageSelector,
-  ChangePasswordButton,
-  LogoutButton,
-} from "@vc-shell/framework";
+import { useSettingsMenu, ThemeSelector, LanguageSelector, ChangePasswordButton, LogoutButton } from "@vc-shell/framework";
 
 export default {
   install() {
@@ -97,21 +91,21 @@ 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`    | 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                   |
 
 ### Group rendering
 
 Groups are separated by a horizontal divider and items within each group are sorted by `order`. Common group names used by convention:
 
-| Group | Description | Typical order range |
-|-------|-------------|-------------------|
-| `"preferences"` | User preferences (theme, language) | 10-29 |
-| `"account"` | Account actions (change password, logout) | 30-100 |
+| Group           | Description                               | Typical order range |
+| --------------- | ----------------------------------------- | ------------------- |
+| `"preferences"` | User preferences (theme, language)        | 10-29               |
+| `"account"`     | Account actions (change password, logout) | 30-100              |
 
 ## Details
 

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

@@ -44,34 +44,34 @@ import { SettingsMenuItem } from "@vc-shell/framework";
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | `undefined` | Menu item label |
-| `icon` | `string \| Component` | `undefined` | Icon name or component |
-| `image` | `string` | `undefined` | Image URL (alternative to icon) |
-| `value` | `string` | `undefined` | Current value displayed on the right |
-| `showChevron` | `boolean` | `false` | Shows right chevron for sub-menus (auto-enabled when `submenu` slot is provided) |
-| `isActive` | `boolean` | `false` | Highlights the item (auto-managed when `submenu` slot is provided) |
-| `disabled` | `boolean` | `false` | Disables click interaction |
-| `triggerAction` | `"click" \| "hover" \| "none"` | `"click"` | What interaction opens the item |
+| Prop            | Type                           | Default     | Description                                                                      |
+| --------------- | ------------------------------ | ----------- | -------------------------------------------------------------------------------- |
+| `title`         | `string`                       | `undefined` | Menu item label                                                                  |
+| `icon`          | `string \| Component`          | `undefined` | Icon name or component                                                           |
+| `image`         | `string`                       | `undefined` | Image URL (alternative to icon)                                                  |
+| `value`         | `string`                       | `undefined` | Current value displayed on the right                                             |
+| `showChevron`   | `boolean`                      | `false`     | Shows right chevron for sub-menus (auto-enabled when `submenu` slot is provided) |
+| `isActive`      | `boolean`                      | `false`     | Highlights the item (auto-managed when `submenu` slot is provided)               |
+| `disabled`      | `boolean`                      | `false`     | Disables click interaction                                                       |
+| `triggerAction` | `"click" \| "hover" \| "none"` | `"click"`   | What interaction opens the item                                                  |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `trigger:click` | -- | Emitted when the item is clicked (only when `triggerAction="click"`) |
-| `trigger:hover` | -- | Emitted when hovered (only when `triggerAction="hover"`) |
+| Event           | Payload | Description                                                          |
+| --------------- | ------- | -------------------------------------------------------------------- |
+| `trigger:click` | --      | Emitted when the item is clicked (only when `triggerAction="click"`) |
+| `trigger:hover` | --      | Emitted when hovered (only when `triggerAction="hover"`)             |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| `trigger` | Custom trigger content (replaces the entire row) |
-| `icon` | Custom icon area |
-| `title` | Custom title content |
-| `additional` | Custom right-side content (replaces `value` display) |
-| `submenu` | **Sub-menu items.** Desktop: floating dropdown. Mobile: inline accordion. Chevron auto-shown. |
-| `content` | Legacy slot for arbitrary content below the trigger |
+| Slot         | Description                                                                                   |
+| ------------ | --------------------------------------------------------------------------------------------- |
+| `trigger`    | Custom trigger content (replaces the entire row)                                              |
+| `icon`       | Custom icon area                                                                              |
+| `title`      | Custom title content                                                                          |
+| `additional` | Custom right-side content (replaces `value` display)                                          |
+| `submenu`    | **Sub-menu items.** Desktop: floating dropdown. Mobile: inline accordion. Chevron auto-shown. |
+| `content`    | Legacy slot for arbitrary content below the trigger                                           |
 
 ## Common Patterns
 
@@ -95,7 +95,7 @@ const currentTheme = ref("light");
   <SettingsMenuItem
     icon="lucide-palette"
     title="Theme"
-    :value="themes.find(t => t.key === currentTheme)?.name"
+    :value="themes.find((t) => t.key === currentTheme)?.name"
   >
     <template #submenu>
       <VcDropdownItem
@@ -112,42 +112,27 @@ const currentTheme = ref("light");
 
 **What happens on each platform:**
 
-| Platform | Behavior |
-|----------|----------|
-| Desktop | Click triggers a floating panel to the right of the item |
-| Mobile | Click expands an inline list below the item with chevron rotation |
+| Platform | Behavior                                                          |
+| -------- | ----------------------------------------------------------------- |
+| Desktop  | Click triggers a floating panel to the right of the item          |
+| Mobile   | Click expands an inline list below the item with chevron rotation |
 
 ### Simple action item (no sub-menu)
 
 ```vue
-<SettingsMenuItem
-  icon="lucide-log-out"
-  title="Sign Out"
-  @trigger:click="handleSignOut"
-/>
+<SettingsMenuItem icon="lucide-log-out" title="Sign Out" @trigger:click="handleSignOut" />
 ```
 
 ### Item with user avatar image
 
 ```vue
-<SettingsMenuItem
-  :image="user.avatarUrl"
-  :title="user.displayName"
-  :value="user.roleName"
-  :show-chevron="true"
-  @trigger:click="openUserMenu"
-/>
+<SettingsMenuItem :image="user.avatarUrl" :title="user.displayName" :value="user.roleName" :show-chevron="true" @trigger:click="openUserMenu" />
 ```
 
 ### Disabled item
 
 ```vue
-<SettingsMenuItem
-  icon="lucide-shield"
-  title="Security Settings"
-  disabled
-  value="Admin only"
-/>
+<SettingsMenuItem icon="lucide-shield" title="Security Settings" disabled value="Admin only" />
 ```
 
 ### Custom submenu content
@@ -169,21 +154,8 @@ The `submenu` slot can contain any content, not just `VcDropdownItem`:
 Before (manual dropdown management):
 
 ```vue
-<SettingsMenuItem
-  ref="menuItemRef"
-  icon="lucide-palette"
-  title="Theme"
-  :value="currentTheme"
-  :show-chevron="true"
-  :is-active="isOpen"
-  @trigger:click="isOpen = !isOpen"
-/>
-<VcDropdownPanel
-  v-model:show="isOpen"
-  :anchor-ref="menuItemRef?.triggerRef ?? null"
-  placement="right-start"
-  width="180px"
->
+<SettingsMenuItem ref="menuItemRef" icon="lucide-palette" title="Theme" :value="currentTheme" :show-chevron="true" :is-active="isOpen" @trigger:click="isOpen = !isOpen" />
+<VcDropdownPanel v-model:show="isOpen" :anchor-ref="menuItemRef?.triggerRef ?? null" placement="right-start" width="180px">
   <!-- options -->
 </VcDropdownPanel>
 ```
@@ -191,11 +163,7 @@ Before (manual dropdown management):
 After (submenu slot):
 
 ```vue
-<SettingsMenuItem
-  icon="lucide-palette"
-  title="Theme"
-  :value="currentTheme"
->
+<SettingsMenuItem icon="lucide-palette" title="Theme" :value="currentTheme">
   <template #submenu>
     <!-- same options, no wrapper needed -->
   </template>
@@ -203,6 +171,7 @@ After (submenu slot):
 ```
 
 **What changes:**
+
 - Remove `ref`, `isOpen`, `:show-chevron`, `:is-active`, `@trigger:click` toggle -- all auto-managed
 - Remove `VcDropdownPanel` wrapper entirely
 - Move dropdown content into `#submenu` slot

package/runtime/knowledge/docs/shell/components/sidebar/sidebar.docs.md

@@ -10,37 +10,31 @@ On mobile, the sidebar teleports itself out of the normal DOM flow to overlay th
 
 ## Props
 
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `isExpanded` | `boolean` | (required) | Whether the sidebar is currently open |
-| `position` | `"left" \| "right"` | `"right"` | Slide-in direction |
-| `render` | `"always" \| "mobile" \| "desktop"` | `"always"` | When to render as a sidebar vs. inline |
-| `title` | `string` | -- | Optional title shown in the sidebar header |
-| `closeCross` | `boolean` | `true` | Whether to show the close button |
+| Prop         | Type                                | Default    | Description                                |
+| ------------ | ----------------------------------- | ---------- | ------------------------------------------ |
+| `isExpanded` | `boolean`                           | (required) | Whether the sidebar is currently open      |
+| `position`   | `"left" \| "right"`                 | `"right"`  | Slide-in direction                         |
+| `render`     | `"always" \| "mobile" \| "desktop"` | `"always"` | When to render as a sidebar vs. inline     |
+| `title`      | `string`                            | --         | Optional title shown in the sidebar header |
+| `closeCross` | `boolean`                           | `true`     | Whether to show the close button           |
 
 ## Events
 
-| Event | Payload | Description |
-|---|---|---|
-| `close` | -- | Emitted when the user closes the sidebar |
+| Event   | Payload | Description                              |
+| ------- | ------- | ---------------------------------------- |
+| `close` | --      | Emitted when the user closes the sidebar |
 
 ## Slots
 
-| Slot | Scope | Description |
-|---|---|---|
-| `header` | `{ close: () => void }` | Custom header content; receives a `close` function |
-| `content` | -- | The main sidebar body content |
+| Slot      | Scope                   | Description                                        |
+| --------- | ----------------------- | -------------------------------------------------- |
+| `header`  | `{ close: () => void }` | Custom header content; receives a `close` function |
+| `content` | --                      | The main sidebar body content                      |
 
 ## Usage
 
 ```vue
-<Sidebar
-  :is-expanded="showFilters"
-  position="right"
-  render="always"
-  title="Filters"
-  @close="showFilters = false"
->
+<Sidebar :is-expanded="showFilters" position="right" render="always" title="Filters" @close="showFilters = false">
   <template #content>
     <FilterPanel />
   </template>
@@ -50,11 +44,7 @@ On mobile, the sidebar teleports itself out of the normal DOM flow to overlay th
 ### Mobile-only sidebar
 
 ```vue
-<Sidebar
-  :is-expanded="showDetails"
-  render="mobile"
-  @close="showDetails = false"
->
+<Sidebar :is-expanded="showDetails" render="mobile" @close="showDetails = false">
   <template #content>
     <DetailView />
   </template>

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

@@ -50,8 +50,8 @@ const { register, setTheme, currentTheme } = useTheme();
 
 // Register available themes during app initialization
 register([
-  { key: "light" },    // Default light theme
-  { key: "dark" },     // Dark mode
+  { key: "light" }, // Default light theme
+  { key: "dark" }, // Dark mode
   { key: "contrast" }, // High-contrast accessibility theme
 ]);
 

package/runtime/knowledge/docs/shell/components/user-dropdown-button/user-dropdown-button.docs.md

@@ -26,12 +26,12 @@ import { UserDropdownButton } from "@vc-shell/framework";
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | `undefined` | User display name |
-| `role` | `string` | `undefined` | User role label |
-| `avatarUrl` | `string` | `undefined` | URL for the user avatar image |
-| `disabled` | `boolean` | `false` | Prevents menu from opening |
+| Prop        | Type      | Default     | Description                   |
+| ----------- | --------- | ----------- | ----------------------------- |
+| `name`      | `string`  | `undefined` | User display name             |
+| `role`      | `string`  | `undefined` | User role label               |
+| `avatarUrl` | `string`  | `undefined` | URL for the user avatar image |
+| `disabled`  | `boolean` | `false`     | Prevents menu from opening    |
 
 ## Recipe: Wiring to User Management Composable
 
@@ -45,9 +45,7 @@ import { useUserManagement } from "@vc-shell/framework";
 
 const { currentUser } = useUserManagement();
 
-const displayName = computed(() =>
-  currentUser.value ? `${currentUser.value.firstName} ${currentUser.value.lastName}` : ""
-);
+const displayName = computed(() => (currentUser.value ? `${currentUser.value.firstName} ${currentUser.value.lastName}` : ""));
 const role = computed(() => currentUser.value?.roles?.[0]?.name ?? "");
 const avatarUrl = computed(() => currentUser.value?.photoUrl);
 </script>

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

@@ -18,11 +18,11 @@ The charts are designed to work inside `DashboardWidgetCard` components, automat
 
 ## Components
 
-| Component | Description |
-|-----------|-------------|
-| `DashboardLineChart` | Time-series or continuous data with connected points |
-| `DashboardBarChart` | Grouped or single bar charts for categorical comparison |
-| `DashboardDonutChart` | Circular chart for part-to-whole relationships |
+| Component             | Description                                             |
+| --------------------- | ------------------------------------------------------- |
+| `DashboardLineChart`  | Time-series or continuous data with connected points    |
+| `DashboardBarChart`   | Grouped or single bar charts for categorical comparison |
+| `DashboardDonutChart` | Circular chart for part-to-whole relationships          |
 
 ## Basic Usage
 
@@ -54,35 +54,38 @@ const config: ChartConfig = {
 
 ## Key Props (shared across chart types)
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `data` | `T[]` | -- | Array of data points |
-| `config` | `ChartConfig` | -- | Series color and label configuration |
-| `xKey` | `keyof T` | -- | Key for x-axis values (line/bar) |
-| `yKeys` | `(keyof T)[]` | -- | Keys for y-axis series (line/bar) |
-| `showTooltip` | `boolean` | `true` | Enable hover tooltips |
-| `showLegend` | `boolean` | `true` | Show color legend below chart |
-| `rangeStart` | `number` | `undefined` | Filter data from this x value |
-| `rangeEnd` | `number` | `undefined` | Filter data up to this x value |
+| Prop          | Type          | Default     | Description                          |
+| ------------- | ------------- | ----------- | ------------------------------------ |
+| `data`        | `T[]`         | --          | Array of data points                 |
+| `config`      | `ChartConfig` | --          | Series color and label configuration |
+| `xKey`        | `keyof T`     | --          | Key for x-axis values (line/bar)     |
+| `yKeys`       | `(keyof T)[]` | --          | Keys for y-axis series (line/bar)    |
+| `showTooltip` | `boolean`     | `true`      | Enable hover tooltips                |
+| `showLegend`  | `boolean`     | `true`      | Show color legend below chart        |
+| `rangeStart`  | `number`      | `undefined` | Filter data from this x value        |
+| `rangeEnd`    | `number`      | `undefined` | Filter data up to this x value       |
 
 ### Donut-specific props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `valueKey` | `keyof T` | -- | Key for segment values |
-| `centralLabel` | `string` | `undefined` | Large text in donut center |
-| `centralSubLabel` | `string` | `undefined` | Small text below central label |
-| `arcWidth` | `number` | `60` | Donut arc thickness |
+| Prop              | Type      | Default     | Description                    |
+| ----------------- | --------- | ----------- | ------------------------------ |
+| `valueKey`        | `keyof T` | --          | Key for segment values         |
+| `centralLabel`    | `string`  | `undefined` | Large text in donut center     |
+| `centralSubLabel` | `string`  | `undefined` | Small text below central label |
+| `arcWidth`        | `number`  | `60`        | Donut arc thickness            |
 
 ## ChartConfig Type
 
 The `ChartConfig` object maps data field names to their visual configuration:
 
 ```typescript
-type ChartConfig = Record<string, {
-  label: string;    // Display name in legend and tooltip
-  color: string;    // CSS color value (hex, var(), rgb, etc.)
-}>;
+type ChartConfig = Record<
+  string,
+  {
+    label: string; // Display name in legend and tooltip
+    color: string; // CSS color value (hex, var(), rgb, etc.)
+  }
+>;
 ```
 
 ## Common Patterns
@@ -117,26 +120,13 @@ const salesConfig: ChartConfig = {
 ### Bar Chart with Formatted Axes
 
 ```vue
-<DashboardBarChart
-  :data="quarterlyData"
-  :config="quarterConfig"
-  x-key="quarter"
-  :y-keys="['electronics', 'clothing']"
-  :x-tick-format="(v) => ['Q1', 'Q2', 'Q3', 'Q4'][v]"
-  :y-tick-format="(v) => '$' + (v / 1000).toFixed(0) + 'k'"
-/>
+<DashboardBarChart :data="quarterlyData" :config="quarterConfig" x-key="quarter" :y-keys="['electronics', 'clothing']" :x-tick-format="(v) => ['Q1', 'Q2', 'Q3', 'Q4'][v]" :y-tick-format="(v) => '$' + (v / 1000).toFixed(0) + 'k'" />
 ```
 
 ### Donut Chart
 
 ```vue
-<DashboardDonutChart
-  :data="categoryData"
-  :config="categoryConfig"
-  value-key="count"
-  central-label="1,000"
-  central-sub-label="Total Products"
-/>
+<DashboardDonutChart :data="categoryData" :config="categoryConfig" value-key="count" central-label="1,000" central-sub-label="Total Products" />
 ```
 
 ### Chart Inside a Widget Card

package/runtime/knowledge/docs/shell/dashboard/dashboard-widget-card/dashboard-widget-card.docs.md

@@ -24,7 +24,10 @@ import { DashboardWidgetCard } from "@vc-shell/framework";
 </script>
 
 <template>
-  <DashboardWidgetCard header="Products" icon="lucide-package-open">
+  <DashboardWidgetCard
+    header="Products"
+    icon="lucide-package-open"
+  >
     <template #content>
       <div class="tw-p-4">Widget body content here</div>
     </template>
@@ -34,21 +37,21 @@ import { DashboardWidgetCard } from "@vc-shell/framework";
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `header` | `string` | `undefined` | Card title text |
-| `icon` | `string` | `undefined` | Icon displayed next to the header |
-| `loading` | `boolean` | `false` | Shows a loading overlay on the body |
+| Prop      | Type      | Default     | Description                         |
+| --------- | --------- | ----------- | ----------------------------------- |
+| `header`  | `string`  | `undefined` | Card title text                     |
+| `icon`    | `string`  | `undefined` | Icon displayed next to the header   |
+| `loading` | `boolean` | `false`     | Shows a loading overlay on the body |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| `header` | Override the entire header area (replaces default icon + title) |
-| `actions` | Action buttons in the header row (right side) |
-| `stats` | KPI stat items below the header |
-| `content` | Main body content |
-| `footer` | Footer area with links or actions |
+| Slot      | Description                                                     |
+| --------- | --------------------------------------------------------------- |
+| `header`  | Override the entire header area (replaces default icon + title) |
+| `actions` | Action buttons in the header row (right side)                   |
+| `stats`   | KPI stat items below the header                                 |
+| `content` | Main body content                                               |
+| `footer`  | Footer area with links or actions                               |
 
 ## Common Patterns
 
@@ -134,7 +137,11 @@ onMounted(() => loadData());
 </script>
 
 <template>
-  <DashboardWidgetCard header="System Status" icon="lucide-activity" :loading="loading">
+  <DashboardWidgetCard
+    header="System Status"
+    icon="lucide-activity"
+    :loading="loading"
+  >
     <template #content>
       <!-- Content shown when not loading -->
     </template>
@@ -164,11 +171,11 @@ dashboard.register({
 
 ## Companion Components
 
-| Component | Description |
-|-----------|-------------|
-| `DashboardStatItem` | Single KPI stat with value, label, and optional color variant |
-| `DashboardFeedList` | Scrollable list container for feed rows |
-| `DashboardFeedRow` | Individual feed item with icon, title, subtitle, and meta slots |
+| Component           | Description                                                     |
+| ------------------- | --------------------------------------------------------------- |
+| `DashboardStatItem` | Single KPI stat with value, label, and optional color variant   |
+| `DashboardFeedList` | Scrollable list container for feed rows                         |
+| `DashboardFeedRow`  | Individual feed item with icon, title, subtitle, and meta slots |
 
 ## Tip: Set a Minimum Height