@vc-shell/vc-app-skill 2.0.0-alpha.33 → 2.0.0-alpha.34

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

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

@@ -7,7 +7,11 @@ A floating tooltip that appears on hover or focus to provide contextual informat
 ```vue
 <template>
   <VcTooltip>
-    <VcButton size="icon" icon="lucide-trash-2" aria-label="Delete" />
+    <VcButton
+      size="icon"
+      icon="lucide-trash-2"
+      aria-label="Delete"
+    />
     <template #tooltip>Delete selected items</template>
   </VcTooltip>
 </template>
@@ -32,12 +36,12 @@ VcTooltip supports 12 placement positions relative to the trigger element. The t
 
 ### All placement options
 
-| Primary | Start Variant | End Variant |
-|---------|--------------|-------------|
-| `top` | `top-start` | `top-end` |
+| Primary  | Start Variant  | End Variant  |
+| -------- | -------------- | ------------ |
+| `top`    | `top-start`    | `top-end`    |
 | `bottom` | `bottom-start` | `bottom-end` |
-| `left` | `left-start` | `left-end` |
-| `right` | `right-start` | `right-end` |
+| `left`   | `left-start`   | `left-end`   |
+| `right`  | `right-start`  | `right-end`  |
 
 The `start` and `end` variants align the tooltip to the beginning or end of the trigger element along the cross axis:
 
@@ -70,11 +74,11 @@ Three visual themes control the tooltip's appearance.
 </VcTooltip>
 ```
 
-| Variant | Background | Text Color | Use Case |
-|---------|------------|------------|----------|
-| `default` | `var(--additional-50)` (light) | `var(--neutrals-700)` | General-purpose tooltips |
-| `dark` | `var(--neutrals-800)` | `var(--additional-50)` (white) | High-contrast tooltips, dark UI areas |
-| `info` | `var(--primary-600)` | `var(--additional-50)` (white) | Branded or informational tooltips |
+| Variant   | Background                     | Text Color                     | Use Case                              |
+| --------- | ------------------------------ | ------------------------------ | ------------------------------------- |
+| `default` | `var(--additional-50)` (light) | `var(--neutrals-700)`          | General-purpose tooltips              |
+| `dark`    | `var(--neutrals-800)`          | `var(--additional-50)` (white) | High-contrast tooltips, dark UI areas |
+| `info`    | `var(--primary-600)`           | `var(--additional-50)` (white) | Branded or informational tooltips     |
 
 ## Delayed Display
 
@@ -115,10 +119,10 @@ Control the distance between the trigger and the tooltip:
 <VcTooltip :offset="{ mainAxis: 8, crossAxis: 10 }">...</VcTooltip>
 ```
 
-| Axis | Direction | Default |
-|------|-----------|---------|
-| `mainAxis` | Away from the trigger (perpendicular to placement edge) | `8` |
-| `crossAxis` | Along the trigger edge (parallel to placement edge) | `0` |
+| Axis        | Direction                                               | Default |
+| ----------- | ------------------------------------------------------- | ------- |
+| `mainAxis`  | Away from the trigger (perpendicular to placement edge) | `8`     |
+| `crossAxis` | Along the trigger edge (parallel to placement edge)     | `0`     |
 
 ## Width Control
 
@@ -177,7 +181,12 @@ The `#tooltip` slot accepts any HTML or Vue components, not just text:
 ```vue
 <template>
   <div class="tw-flex tw-gap-1">
-    <VcTooltip v-for="action in actions" :key="action.id" placement="top" variant="dark">
+    <VcTooltip
+      v-for="action in actions"
+      :key="action.id"
+      placement="top"
+      variant="dark"
+    >
       <VcButton
         variant="ghost"
         size="icon"
@@ -203,7 +212,10 @@ const actions = [
 
 ```vue
 <template>
-  <VcTooltip placement="top" :max-width="400">
+  <VcTooltip
+    placement="top"
+    :max-width="400"
+  >
     <span class="tw-truncate tw-max-w-[200px] tw-block">
       {{ longProductName }}
     </span>
@@ -270,38 +282,38 @@ const actions = [
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `placement` | `TooltipPlacement` | `"bottom"` | Position relative to the trigger (12 options) |
-| `variant` | `"default" \| "dark" \| "info"` | `"default"` | Visual theme |
-| `arrow` | `boolean` | `true` | Show directional arrow pointing at the trigger |
-| `delay` | `number` | `0` | Milliseconds to wait before showing |
-| `maxWidth` | `number \| string` | `240` | Maximum width (number = px, string = CSS value) |
-| `offset` | `{ mainAxis?: number; crossAxis?: number }` | `{ mainAxis: 8 }` | Distance from the trigger element |
-| `disabled` | `boolean` | `false` | Suppress the tooltip entirely |
+| Prop        | Type                                        | Default           | Description                                     |
+| ----------- | ------------------------------------------- | ----------------- | ----------------------------------------------- |
+| `placement` | `TooltipPlacement`                          | `"bottom"`        | Position relative to the trigger (12 options)   |
+| `variant`   | `"default" \| "dark" \| "info"`             | `"default"`       | Visual theme                                    |
+| `arrow`     | `boolean`                                   | `true`            | Show directional arrow pointing at the trigger  |
+| `delay`     | `number`                                    | `0`               | Milliseconds to wait before showing             |
+| `maxWidth`  | `number \| string`                          | `240`             | Maximum width (number = px, string = CSS value) |
+| `offset`    | `{ mainAxis?: number; crossAxis?: number }` | `{ mainAxis: 8 }` | Distance from the trigger element               |
+| `disabled`  | `boolean`                                   | `false`           | Suppress the tooltip entirely                   |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot      | Description                                               |
+| --------- | --------------------------------------------------------- |
 | `default` | Trigger element that activates the tooltip on hover/focus |
-| `tooltip` | Content rendered inside the floating tooltip panel |
+| `tooltip` | Content rendered inside the floating tooltip panel        |
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--tooltip-bg` | `var(--additional-50)` | Default variant background |
-| `--tooltip-text` | `var(--neutrals-700)` | Default variant text color |
-| `--tooltip-dark-bg` | `var(--neutrals-800)` | Dark variant background |
-| `--tooltip-dark-text` | `var(--additional-50)` | Dark variant text color |
-| `--tooltip-info-bg` | `var(--primary-600)` | Info variant background |
-| `--tooltip-info-text` | `var(--additional-50)` | Info variant text color |
-| `--tooltip-border-radius` | `6px` | Corner radius |
-| `--tooltip-font-size` | `12px` | Text size |
-| `--tooltip-padding-x` | `10px` | Horizontal padding |
-| `--tooltip-padding-y` | `6px` | Vertical padding |
-| `--tooltip-z-index` | `1002` | Stacking order |
+| Variable                  | Default                | Description                |
+| ------------------------- | ---------------------- | -------------------------- |
+| `--tooltip-bg`            | `var(--additional-50)` | Default variant background |
+| `--tooltip-text`          | `var(--neutrals-700)`  | Default variant text color |
+| `--tooltip-dark-bg`       | `var(--neutrals-800)`  | Dark variant background    |
+| `--tooltip-dark-text`     | `var(--additional-50)` | Dark variant text color    |
+| `--tooltip-info-bg`       | `var(--primary-600)`   | Info variant background    |
+| `--tooltip-info-text`     | `var(--additional-50)` | Info variant text color    |
+| `--tooltip-border-radius` | `6px`                  | Corner radius              |
+| `--tooltip-font-size`     | `12px`                 | Text size                  |
+| `--tooltip-padding-x`     | `10px`                 | Horizontal padding         |
+| `--tooltip-padding-y`     | `6px`                  | Vertical padding           |
+| `--tooltip-z-index`       | `1002`                 | Stacking order             |
 
 ## Accessibility
 

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

@@ -26,22 +26,18 @@ import { VcVideo } from "@vc-shell/framework";
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `source` | `string` | -- | Embed URL for the video (e.g., YouTube embed link) |
-| `label` | `string` | -- | Label text displayed above the video |
-| `tooltip` | `string` | -- | Tooltip text shown on the label's info icon |
+| Prop      | Type     | Default | Description                                        |
+| --------- | -------- | ------- | -------------------------------------------------- |
+| `source`  | `string` | --      | Embed URL for the video (e.g., YouTube embed link) |
+| `label`   | `string` | --      | Label text displayed above the video               |
+| `tooltip` | `string` | --      | Tooltip text shown on the label's info icon        |
 
 ## Common Patterns
 
 ### Video with Label and Tooltip
 
 ```vue
-<VcVideo
-  source="https://www.youtube.com/embed/dQw4w9WgXcQ"
-  label="Setup Guide"
-  tooltip="This video walks through the initial configuration steps"
-/>
+<VcVideo source="https://www.youtube.com/embed/dQw4w9WgXcQ" label="Setup Guide" tooltip="This video walks through the initial configuration steps" />
 ```
 
 ### Placeholder When Source Is Missing
@@ -57,7 +53,11 @@ When `source` is not provided, VcVideo renders a centered film icon placeholder
 ```vue
 <template>
   <VcBlade title="Product Details">
-    <VcInput label="Video URL" v-model="product.videoUrl" placeholder="https://youtube.com/embed/..." />
+    <VcInput
+      label="Video URL"
+      v-model="product.videoUrl"
+      placeholder="https://youtube.com/embed/..."
+    />
     <VcVideo
       :source="product.videoUrl"
       label="Product Video"
@@ -89,12 +89,12 @@ When `source` is not provided, VcVideo renders a centered film icon placeholder
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--video-icon-color` | `var(--neutrals-400)` | Placeholder icon color |
-| `--video-placeholder-bg` | `var(--neutrals-100)` | Placeholder background |
-| `--video-border-radius` | `6px` | Container corner radius |
-| `--video-border-color` | `var(--neutrals-200)` | Container border color |
+| Variable                 | Default               | Description             |
+| ------------------------ | --------------------- | ----------------------- |
+| `--video-icon-color`     | `var(--neutrals-400)` | Placeholder icon color  |
+| `--video-placeholder-bg` | `var(--neutrals-100)` | Placeholder background  |
+| `--video-border-radius`  | `6px`                 | Container corner radius |
+| `--video-border-color`   | `var(--neutrals-200)` | Container border color  |
 
 ## Tips
 

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

@@ -34,20 +34,20 @@ function openNotifications() {
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `icon` | `string` | -- | Icon name (Lucide format, e.g., `"lucide-save"`) |
-| `title` | `string` | -- | Label text below (or beside) the icon |
-| `value` | `string \| number` | -- | Badge count displayed on the icon; numbers above 99 show as "99+" |
-| `disabled` | `boolean` | `false` | Prevents clicks and applies muted styling |
-| `isExpanded` | `boolean` | `false` | Expanded visual state |
-| `horizontal` | `boolean` | `false` | Arranges icon and title side by side instead of stacked |
+| Prop         | Type               | Default | Description                                                       |
+| ------------ | ------------------ | ------- | ----------------------------------------------------------------- |
+| `icon`       | `string`           | --      | Icon name (Lucide format, e.g., `"lucide-save"`)                  |
+| `title`      | `string`           | --      | Label text below (or beside) the icon                             |
+| `value`      | `string \| number` | --      | Badge count displayed on the icon; numbers above 99 show as "99+" |
+| `disabled`   | `boolean`          | `false` | Prevents clicks and applies muted styling                         |
+| `isExpanded` | `boolean`          | `false` | Expanded visual state                                             |
+| `horizontal` | `boolean`          | `false` | Arranges icon and title side by side instead of stacked           |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `click` | none | Fired when the widget is clicked (suppressed when `disabled`) |
+| Event   | Payload | Description                                                   |
+| ------- | ------- | ------------------------------------------------------------- |
+| `click` | none    | Fired when the widget is clicked (suppressed when `disabled`) |
 
 ## Common Patterns
 
@@ -87,16 +87,16 @@ Badge values above 99 are automatically displayed as "99+".
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|---|---|---|
-| `--widget-bg-color` | `transparent` | Background color |
-| `--widget-bg-hover-color` | `var(--neutrals-50)` | Background on hover |
-| `--widget-icon-color` | `var(--neutrals-700)` | Icon color |
-| `--widget-icon-hover-color` | `var(--primary-600)` | Icon color on hover |
-| `--widget-title-color` | `var(--neutrals-600)` | Title text color |
-| `--widget-title-hover-color` | `var(--primary-600)` | Title color on hover |
-| `--widget-border-radius` | `8px` | Corner radius |
-| `--widget-focus-ring-color` | `var(--primary-300)` | Focus ring color |
+| Variable                     | Default               | Description          |
+| ---------------------------- | --------------------- | -------------------- |
+| `--widget-bg-color`          | `transparent`         | Background color     |
+| `--widget-bg-hover-color`    | `var(--neutrals-50)`  | Background on hover  |
+| `--widget-icon-color`        | `var(--neutrals-700)` | Icon color           |
+| `--widget-icon-hover-color`  | `var(--primary-600)`  | Icon color on hover  |
+| `--widget-title-color`       | `var(--neutrals-600)` | Title text color     |
+| `--widget-title-hover-color` | `var(--primary-600)`  | Title color on hover |
+| `--widget-border-radius`     | `8px`                 | Corner radius        |
+| `--widget-focus-ring-color`  | `var(--primary-300)`  | Focus ring color     |
 
 ## Accessibility
 

package/runtime/knowledge/docs/ui/components/molecules/multilanguage-selector/multilanguage-selector.docs.md

@@ -33,11 +33,11 @@ const languages = [
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `string` | `""` | Currently selected language value |
-| `options` | `LanguageOption[]` | `[]` | Available language options |
-| `disabled` | `boolean` | `false` | Disables interaction |
+| Prop         | Type               | Default | Description                       |
+| ------------ | ------------------ | ------- | --------------------------------- |
+| `modelValue` | `string`           | `""`    | Currently selected language value |
+| `options`    | `LanguageOption[]` | `[]`    | Available language options        |
+| `disabled`   | `boolean`          | `false` | Disables interaction              |
 
 Each `LanguageOption` has: `{ value: string; label: string; flag?: string }`.
 
@@ -65,23 +65,36 @@ const languages = [
 
 const currentName = computed({
   get: () => product.value.names[currentLang.value] ?? "",
-  set: (val) => { product.value.names[currentLang.value] = val; },
+  set: (val) => {
+    product.value.names[currentLang.value] = val;
+  },
 });
 
 const currentDescription = computed({
   get: () => product.value.descriptions[currentLang.value] ?? "",
-  set: (val) => { product.value.descriptions[currentLang.value] = val; },
+  set: (val) => {
+    product.value.descriptions[currentLang.value] = val;
+  },
 });
 </script>
 
 <template>
   <VcBlade title="Edit Product">
     <template #actions>
-      <MultilanguageSelector v-model="currentLang" :options="languages" />
+      <MultilanguageSelector
+        v-model="currentLang"
+        :options="languages"
+      />
     </template>
 
-    <VcInput v-model="currentName" label="Name" />
-    <VcTextarea v-model="currentDescription" label="Description" />
+    <VcInput
+      v-model="currentName"
+      label="Name"
+    />
+    <VcTextarea
+      v-model="currentDescription"
+      label="Description"
+    />
   </VcBlade>
 </template>
 ```