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

package/runtime/knowledge/docs/ui/components/molecules/vc-dropdown-panel/vc-dropdown-panel.docs.md

@@ -13,7 +13,12 @@ Floating dropdown panel positioned relative to an anchor element, with header, s
 
 ```vue
 <template>
-  <button ref="anchorEl" @click="open = !open">Toggle Panel</button>
+  <button
+    ref="anchorEl"
+    @click="open = !open"
+  >
+    Toggle Panel
+  </button>
   <VcDropdownPanel
     v-model:show="open"
     :anchor-ref="anchorEl"
@@ -36,43 +41,39 @@ const open = ref(false);
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `show` | `boolean` | — | Panel visibility (v-model:show) |
-| `anchorRef` | `HTMLElement \| null` | `null` | Anchor element for floating positioning |
-| `title` | `string` | `""` | Header title text (header hidden when empty and no `#header` slot) |
-| `placement` | `Placement` | `"bottom-start"` | Floating UI placement relative to anchor |
-| `width` | `string` | `"280px"` | Panel min-width |
-| `maxWidth` | `string` | `"400px"` | Panel max-width |
-| `maxHeight` | `number` | `350` | Max height in pixels (clamped by viewport) |
-| `contentScrollable` | `boolean` | `true` | Enable scrolling in the content area |
-| `closeOnClickOutside` | `boolean` | `true` | Close when clicking outside |
-| `closeOnEscape` | `boolean` | `true` | Close on Escape key |
+| Prop                  | Type                  | Default          | Description                                                        |
+| --------------------- | --------------------- | ---------------- | ------------------------------------------------------------------ |
+| `show`                | `boolean`             | —                | Panel visibility (v-model:show)                                    |
+| `anchorRef`           | `HTMLElement \| null` | `null`           | Anchor element for floating positioning                            |
+| `title`               | `string`              | `""`             | Header title text (header hidden when empty and no `#header` slot) |
+| `placement`           | `Placement`           | `"bottom-start"` | Floating UI placement relative to anchor                           |
+| `width`               | `string`              | `"280px"`        | Panel min-width                                                    |
+| `maxWidth`            | `string`              | `"400px"`        | Panel max-width                                                    |
+| `maxHeight`           | `number`              | `350`            | Max height in pixels (clamped by viewport)                         |
+| `contentScrollable`   | `boolean`             | `true`           | Enable scrolling in the content area                               |
+| `closeOnClickOutside` | `boolean`             | `true`           | Close when clicking outside                                        |
+| `closeOnEscape`       | `boolean`             | `true`           | Close on Escape key                                                |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event         | Payload   | Description              |
+| ------------- | --------- | ------------------------ |
 | `update:show` | `boolean` | Panel visibility changed |
 
 ## Slots
 
-| Slot | Props | Description |
-|------|-------|-------------|
-| `default` | — | Scrollable content area |
-| `header` | `{ close }` | Custom header (replaces default title + close button) |
-| `footer` | — | Footer area, typically for action buttons |
+| Slot      | Props       | Description                                           |
+| --------- | ----------- | ----------------------------------------------------- |
+| `default` | —           | Scrollable content area                               |
+| `header`  | `{ close }` | Custom header (replaces default title + close button) |
+| `footer`  | —           | Footer area, typically for action buttons             |
 
 ## Common Patterns
 
 ### Filter Panel with Footer Actions
 
 ```vue
-<VcDropdownPanel
-  v-model:show="showFilters"
-  :anchor-ref="filterButton"
-  title="Filters"
->
+<VcDropdownPanel v-model:show="showFilters" :anchor-ref="filterButton" title="Filters">
   <div class="tw-p-4 tw-flex tw-flex-col tw-gap-2">
     <VcCheckbox v-model="filters.active">Active only</VcCheckbox>
     <VcCheckbox v-model="filters.inStock">In stock</VcCheckbox>
@@ -102,12 +103,7 @@ const open = ref(false);
 ### Scrollable List
 
 ```vue
-<VcDropdownPanel
-  v-model:show="open"
-  :anchor-ref="anchor"
-  title="Long Content"
-  :max-height="250"
->
+<VcDropdownPanel v-model:show="open" :anchor-ref="anchor" title="Long Content" :max-height="250">
   <div class="tw-py-1">
     <div
       v-for="item in items"
@@ -122,17 +118,17 @@ const open = ref(false);
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--dropdown-panel-bg` | `var(--additional-50)` | Panel background |
-| `--dropdown-panel-border-color` | `var(--neutrals-200)` | Border color |
-| `--dropdown-panel-border-radius` | `6px` | Corner radius |
-| `--dropdown-panel-shadow` | `0 4px 16px rgba(0,0,0,0.08)` | Box shadow |
-| `--dropdown-panel-z-index` | `10001` | Z-index |
-| `--dropdown-panel-title-color` | `var(--neutrals-900)` | Title text color |
-| `--dropdown-panel-close-color` | `var(--neutrals-400)` | Close button color |
-| `--dropdown-panel-close-hover-color` | `var(--neutrals-600)` | Close button hover color |
-| `--dropdown-panel-footer-bg` | `var(--neutrals-50)` | Footer background |
+| Variable                             | Default                       | Description              |
+| ------------------------------------ | ----------------------------- | ------------------------ |
+| `--dropdown-panel-bg`                | `var(--additional-50)`        | Panel background         |
+| `--dropdown-panel-border-color`      | `var(--neutrals-200)`         | Border color             |
+| `--dropdown-panel-border-radius`     | `6px`                         | Corner radius            |
+| `--dropdown-panel-shadow`            | `0 4px 16px rgba(0,0,0,0.08)` | Box shadow               |
+| `--dropdown-panel-z-index`           | `10001`                       | Z-index                  |
+| `--dropdown-panel-title-color`       | `var(--neutrals-900)`         | Title text color         |
+| `--dropdown-panel-close-color`       | `var(--neutrals-400)`         | Close button color       |
+| `--dropdown-panel-close-hover-color` | `var(--neutrals-600)`         | Close button hover color |
+| `--dropdown-panel-footer-bg`         | `var(--neutrals-50)`          | Footer background        |
 
 ## Accessibility
 

package/runtime/knowledge/docs/ui/components/molecules/vc-editor/vc-editor.docs.md

@@ -10,6 +10,7 @@ A rich text editor built on TipTap that supports both Markdown and HTML content.
 - Situations where authors need source-level control over markup
 
 When NOT to use:
+
 - Plain text input -- use [VcTextarea](../vc-textarea/)
 - Short single-line values -- use [VcInput](../vc-input/)
 - Code editing with syntax highlighting -- use a dedicated code editor
@@ -18,7 +19,11 @@ When NOT to use:
 
 ```vue
 <template>
-  <VcEditor v-model="content" label="Description" placeholder="Start typing..." />
+  <VcEditor
+    v-model="content"
+    label="Description"
+    placeholder="Start typing..."
+  />
 </template>
 
 <script setup lang="ts">
@@ -35,13 +40,13 @@ const content = ref("");
 
 The editor header provides four view modes plus a fullscreen toggle:
 
-| Mode | Description |
-|------|-------------|
-| **Editor** (default) | WYSIWYG rich text editing with toolbar |
-| **Preview** | Read-only rendered HTML preview (sanitized via DOMPurify) |
-| **Source** | Raw Markdown/HTML textarea for direct markup editing |
-| **Split** | Side-by-side editor + source view for simultaneous editing |
-| **Fullscreen** | Any mode expanded to fill the entire viewport |
+| Mode                 | Description                                                |
+| -------------------- | ---------------------------------------------------------- |
+| **Editor** (default) | WYSIWYG rich text editing with toolbar                     |
+| **Preview**          | Read-only rendered HTML preview (sanitized via DOMPurify)  |
+| **Source**           | Raw Markdown/HTML textarea for direct markup editing       |
+| **Split**            | Side-by-side editor + source view for simultaneous editing |
+| **Fullscreen**       | Any mode expanded to fill the entire viewport              |
 
 The editor automatically detects whether content is Markdown or HTML based on pattern analysis and outputs in the same format. HTML content is auto-formatted with Prettier in source/split views.
 
@@ -52,11 +57,7 @@ Limit which toolbar buttons appear by passing a `toolbar` array. Only the specif
 `"bold"`, `"italic"`, `"underline"`, `"strikethrough"`, `"heading1"`, `"heading2"`, `"heading3"`, `"bulletList"`, `"orderedList"`, `"blockquote"`, `"link"`, `"image"`, `"table"`, `"fontSize"`, `"separator"`
 
 ```vue
-<VcEditor
-  v-model="content"
-  label="Simple editor"
-  :toolbar="['bold', 'italic', 'separator', 'heading1', 'heading2', 'link']"
-/>
+<VcEditor v-model="content" label="Simple editor" :toolbar="['bold', 'italic', 'separator', 'heading1', 'heading2', 'link']" />
 ```
 
 When no `toolbar` prop is provided, all buttons are shown by default.
@@ -66,12 +67,7 @@ When no `toolbar` prop is provided, all buttons are shown by default.
 The `maxlength` prop enforces a character limit. A counter is displayed in source and split modes, and the counter turns to a warning style when 90% of the limit is reached. Input beyond the limit is blocked.
 
 ```vue
-<VcEditor
-  v-model="content"
-  label="Short description"
-  :maxlength="500"
-  placeholder="Maximum 500 characters..."
-/>
+<VcEditor v-model="content" label="Short description" :maxlength="500" placeholder="Maximum 500 characters..." />
 ```
 
 ### Image Upload
@@ -79,11 +75,7 @@ The `maxlength` prop enforces a character limit. A counter is displayed in sourc
 When `assetsFolder` is provided, the image toolbar button becomes functional. Clicking it opens a file picker for images. Selected files are uploaded via `POST /api/assets?folderUrl=/<assetsFolder>` and inserted at the cursor position.
 
 ```vue
-<VcEditor
-  v-model="content"
-  label="Article body"
-  assets-folder="articles/images"
-/>
+<VcEditor v-model="content" label="Article body" assets-folder="articles/images" />
 ```
 
 Multiple images can be selected at once. The upload accepts any image file type (`image/*`).
@@ -179,15 +171,7 @@ const form = reactive({ description: "" });
 ### Multilanguage Product Description
 
 ```vue
-<VcEditor
-  v-model="descriptions[currentLang]"
-  label="Product description"
-  multilanguage
-  :current-language="currentLang"
-  assets-folder="products/images"
-  :maxlength="5000"
-  required
-/>
+<VcEditor v-model="descriptions[currentLang]" label="Product description" multilanguage :current-language="currentLang" assets-folder="products/images" :maxlength="5000" required />
 ```
 
 ### Minimal Comment Editor
@@ -234,56 +218,56 @@ const content = ref("<h1>Title</h1>");
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `string` | `""` | Content string via `v-model` (Markdown or HTML) |
-| `label` | `string` | -- | Label text above the editor |
-| `placeholder` | `string` | -- | Placeholder when editor is empty |
-| `disabled` | `boolean` | `false` | Disables all editing |
-| `required` | `boolean` | `false` | Shows a required asterisk on the label |
-| `tooltip` | `string` | -- | Tooltip text shown on label hover |
-| `errorMessage` | `string` | -- | Error message below the editor (also activates error styling) |
-| `name` | `string` | -- | Form field name attribute |
-| `toolbar` | `ToolbarNames[]` | all buttons | Array of toolbar button names to show |
-| `maxlength` | `number` | -- | Character limit (counter shown in source/split mode) |
-| `assetsFolder` | `string` | -- | API folder path for image uploads |
-| `extensions` | `Extension[]` | -- | Additional TipTap extensions |
-| `customButtons` | `CustomToolbarItem[]` | -- | Plugin toolbar buttons or dropdowns |
-| `multilanguage` | `boolean` | `false` | Enables multilanguage indicator on the label |
-| `currentLanguage` | `string` | -- | Current language code for multilanguage mode |
+| Prop              | Type                  | Default     | Description                                                   |
+| ----------------- | --------------------- | ----------- | ------------------------------------------------------------- |
+| `modelValue`      | `string`              | `""`        | Content string via `v-model` (Markdown or HTML)               |
+| `label`           | `string`              | --          | Label text above the editor                                   |
+| `placeholder`     | `string`              | --          | Placeholder when editor is empty                              |
+| `disabled`        | `boolean`             | `false`     | Disables all editing                                          |
+| `required`        | `boolean`             | `false`     | Shows a required asterisk on the label                        |
+| `tooltip`         | `string`              | --          | Tooltip text shown on label hover                             |
+| `errorMessage`    | `string`              | --          | Error message below the editor (also activates error styling) |
+| `name`            | `string`              | --          | Form field name attribute                                     |
+| `toolbar`         | `ToolbarNames[]`      | all buttons | Array of toolbar button names to show                         |
+| `maxlength`       | `number`              | --          | Character limit (counter shown in source/split mode)          |
+| `assetsFolder`    | `string`              | --          | API folder path for image uploads                             |
+| `extensions`      | `Extension[]`         | --          | Additional TipTap extensions                                  |
+| `customButtons`   | `CustomToolbarItem[]` | --          | Plugin toolbar buttons or dropdowns                           |
+| `multilanguage`   | `boolean`             | `false`     | Enables multilanguage indicator on the label                  |
+| `currentLanguage` | `string`              | --          | Current language code for multilanguage mode                  |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event               | Payload               | Description                                                   |
+| ------------------- | --------------------- | ------------------------------------------------------------- |
 | `update:modelValue` | `string \| undefined` | Emitted when content changes (from WYSIWYG or source editing) |
-| `upload-image` | -- | Emitted when image upload is triggered |
+| `upload-image`      | --                    | Emitted when image upload is triggered                        |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot    | Description                                           |
+| ------- | ----------------------------------------------------- |
 | `error` | Custom error message markup (replaces default VcHint) |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--vc-editor-border` | `var(--neutrals-300)` | Default border color |
-| `--vc-editor-background` | `transparent` | Editor background |
-| `--vc-editor-surface` | `var(--additional-50)` | Content area surface color |
-| `--vc-editor-text-primary` | `var(--neutrals-900)` | Primary text color |
-| `--vc-editor-text-secondary` | `var(--neutrals-500)` | Secondary text color (char counter) |
-| `--vc-editor-text-muted` | `var(--neutrals-400)` | Muted text color (placeholder) |
-| `--vc-editor-text-disabled` | `var(--neutrals-500)` | Text color when disabled |
-| `--vc-editor-background-disabled` | `var(--neutrals-200)` | Background when disabled |
-| `--vc-editor-focus-border` | `var(--primary-500)` | Border color on focus |
-| `--vc-editor-focus-ring-color` | `color-mix(in srgb, var(--primary-500) 30%, transparent)` | Focus ring color |
-| `--vc-editor-error-border` | `var(--danger-500)` | Border color on error |
-| `--vc-editor-error-ring-color` | `rgba(239, 68, 68, 0.2)` | Error ring color |
-| `--vc-editor-error-text` | `var(--danger-500)` | Error message text color |
-| `--vc-editor-separator` | `var(--neutrals-200)` | Divider lines (blockquote border, table borders, hr) |
-| `--vc-editor-table-header` | `var(--neutrals-100)` | Table header cell background |
+| Variable                          | Default                                                   | Description                                          |
+| --------------------------------- | --------------------------------------------------------- | ---------------------------------------------------- |
+| `--vc-editor-border`              | `var(--neutrals-300)`                                     | Default border color                                 |
+| `--vc-editor-background`          | `transparent`                                             | Editor background                                    |
+| `--vc-editor-surface`             | `var(--additional-50)`                                    | Content area surface color                           |
+| `--vc-editor-text-primary`        | `var(--neutrals-900)`                                     | Primary text color                                   |
+| `--vc-editor-text-secondary`      | `var(--neutrals-500)`                                     | Secondary text color (char counter)                  |
+| `--vc-editor-text-muted`          | `var(--neutrals-400)`                                     | Muted text color (placeholder)                       |
+| `--vc-editor-text-disabled`       | `var(--neutrals-500)`                                     | Text color when disabled                             |
+| `--vc-editor-background-disabled` | `var(--neutrals-200)`                                     | Background when disabled                             |
+| `--vc-editor-focus-border`        | `var(--primary-500)`                                      | Border color on focus                                |
+| `--vc-editor-focus-ring-color`    | `color-mix(in srgb, var(--primary-500) 30%, transparent)` | Focus ring color                                     |
+| `--vc-editor-error-border`        | `var(--danger-500)`                                       | Border color on error                                |
+| `--vc-editor-error-ring-color`    | `rgba(239, 68, 68, 0.2)`                                  | Error ring color                                     |
+| `--vc-editor-error-text`          | `var(--danger-500)`                                       | Error message text color                             |
+| `--vc-editor-separator`           | `var(--neutrals-200)`                                     | Divider lines (blockquote border, table borders, hr) |
+| `--vc-editor-table-header`        | `var(--neutrals-100)`                                     | Table header cell background                         |
 
 ## Accessibility
 
@@ -302,4 +286,3 @@ const content = ref("<h1>Title</h1>");
 ## Skeleton / Loading State
 
 When placed inside a `VcBlade` with `loading=true`, the component automatically renders a skeleton placeholder matching its visual footprint. No additional props or configuration needed.
-

package/runtime/knowledge/docs/ui/components/molecules/vc-field/vc-field.docs.md

@@ -20,7 +20,10 @@ The component uses a vertical layout by default (label above value), but support
 
 ```vue
 <template>
-  <VcField label="Customer Name" model-value="John Doe" />
+  <VcField
+    label="Customer Name"
+    model-value="John Doe"
+  />
 </template>
 
 <script setup lang="ts">
@@ -30,27 +33,27 @@ import { VcField } from "@vc-shell/framework";
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string` | -- | Field label text |
-| `modelValue` | `string \| number \| Date` | -- | Field content to display |
-| `type` | `"text" \| "date" \| "date-ago" \| "link" \| "email"` | `"text"` | Content type for formatting |
-| `copyable` | `boolean` | `false` | Show a copy-to-clipboard button |
-| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | Layout direction of label and value |
-| `aspectRatio` | `[number, number]` | `[1, 1]` | Column width ratio for label and value in horizontal mode |
-| `tooltip` | `string` | -- | Tooltip shown on the label |
+| Prop          | Type                                                  | Default      | Description                                               |
+| ------------- | ----------------------------------------------------- | ------------ | --------------------------------------------------------- |
+| `label`       | `string`                                              | --           | Field label text                                          |
+| `modelValue`  | `string \| number \| Date`                            | --           | Field content to display                                  |
+| `type`        | `"text" \| "date" \| "date-ago" \| "link" \| "email"` | `"text"`     | Content type for formatting                               |
+| `copyable`    | `boolean`                                             | `false`      | Show a copy-to-clipboard button                           |
+| `orientation` | `"vertical" \| "horizontal"`                          | `"vertical"` | Layout direction of label and value                       |
+| `aspectRatio` | `[number, number]`                                    | `[1, 1]`     | Column width ratio for label and value in horizontal mode |
+| `tooltip`     | `string`                                              | --           | Tooltip shown on the label                                |
 
 ## Type Formatting
 
 Each `type` value renders the content differently:
 
-| Type | Behavior |
-|------|----------|
-| `"text"` | Renders the value as plain text |
-| `"date"` | Formats the value as a localized date string |
+| Type         | Behavior                                                 |
+| ------------ | -------------------------------------------------------- |
+| `"text"`     | Renders the value as plain text                          |
+| `"date"`     | Formats the value as a localized date string             |
 | `"date-ago"` | Formats the value as relative time (e.g., "3 hours ago") |
-| `"link"` | Renders as a clickable `<a>` tag opening in a new tab |
-| `"email"` | Renders as a clickable `mailto:` link |
+| `"link"`     | Renders as a clickable `<a>` tag opening in a new tab    |
+| `"email"`    | Renders as a clickable `mailto:` link                    |
 
 ## Common Patterns
 
@@ -59,11 +62,31 @@ Each `type` value renders the content differently:
 ```vue
 <template>
   <div class="tw-flex tw-flex-col tw-gap-4">
-    <VcField label="Order Number" model-value="ORD-2024-1234" copyable />
-    <VcField label="Created" :model-value="order.createdDate" type="date" />
-    <VcField label="Last Modified" :model-value="order.modifiedDate" type="date-ago" />
-    <VcField label="Store URL" :model-value="order.storeUrl" type="link" />
-    <VcField label="Contact Email" :model-value="order.email" type="email" />
+    <VcField
+      label="Order Number"
+      model-value="ORD-2024-1234"
+      copyable
+    />
+    <VcField
+      label="Created"
+      :model-value="order.createdDate"
+      type="date"
+    />
+    <VcField
+      label="Last Modified"
+      :model-value="order.modifiedDate"
+      type="date-ago"
+    />
+    <VcField
+      label="Store URL"
+      :model-value="order.storeUrl"
+      type="link"
+    />
+    <VcField
+      label="Contact Email"
+      :model-value="order.email"
+      type="email"
+    />
   </div>
 </template>
 ```
@@ -104,9 +127,21 @@ The copy button provides visual feedback (checkmark icon for 1 second) after a s
 
 ```vue
 <template>
-  <VcField label="Order ID" :model-value="order.id" copyable />
-  <VcField label="Tracking Number" :model-value="shipment.trackingNumber" copyable />
-  <VcField label="API Key" :model-value="apiKey" copyable />
+  <VcField
+    label="Order ID"
+    :model-value="order.id"
+    copyable
+  />
+  <VcField
+    label="Tracking Number"
+    :model-value="shipment.trackingNumber"
+    copyable
+  />
+  <VcField
+    label="API Key"
+    :model-value="apiKey"
+    copyable
+  />
 </template>
 ```
 
@@ -135,8 +170,8 @@ const displayFields = computed(() => [
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
+| Variable      | Default  | Description                                  |
+| ------------- | -------- | -------------------------------------------- |
 | `--field-gap` | `0.5rem` | Gap between label and value in vertical mode |
 
 ## Accessibility
@@ -170,4 +205,3 @@ The `type` prop affects rendering, not validation. Setting `type="email"` does n
 ## Skeleton / Loading State
 
 When placed inside a `VcBlade` with `loading=true`, the component automatically renders a skeleton placeholder matching its visual footprint. No additional props or configuration needed.
-

package/runtime/knowledge/docs/ui/components/molecules/vc-file-upload/vc-file-upload.docs.md

@@ -70,12 +70,7 @@ When `multiple` is `false` (default), only one file can be selected per interact
 Integrate with vee-validate for file validation rules such as size limits:
 
 ```vue
-<VcFileUpload
-  accept=".pdf, .doc, .docx"
-  name="documents"
-  :rules="{ size: 5 }"
-  @upload="uploadDocuments"
-/>
+<VcFileUpload accept=".pdf, .doc, .docx" name="documents" :rules="{ size: 5 }" @upload="uploadDocuments" />
 ```
 
 When validation fails, the error is displayed below the drop zone using the built-in `VcHint` component. The `upload` event is only emitted when validation passes.
@@ -140,7 +135,11 @@ The disabled state reduces opacity and applies `pointer-events: none`.
 ```vue
 <template>
   <VcForm @submit="saveProduct">
-    <VcInput v-model="product.name" label="Product Name" required />
+    <VcInput
+      v-model="product.name"
+      label="Product Name"
+      required
+    />
     <VcFileUpload
       accept=".jpg, .png, .webp"
       :multiple="true"
@@ -177,14 +176,7 @@ async function onImagesSelected(files: FileList) {
 ## Recipe: CSV Data Import
 
 ```vue
-<VcFileUpload
-  accept=".csv"
-  icon="lucide-file-spreadsheet"
-  :custom-text="{ dragHere: 'Drop CSV file here', browse: 'Browse files' }"
-  :error-message="importError"
-  :loading="isImporting"
-  @upload="importCsv"
-/>
+<VcFileUpload accept=".csv" icon="lucide-file-spreadsheet" :custom-text="{ dragHere: 'Drop CSV file here', browse: 'Browse files' }" :error-message="importError" :loading="isImporting" @upload="importCsv" />
 ```
 
 ```ts
@@ -263,50 +255,50 @@ async function onUpload(files: FileList) {
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `accept` | `string` | `".jpg, .png, .jpeg, .webp, .heic, .svg"` | Accepted file types (HTML accept attribute format) |
-| `multiple` | `boolean` | `false` | Allow selecting multiple files |
-| `loading` | `boolean` | `false` | Show loading spinner overlay |
-| `icon` | `string` | `"lucide-cloud-upload"` | Icon displayed in the upload zone |
-| `customText` | `{ dragHere: string; browse: string }` | -- | Override default drag/browse instruction text |
-| `rules` | `IValidationRules` | -- | Vee-validate validation rules (e.g., `{ size: 5 }`) |
-| `name` | `string` | `"Gallery"` | Form field name attribute |
-| `label` | `string` | -- | Field label text |
-| `tooltip` | `string` | -- | Tooltip on the label |
-| `disabled` | `boolean` | `false` | Disable all interactions |
-| `required` | `boolean` | `false` | Mark field as required |
-| `error` | `boolean` | `false` | External error flag |
-| `errorMessage` | `string` | -- | Error message text (sets error state when truthy) |
+| Prop           | Type                                   | Default                                   | Description                                         |
+| -------------- | -------------------------------------- | ----------------------------------------- | --------------------------------------------------- |
+| `accept`       | `string`                               | `".jpg, .png, .jpeg, .webp, .heic, .svg"` | Accepted file types (HTML accept attribute format)  |
+| `multiple`     | `boolean`                              | `false`                                   | Allow selecting multiple files                      |
+| `loading`      | `boolean`                              | `false`                                   | Show loading spinner overlay                        |
+| `icon`         | `string`                               | `"lucide-cloud-upload"`                   | Icon displayed in the upload zone                   |
+| `customText`   | `{ dragHere: string; browse: string }` | --                                        | Override default drag/browse instruction text       |
+| `rules`        | `IValidationRules`                     | --                                        | Vee-validate validation rules (e.g., `{ size: 5 }`) |
+| `name`         | `string`                               | `"Gallery"`                               | Form field name attribute                           |
+| `label`        | `string`                               | --                                        | Field label text                                    |
+| `tooltip`      | `string`                               | --                                        | Tooltip on the label                                |
+| `disabled`     | `boolean`                              | `false`                                   | Disable all interactions                            |
+| `required`     | `boolean`                              | `false`                                   | Mark field as required                              |
+| `error`        | `boolean`                              | `false`                                   | External error flag                                 |
+| `errorMessage` | `string`                               | --                                        | Error message text (sets error state when truthy)   |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
+| Event    | Payload    | Description                                                                          |
+| -------- | ---------- | ------------------------------------------------------------------------------------ |
 | `upload` | `FileList` | Emitted when valid files are selected or dropped. Only fires after validation passes |
 
 ## Slots
 
-| Slot | Scope | Description |
-|------|-------|-------------|
-| `error` | -- | Custom error content. Replaces the default `VcHint` error display |
+| Slot    | Scope | Description                                                       |
+| ------- | ----- | ----------------------------------------------------------------- |
+| `error` | --    | Custom error content. Replaces the default `VcHint` error display |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--file-upload-border-color` | `var(--neutrals-200)` | Default border color |
-| `--file-upload-border-color-hover` | `var(--neutrals-400)` | Hover border color |
-| `--file-upload-border-color-dragover` | `var(--primary-500)` | Border color while dragging over |
-| `--file-upload-border-color-error` | `var(--danger-500)` | Error state border color |
-| `--file-upload-border-radius` | `6px` | Corner radius |
-| `--file-upload-drag-bg` | `var(--neutrals-100)` | Background color during drag-over |
-| `--file-upload-background-color` | `transparent` | Default background color |
-| `--file-upload-icon-color` | `var(--neutrals-400)` | Upload icon color |
-| `--file-upload-text-color` | `var(--neutrals-400)` | Instruction text color |
-| `--file-upload-error-color` | `var(--danger-500)` | Error text color |
-| `--file-upload-focus-ring-color` | `var(--primary-100)` | Focus ring color |
-| `--file-upload-error-ring-color` | `var(--danger-100)` | Error state ring color |
+| Variable                              | Default               | Description                       |
+| ------------------------------------- | --------------------- | --------------------------------- |
+| `--file-upload-border-color`          | `var(--neutrals-200)` | Default border color              |
+| `--file-upload-border-color-hover`    | `var(--neutrals-400)` | Hover border color                |
+| `--file-upload-border-color-dragover` | `var(--primary-500)`  | Border color while dragging over  |
+| `--file-upload-border-color-error`    | `var(--danger-500)`   | Error state border color          |
+| `--file-upload-border-radius`         | `6px`                 | Corner radius                     |
+| `--file-upload-drag-bg`               | `var(--neutrals-100)` | Background color during drag-over |
+| `--file-upload-background-color`      | `transparent`         | Default background color          |
+| `--file-upload-icon-color`            | `var(--neutrals-400)` | Upload icon color                 |
+| `--file-upload-text-color`            | `var(--neutrals-400)` | Instruction text color            |
+| `--file-upload-error-color`           | `var(--danger-500)`   | Error text color                  |
+| `--file-upload-focus-ring-color`      | `var(--primary-100)`  | Focus ring color                  |
+| `--file-upload-error-ring-color`      | `var(--danger-100)`   | Error state ring color            |
 
 ## Accessibility
 
@@ -317,6 +309,7 @@ async function onUpload(files: FileList) {
 - `aria-required` is set when the field is required.
 - Enter and Space keys trigger the file browser dialog.
 - The disabled state applies `pointer-events: none` and reduced opacity.
+
 ## Related Components
 
 - [VcGallery](../../organisms/vc-gallery/) -- Full image gallery with preview, reorder, drag-and-drop sorting, and upload
@@ -326,4 +319,3 @@ async function onUpload(files: FileList) {
 ## Skeleton / Loading State
 
 When placed inside a `VcBlade` with `loading=true`, the component automatically renders a skeleton placeholder matching its visual footprint. No additional props or configuration needed.
-