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

package/runtime/knowledge/docs/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.docs.md

@@ -29,41 +29,41 @@ Renders a VirtoCommerce platform dynamic property as the appropriate form contro
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `property` | `T` | - | Property object with `id` and metadata |
-| `modelValue` | `any` | - | Current property value (v-model) |
-| `valueType` | `string` | - | Type: ShortText, LongText, Number, Integer, DateTime, Boolean, Measure, Color |
-| `name` | `string` | - | Property name for display and field identification |
-| `required` | `boolean` | - | Whether the field is required |
-| `disabled` | `boolean` | `false` | Disables the input |
-| `dictionary` | `boolean` | `false` | Uses VcSelect/VcMultivalue with options |
-| `multivalue` | `boolean` | `false` | Supports multiple values |
-| `multilanguage` | `boolean` | `false` | Supports localized values |
-| `optionsGetter` | `Function` | - | Async loader for dictionary options |
-| `measurementsGetter` | `Function` | - | Async loader for measurement units |
-| `rules` | `object` | - | Validation rules: `{ min, max, regex }` |
+| Prop                 | Type       | Default | Description                                                                   |
+| -------------------- | ---------- | ------- | ----------------------------------------------------------------------------- |
+| `property`           | `T`        | -       | Property object with `id` and metadata                                        |
+| `modelValue`         | `any`      | -       | Current property value (v-model)                                              |
+| `valueType`          | `string`   | -       | Type: ShortText, LongText, Number, Integer, DateTime, Boolean, Measure, Color |
+| `name`               | `string`   | -       | Property name for display and field identification                            |
+| `required`           | `boolean`  | -       | Whether the field is required                                                 |
+| `disabled`           | `boolean`  | `false` | Disables the input                                                            |
+| `dictionary`         | `boolean`  | `false` | Uses VcSelect/VcMultivalue with options                                       |
+| `multivalue`         | `boolean`  | `false` | Supports multiple values                                                      |
+| `multilanguage`      | `boolean`  | `false` | Supports localized values                                                     |
+| `optionsGetter`      | `Function` | -       | Async loader for dictionary options                                           |
+| `measurementsGetter` | `Function` | -       | Async loader for measurement units                                            |
+| `rules`              | `object`   | -       | Validation rules: `{ min, max, regex }`                                       |
 
 ## Value Type to Component Mapping
 
-| valueType | dictionary | multivalue | Component |
-|-----------|-----------|------------|-----------|
-| ShortText | false | false | VcInput |
-| ShortText | false | true | VcMultivalue |
-| ShortText | true | false | VcSelect |
-| ShortText | true | true | VcMultivalue (with options) |
-| LongText | - | - | VcTextarea |
-| Number | - | false | VcInput (number) |
-| Number | - | true | VcMultivalue (number) |
-| Integer | - | false | VcInput (integer, step=1) |
-| Integer | - | true | VcMultivalue (integer) |
-| DateTime | - | - | VcInput (datetime-local) |
-| Boolean | - | - | VcSwitch |
-| Measure | - | - | VcInputDropdown |
-| Color | false | false | VcInput (color) |
-| Color | false | true | VcMultivalue (color) |
-| Color | true | false | VcSelect (with swatches) |
-| Color | true | true | VcMultivalue (with swatches) |
+| valueType | dictionary | multivalue | Component                    |
+| --------- | ---------- | ---------- | ---------------------------- |
+| ShortText | false      | false      | VcInput                      |
+| ShortText | false      | true       | VcMultivalue                 |
+| ShortText | true       | false      | VcSelect                     |
+| ShortText | true       | true       | VcMultivalue (with options)  |
+| LongText  | -          | -          | VcTextarea                   |
+| Number    | -          | false      | VcInput (number)             |
+| Number    | -          | true       | VcMultivalue (number)        |
+| Integer   | -          | false      | VcInput (integer, step=1)    |
+| Integer   | -          | true       | VcMultivalue (integer)       |
+| DateTime  | -          | -          | VcInput (datetime-local)     |
+| Boolean   | -          | -          | VcSwitch                     |
+| Measure   | -          | -          | VcInputDropdown              |
+| Color     | false      | false      | VcInput (color)              |
+| Color     | false      | true       | VcMultivalue (color)         |
+| Color     | true       | false      | VcSelect (with swatches)     |
+| Color     | true       | true       | VcMultivalue (with swatches) |
 
 ## Recipe: Rendering a List of Dynamic Properties
 
@@ -85,9 +85,7 @@ async function loadDictionaryOptions(propertyId: string, keyword?: string) {
 }
 
 function handlePropertyUpdate(property: any, newValue: any) {
-  property.values = Array.isArray(newValue)
-    ? newValue.map((v) => ({ value: v }))
-    : [{ value: newValue }];
+  property.values = Array.isArray(newValue) ? newValue.map((v) => ({ value: v })) : [{ value: newValue }];
 }
 </script>
 
@@ -114,28 +112,13 @@ function handlePropertyUpdate(property: any, newValue: any) {
 ## Recipe: Dynamic Property with Validation
 
 ```vue
-<VcDynamicProperty
-  :property="skuProperty"
-  :model-value="skuProperty.values?.[0]?.value"
-  value-type="ShortText"
-  name="SKU"
-  :required="true"
-  :rules="{ regex: '^[A-Z0-9-]+$', min: 3, max: 50 }"
-  @update:model-value="(val) => updateProperty(skuProperty, val)"
-/>
+<VcDynamicProperty :property="skuProperty" :model-value="skuProperty.values?.[0]?.value" value-type="ShortText" name="SKU" :required="true" :rules="{ regex: '^[A-Z0-9-]+$', min: 3, max: 50 }" @update:model-value="(val) => updateProperty(skuProperty, val)" />
 ```
 
 ## Recipe: Measurement Property with Units
 
 ```vue
-<VcDynamicProperty
-  :property="weightProperty"
-  :model-value="weightProperty.values?.[0]?.value"
-  value-type="Measure"
-  name="Weight"
-  :measurements-getter="loadMeasurementUnits"
-  @update:model-value="(val) => updateProperty(weightProperty, val)"
-/>
+<VcDynamicProperty :property="weightProperty" :model-value="weightProperty.values?.[0]?.value" value-type="Measure" name="Weight" :measurements-getter="loadMeasurementUnits" @update:model-value="(val) => updateProperty(weightProperty, val)" />
 ```
 
 ## Common Mistakes

package/runtime/knowledge/docs/ui/components/organisms/vc-gallery/vc-gallery.docs.md

@@ -11,40 +11,40 @@ A responsive multi-image gallery with drag-and-drop reorder, file upload, lightb
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `layout` | `"filmstrip" \| "grid"` | `"filmstrip"` | Layout mode — filmstrip shows a single scrollable row with expand/collapse; grid shows the classic multi-row auto-fill layout. |
-| `label` | `string` | `undefined` | Label text displayed in the gallery header. |
-| `required` | `boolean` | `false` | Shows a required indicator (`*`) on the label. |
-| `images` | `ICommonAsset[]` | `[]` | Array of image assets to display. |
-| `disabled` | `boolean` | `false` | Disables all interactive actions. |
-| `multiple` | `boolean` | `false` | Allow selecting multiple files in upload dialog. |
-| `loading` | `boolean` | `false` | Shows a loading overlay with spinner on the gallery. |
-| `itemActions` | `{ preview?: boolean; edit?: boolean; remove?: boolean }` | `{ preview: true, edit: true, remove: true }` | Per-tile action visibility. |
-| `rules` | `IValidationRules` | `undefined` | Validation rules for uploaded files. |
-| `name` | `string` | `"Gallery"` | Field name for validation messages. |
-| `accept` | `string` | `undefined` | Accepted file extensions. |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Tile size preset. Sizes are smaller on mobile. |
-| `gap` | `number` | `8` | Gap between tiles in pixels. |
-| `imagefit` | `"contain" \| "cover"` | `"contain"` | How images fit within tiles. |
-| `thumbnailSize` | `ThumbnailSize` | auto from `size` | Thumbnail size for tile images. Auto-mapped: sm→128x128, md→216x216, lg→348x348. Preview thumbnails use 64x64. |
+| Prop            | Type                                                      | Default                                       | Description                                                                                                                    |
+| --------------- | --------------------------------------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `layout`        | `"filmstrip" \| "grid"`                                   | `"filmstrip"`                                 | Layout mode — filmstrip shows a single scrollable row with expand/collapse; grid shows the classic multi-row auto-fill layout. |
+| `label`         | `string`                                                  | `undefined`                                   | Label text displayed in the gallery header.                                                                                    |
+| `required`      | `boolean`                                                 | `false`                                       | Shows a required indicator (`*`) on the label.                                                                                 |
+| `images`        | `ICommonAsset[]`                                          | `[]`                                          | Array of image assets to display.                                                                                              |
+| `disabled`      | `boolean`                                                 | `false`                                       | Disables all interactive actions.                                                                                              |
+| `multiple`      | `boolean`                                                 | `false`                                       | Allow selecting multiple files in upload dialog.                                                                               |
+| `loading`       | `boolean`                                                 | `false`                                       | Shows a loading overlay with spinner on the gallery.                                                                           |
+| `itemActions`   | `{ preview?: boolean; edit?: boolean; remove?: boolean }` | `{ preview: true, edit: true, remove: true }` | Per-tile action visibility.                                                                                                    |
+| `rules`         | `IValidationRules`                                        | `undefined`                                   | Validation rules for uploaded files.                                                                                           |
+| `name`          | `string`                                                  | `"Gallery"`                                   | Field name for validation messages.                                                                                            |
+| `accept`        | `string`                                                  | `undefined`                                   | Accepted file extensions.                                                                                                      |
+| `size`          | `"sm" \| "md" \| "lg"`                                    | `"md"`                                        | Tile size preset. Sizes are smaller on mobile.                                                                                 |
+| `gap`           | `number`                                                  | `8`                                           | Gap between tiles in pixels.                                                                                                   |
+| `imagefit`      | `"contain" \| "cover"`                                    | `"contain"`                                   | How images fit within tiles.                                                                                                   |
+| `thumbnailSize` | `ThumbnailSize`                                           | auto from `size`                              | Thumbnail size for tile images. Auto-mapped: sm→128x128, md→216x216, lg→348x348. Preview thumbnails use 64x64.                 |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `upload` | `(files: FileList, startingSortOrder?: number)` | Emitted when files are selected or dropped. |
-| `sort` | `ICommonAsset[]` | Emitted after drag-and-drop reorder with the new order. |
-| `edit` | `ICommonAsset` | Emitted when the edit action is triggered. |
-| `remove` | `ICommonAsset` | Emitted when the remove action is triggered. |
+| Event    | Payload                                         | Description                                             |
+| -------- | ----------------------------------------------- | ------------------------------------------------------- |
+| `upload` | `(files: FileList, startingSortOrder?: number)` | Emitted when files are selected or dropped.             |
+| `sort`   | `ICommonAsset[]`                                | Emitted after drag-and-drop reorder with the new order. |
+| `edit`   | `ICommonAsset`                                  | Emitted when the edit action is triggered.              |
+| `remove` | `ICommonAsset`                                  | Emitted when the remove action is triggered.            |
 
 ## Slots
 
-| Slot | Scope | Description |
-|------|-------|-------------|
-| `item` | `{ image, index, actions }` | Custom tile rendering. |
-| `empty` | -- | Custom empty state when disabled with no images. |
-| `footer` | `{ images }` | Content below the grid. |
+| Slot     | Scope                       | Description                                      |
+| -------- | --------------------------- | ------------------------------------------------ |
+| `item`   | `{ image, index, actions }` | Custom tile rendering.                           |
+| `empty`  | --                          | Custom empty state when disabled with no images. |
+| `footer` | `{ images }`                | Content below the grid.                          |
 
 ## Features
 
@@ -61,41 +61,19 @@ A responsive multi-image gallery with drag-and-drop reorder, file upload, lightb
 ## Basic Usage
 
 ```vue
-<VcGallery
-  label="Product Images"
-  required
-  :images="product.images"
-  imagefit="cover"
-  @upload="handleUpload"
-  @sort="handleSort"
-  @edit="handleEdit"
-  @remove="handleRemove"
-/>
+<VcGallery label="Product Images" required :images="product.images" imagefit="cover" @upload="handleUpload" @sort="handleSort" @edit="handleEdit" @remove="handleRemove" />
 ```
 
 ## Filmstrip Layout (Default)
 
 ```vue
-<VcGallery
-  label="Images"
-  :images="product.images"
-  imagefit="cover"
-  @upload="handleUpload"
-  @sort="handleSort"
-  @remove="handleRemove"
-/>
+<VcGallery label="Images" :images="product.images" imagefit="cover" @upload="handleUpload" @sort="handleSort" @remove="handleRemove" />
 ```
 
 ## Classic Grid Layout
 
 ```vue
-<VcGallery
-  layout="grid"
-  label="Attachments"
-  :images="product.images"
-  @upload="handleUpload"
-  @sort="handleSort"
-/>
+<VcGallery layout="grid" label="Attachments" :images="product.images" @upload="handleUpload" @sort="handleSort" />
 ```
 
 ## Recipe: Product Image Gallery in a Blade
@@ -145,9 +123,7 @@ function handleRemove(image: ICommonAsset) {
       @edit="handleEdit"
       @remove="handleRemove"
     />
-    <VcHint class="tw-mt-2">
-      Drag images to reorder. The first image is used as the primary thumbnail.
-    </VcHint>
+    <VcHint class="tw-mt-2"> Drag images to reorder. The first image is used as the primary thumbnail. </VcHint>
   </VcBlade>
 </template>
 ```
@@ -155,12 +131,7 @@ function handleRemove(image: ICommonAsset) {
 ## Recipe: Read-Only Gallery (Disabled)
 
 ```vue
-<VcGallery
-  :images="order.attachments"
-  disabled
-  :item-actions="{ preview: true, edit: false, remove: false }"
-  size="sm"
->
+<VcGallery :images="order.attachments" disabled :item-actions="{ preview: true, edit: false, remove: false }" size="sm">
   <template #empty>
     <div class="tw-text-center tw-text-gray-400 tw-py-8">
       No attachments for this order.

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

@@ -11,25 +11,25 @@ A single-image upload organism that displays either a drag-and-drop upload zone
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `image` | `ICommonAsset` | `undefined` | The currently displayed image asset. |
-| `disabled` | `boolean` | `false` | Disables upload and remove actions. |
-| `loading` | `boolean` | `false` | Shows a loading spinner on the upload zone. |
-| `accept` | `string` | `.jpg,.png,.jpeg,.webp,.heic,.svg` | Accepted file extensions. |
-| `rules` | `IValidationRules` | `undefined` | Validation rules (e.g. `{ fileWeight: 300 }`). |
-| `name` | `string` | `"Image"` | Field name for validation messages. |
-| `icon` | `string` | `"lucide-cloud-upload"` | Upload zone placeholder icon. |
-| `placeholder` | `{ text: string; link: string }` | `undefined` | Custom text for the upload zone. |
-| `previewable` | `boolean` | `true` | Enables lightbox preview on click. |
-| `removable` | `boolean` | `true` | Shows the remove action on the image tile. |
+| Prop          | Type                             | Default                            | Description                                    |
+| ------------- | -------------------------------- | ---------------------------------- | ---------------------------------------------- |
+| `image`       | `ICommonAsset`                   | `undefined`                        | The currently displayed image asset.           |
+| `disabled`    | `boolean`                        | `false`                            | Disables upload and remove actions.            |
+| `loading`     | `boolean`                        | `false`                            | Shows a loading spinner on the upload zone.    |
+| `accept`      | `string`                         | `.jpg,.png,.jpeg,.webp,.heic,.svg` | Accepted file extensions.                      |
+| `rules`       | `IValidationRules`               | `undefined`                        | Validation rules (e.g. `{ fileWeight: 300 }`). |
+| `name`        | `string`                         | `"Image"`                          | Field name for validation messages.            |
+| `icon`        | `string`                         | `"lucide-cloud-upload"`            | Upload zone placeholder icon.                  |
+| `placeholder` | `{ text: string; link: string }` | `undefined`                        | Custom text for the upload zone.               |
+| `previewable` | `boolean`                        | `true`                             | Enables lightbox preview on click.             |
+| `removable`   | `boolean`                        | `true`                             | Shows the remove action on the image tile.     |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `upload` | `FileList` | Emitted when files are selected or dropped. |
-| `remove` | `ICommonAsset` | Emitted when the remove button is clicked. |
+| Event    | Payload        | Description                                 |
+| -------- | -------------- | ------------------------------------------- |
+| `upload` | `FileList`     | Emitted when files are selected or dropped. |
+| `remove` | `ICommonAsset` | Emitted when the remove button is clicked.  |
 
 ## Visual States
 
@@ -42,13 +42,7 @@ The component has three visual states:
 ## Basic Usage
 
 ```vue
-<VcImageUpload
-  :image="product.thumbnail"
-  accept=".jpg,.png,.webp"
-  :rules="{ fileWeight: 500 }"
-  @upload="handleUpload"
-  @remove="handleRemove"
-/>
+<VcImageUpload :image="product.thumbnail" accept=".jpg,.png,.webp" :rules="{ fileWeight: 500 }" @upload="handleUpload" @remove="handleRemove" />
 ```
 
 ## Recipe: Avatar Upload in a User Profile Blade

package/runtime/knowledge/docs/ui/components/organisms/vc-popup/vc-popup.docs.md

@@ -4,13 +4,13 @@ A modal dialog component built on [HeadlessUI Dialog](https://headlessui.com/vue
 
 ## When to Use
 
-| Scenario | Component |
-|----------|-----------|
-| Confirmation prompt ("Delete this item?") | **VcPopup** |
-| Error or success alert after an API call | **VcPopup** |
+| Scenario                                          | Component   |
+| ------------------------------------------------- | ----------- |
+| Confirmation prompt ("Delete this item?")         | **VcPopup** |
+| Error or success alert after an API call          | **VcPopup** |
 | Short form that must block background interaction | **VcPopup** |
-| Side panel for contextual workflows | VcSidebar |
-| Stacked detail views (master-detail) | VcBlade |
+| Side panel for contextual workflows               | VcSidebar   |
+| Stacked detail views (master-detail)              | VcBlade     |
 
 > **Tip:** Prefer blades for CRUD workflows. Reserve popups for brief, interruptive interactions such as confirmations and alerts.
 
@@ -22,7 +22,10 @@ A modal dialog component built on [HeadlessUI Dialog](https://headlessui.com/vue
 <template>
   <VcButton @click="showPopup = true">Open Popup</VcButton>
 
-  <VcPopup v-model="showPopup" title="Hello World">
+  <VcPopup
+    v-model="showPopup"
+    title="Hello World"
+  >
     <template #content>
       <p>This is a simple popup with a title and content.</p>
     </template>
@@ -60,12 +63,12 @@ The `variant` prop adds a semantic icon and color to the popup. Available values
 
 When `variant` is anything other than `"default"`, a large icon is rendered to the left of the content area:
 
-| Variant | Icon | Color token |
-|---------|------|-------------|
+| Variant   | Icon                    | Color token     |
+| --------- | ----------------------- | --------------- |
 | `warning` | `lucide-triangle-alert` | `--warning-500` |
-| `error` | `lucide-circle-alert` | `--danger-500` |
-| `success` | `lucide-circle-check` | `--success-500` |
-| `info` | `lucide-info` | `--info-500` |
+| `error`   | `lucide-circle-alert`   | `--danger-500`  |
+| `success` | `lucide-circle-check`   | `--success-500` |
+| `info`    | `lucide-info`           | `--info-500`    |
 
 ### Title
 
@@ -107,12 +110,7 @@ Fine-tune each channel independently:
 
 ```vue
 <!-- Allow close button only; prevent overlay and Escape -->
-<VcPopup
-  v-model="open"
-  title="Mandatory Action"
-  :close-on-overlay="false"
-  :close-on-escape="false"
->
+<VcPopup v-model="open" title="Mandatory Action" :close-on-overlay="false" :close-on-escape="false">
   <!-- ... -->
 </VcPopup>
 ```
@@ -164,8 +162,19 @@ The footer area sits below a separator line. It exposes a scoped `close` functio
 ```vue
 <template #footer="{ close }">
   <div class="tw-flex tw-justify-end tw-w-full tw-gap-3">
-    <VcButton variant="outline" @click="close">Cancel</VcButton>
-    <VcButton color="danger" @click="deleteItem(); close()">Delete</VcButton>
+    <VcButton
+      variant="outline"
+      @click="close"
+      >Cancel</VcButton
+    >
+    <VcButton
+      color="danger"
+      @click="
+        deleteItem();
+        close();
+      "
+      >Delete</VcButton
+    >
   </div>
 </template>
 ```
@@ -179,7 +188,10 @@ Use `v-model` to bind visibility to a reactive boolean. The popup emits `update:
 ```vue
 <template>
   <VcButton @click="isOpen = true">Open</VcButton>
-  <VcPopup v-model="isOpen" title="Controlled">
+  <VcPopup
+    v-model="isOpen"
+    title="Controlled"
+  >
     <template #content>Visible state: {{ isOpen }}</template>
   </VcPopup>
 </template>
@@ -191,6 +203,7 @@ const isOpen = ref(false);
 ```
 
 > **Tip:** You can also use `v-if` instead of `v-model` for a simpler pattern when you do not need animated exit transitions:
+>
 > ```vue
 > <VcPopup v-if="showPopup" title="Simple" @close="showPopup = false">
 > ```
@@ -214,9 +227,9 @@ The `modalWidth` prop accepts a Tailwind CSS max-width class. The default is `"t
 
 Two props control fullscreen behavior:
 
-| Prop | Effect |
-|------|--------|
-| `isFullscreen` | Full viewport on **all** screen sizes |
+| Prop                 | Effect                                                                  |
+| -------------------- | ----------------------------------------------------------------------- |
+| `isFullscreen`       | Full viewport on **all** screen sizes                                   |
 | `isMobileFullscreen` | Full viewport on **mobile only** (detected via `IsMobileKey` injection) |
 
 ```vue
@@ -239,7 +252,11 @@ The most common pattern. Uses the `warning` variant and a two-button footer.
 
 ```vue
 <template>
-  <VcButton color="danger" @click="confirmDelete">Delete Order</VcButton>
+  <VcButton
+    color="danger"
+    @click="confirmDelete"
+    >Delete Order</VcButton
+  >
 
   <VcPopup
     v-model="showConfirm"
@@ -247,13 +264,19 @@ The most common pattern. Uses the `warning` variant and a two-button footer.
     variant="warning"
     :close-on-overlay="false"
   >
-    <template #content>
-      Are you sure you want to delete this order? This action cannot be undone.
-    </template>
+    <template #content> Are you sure you want to delete this order? This action cannot be undone. </template>
     <template #footer="{ close }">
       <div class="tw-flex tw-justify-end tw-w-full tw-gap-3">
-        <VcButton variant="outline" @click="close">Cancel</VcButton>
-        <VcButton color="danger" @click="onDeleteConfirmed(close)">Delete</VcButton>
+        <VcButton
+          variant="outline"
+          @click="close"
+          >Cancel</VcButton
+        >
+        <VcButton
+          color="danger"
+          @click="onDeleteConfirmed(close)"
+          >Delete</VcButton
+        >
       </div>
     </template>
   </VcPopup>
@@ -297,11 +320,11 @@ async function handleDelete() {
 
 The composable provides three convenience methods:
 
-| Method | Variant | Returns |
-|--------|---------|---------|
+| Method                      | Variant | Returns            |
+| --------------------------- | ------- | ------------------ |
 | `showConfirmation(message)` | warning | `Promise<boolean>` |
-| `showError(message)` | error | `void` |
-| `showInfo(message)` | info | `void` |
+| `showError(message)`        | error   | `void`             |
+| `showInfo(message)`         | info    | `void`             |
 
 ### Popup with Form and Validation
 
@@ -309,7 +332,11 @@ Use `Field` from `vee-validate` inside the popup content for inline validation.
 
 ```vue
 <template>
-  <VcPopup v-model="showForm" title="Add Note" modal-width="tw-max-w-lg">
+  <VcPopup
+    v-model="showForm"
+    title="Add Note"
+    modal-width="tw-max-w-lg"
+  >
     <template #content>
       <VcForm class="tw-space-y-4">
         <Field
@@ -347,8 +374,16 @@ Use `Field` from `vee-validate` inside the popup content for inline validation.
     </template>
     <template #footer="{ close }">
       <div class="tw-flex tw-justify-end tw-w-full tw-gap-3">
-        <VcButton variant="outline" @click="close">Cancel</VcButton>
-        <VcButton :disabled="!meta.valid" @click="save(close)">Save</VcButton>
+        <VcButton
+          variant="outline"
+          @click="close"
+          >Cancel</VcButton
+        >
+        <VcButton
+          :disabled="!meta.valid"
+          @click="save(close)"
+          >Save</VcButton
+        >
       </div>
     </template>
   </VcPopup>
@@ -438,7 +473,13 @@ Or display a richer error popup in-template:
 
 <!-- GOOD: call close from the slot scope -->
 <template #footer="{ close }">
-  <VcButton @click="doSomething(); close()">Confirm</VcButton>
+  <VcButton
+    @click="
+      doSomething();
+      close();
+    "
+    >Confirm</VcButton
+  >
 </template>
 ```
 
@@ -463,45 +504,45 @@ Or display a richer error popup in-template:
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `boolean` | `undefined` | Controlled visibility via `v-model`. When omitted, the popup is visible if mounted. |
-| `title` | `string` | `undefined` | Dialog title text rendered in the header bar. |
-| `closable` | `boolean` | `true` | Show the close button (X) and allow dismissal. When `false`, all dismiss channels are disabled. |
-| `variant` | `"default" \| "error" \| "warning" \| "success" \| "info"` | `"default"` | Semantic variant that determines the icon and its color. |
-| `modalWidth` | `string` | `"tw-max-w-md"` | Tailwind max-width class applied to the dialog panel. |
-| `isMobileFullscreen` | `boolean` | `false` | Expand to fullscreen on mobile viewports only. |
-| `isFullscreen` | `boolean` | `false` | Expand to fullscreen on all viewports. |
-| `closeOnOverlay` | `boolean` | Inherits `closable` | Whether clicking the backdrop overlay closes the popup. |
-| `closeOnEscape` | `boolean` | Inherits `closable` | Whether pressing the Escape key closes the popup. |
+| Prop                 | Type                                                       | Default             | Description                                                                                     |
+| -------------------- | ---------------------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------- |
+| `modelValue`         | `boolean`                                                  | `undefined`         | Controlled visibility via `v-model`. When omitted, the popup is visible if mounted.             |
+| `title`              | `string`                                                   | `undefined`         | Dialog title text rendered in the header bar.                                                   |
+| `closable`           | `boolean`                                                  | `true`              | Show the close button (X) and allow dismissal. When `false`, all dismiss channels are disabled. |
+| `variant`            | `"default" \| "error" \| "warning" \| "success" \| "info"` | `"default"`         | Semantic variant that determines the icon and its color.                                        |
+| `modalWidth`         | `string`                                                   | `"tw-max-w-md"`     | Tailwind max-width class applied to the dialog panel.                                           |
+| `isMobileFullscreen` | `boolean`                                                  | `false`             | Expand to fullscreen on mobile viewports only.                                                  |
+| `isFullscreen`       | `boolean`                                                  | `false`             | Expand to fullscreen on all viewports.                                                          |
+| `closeOnOverlay`     | `boolean`                                                  | Inherits `closable` | Whether clicking the backdrop overlay closes the popup.                                         |
+| `closeOnEscape`      | `boolean`                                                  | Inherits `closable` | Whether pressing the Escape key closes the popup.                                               |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:modelValue` | `boolean` | Emitted with `false` when the popup requests to close. Used by `v-model`. |
-| `close` | `PopupCloseReason` | Reason the popup was closed: `"overlay"`, `"escape"`, or `"action"`. |
+| Event               | Payload            | Description                                                               |
+| ------------------- | ------------------ | ------------------------------------------------------------------------- |
+| `update:modelValue` | `boolean`          | Emitted with `false` when the popup requests to close. Used by `v-model`. |
+| `close`             | `PopupCloseReason` | Reason the popup was closed: `"overlay"`, `"escape"`, or `"action"`.      |
 
 ## Slots
 
-| Slot | Scoped Props | Description |
-|------|--------------|-------------|
-| `header` | -- | Replaces the default title text. The close button (X) remains visible beside the slot content. |
-| `content` | -- | Main body area of the popup. |
-| `footer` | `{ close: () => void }` | Footer area below a separator line. Call `close()` to dismiss the popup from any button. |
+| Slot      | Scoped Props            | Description                                                                                    |
+| --------- | ----------------------- | ---------------------------------------------------------------------------------------------- |
+| `header`  | --                      | Replaces the default title text. The close button (X) remains visible beside the slot content. |
+| `content` | --                      | Main body area of the popup.                                                                   |
+| `footer`  | `{ close: () => void }` | Footer area below a separator line. Call `close()` to dismiss the popup from any button.       |
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--popup-border-radius` | `6px` | Border radius of the dialog panel |
-| `--popup-shadow` | `var(--shadow-md)` | Box shadow around the panel |
-| `--popup-overlay-blur` | `var(--overlay-blur)` | Backdrop blur amount |
-| `--popup-bg` | `var(--additional-50)` | Background color of the dialog panel |
-| `--popup-header-color` | `var(--primary-700)` | Title text color |
-| `--popup-content-text-color` | `var(--primary-700)` | Content text color |
-| `--popup-footer-separator` | `var(--neutrals-200)` | Footer top border color |
-| `--popup-overlay` | `var(--overlay-bg)` | Overlay background color |
+| Variable                     | Default                | Description                          |
+| ---------------------------- | ---------------------- | ------------------------------------ |
+| `--popup-border-radius`      | `6px`                  | Border radius of the dialog panel    |
+| `--popup-shadow`             | `var(--shadow-md)`     | Box shadow around the panel          |
+| `--popup-overlay-blur`       | `var(--overlay-blur)`  | Backdrop blur amount                 |
+| `--popup-bg`                 | `var(--additional-50)` | Background color of the dialog panel |
+| `--popup-header-color`       | `var(--primary-700)`   | Title text color                     |
+| `--popup-content-text-color` | `var(--primary-700)`   | Content text color                   |
+| `--popup-footer-separator`   | `var(--neutrals-200)`  | Footer top border color              |
+| `--popup-overlay`            | `var(--overlay-bg)`    | Overlay background color             |
 
 ## Accessibility