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

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

@@ -4,12 +4,12 @@ A bordered container with an optional header, icon, action buttons, and collapsi
 
 ## When to Use
 
-| Scenario | Component |
-|----------|-----------|
-| Grouping form fields or content with a header | **VcCard** |
-| Scrollable content wrapper without a header | [VcContainer](../vc-container/) |
+| Scenario                                      | Component                                                                    |
+| --------------------------------------------- | ---------------------------------------------------------------------------- |
+| Grouping form fields or content with a header | **VcCard**                                                                   |
+| Scrollable content wrapper without a header   | [VcContainer](../vc-container/)                                              |
 | Collapsible section with rich toggle behavior | [VcAccordion](../../molecules/vc-accordion/) (for multiple exclusive panels) |
-| Alert or notification banner | [VcBanner](../vc-banner/) |
+| Alert or notification banner                  | [VcBanner](../vc-banner/)                                                    |
 
 Use VcCard to visually separate content sections on a blade -- especially when you need a titled header, action buttons, or collapsible body. **Do not use** VcCard for dismissible alerts or status messages (use `VcBanner`), and avoid nesting VcCard when a simple `VcContainer` with padding would suffice.
 
@@ -66,11 +66,11 @@ Three variants control the header's background and text color to communicate sem
 </VcCard>
 ```
 
-| Variant | Header Background | Header Text | Use Case |
-|---------|-------------------|-------------|----------|
-| `default` | `var(--secondary-50)` (light gray) | `var(--secondary-950)` (dark) | Standard content grouping |
-| `success` | `var(--success-100)` (light green) | `var(--success-600)` (green) | Positive state confirmation |
-| `danger` | `var(--danger-100)` (light red) | `var(--danger-600)` (red) | Errors, warnings, destructive content |
+| Variant   | Header Background                  | Header Text                   | Use Case                              |
+| --------- | ---------------------------------- | ----------------------------- | ------------------------------------- |
+| `default` | `var(--secondary-50)` (light gray) | `var(--secondary-950)` (dark) | Standard content grouping             |
+| `success` | `var(--success-100)` (light green) | `var(--success-600)` (green)  | Positive state confirmation           |
+| `danger`  | `var(--danger-100)` (light red)    | `var(--danger-600)` (red)     | Errors, warnings, destructive content |
 
 ## Collapsible Sections
 
@@ -193,24 +193,61 @@ When `fill` is `true`, the card body applies `display: flex` to allow child cont
 ```vue
 <template>
   <div class="tw-flex tw-flex-col tw-gap-4">
-    <VcCard header="Basic Information" icon="lucide-file-text">
+    <VcCard
+      header="Basic Information"
+      icon="lucide-file-text"
+    >
       <div class="tw-p-4 tw-grid tw-grid-cols-2 tw-gap-4">
-        <VcInput v-model="form.name" label="Product Name" required />
-        <VcInput v-model="form.sku" label="SKU" required />
-        <VcInput v-model="form.price" label="Price" type="number" />
-        <VcSelect v-model="form.category" label="Category" :options="categories" />
+        <VcInput
+          v-model="form.name"
+          label="Product Name"
+          required
+        />
+        <VcInput
+          v-model="form.sku"
+          label="SKU"
+          required
+        />
+        <VcInput
+          v-model="form.price"
+          label="Price"
+          type="number"
+        />
+        <VcSelect
+          v-model="form.category"
+          label="Category"
+          :options="categories"
+        />
       </div>
     </VcCard>
 
-    <VcCard header="SEO Settings" icon="lucide-search" is-collapsable is-collapsed>
+    <VcCard
+      header="SEO Settings"
+      icon="lucide-search"
+      is-collapsable
+      is-collapsed
+    >
       <div class="tw-p-4 tw-grid tw-grid-cols-2 tw-gap-4">
-        <VcInput v-model="form.metaTitle" label="Meta Title" />
-        <VcInput v-model="form.metaDescription" label="Meta Description" />
-        <VcInput v-model="form.slug" label="URL Slug" />
+        <VcInput
+          v-model="form.metaTitle"
+          label="Meta Title"
+        />
+        <VcInput
+          v-model="form.metaDescription"
+          label="Meta Description"
+        />
+        <VcInput
+          v-model="form.slug"
+          label="URL Slug"
+        />
       </div>
     </VcCard>
 
-    <VcCard header="Inventory" icon="lucide-warehouse" is-collapsable>
+    <VcCard
+      header="Inventory"
+      icon="lucide-warehouse"
+      is-collapsable
+    >
       <div class="tw-p-4">
         <!-- inventory fields -->
       </div>
@@ -229,8 +266,16 @@ When `fill` is `true`, the card body applies `display: flex` to allow child cont
     :icon="errors.length > 0 ? 'lucide-alert-triangle' : 'lucide-check-circle'"
   >
     <div class="tw-p-4">
-      <ul v-if="errors.length > 0" class="tw-list-disc tw-pl-4 tw-space-y-1">
-        <li v-for="error in errors" :key="error">{{ error }}</li>
+      <ul
+        v-if="errors.length > 0"
+        class="tw-list-disc tw-pl-4 tw-space-y-1"
+      >
+        <li
+          v-for="error in errors"
+          :key="error"
+        >
+          {{ error }}
+        </li>
       </ul>
       <p v-else>All validations passed.</p>
     </div>
@@ -241,11 +286,7 @@ When `fill` is `true`, the card body applies `display: flex` to allow child cont
 import { computed } from "vue";
 
 const errors = ref<string[]>([]);
-const validationHeader = computed(() =>
-  errors.value.length > 0
-    ? `${errors.value.length} Validation Error(s)`
-    : "Validation Passed"
-);
+const validationHeader = computed(() => (errors.value.length > 0 ? `${errors.value.length} Validation Error(s)` : "Validation Passed"));
 </script>
 ```
 
@@ -295,47 +336,47 @@ const validationHeader = computed(() =>
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `header` | `string` | -- | Title text displayed in the card header |
-| `icon` | `string` | -- | Icon identifier shown before the title |
-| `variant` | `"default" \| "success" \| "danger"` | `"default"` | Header color variant |
-| `isCollapsable` | `boolean` | `false` | Enables collapse/expand on header click |
-| `isCollapsed` | `boolean` | `false` | Controls the collapsed state (requires `isCollapsable`) |
-| `fill` | `boolean` | `false` | Makes body content fill available vertical space via flex |
+| Prop            | Type                                 | Default     | Description                                               |
+| --------------- | ------------------------------------ | ----------- | --------------------------------------------------------- |
+| `header`        | `string`                             | --          | Title text displayed in the card header                   |
+| `icon`          | `string`                             | --          | Icon identifier shown before the title                    |
+| `variant`       | `"default" \| "success" \| "danger"` | `"default"` | Header color variant                                      |
+| `isCollapsable` | `boolean`                            | `false`     | Enables collapse/expand on header click                   |
+| `isCollapsed`   | `boolean`                            | `false`     | Controls the collapsed state (requires `isCollapsable`)   |
+| `fill`          | `boolean`                            | `false`     | Makes body content fill available vertical space via flex |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `header:click` | -- | Emitted when the header is clicked (always, regardless of collapsable state) |
-| `state:collapsed` | `boolean` | Emitted when the collapsed state changes (`true` = collapsed) |
+| Event             | Payload   | Description                                                                  |
+| ----------------- | --------- | ---------------------------------------------------------------------------- |
+| `header:click`    | --        | Emitted when the header is clicked (always, regardless of collapsable state) |
+| `state:collapsed` | `boolean` | Emitted when the collapsed state changes (`true` = collapsed)                |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
-| `default` | Card body content |
-| `header` | Custom header content (replaces the default title + icon) |
-| `actions` | Action buttons rendered on the right side of the header |
+| Slot      | Description                                               |
+| --------- | --------------------------------------------------------- |
+| `default` | Card body content                                         |
+| `header`  | Custom header content (replaces the default title + icon) |
+| `actions` | Action buttons rendered on the right side of the header   |
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--card-background` | `var(--additional-50)` | Card body background |
-| `--card-border-color` | `var(--neutrals-200)` | Border color |
-| `--card-border-radius` | `6px` | Corner radius |
-| `--card-header-background` | `var(--secondary-50)` | Default header background |
-| `--card-header-color` | `var(--secondary-950)` | Default header text color |
-| `--card-header-background-success` | `var(--success-100)` | Success variant header background |
-| `--card-header-background-danger` | `var(--danger-100)` | Danger variant header background |
-| `--card-header-color-success` | `var(--success-600)` | Success variant header text |
-| `--card-header-color-danger` | `var(--danger-600)` | Danger variant header text |
-| `--card-header-padding-hor` | `24px` | Header horizontal padding |
-| `--card-header-padding-vert` | `17px` | Header vertical padding |
-| `--card-hover-shadow` | `0 2px 8px rgba(0,0,0,0.06)` | Hover shadow |
-| `--card-focus-ring-color` | `var(--primary-300)` | Focus ring for collapsable headers |
+| Variable                           | Default                      | Description                        |
+| ---------------------------------- | ---------------------------- | ---------------------------------- |
+| `--card-background`                | `var(--additional-50)`       | Card body background               |
+| `--card-border-color`              | `var(--neutrals-200)`        | Border color                       |
+| `--card-border-radius`             | `6px`                        | Corner radius                      |
+| `--card-header-background`         | `var(--secondary-50)`        | Default header background          |
+| `--card-header-color`              | `var(--secondary-950)`       | Default header text color          |
+| `--card-header-background-success` | `var(--success-100)`         | Success variant header background  |
+| `--card-header-background-danger`  | `var(--danger-100)`          | Danger variant header background   |
+| `--card-header-color-success`      | `var(--success-600)`         | Success variant header text        |
+| `--card-header-color-danger`       | `var(--danger-600)`          | Danger variant header text         |
+| `--card-header-padding-hor`        | `24px`                       | Header horizontal padding          |
+| `--card-header-padding-vert`       | `17px`                       | Header vertical padding            |
+| `--card-hover-shadow`              | `0 2px 8px rgba(0,0,0,0.06)` | Hover shadow                       |
+| `--card-focus-ring-color`          | `var(--primary-300)`         | Focus ring for collapsable headers |
 
 ## Accessibility
 

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

@@ -20,15 +20,15 @@ A flexbox column layout primitive that stacks its children vertically. Designed
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `size` | `number` | `1` | Flex-grow value controlling how much space the column occupies relative to siblings |
+| Prop   | Type     | Default | Description                                                                         |
+| ------ | -------- | ------- | ----------------------------------------------------------------------------------- |
+| `size` | `number` | `1`     | Flex-grow value controlling how much space the column occupies relative to siblings |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--col-gap` | `0` | Vertical gap between child elements |
+| Variable    | Default | Description                         |
+| ----------- | ------- | ----------------------------------- |
+| `--col-gap` | `0`     | Vertical gap between child elements |
 
 ## Common Patterns
 
@@ -75,12 +75,29 @@ A common blade layout places metadata in a narrow sidebar column and form fields
 ```vue
 <template>
   <VcRow class="tw-gap-6">
-    <VcCol :size="3" class="tw-gap-4">
-      <VcInput label="Name" v-model="form.name" required />
-      <VcTextarea label="Description" v-model="form.description" />
-      <VcSelect label="Category" v-model="form.category" :options="categories" />
+    <VcCol
+      :size="3"
+      class="tw-gap-4"
+    >
+      <VcInput
+        label="Name"
+        v-model="form.name"
+        required
+      />
+      <VcTextarea
+        label="Description"
+        v-model="form.description"
+      />
+      <VcSelect
+        label="Category"
+        v-model="form.category"
+        :options="categories"
+      />
     </VcCol>
-    <VcCol :size="1" class="tw-gap-4">
+    <VcCol
+      :size="1"
+      class="tw-gap-4"
+    >
       <VcStatusIcon :status="form.isPublished" />
       <VcHint>Created: {{ form.createdDate }}</VcHint>
       <VcHint>Modified: {{ form.modifiedDate }}</VcHint>

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

@@ -19,32 +19,32 @@ A scrollable content wrapper that fills its parent, provides configurable paddin
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `shadow` | `boolean` | `false` | Shows an inset shadow when content overflows |
-| `noPadding` | `boolean` | `false` | Removes the default 16px inner padding |
-| `ariaLabel` | `string` | — | When provided, renders as `<section>` with this label instead of `<div>` |
+| Prop        | Type      | Default | Description                                                              |
+| ----------- | --------- | ------- | ------------------------------------------------------------------------ |
+| `shadow`    | `boolean` | `false` | Shows an inset shadow when content overflows                             |
+| `noPadding` | `boolean` | `false` | Removes the default 16px inner padding                                   |
+| `ariaLabel` | `string`  | —       | When provided, renders as `<section>` with this label instead of `<div>` |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--container-padding` | `16px` | Inner padding of the scrollable area |
-| `--container-bg` | `transparent` | Background color |
-| `--container-border-radius` | `0` | Border radius |
-| `--container-gap` | `0` | Gap between child elements |
+| Variable                    | Default       | Description                          |
+| --------------------------- | ------------- | ------------------------------------ |
+| `--container-padding`       | `16px`        | Inner padding of the scrollable area |
+| `--container-bg`            | `transparent` | Background color                     |
+| `--container-border-radius` | `0`           | Border radius                        |
+| `--container-gap`           | `0`           | Gap between child elements           |
 
 ## Exposed Methods
 
-| Method | Description |
-|--------|-------------|
+| Method        | Description                                      |
+| ------------- | ------------------------------------------------ |
 | `scrollTop()` | Programmatically scroll the container to the top |
-| `component` | Ref to the inner scrollable DOM element |
+| `component`   | Ref to the inner scrollable DOM element          |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event    | Payload | Description                   |
+| -------- | ------- | ----------------------------- |
 | `scroll` | `Event` | Emitted on every scroll event |
 
 ## Common Patterns
@@ -88,7 +88,10 @@ function scrollToTop() {
 </script>
 
 <template>
-  <VcContainer ref="containerRef" shadow>
+  <VcContainer
+    ref="containerRef"
+    shadow
+  >
     <!-- long content -->
   </VcContainer>
   <VcButton @click="scrollToTop">Back to Top</VcButton>

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

@@ -18,19 +18,19 @@ A small text component for displaying helper text, validation messages, or suppl
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | `string` | -- | Optional id for linking with `aria-describedby` on the associated input |
-| `error` | `boolean` | `false` | Shows the hint in error state (danger color) |
+| Prop    | Type      | Default | Description                                                             |
+| ------- | --------- | ------- | ----------------------------------------------------------------------- |
+| `id`    | `string`  | --      | Optional id for linking with `aria-describedby` on the associated input |
+| `error` | `boolean` | `false` | Shows the hint in error state (danger color)                            |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--hint-color` | `var(--neutrals-500)` | Default text color |
-| `--hint-error-color` | `var(--danger-500)` | Text color in error state |
-| `--hint-font-size` | `12px` | Font size |
-| `--hint-line-height` | `1.4` | Line height |
+| Variable             | Default               | Description               |
+| -------------------- | --------------------- | ------------------------- |
+| `--hint-color`       | `var(--neutrals-500)` | Default text color        |
+| `--hint-error-color` | `var(--danger-500)`   | Text color in error state |
+| `--hint-font-size`   | `12px`                | Font size                 |
+| `--hint-line-height` | `1.4`                 | Line height               |
 
 ## Common Patterns
 
@@ -82,10 +82,11 @@ const isOverLimit = computed(() => remaining.value < 0);
 </script>
 
 <template>
-  <VcTextarea label="Description" v-model="description" />
-  <VcHint :error="isOverLimit">
-    {{ remaining }} characters remaining
-  </VcHint>
+  <VcTextarea
+    label="Description"
+    v-model="description"
+  />
+  <VcHint :error="isOverLimit"> {{ remaining }} characters remaining </VcHint>
 </template>
 ```
 
@@ -95,9 +96,17 @@ Show helper text by default, but swap to an error message when validation fails:
 
 ```vue
 <template>
-  <VcInput label="Slug" v-model="slug" :error="!!slugError" aria-describedby="slug-hint" />
-  <VcHint id="slug-hint" :error="!!slugError">
-    {{ slugError || 'URL-friendly identifier. Use lowercase letters and hyphens.' }}
+  <VcInput
+    label="Slug"
+    v-model="slug"
+    :error="!!slugError"
+    aria-describedby="slug-hint"
+  />
+  <VcHint
+    id="slug-hint"
+    :error="!!slugError"
+  >
+    {{ slugError || "URL-friendly identifier. Use lowercase letters and hyphens." }}
   </VcHint>
 </template>
 ```

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

@@ -17,37 +17,37 @@ A unified icon component that renders icons from multiple libraries. Lucide Icon
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `icon` | `string \| Component` | `"lucide-square"` | Icon identifier or Vue component |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl" \| "xxl" \| "xxxl"` | `"m"` | Predefined size |
-| `variant` | `"warning" \| "danger" \| "success"` | — | Semantic color variant |
-| `customSize` | `number` | — | Custom size in pixels (overrides `size`) |
-| `ariaLabel` | `string` | — | Accessible label for meaningful icons |
-| `basePath` | `string` | `"/assets/icons"` | Base path for SVG sprite icons |
+| Prop         | Type                                                   | Default           | Description                              |
+| ------------ | ------------------------------------------------------ | ----------------- | ---------------------------------------- |
+| `icon`       | `string \| Component`                                  | `"lucide-square"` | Icon identifier or Vue component         |
+| `size`       | `"xs" \| "s" \| "m" \| "l" \| "xl" \| "xxl" \| "xxxl"` | `"m"`             | Predefined size                          |
+| `variant`    | `"warning" \| "danger" \| "success"`                   | —                 | Semantic color variant                   |
+| `customSize` | `number`                                               | —                 | Custom size in pixels (overrides `size`) |
+| `ariaLabel`  | `string`                                               | —                 | Accessible label for meaningful icons    |
+| `basePath`   | `string`                                               | `"/assets/icons"` | Base path for SVG sprite icons           |
 
 ## Size Reference
 
-| Size | Pixels |
-|------|--------|
-| `xs` | 12px |
-| `s` | 14px |
-| `m` | 18px |
-| `l` | 20px |
-| `xl` | 22px |
-| `xxl` | 30px |
-| `xxxl` | 64px |
+| Size   | Pixels |
+| ------ | ------ |
+| `xs`   | 12px   |
+| `s`    | 14px   |
+| `m`    | 18px   |
+| `l`    | 20px   |
+| `xl`   | 22px   |
+| `xxl`  | 30px   |
+| `xxxl` | 64px   |
 
 ## Icon Prefix Guide
 
-| Prefix | Library | Status |
-|--------|---------|--------|
-| `lucide-` | Lucide Icons | Standard (recommended) |
-| `fa-` / `fas fa-` | Font Awesome | Deprecated |
-| `bi-` | Bootstrap Icons | Deprecated |
-| `material-` | Material Symbols | Deprecated |
-| `svg:` | SVG sprite file | Supported |
-| _(Component)_ | Vue component instance | Supported |
+| Prefix            | Library                | Status                 |
+| ----------------- | ---------------------- | ---------------------- |
+| `lucide-`         | Lucide Icons           | Standard (recommended) |
+| `fa-` / `fas fa-` | Font Awesome           | Deprecated             |
+| `bi-`             | Bootstrap Icons        | Deprecated             |
+| `material-`       | Material Symbols       | Deprecated             |
+| `svg:`            | SVG sprite file        | Supported              |
+| _(Component)_     | Vue component instance | Supported              |
 
 ## Common Patterns
 
@@ -75,12 +75,7 @@ A unified icon component that renders icons from multiple libraries. Lucide Icon
 ### Meaningful Icon with Accessible Label
 
 ```vue
-<VcIcon
-  icon="lucide-triangle-alert"
-  variant="warning"
-  size="l"
-  aria-label="Warning: low stock"
-/>
+<VcIcon icon="lucide-triangle-alert" variant="warning" size="l" aria-label="Warning: low stock" />
 ```
 
 ### Custom Vue Component as Icon
@@ -92,7 +87,10 @@ import MyCustomIcon from "./MyCustomIcon.vue";
 </script>
 
 <template>
-  <VcIcon :icon="MyCustomIcon" size="l" />
+  <VcIcon
+    :icon="MyCustomIcon"
+    size="l"
+  />
 </template>
 ```
 

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

@@ -17,30 +17,30 @@ An image display component with predefined sizes, aspect ratio control, and a pl
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `src` | `string` | — | Image URL; shows a placeholder icon when empty |
-| `size` | `"auto" \| "xxs" \| "xs" \| "s" \| "m" \| "l" \| "xl" \| "xxl"` | `"auto"` | Predefined width |
-| `aspect` | `"1x1" \| "16x9" \| "4x3" \| "3x2"` | `"1x1"` | Aspect ratio of the container |
-| `background` | `"cover" \| "contain" \| "auto"` | `"cover"` | CSS background-size mode |
-| `rounded` | `boolean` | `false` | Applies fully rounded corners (circular on 1x1) |
-| `bordered` | `boolean` | `false` | Adds a subtle border |
-| `clickable` | `boolean` | `false` | Makes the image interactive with cursor and click event |
-| `emptyIcon` | `string` | `"lucide-image"` | Icon shown when `src` is empty |
-| `alt` | `string` | — | Accessible alt text |
-| `thumbnailSize` | `ThumbnailSize` | — | Load a thumbnail variant instead of full-size image. Values: `"sm"`, `"md"`, `"lg"`, `"64x64"`, `"128x128"`, `"168x168"`, `"216x216"`, `"348x348"` |
+| Prop            | Type                                                            | Default          | Description                                                                                                                                        |
+| --------------- | --------------------------------------------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `src`           | `string`                                                        | —                | Image URL; shows a placeholder icon when empty                                                                                                     |
+| `size`          | `"auto" \| "xxs" \| "xs" \| "s" \| "m" \| "l" \| "xl" \| "xxl"` | `"auto"`         | Predefined width                                                                                                                                   |
+| `aspect`        | `"1x1" \| "16x9" \| "4x3" \| "3x2"`                             | `"1x1"`          | Aspect ratio of the container                                                                                                                      |
+| `background`    | `"cover" \| "contain" \| "auto"`                                | `"cover"`        | CSS background-size mode                                                                                                                           |
+| `rounded`       | `boolean`                                                       | `false`          | Applies fully rounded corners (circular on 1x1)                                                                                                    |
+| `bordered`      | `boolean`                                                       | `false`          | Adds a subtle border                                                                                                                               |
+| `clickable`     | `boolean`                                                       | `false`          | Makes the image interactive with cursor and click event                                                                                            |
+| `emptyIcon`     | `string`                                                        | `"lucide-image"` | Icon shown when `src` is empty                                                                                                                     |
+| `alt`           | `string`                                                        | —                | Accessible alt text                                                                                                                                |
+| `thumbnailSize` | `ThumbnailSize`                                                 | —                | Load a thumbnail variant instead of full-size image. Values: `"sm"`, `"md"`, `"lg"`, `"64x64"`, `"128x128"`, `"168x168"`, `"216x216"`, `"348x348"` |
 
 ## Size Reference
 
-| Size | Width |
-|------|-------|
-| `xxs` | 24px |
-| `xs` | 32px |
-| `s` | 48px |
-| `m` | 64px |
-| `l` | 96px |
-| `xl` | 128px |
-| `xxl` | 145px |
+| Size   | Width          |
+| ------ | -------------- |
+| `xxs`  | 24px           |
+| `xs`   | 32px           |
+| `s`    | 48px           |
+| `m`    | 64px           |
+| `l`    | 96px           |
+| `xl`   | 128px          |
+| `xxl`  | 145px          |
 | `auto` | 100% of parent |
 
 ## Common Patterns
@@ -48,48 +48,25 @@ An image display component with predefined sizes, aspect ratio control, and a pl
 ### Product Thumbnail in a List
 
 ```vue
-<VcImage
-  :src="product.primaryImage"
-  size="s"
-  aspect="1x1"
-  bordered
-  :alt="product.name"
-/>
+<VcImage :src="product.primaryImage" size="s" aspect="1x1" bordered :alt="product.name" />
 ```
 
 ### Profile Avatar
 
 ```vue
-<VcImage
-  :src="user.avatarUrl"
-  size="m"
-  rounded
-  :alt="user.displayName"
-/>
+<VcImage :src="user.avatarUrl" size="m" rounded :alt="user.displayName" />
 ```
 
 ### Widescreen Banner
 
 ```vue
-<VcImage
-  :src="category.bannerUrl"
-  aspect="16x9"
-  background="cover"
-  alt="Category banner"
-/>
+<VcImage :src="category.bannerUrl" aspect="16x9" background="cover" alt="Category banner" />
 ```
 
 ### Clickable Gallery Image
 
 ```vue
-<VcImage
-  :src="image.url"
-  size="l"
-  bordered
-  clickable
-  :alt="image.caption"
-  @click="openLightbox(image)"
-/>
+<VcImage :src="image.url" size="l" bordered clickable :alt="image.caption" @click="openLightbox(image)" />
 ```
 
 ### Empty State Placeholder