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

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.
-

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

@@ -4,11 +4,11 @@ A lightweight `<form>` wrapper that provides consistent styling, prevents defaul
 
 ## When to Use
 
-| Scenario | Component |
-|----------|-----------|
-| Blade detail view with editable fields | **VcForm** |
-| Popup with a short input form | **VcForm** |
-| Read-only display of data | Plain `<div>` or `VcField` |
+| Scenario                               | Component                  |
+| -------------------------------------- | -------------------------- |
+| Blade detail view with editable fields | **VcForm**                 |
+| Popup with a short input form          | **VcForm**                 |
+| Read-only display of data              | Plain `<div>` or `VcField` |
 
 > **Important:** VcForm renders a native `<form>` element with `novalidate`. All validation is handled by **vee-validate** `Field` components, not by the browser.
 
@@ -20,8 +20,16 @@ A lightweight `<form>` wrapper that provides consistent styling, prevents defaul
 <template>
   <VcForm @submit="handleSubmit">
     <div class="tw-space-y-4">
-      <VcInput v-model="name" label="Name" required />
-      <VcInput v-model="email" label="Email" required />
+      <VcInput
+        v-model="name"
+        label="Name"
+        required
+      />
+      <VcInput
+        v-model="email"
+        label="Email"
+        required
+      />
       <VcButton type="submit">Save</VcButton>
     </div>
   </VcForm>
@@ -73,12 +81,7 @@ Use `VcRow` and `VcCol` inside VcForm to create multi-column layouts that match
 VcForm itself does **not** manage validation. Validation is provided by wrapping each input with the `Field` component from `vee-validate`. This is the standard pattern used across the entire codebase:
 
 ```vue
-<Field
-  v-slot="{ errorMessage, handleChange, errors }"
-  :model-value="form.fieldName"
-  name="fieldName"
-  rules="required"
->
+<Field v-slot="{ errorMessage, handleChange, errors }" :model-value="form.fieldName" name="fieldName" rules="required">
   <VcInput
     v-model="form.fieldName"
     label="Field Label"
@@ -105,12 +108,7 @@ This same pattern works with all VcShell inputs:
 
 ```vue
 <!-- VcSelect -->
-<Field
-  v-slot="{ errorMessage, handleChange, errors }"
-  :model-value="form.category"
-  name="category"
-  rules="required"
->
+<Field v-slot="{ errorMessage, handleChange, errors }" :model-value="form.category" name="category" rules="required">
   <VcSelect
     v-model="form.category"
     label="Category"
@@ -125,12 +123,7 @@ This same pattern works with all VcShell inputs:
 </Field>
 
 <!-- VcTextarea -->
-<Field
-  v-slot="{ errorMessage, handleChange, errors }"
-  :model-value="form.description"
-  name="description"
-  rules="required|min:10"
->
+<Field v-slot="{ errorMessage, handleChange, errors }" :model-value="form.description" name="description" rules="required|min:10">
   <VcTextarea
     v-model="form.description"
     label="Description"
@@ -411,10 +404,7 @@ const validateSku = (value: string) => {
   const debouncedValidation = useDebounceFn(async () => {
     const errors = await validateOffer({ ...offer.value, sku: value });
     const skuErrors = errors?.filter((e) => e.propertyName?.toLowerCase() === "sku");
-    setFieldError(
-      "sku",
-      skuErrors.map((e) => t(`ERRORS.${e.errorCode}`, { value: e.attemptedValue })).join("\n"),
-    );
+    setFieldError("sku", skuErrors.map((e) => t(`ERRORS.${e.errorCode}`, { value: e.attemptedValue })).join("\n"));
   }, 1000);
 
   debouncedValidation();
@@ -429,12 +419,7 @@ const validateSku = (value: string) => {
 
 ```vue
 <!-- BAD: vee-validate never learns about value changes -->
-<Field
-  v-slot="{ errorMessage, errors }"
-  :model-value="form.name"
-  name="name"
-  rules="required"
->
+<Field v-slot="{ errorMessage, errors }" :model-value="form.name" name="name" rules="required">
   <VcInput
     v-model="form.name"
     label="Name"
@@ -444,12 +429,7 @@ const validateSku = (value: string) => {
 </Field>
 
 <!-- GOOD: handleChange keeps vee-validate in sync -->
-<Field
-  v-slot="{ errorMessage, handleChange, errors }"
-  :model-value="form.name"
-  name="name"
-  rules="required"
->
+<Field v-slot="{ errorMessage, handleChange, errors }" :model-value="form.name" name="name" rules="required">
   <VcInput
     v-model="form.name"
     label="Name"
@@ -464,21 +444,12 @@ const validateSku = (value: string) => {
 
 ```vue
 <!-- BAD: Field does not track the current value -->
-<Field
-  v-slot="{ errorMessage, handleChange, errors }"
-  name="name"
-  rules="required"
->
+<Field v-slot="{ errorMessage, handleChange, errors }" name="name" rules="required">
   <VcInput v-model="form.name" label="Name" />
 </Field>
 
 <!-- GOOD: Field receives the value and can validate it -->
-<Field
-  v-slot="{ errorMessage, handleChange, errors }"
-  :model-value="form.name"
-  name="name"
-  rules="required"
->
+<Field v-slot="{ errorMessage, handleChange, errors }" :model-value="form.name" name="name" rules="required">
   <VcInput
     v-model="form.name"
     label="Name"
@@ -514,28 +485,28 @@ disabled: computed(() => !modified.value),
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `ariaLabel` | `string` | `undefined` | Accessible label for the `<form>` element |
-| `ariaLabelledby` | `string` | `undefined` | ID of an element that labels the form |
+| Prop             | Type     | Default     | Description                               |
+| ---------------- | -------- | ----------- | ----------------------------------------- |
+| `ariaLabel`      | `string` | `undefined` | Accessible label for the `<form>` element |
+| `ariaLabelledby` | `string` | `undefined` | ID of an element that labels the form     |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `submit` | -- | Emitted on form submission. Native `submit` is already `preventDefault`-ed. |
+| Event    | Payload | Description                                                                 |
+| -------- | ------- | --------------------------------------------------------------------------- |
+| `submit` | --      | Emitted on form submission. Native `submit` is already `preventDefault`-ed. |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot      | Description                                                     |
+| --------- | --------------------------------------------------------------- |
 | `default` | Form content -- inputs, buttons, fieldsets, VcRow/VcCol layouts |
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--form-gap` | `1rem` | Default gap between form children (when using flex gap) |
+| Variable     | Default | Description                                             |
+| ------------ | ------- | ------------------------------------------------------- |
+| `--form-gap` | `1rem`  | Default gap between form children (when using flex gap) |
 
 ## Accessibility
 

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

@@ -26,46 +26,50 @@ Square image tile with skeleton loading, fade-in transition, and a slide-up acti
 <script setup lang="ts">
 import { VcImageTile } from "@vc-shell/framework";
 
-function openPreview() { /* open lightbox */ }
-function deleteImage() { /* remove from list */ }
+function openPreview() {
+  /* open lightbox */
+}
+function deleteImage() {
+  /* remove from list */
+}
 </script>
 ```
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `src` | `string` | — | Image source URL |
-| `alt` | `string` | — | Image alt text |
-| `name` | `string` | — | File name displayed in the tray |
-| `imageFit` | `"contain" \| "cover"` | `"contain"` | How the image fits within the tile |
-| `actions` | `VcImageTileActions` | — | Which built-in action buttons to show |
-| `thumbnailSize` | `ThumbnailSize` | — | Load a thumbnail variant instead of full-size image |
+| Prop            | Type                   | Default     | Description                                         |
+| --------------- | ---------------------- | ----------- | --------------------------------------------------- |
+| `src`           | `string`               | —           | Image source URL                                    |
+| `alt`           | `string`               | —           | Image alt text                                      |
+| `name`          | `string`               | —           | File name displayed in the tray                     |
+| `imageFit`      | `"contain" \| "cover"` | `"contain"` | How the image fits within the tile                  |
+| `actions`       | `VcImageTileActions`   | —           | Which built-in action buttons to show               |
+| `thumbnailSize` | `ThumbnailSize`        | —           | Load a thumbnail variant instead of full-size image |
 
 ## VcImageTileActions Interface
 
 ```ts
 interface VcImageTileActions {
-  preview?: boolean;  // Fullscreen/maximize button (default visible)
-  edit?: boolean;     // Pencil edit button
-  remove?: boolean;   // Trash delete button
+  preview?: boolean; // Fullscreen/maximize button (default visible)
+  edit?: boolean; // Pencil edit button
+  remove?: boolean; // Trash delete button
 }
 ```
 
 ## Events
 
-| Event | Description |
-|-------|-------------|
+| Event     | Description            |
+| --------- | ---------------------- |
 | `preview` | Preview button clicked |
-| `edit` | Edit button clicked |
-| `remove` | Remove button clicked |
+| `edit`    | Edit button clicked    |
+| `remove`  | Remove button clicked  |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot      | Description                                             |
+| --------- | ------------------------------------------------------- |
 | `overlay` | Overlay content on top of the image (e.g., drag handle) |
-| `actions` | Additional action buttons in the tray |
+| `actions` | Additional action buttons in the tray                   |
 
 ## Common Patterns
 
@@ -88,14 +92,7 @@ interface VcImageTileActions {
 ### All Actions Enabled
 
 ```vue
-<VcImageTile
-  src="/img/photo.jpg"
-  name="photo.jpg"
-  :actions="{ preview: true, edit: true, remove: true }"
-  @preview="onPreview"
-  @edit="onEdit"
-  @remove="onRemove"
-/>
+<VcImageTile src="/img/photo.jpg" name="photo.jpg" :actions="{ preview: true, edit: true, remove: true }" @preview="onPreview" @edit="onEdit" @remove="onRemove" />
 ```
 
 ### Cover Fit for Photos
@@ -123,19 +120,19 @@ When `src` is not provided or the image is still loading, a shimmer animation sk
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--image-tile-radius` | `8px` | Corner radius |
-| `--image-tile-border` | `var(--secondary-200)` | Border color |
-| `--image-tile-shadow` | `0 1px 2px rgb(0 0 0 / 0.05)` | Default shadow |
-| `--image-tile-shadow-hover` | `0 4px 12px rgb(0 0 0 / 0.1)` | Hover shadow |
-| `--image-tile-tray-bg` | `rgba(255, 255, 255, 0.85)` | Tray background |
-| `--image-tile-tray-blur` | `12px` | Tray backdrop blur |
-| `--image-tile-skeleton-from` | `var(--secondary-100)` | Skeleton gradient start |
-| `--image-tile-skeleton-to` | `var(--secondary-200)` | Skeleton gradient end |
-| `--image-tile-action-color` | `var(--secondary-600)` | Action button color |
-| `--image-tile-action-hover` | `var(--primary-500)` | Action button hover color |
-| `--image-tile-action-danger` | `var(--danger-500)` | Danger action hover color |
+| Variable                     | Default                       | Description               |
+| ---------------------------- | ----------------------------- | ------------------------- |
+| `--image-tile-radius`        | `8px`                         | Corner radius             |
+| `--image-tile-border`        | `var(--secondary-200)`        | Border color              |
+| `--image-tile-shadow`        | `0 1px 2px rgb(0 0 0 / 0.05)` | Default shadow            |
+| `--image-tile-shadow-hover`  | `0 4px 12px rgb(0 0 0 / 0.1)` | Hover shadow              |
+| `--image-tile-tray-bg`       | `rgba(255, 255, 255, 0.85)`   | Tray background           |
+| `--image-tile-tray-blur`     | `12px`                        | Tray backdrop blur        |
+| `--image-tile-skeleton-from` | `var(--secondary-100)`        | Skeleton gradient start   |
+| `--image-tile-skeleton-to`   | `var(--secondary-200)`        | Skeleton gradient end     |
+| `--image-tile-action-color`  | `var(--secondary-600)`        | Action button color       |
+| `--image-tile-action-hover`  | `var(--primary-500)`          | Action button hover color |
+| `--image-tile-action-danger` | `var(--danger-500)`           | Danger action hover color |
 
 ## Accessibility