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

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

@@ -26,11 +26,11 @@ const uploadPercent = ref(45);
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `number` | `0` | Current progress (0--100). Clamped automatically. |
-| `variant` | `"default" \| "striped"` | `"default"` | Visual style; `striped` adds an animated diagonal pattern |
-| `ariaLabel` | `string` | `"Progress"` | Accessible label describing what the bar represents |
+| Prop        | Type                     | Default      | Description                                               |
+| ----------- | ------------------------ | ------------ | --------------------------------------------------------- |
+| `value`     | `number`                 | `0`          | Current progress (0--100). Clamped automatically.         |
+| `variant`   | `"default" \| "striped"` | `"default"`  | Visual style; `striped` adds an animated diagonal pattern |
+| `ariaLabel` | `string`                 | `"Progress"` | Accessible label describing what the bar represents       |
 
 ## Common Patterns
 
@@ -43,7 +43,10 @@ const uploadPercent = ref(45);
       <span>Importing catalog...</span>
       <span>{{ progress }}%</span>
     </div>
-    <VcProgress :value="progress" :variant="progress === 100 ? 'striped' : 'default'" />
+    <VcProgress
+      :value="progress"
+      :variant="progress === 100 ? 'striped' : 'default'"
+    />
   </div>
 </template>
 ```
@@ -53,7 +56,10 @@ const uploadPercent = ref(45);
 ```vue
 <template>
   <div class="tw-space-y-4">
-    <div v-for="stage in stages" :key="stage.label">
+    <div
+      v-for="stage in stages"
+      :key="stage.label"
+    >
       <span class="tw-text-sm">{{ stage.label }}</span>
       <VcProgress :value="stage.value" />
     </div>
@@ -74,7 +80,10 @@ const uploadPercent = ref(45);
       :value="(usedGB / totalGB) * 100"
       aria-label="Storage usage"
     />
-    <VcHint v-if="usedGB / totalGB > 0.9" error>
+    <VcHint
+      v-if="usedGB / totalGB > 0.9"
+      error
+    >
       You are running low on storage.
     </VcHint>
   </div>
@@ -105,11 +114,17 @@ async function handleUpload(files: FileList) {
 
 <template>
   <VcBlade title="Import Products">
-    <VcButton :disabled="isUploading" @click="triggerUpload">
-      {{ isUploading ? 'Uploading...' : 'Select File' }}
+    <VcButton
+      :disabled="isUploading"
+      @click="triggerUpload"
+    >
+      {{ isUploading ? "Uploading..." : "Select File" }}
     </VcButton>
 
-    <div v-if="isUploading" class="tw-mt-4">
+    <div
+      v-if="isUploading"
+      class="tw-mt-4"
+    >
       <VcProgress
         :value="uploadProgress"
         variant="striped"
@@ -123,13 +138,13 @@ async function handleUpload(files: FileList) {
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--progressbar-height` | `8px` | Bar height |
-| `--progressbar-border-radius` | `9999px` | Border radius (pill shape) |
-| `--progressbar-background-color` | `var(--neutrals-200)` | Track background |
-| `--progressbar-foreground-color` | `var(--primary-500)` | Fill color |
-| `--progressbar-striped-bg` | gradient | Striped variant background |
+| Variable                         | Default               | Description                |
+| -------------------------------- | --------------------- | -------------------------- |
+| `--progressbar-height`           | `8px`                 | Bar height                 |
+| `--progressbar-border-radius`    | `9999px`              | Border radius (pill shape) |
+| `--progressbar-background-color` | `var(--neutrals-200)` | Track background           |
+| `--progressbar-foreground-color` | `var(--primary-500)`  | Fill color                 |
+| `--progressbar-striped-bg`       | gradient              | Striped variant background |
 
 ## Tips
 

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

@@ -14,9 +14,18 @@ A simple layout primitive that arranges child elements in a horizontal flexbox r
 ```vue
 <template>
   <VcRow>
-    <VcImage src="/img/a.jpg" size="xl" />
-    <VcImage src="/img/b.jpg" size="xl" />
-    <VcImage src="/img/c.jpg" size="xl" />
+    <VcImage
+      src="/img/a.jpg"
+      size="xl"
+    />
+    <VcImage
+      src="/img/b.jpg"
+      size="xl"
+    />
+    <VcImage
+      src="/img/c.jpg"
+      size="xl"
+    />
   </VcRow>
 </template>
 
@@ -38,7 +47,11 @@ The `--row-gap` CSS variable (default `0`) controls spacing. You can also overri
 ```vue
 <template>
   <VcRow class="tw-gap-4">
-    <div v-for="i in 4" :key="i" class="tw-p-4 tw-bg-gray-100 tw-rounded">
+    <div
+      v-for="i in 4"
+      :key="i"
+      class="tw-p-4 tw-bg-gray-100 tw-rounded"
+    >
       Item {{ i }}
     </div>
   </VcRow>
@@ -50,7 +63,11 @@ The `--row-gap` CSS variable (default `0`) controls spacing. You can also overri
 ```vue
 <template>
   <VcRow class="tw-gap-4">
-    <div v-for="card in cards" :key="card.id" class="tw-w-64 tw-p-4 tw-border tw-rounded tw-shadow-sm">
+    <div
+      v-for="card in cards"
+      :key="card.id"
+      class="tw-w-64 tw-p-4 tw-border tw-rounded tw-shadow-sm"
+    >
       <h3 class="tw-font-medium">{{ card.title }}</h3>
       <p class="tw-text-sm tw-text-gray-600">{{ card.description }}</p>
     </div>
@@ -64,11 +81,20 @@ The `--row-gap` CSS variable (default `0`) controls spacing. You can also overri
 <template>
   <VcRow class="tw-gap-6">
     <VcCol :size="1">
-      <VcImage :src="product.imageUrl" size="xl" />
+      <VcImage
+        :src="product.imageUrl"
+        size="xl"
+      />
     </VcCol>
     <VcCol :size="2">
-      <VcInput label="Product Name" v-model="product.name" />
-      <VcInput label="SKU" v-model="product.sku" />
+      <VcInput
+        label="Product Name"
+        v-model="product.name"
+      />
+      <VcInput
+        label="SKU"
+        v-model="product.sku"
+      />
     </VcCol>
   </VcRow>
 </template>
@@ -84,10 +110,25 @@ Use VcRow to place a section label next to a group of fields in a blade detail v
     <VcCol :size="1">
       <span class="tw-font-medium tw-text-sm tw-text-gray-700">Pricing</span>
     </VcCol>
-    <VcCol :size="3" class="tw-gap-3">
-      <VcInput label="List Price" v-model="form.listPrice" type="number" />
-      <VcInput label="Sale Price" v-model="form.salePrice" type="number" />
-      <VcSelect label="Currency" v-model="form.currency" :options="currencies" />
+    <VcCol
+      :size="3"
+      class="tw-gap-3"
+    >
+      <VcInput
+        label="List Price"
+        v-model="form.listPrice"
+        type="number"
+      />
+      <VcInput
+        label="Sale Price"
+        v-model="form.salePrice"
+        type="number"
+      />
+      <VcSelect
+        label="Currency"
+        v-model="form.currency"
+        :options="currencies"
+      />
     </VcCol>
   </VcRow>
 </template>
@@ -95,9 +136,9 @@ Use VcRow to place a section label next to a group of fields in a blade detail v
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--row-gap` | `0` | Gap between child elements |
+| Variable    | Default | Description                |
+| ----------- | ------- | -------------------------- |
+| `--row-gap` | `0`     | Gap between child elements |
 
 ## Tips
 

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

@@ -14,7 +14,11 @@ A container component that wraps overflowing content with auto-hiding scroll arr
 ```vue
 <template>
   <VcScrollableContainer style="height: 200px;">
-    <div v-for="i in 30" :key="i" class="tw-px-3 tw-py-2">
+    <div
+      v-for="i in 30"
+      :key="i"
+      class="tw-px-3 tw-py-2"
+    >
       Item {{ i }}
     </div>
   </VcScrollableContainer>
@@ -27,24 +31,24 @@ import { VcScrollableContainer } from "@vc-shell/framework";
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `speed` | `number` | `2` | Scroll speed in px/frame. Captured once at mount (not reactive). |
+| Prop    | Type     | Default | Description                                                      |
+| ------- | -------- | ------- | ---------------------------------------------------------------- |
+| `speed` | `number` | `2`     | Scroll speed in px/frame. Captured once at mount (not reactive). |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| `default` | Content rendered inside the scrollable viewport |
-| `arrow-up` | Custom up-arrow indicator (replaces default chevron) |
+| Slot         | Description                                            |
+| ------------ | ------------------------------------------------------ |
+| `default`    | Content rendered inside the scrollable viewport        |
+| `arrow-up`   | Custom up-arrow indicator (replaces default chevron)   |
 | `arrow-down` | Custom down-arrow indicator (replaces default chevron) |
 
 ## Exposed
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `viewportRef` | `Ref<HTMLElement \| null>` | Direct reference to the viewport DOM element |
-| `updateScrollState` | `() => void` | Manually recalculate arrow visibility |
+| Property            | Type                       | Description                                  |
+| ------------------- | -------------------------- | -------------------------------------------- |
+| `viewportRef`       | `Ref<HTMLElement \| null>` | Direct reference to the viewport DOM element |
+| `updateScrollState` | `() => void`               | Manually recalculate arrow visibility        |
 
 ## Recipe: Sidebar Filter List in a Blade
 
@@ -52,13 +56,19 @@ import { VcScrollableContainer } from "@vc-shell/framework";
 <template>
   <div class="tw-w-64 tw-border-r tw-border-gray-200">
     <h3 class="tw-px-3 tw-py-2 tw-font-semibold tw-text-sm">Filters</h3>
-    <VcScrollableContainer style="max-height: 320px;" :speed="3">
+    <VcScrollableContainer
+      style="max-height: 320px;"
+      :speed="3"
+    >
       <label
         v-for="filter in filters"
         :key="filter.id"
         class="tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-1.5 hover:tw-bg-gray-50 tw-cursor-pointer"
       >
-        <input type="checkbox" v-model="filter.active" />
+        <input
+          type="checkbox"
+          v-model="filter.active"
+        />
         <span class="tw-text-sm">{{ filter.label }}</span>
       </label>
     </VcScrollableContainer>
@@ -83,7 +93,10 @@ watch(activeCategory, () => {
 </script>
 
 <template>
-  <VcScrollableContainer ref="scrollContainer" style="height: 300px;">
+  <VcScrollableContainer
+    ref="scrollContainer"
+    style="height: 300px;"
+  >
     <ItemList :category="activeCategory" />
   </VcScrollableContainer>
 </template>

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

@@ -22,14 +22,14 @@ import { VcSkeleton } from "@vc-shell/framework";
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `"text" \| "circle" \| "block"` | `"text"` | Shape variant: text rows, circular, or rectangular |
-| `rows` | `number` | `1` | Number of text rows (only for `variant="text"`) |
-| `width` | `string \| number` | -- | Custom width for circle/block (number = px) |
-| `height` | `string \| number` | -- | Custom height for circle/block (number = px) |
-| `animated` | `boolean` | `true` | Enables pulse animation |
-| `ariaLabel` | `string` | `"Loading..."` | Screen reader announcement |
+| Prop        | Type                            | Default        | Description                                        |
+| ----------- | ------------------------------- | -------------- | -------------------------------------------------- |
+| `variant`   | `"text" \| "circle" \| "block"` | `"text"`       | Shape variant: text rows, circular, or rectangular |
+| `rows`      | `number`                        | `1`            | Number of text rows (only for `variant="text"`)    |
+| `width`     | `string \| number`              | --             | Custom width for circle/block (number = px)        |
+| `height`    | `string \| number`              | --             | Custom height for circle/block (number = px)       |
+| `animated`  | `boolean`                       | `true`         | Enables pulse animation                            |
+| `ariaLabel` | `string`                        | `"Loading..."` | Screen reader announcement                         |
 
 ## Common Patterns
 
@@ -52,9 +52,17 @@ The last row automatically renders at 60% width for a natural paragraph feel.
 ```vue
 <template>
   <div class="tw-border tw-rounded-lg tw-overflow-hidden tw-shadow-sm">
-    <VcSkeleton variant="block" width="100%" height="200px" />
+    <VcSkeleton
+      variant="block"
+      width="100%"
+      height="200px"
+    />
     <div class="tw-p-4">
-      <VcSkeleton variant="block" width="60%" height="20px" />
+      <VcSkeleton
+        variant="block"
+        width="60%"
+        height="20px"
+      />
       <div class="tw-mt-3">
         <VcSkeleton :rows="3" />
       </div>
@@ -68,10 +76,22 @@ The last row automatically renders at 60% width for a natural paragraph feel.
 ```vue
 <template>
   <div class="tw-space-y-4">
-    <div v-for="i in 3" :key="i" class="tw-flex tw-gap-4 tw-items-center">
-      <VcSkeleton variant="circle" :width="40" :height="40" />
+    <div
+      v-for="i in 3"
+      :key="i"
+      class="tw-flex tw-gap-4 tw-items-center"
+    >
+      <VcSkeleton
+        variant="circle"
+        :width="40"
+        :height="40"
+      />
       <div class="tw-flex-1">
-        <VcSkeleton variant="block" width="40%" height="14px" />
+        <VcSkeleton
+          variant="block"
+          width="40%"
+          height="14px"
+        />
         <div class="tw-mt-2">
           <VcSkeleton :rows="1" />
         </div>
@@ -83,13 +103,13 @@ The last row automatically renders at 60% width for a natural paragraph feel.
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--vc-skeleton-bg` | `var(--neutrals-200)` | Shape background color |
-| `--vc-skeleton-highlight` | `var(--neutrals-300)` | Highlight color (for future shimmer) |
-| `--vc-skeleton-border-radius` | `6px` | Corner radius for text rows and blocks |
-| `--vc-skeleton-row-height` | `16px` | Height of each text row |
-| `--vc-skeleton-row-gap` | `12px` | Vertical gap between text rows |
+| Variable                      | Default               | Description                            |
+| ----------------------------- | --------------------- | -------------------------------------- |
+| `--vc-skeleton-bg`            | `var(--neutrals-200)` | Shape background color                 |
+| `--vc-skeleton-highlight`     | `var(--neutrals-300)` | Highlight color (for future shimmer)   |
+| `--vc-skeleton-border-radius` | `6px`                 | Corner radius for text rows and blocks |
+| `--vc-skeleton-row-height`    | `16px`                | Height of each text row                |
+| `--vc-skeleton-row-gap`       | `12px`                | Vertical gap between text rows         |
 
 ## Accessibility
 

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

@@ -23,11 +23,11 @@ import { VcStatus } from "@vc-shell/framework";
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `"info" \| "warning" \| "danger" \| "success" \| "light-danger" \| "info-dark" \| "primary"` | `"info"` | Semantic color theme |
-| `extend` | `boolean` | -- | Extended layout with larger padding, rounded corners, and colored background |
-| `dot` | `boolean` | `false` | Renders as a small colored circle without text |
+| Prop      | Type                                                                                         | Default  | Description                                                                  |
+| --------- | -------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------- |
+| `variant` | `"info" \| "warning" \| "danger" \| "success" \| "light-danger" \| "info-dark" \| "primary"` | `"info"` | Semantic color theme                                                         |
+| `extend`  | `boolean`                                                                                    | --       | Extended layout with larger padding, rounded corners, and colored background |
+| `dot`     | `boolean`                                                                                    | `false`  | Renders as a small colored circle without text                               |
 
 ## Common Patterns
 
@@ -60,7 +60,10 @@ Use the `dot` prop for compact status representation alongside text labels.
 ```vue
 <template>
   <div class="tw-flex tw-items-center tw-gap-2">
-    <VcStatus variant="success" dot />
+    <VcStatus
+      variant="success"
+      dot
+    />
     <span>Online</span>
   </div>
 </template>
@@ -72,9 +75,17 @@ The `extend` prop creates a banner-like status with a colored background, suitab
 
 ```vue
 <template>
-  <VcStatus variant="danger" extend>
+  <VcStatus
+    variant="danger"
+    extend
+  >
     <div class="tw-flex tw-items-center">
-      <VcIcon icon="lucide-triangle-alert" size="xl" variant="danger" class="tw-mr-3" />
+      <VcIcon
+        icon="lucide-triangle-alert"
+        size="xl"
+        variant="danger"
+        class="tw-mr-3"
+      />
       <div>
         <h3 class="tw-font-bold">Payment Failed</h3>
         <p>The last transaction was declined. Please update your payment method.</p>
@@ -88,12 +99,12 @@ The `extend` prop creates a banner-like status with a colored background, suitab
 
 Each variant has its own set of CSS variables following the pattern `--status-{variant}-color`, `--status-{variant}-main-color`, `--status-{variant}-bg-color`. Key shared variables:
 
-| Variable | Default | Description |
-|---|---|---|
-| `--status-border-radius` | `9999px` | Pill shape for standard mode |
-| `--status-border-radius-extended` | `6px` | Rounded corners for extended mode |
-| `--status-dot-size` | `10px` | Diameter of the dot indicator |
-| `--status-text-color` | `var(--neutrals-700)` | Default label text color |
+| Variable                          | Default               | Description                       |
+| --------------------------------- | --------------------- | --------------------------------- |
+| `--status-border-radius`          | `9999px`              | Pill shape for standard mode      |
+| `--status-border-radius-extended` | `6px`                 | Rounded corners for extended mode |
+| `--status-dot-size`               | `10px`                | Diameter of the dot indicator     |
+| `--status-text-color`             | `var(--neutrals-700)` | Default label text color          |
 
 ## Accessibility
 

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

@@ -23,8 +23,8 @@ import { VcStatusIcon } from "@vc-shell/framework";
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
+| Prop     | Type      | Default     | Description                                                           |
+| -------- | --------- | ----------- | --------------------------------------------------------------------- |
 | `status` | `boolean` | `undefined` | `true` shows a green check circle; `false` shows a muted cross circle |
 
 ## Common Patterns
@@ -33,7 +33,11 @@ import { VcStatusIcon } from "@vc-shell/framework";
 
 ```vue
 <template>
-  <VcColumn id="isActive" header="Active" :width="80">
+  <VcColumn
+    id="isActive"
+    header="Active"
+    :width="80"
+  >
     <template #default="{ row }">
       <VcStatusIcon :status="row.isActive" />
     </template>
@@ -45,18 +49,33 @@ import { VcStatusIcon } from "@vc-shell/framework";
 
 ```vue
 <template>
-  <VcDataTable :columns="columns" :items="users">
-    <VcColumn id="emailVerified" header="Email" :width="70">
+  <VcDataTable
+    :columns="columns"
+    :items="users"
+  >
+    <VcColumn
+      id="emailVerified"
+      header="Email"
+      :width="70"
+    >
       <template #default="{ row }">
         <VcStatusIcon :status="row.emailVerified" />
       </template>
     </VcColumn>
-    <VcColumn id="isActive" header="Active" :width="70">
+    <VcColumn
+      id="isActive"
+      header="Active"
+      :width="70"
+    >
       <template #default="{ row }">
         <VcStatusIcon :status="row.isActive" />
       </template>
     </VcColumn>
-    <VcColumn id="hasAvatar" header="Avatar" :width="70">
+    <VcColumn
+      id="hasAvatar"
+      header="Avatar"
+      :width="70"
+    >
       <template #default="{ row }">
         <VcStatusIcon :status="!!row.avatarUrl" />
       </template>
@@ -70,10 +89,14 @@ import { VcStatusIcon } from "@vc-shell/framework";
 ```vue
 <template>
   <div class="tw-space-y-2">
-    <div v-for="service in services" :key="service.name" class="tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b">
+    <div
+      v-for="service in services"
+      :key="service.name"
+      class="tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b"
+    >
       <span>{{ service.name }}</span>
       <div class="tw-flex tw-items-center tw-gap-2">
-        <span class="tw-text-sm">{{ service.status ? 'Online' : 'Offline' }}</span>
+        <span class="tw-text-sm">{{ service.status ? "Online" : "Offline" }}</span>
         <VcStatusIcon :status="service.status" />
       </div>
     </div>
@@ -89,8 +112,11 @@ VcStatusIcon is intentionally minimal. If you need a text label next to the icon
 <template>
   <div class="tw-flex tw-items-center tw-gap-2">
     <VcStatusIcon :status="order.isPaid" />
-    <span class="tw-text-sm" :class="order.isPaid ? 'tw-text-green-600' : 'tw-text-gray-400'">
-      {{ order.isPaid ? 'Paid' : 'Unpaid' }}
+    <span
+      class="tw-text-sm"
+      :class="order.isPaid ? 'tw-text-green-600' : 'tw-text-gray-400'"
+    >
+      {{ order.isPaid ? "Paid" : "Unpaid" }}
     </span>
   </div>
 </template>
@@ -98,9 +124,9 @@ VcStatusIcon is intentionally minimal. If you need a text label next to the icon
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--status-icon-success-color` | `var(--success-500)` | Color of the check icon |
+| Variable                       | Default               | Description             |
+| ------------------------------ | --------------------- | ----------------------- |
+| `--status-icon-success-color`  | `var(--success-500)`  | Color of the check icon |
 | `--status-icon-inactive-color` | `var(--neutrals-300)` | Color of the cross icon |
 
 ## Tips