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

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

@@ -40,20 +40,20 @@ dashboard.registerWidget({
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `showDragHandles` | `boolean` | `false` | Shows visible drag handle icons on widgets |
-| `resizable` | `boolean` | `false` | Enables widget resize handles |
-| `ariaLabel` | `string` | `"Dashboard widgets..."` | Accessible label for the grid container |
+| Prop              | Type      | Default                  | Description                                |
+| ----------------- | --------- | ------------------------ | ------------------------------------------ |
+| `showDragHandles` | `boolean` | `false`                  | Shows visible drag handle icons on widgets |
+| `resizable`       | `boolean` | `false`                  | Enables widget resize handles              |
+| `ariaLabel`       | `string`  | `"Dashboard widgets..."` | Accessible label for the grid container    |
 
 ## Exposed Methods
 
-| Method | Description |
-|--------|-------------|
-| `rearrangeWidgets()` | Re-layout all widgets to fill gaps |
-| `recalculateLayout()` | Recalculate grid dimensions |
-| `saveLayout()` | Persist current layout to localStorage |
-| `useBuiltInPositions()` | Reset to default widget positions |
+| Method                  | Description                            |
+| ----------------------- | -------------------------------------- |
+| `rearrangeWidgets()`    | Re-layout all widgets to fill gaps     |
+| `recalculateLayout()`   | Recalculate grid dimensions            |
+| `saveLayout()`          | Persist current layout to localStorage |
+| `useBuiltInPositions()` | Reset to default widget positions      |
 
 ## Recipe: Registering Dashboard Widgets in a Module
 
@@ -107,7 +107,10 @@ function resetLayout() {
 <template>
   <div>
     <button @click="resetLayout">Reset Layout</button>
-    <DraggableDashboard ref="dashboardRef" :resizable="true" />
+    <DraggableDashboard
+      ref="dashboardRef"
+      :resizable="true"
+    />
   </div>
 </template>
 ```

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

@@ -20,19 +20,19 @@ A small indicator component for displaying counts, status dots, or short text la
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `content` | `string \| number` | -- | Text or number displayed inside the badge |
-| `variant` | `"primary" \| "success" \| "warning" \| "danger" \| "info" \| "secondary"` | `"primary"` | Color variant |
-| `size` | `"s" \| "m"` | `"m"` | Badge size |
-| `isDot` | `boolean` | `false` | Renders as a small dot without text |
-| `inline` | `boolean` | `false` | Renders as an inline element without absolute positioning |
-| `clickable` | `boolean` | `false` | Makes the badge respond to click events |
-| `disabled` | `boolean` | `false` | Disables interaction on clickable badges |
-| `customPosition` | `boolean` | `false` | Enables custom `top`/`right` positioning |
-| `top` | `string` | -- | Custom top offset (requires `customPosition`) |
-| `right` | `string` | -- | Custom right offset (requires `customPosition`) |
-| `ariaLabel` | `string` | -- | Custom accessible label for the badge |
+| Prop             | Type                                                                       | Default     | Description                                               |
+| ---------------- | -------------------------------------------------------------------------- | ----------- | --------------------------------------------------------- |
+| `content`        | `string \| number`                                                         | --          | Text or number displayed inside the badge                 |
+| `variant`        | `"primary" \| "success" \| "warning" \| "danger" \| "info" \| "secondary"` | `"primary"` | Color variant                                             |
+| `size`           | `"s" \| "m"`                                                               | `"m"`       | Badge size                                                |
+| `isDot`          | `boolean`                                                                  | `false`     | Renders as a small dot without text                       |
+| `inline`         | `boolean`                                                                  | `false`     | Renders as an inline element without absolute positioning |
+| `clickable`      | `boolean`                                                                  | `false`     | Makes the badge respond to click events                   |
+| `disabled`       | `boolean`                                                                  | `false`     | Disables interaction on clickable badges                  |
+| `customPosition` | `boolean`                                                                  | `false`     | Enables custom `top`/`right` positioning                  |
+| `top`            | `string`                                                                   | --          | Custom top offset (requires `customPosition`)             |
+| `right`          | `string`                                                                   | --          | Custom right offset (requires `customPosition`)           |
+| `ariaLabel`      | `string`                                                                   | --          | Custom accessible label for the badge                     |
 
 ## Common Patterns
 
@@ -65,12 +65,7 @@ A small indicator component for displaying counts, status dots, or short text la
 ### Clickable Badge with Dismiss
 
 ```vue
-<VcBadge
-  :content="count"
-  clickable
-  variant="primary"
-  @click="clearNotifications"
->
+<VcBadge :content="count" clickable variant="primary" @click="clearNotifications">
   <VcIcon icon="lucide-inbox" size="xl" />
 </VcBadge>
 ```
@@ -104,13 +99,7 @@ const statusVariantMap: Record<string, string> = {
 Fine-tune the badge position relative to its parent:
 
 ```vue
-<VcBadge
-  content="NEW"
-  variant="info"
-  custom-position
-  top="-4px"
-  right="-12px"
->
+<VcBadge content="NEW" variant="info" custom-position top="-4px" right="-12px">
   <img src="/product.jpg" class="tw-w-16 tw-h-16 tw-rounded" />
 </VcBadge>
 ```

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

@@ -21,20 +21,20 @@ A contextual alert component for displaying important messages, warnings, or sta
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `"info" \| "warning" \| "danger" \| "success"` | `"info"` | Semantic color variant |
-| `icon` | `string` | -- | Icon identifier (e.g. `lucide-info`, `lucide-triangle-alert`) |
-| `iconSize` | `IconSize` | `"l"` | Size of the leading icon |
-| `iconVariant` | `IconVariant` | -- | Color variant for the icon |
-| `collapsedHeight` | `number` | `100` | Max height in pixels before content becomes collapsible |
+| Prop              | Type                                           | Default  | Description                                                   |
+| ----------------- | ---------------------------------------------- | -------- | ------------------------------------------------------------- |
+| `variant`         | `"info" \| "warning" \| "danger" \| "success"` | `"info"` | Semantic color variant                                        |
+| `icon`            | `string`                                       | --       | Icon identifier (e.g. `lucide-info`, `lucide-triangle-alert`) |
+| `iconSize`        | `IconSize`                                     | `"l"`    | Size of the leading icon                                      |
+| `iconVariant`     | `IconVariant`                                  | --       | Color variant for the icon                                    |
+| `collapsedHeight` | `number`                                       | `100`    | Max height in pixels before content becomes collapsible       |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| `title` | Bold title text above the body content |
-| `default` | Body/description content |
+| Slot      | Description                                                              |
+| --------- | ------------------------------------------------------------------------ |
+| `title`   | Bold title text above the body content                                   |
+| `default` | Body/description content                                                 |
 | `trigger` | Custom expand/collapse trigger (receives `{ isExpanded, toggle }` props) |
 
 ## Features
@@ -69,12 +69,7 @@ For backward compatibility, the deprecated variants `"light-danger"`, `"info-dar
 ### Decline Reason on a Detail Blade
 
 ```vue
-<VcBanner
-  v-if="declineReason"
-  variant="danger"
-  icon="lucide-circle-alert"
-  icon-variant="danger"
->
+<VcBanner v-if="declineReason" variant="danger" icon="lucide-circle-alert" icon-variant="danger">
   <template #title>Decline Reason</template>
   {{ declineReason }}
 </VcBanner>
@@ -112,8 +107,15 @@ Place a banner inside a blade to notify the user of important context before the
       This product has been marked as discontinued. Editing is limited to metadata fields only.
     </VcBanner>
 
-    <VcInput label="Name" v-model="product.name" :disabled="product.isDiscontinued" />
-    <VcTextarea label="Notes" v-model="product.notes" />
+    <VcInput
+      label="Name"
+      v-model="product.name"
+      :disabled="product.isDiscontinued"
+    />
+    <VcTextarea
+      label="Notes"
+      v-model="product.notes"
+    />
   </VcBlade>
 </template>
 ```

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

@@ -4,12 +4,12 @@ A versatile button component supporting 9 style variants, 5 size options, loadin
 
 ## When to Use
 
-| Scenario | Component |
-|----------|-----------|
-| Triggering an action (save, delete, submit) | **VcButton** |
-| Navigating to another URL or route | `<router-link>` or `<a>` tag |
-| Action inside a blade toolbar | `IBladeToolbar` items (rendered as buttons automatically) |
-| Inline text-style link within a paragraph | Native `<a>` or `<router-link>` |
+| Scenario                                    | Component                                                 |
+| ------------------------------------------- | --------------------------------------------------------- |
+| Triggering an action (save, delete, submit) | **VcButton**                                              |
+| Navigating to another URL or route          | `<router-link>` or `<a>` tag                              |
+| Action inside a blade toolbar               | `IBladeToolbar` items (rendered as buttons automatically) |
+| Inline text-style link within a paragraph   | Native `<a>` or `<router-link>`                           |
 
 Use VcButton for any user-initiated action that does not navigate to a URL. **Do not use** VcButton for navigation -- the `link` variant looks like a link but calls `preventDefault()`, so actual URL navigation will not work. For toolbar actions, define `IBladeToolbar` objects instead of placing VcButton manually.
 
@@ -17,7 +17,11 @@ Use VcButton for any user-initiated action that does not navigate to a URL. **Do
 
 ```vue
 <template>
-  <VcButton variant="primary" @click="handleSave">Save Changes</VcButton>
+  <VcButton
+    variant="primary"
+    @click="handleSave"
+    >Save Changes</VcButton
+  >
 </template>
 
 <script setup lang="ts">
@@ -41,13 +45,13 @@ Solid background colors for primary and prominent actions.
 <VcButton variant="info">Learn More</VcButton>
 ```
 
-| Variant | Use Case | Text Color |
-|---------|----------|------------|
-| `primary` | Main CTA -- save, submit, confirm | White |
-| `danger` | Destructive actions -- delete, remove | White |
-| `warning` | Caution actions -- override, force | Dark (for contrast) |
-| `success` | Positive actions -- approve, publish | White |
-| `info` | Informational actions -- details, help | White |
+| Variant   | Use Case                               | Text Color          |
+| --------- | -------------------------------------- | ------------------- |
+| `primary` | Main CTA -- save, submit, confirm      | White               |
+| `danger`  | Destructive actions -- delete, remove  | White               |
+| `warning` | Caution actions -- override, force     | Dark (for contrast) |
+| `success` | Positive actions -- approve, publish   | White               |
+| `info`    | Informational actions -- details, help | White               |
 
 ### Structural Variants (Medium Emphasis)
 
@@ -58,10 +62,10 @@ Bordered or transparent backgrounds for secondary actions.
 <VcButton variant="outline">Export</VcButton>
 ```
 
-| Variant | Use Case | Hover Behavior |
-|---------|----------|----------------|
-| `secondary` | Cancel, dismiss, secondary actions | Background changes to primary-50 |
-| `outline` | Alternative actions alongside primary | Background changes to primary-50, border darkens |
+| Variant     | Use Case                              | Hover Behavior                                   |
+| ----------- | ------------------------------------- | ------------------------------------------------ |
+| `secondary` | Cancel, dismiss, secondary actions    | Background changes to primary-50                 |
+| `outline`   | Alternative actions alongside primary | Background changes to primary-50, border darkens |
 
 ### Minimal Variants (Low Emphasis)
 
@@ -72,10 +76,10 @@ No border or background, used for inline or de-emphasized actions.
 <VcButton variant="link">View Documentation</VcButton>
 ```
 
-| Variant | Use Case | Hover Behavior |
-|---------|----------|----------------|
-| `ghost` | Toolbar icons, inline actions | Light background tint |
-| `link` | Text-like navigation, inline links | Underline on text |
+| Variant | Use Case                           | Hover Behavior        |
+| ------- | ---------------------------------- | --------------------- |
+| `ghost` | Toolbar icons, inline actions      | Light background tint |
+| `link`  | Text-like navigation, inline links | Underline on text     |
 
 ## Sizes
 
@@ -89,13 +93,13 @@ Five size options cover all common use cases from toolbar icons to prominent CTA
 <VcButton size="icon-sm" icon="lucide-pencil" aria-label="Edit" />
 ```
 
-| Size | Height | Padding | Typical Use |
-|------|--------|---------|-------------|
-| `sm` | 32px | 12px horizontal | Compact form actions, table footers |
-| `default` | 36px | 16px horizontal, 8px vertical | Standard blade actions |
-| `lg` | 40px | 24px horizontal | Prominent CTAs, dialog actions |
-| `icon` | 36x36px | 0 (square) | Toolbar icon buttons |
-| `icon-sm` | 24x24px | 0 (square) | Table cell actions, inline controls |
+| Size      | Height  | Padding                       | Typical Use                         |
+| --------- | ------- | ----------------------------- | ----------------------------------- |
+| `sm`      | 32px    | 12px horizontal               | Compact form actions, table footers |
+| `default` | 36px    | 16px horizontal, 8px vertical | Standard blade actions              |
+| `lg`      | 40px    | 24px horizontal               | Prominent CTAs, dialog actions      |
+| `icon`    | 36x36px | 0 (square)                    | Toolbar icon buttons                |
+| `icon-sm` | 24x24px | 0 (square)                    | Table cell actions, inline controls |
 
 > **Note:** Legacy aliases `xs` (maps to `sm`) and `base` (maps to `default`) are supported for backward compatibility.
 
@@ -127,6 +131,7 @@ When `loading` is `true`, the button shows a spinner in place of its icon and be
 ```
 
 During loading:
+
 - The icon is replaced with a spinning `lucide-loader-2`
 - The button is disabled (`pointer-events: none`)
 - The cursor changes to `wait`
@@ -137,13 +142,7 @@ During loading:
 The `selected` prop applies a visual highlight. Useful for toggle buttons or active states:
 
 ```vue
-<VcButton
-  variant="ghost"
-  :selected="isGridView"
-  icon="lucide-grid"
-  aria-label="Grid view"
-  @click="isGridView = true"
-/>
+<VcButton variant="ghost" :selected="isGridView" icon="lucide-grid" aria-label="Grid view" @click="isGridView = true" />
 ```
 
 When selected, `aria-pressed="true"` is set on the button element.
@@ -176,8 +175,16 @@ VcButton integrates with `VcButtonGroup` via provide/inject. The group can set a
 ```vue
 <template>
   <div class="tw-flex tw-gap-2">
-    <VcButton variant="secondary" @click="cancel">Cancel</VcButton>
-    <VcButton variant="primary" :loading="isSaving" @click="save">
+    <VcButton
+      variant="secondary"
+      @click="cancel"
+      >Cancel</VcButton
+    >
+    <VcButton
+      variant="primary"
+      :loading="isSaving"
+      @click="save"
+    >
       Save
     </VcButton>
   </div>
@@ -189,8 +196,17 @@ VcButton integrates with `VcButtonGroup` via provide/inject. The group can set a
 ```vue
 <template>
   <div class="tw-flex tw-justify-end tw-gap-3 tw-p-4">
-    <VcButton variant="outline" @click="dismiss">Cancel</VcButton>
-    <VcButton variant="danger" :loading="isDeleting" icon="lucide-trash-2" @click="confirmDelete">
+    <VcButton
+      variant="outline"
+      @click="dismiss"
+      >Cancel</VcButton
+    >
+    <VcButton
+      variant="danger"
+      :loading="isDeleting"
+      icon="lucide-trash-2"
+      @click="confirmDelete"
+    >
       Delete Permanently
     </VcButton>
   </div>
@@ -231,46 +247,46 @@ VcButton integrates with `VcButtonGroup` via provide/inject. The group can set a
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `"primary" \| "secondary" \| "danger" \| "warning" \| "success" \| "info" \| "outline" \| "ghost" \| "link"` | `"primary"` | Visual style variant |
-| `size` | `"sm" \| "default" \| "lg" \| "icon" \| "icon-sm"` | `"default"` | Button size |
-| `icon` | `string \| Component` | -- | Icon identifier or Vue component |
-| `iconClass` | `string` | -- | Additional CSS class for the icon element |
-| `iconSize` | `IconSize` | `"s"` | Size of the icon (`"xs"`, `"s"`, `"m"`, `"l"`, `"xl"`, `"xxl"`) |
-| `loading` | `boolean` | `false` | Shows spinner, disables interaction, sets `aria-busy` |
-| `disabled` | `boolean` | `false` | Disables the button |
-| `selected` | `boolean` | `false` | Applies selected/active visual state, sets `aria-pressed` |
-| `text` | `boolean` | `false` | Renders as borderless text in the variant's color |
-| `type` | `"button" \| "submit" \| "reset"` | `"button"` | HTML button type |
-| `ariaLabel` | `string` | -- | Accessible label (required for icon-only buttons) |
+| Prop        | Type                                                                                                         | Default     | Description                                                     |
+| ----------- | ------------------------------------------------------------------------------------------------------------ | ----------- | --------------------------------------------------------------- |
+| `variant`   | `"primary" \| "secondary" \| "danger" \| "warning" \| "success" \| "info" \| "outline" \| "ghost" \| "link"` | `"primary"` | Visual style variant                                            |
+| `size`      | `"sm" \| "default" \| "lg" \| "icon" \| "icon-sm"`                                                           | `"default"` | Button size                                                     |
+| `icon`      | `string \| Component`                                                                                        | --          | Icon identifier or Vue component                                |
+| `iconClass` | `string`                                                                                                     | --          | Additional CSS class for the icon element                       |
+| `iconSize`  | `IconSize`                                                                                                   | `"s"`       | Size of the icon (`"xs"`, `"s"`, `"m"`, `"l"`, `"xl"`, `"xxl"`) |
+| `loading`   | `boolean`                                                                                                    | `false`     | Shows spinner, disables interaction, sets `aria-busy`           |
+| `disabled`  | `boolean`                                                                                                    | `false`     | Disables the button                                             |
+| `selected`  | `boolean`                                                                                                    | `false`     | Applies selected/active visual state, sets `aria-pressed`       |
+| `text`      | `boolean`                                                                                                    | `false`     | Renders as borderless text in the variant's color               |
+| `type`      | `"button" \| "submit" \| "reset"`                                                                            | `"button"`  | HTML button type                                                |
+| `ariaLabel` | `string`                                                                                                     | --          | Accessible label (required for icon-only buttons)               |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event   | Payload | Description                                                              |
+| ------- | ------- | ------------------------------------------------------------------------ |
 | `click` | `Event` | Emitted when the button is clicked (suppressed when disabled or loading) |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot      | Description                                                       |
+| --------- | ----------------------------------------------------------------- |
 | `default` | Button text content. When empty, the button renders as icon-only. |
 
 ## CSS Custom Properties
 
 All visual properties are customizable through CSS custom properties. Each variant has three property sets (normal, hover, disabled) for background, text, and border colors.
 
-| Pattern | Example | Description |
-|---------|---------|-------------|
-| `--button-{variant}-background-color` | `--button-primary-background-color` | Normal background |
-| `--button-{variant}-background-color-hover` | `--button-primary-background-color-hover` | Hover background |
-| `--button-{variant}-text-color` | `--button-primary-text-color` | Normal text color |
-| `--button-{variant}-border-color` | `--button-primary-border-color` | Normal border color |
-| `--button-border-radius` | `6px` | Corner radius for all buttons |
-| `--button-focus-ring-color` | `var(--primary-300)` | Focus ring color |
-| `--button-focus-ring-width` | `2px` | Focus ring thickness |
-| `--button-{size}-height` | `--button-default-height: 36px` | Height per size |
+| Pattern                                     | Example                                   | Description                   |
+| ------------------------------------------- | ----------------------------------------- | ----------------------------- |
+| `--button-{variant}-background-color`       | `--button-primary-background-color`       | Normal background             |
+| `--button-{variant}-background-color-hover` | `--button-primary-background-color-hover` | Hover background              |
+| `--button-{variant}-text-color`             | `--button-primary-text-color`             | Normal text color             |
+| `--button-{variant}-border-color`           | `--button-primary-border-color`           | Normal border color           |
+| `--button-border-radius`                    | `6px`                                     | Corner radius for all buttons |
+| `--button-focus-ring-color`                 | `var(--primary-300)`                      | Focus ring color              |
+| `--button-focus-ring-width`                 | `2px`                                     | Focus ring thickness          |
+| `--button-{size}-height`                    | `--button-default-height: 36px`           | Height per size               |
 
 ## Accessibility