@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-dropdown/vc-dropdown.docs.md

@@ -10,6 +10,7 @@ A headless, accessible dropdown primitive for building menus and listboxes. Prov
 - Notification panels or custom popovers with item lists
 
 When NOT to use:
+
 - For form field selection -- use [VcSelect](../vc-select/)
 - For rich panel content with header/footer/scrollable body -- use [VcDropdownPanel](../vc-dropdown-panel/)
 - For navigation menus -- use [VcMenu](../vc-menu/)
@@ -29,7 +30,10 @@ When NOT to use:
       <VcButton @click="toggle">Actions</VcButton>
     </template>
     <template #item="{ item, click }">
-      <button class="tw-w-full tw-text-left tw-px-3 tw-py-2" @click="click">
+      <button
+        class="tw-w-full tw-text-left tw-px-3 tw-py-2"
+        @click="click"
+      >
         {{ item.title }}
       </button>
     </template>
@@ -60,14 +64,7 @@ function onAction(item: { id: string; title: string }) {
 When `floating` is `true`, the dropdown panel is positioned using `@floating-ui` with automatic flip and shift middleware. The panel is teleported to the body to avoid z-index stacking context issues.
 
 ```vue
-<VcDropdown
-  v-model="open"
-  :items="items"
-  floating
-  placement="bottom-start"
-  :offset="{ mainAxis: 4 }"
-  :z-index="10000"
->
+<VcDropdown v-model="open" :items="items" floating placement="bottom-start" :offset="{ mainAxis: 4 }" :z-index="10000">
   <template #trigger="{ toggle }">
     <VcButton @click="toggle">Open</VcButton>
   </template>
@@ -84,14 +81,7 @@ Available `placement` values follow Floating UI conventions: `"top"`, `"top-star
 Build rich action menus by customizing the `#item` slot with icons, labels, and keyboard shortcut hints.
 
 ```vue
-<VcDropdown
-  v-model="open"
-  :items="actions"
-  floating
-  placement="bottom-start"
-  close-on-select
-  @item-click="handleAction"
->
+<VcDropdown v-model="open" :items="actions" floating placement="bottom-start" close-on-select @item-click="handleAction">
   <template #trigger="{ toggle }">
     <VcButton icon="lucide-ellipsis" @click="toggle" />
   </template>
@@ -110,15 +100,7 @@ Build rich action menus by customizing the `#item` slot with icons, labels, and
 Use `role="listbox"` for option-selection patterns. Combine with `isItemActive` to highlight the current selection and `aria-selected` is set automatically.
 
 ```vue
-<VcDropdown
-  v-model="open"
-  :items="workspaces"
-  role="listbox"
-  :is-item-active="(item) => item.id === activeId"
-  close-on-select
-  floating
-  @item-click="(item) => (activeId = item.id)"
->
+<VcDropdown v-model="open" :items="workspaces" role="listbox" :is-item-active="(item) => item.id === activeId" close-on-select floating @item-click="(item) => (activeId = item.id)">
   <template #trigger="{ toggle }">
     <VcButton variant="outline" @click="toggle">{{ currentWorkspace }}</VcButton>
   </template>
@@ -136,14 +118,7 @@ Use `role="listbox"` for option-selection patterns. Combine with `isItemActive`
 Fine-tune when the dropdown closes:
 
 ```vue
-<VcDropdown
-  v-model="open"
-  :items="items"
-  floating
-  :close-on-click-outside="true"
-  :close-on-escape="true"
-  :close-on-select="false"
->
+<VcDropdown v-model="open" :items="items" floating :close-on-click-outside="true" :close-on-escape="true" :close-on-select="false">
   <!-- Multi-select pattern: dropdown stays open after each selection -->
 </VcDropdown>
 ```
@@ -206,16 +181,40 @@ By default, `padded` is `true`, which adds compact padding and rounded item back
 
 ```vue
 <template>
-  <VcDropdown v-model="confirmOpen" floating placement="bottom-end" :close-on-select="false">
+  <VcDropdown
+    v-model="confirmOpen"
+    floating
+    placement="bottom-end"
+    :close-on-select="false"
+  >
     <template #trigger="{ toggle }">
-      <VcButton variant="danger" @click="toggle">Delete</VcButton>
+      <VcButton
+        variant="danger"
+        @click="toggle"
+        >Delete</VcButton
+      >
     </template>
     <template #items-container="{ close }">
       <div class="tw-p-4 tw-w-64">
         <p class="tw-text-sm tw-mb-3">Are you sure you want to delete this item?</p>
         <div class="tw-flex tw-gap-2 tw-justify-end">
-          <VcButton size="s" variant="outline" @click="close">Cancel</VcButton>
-          <VcButton size="s" variant="danger" @click="() => { confirmDelete(); close(); }">Delete</VcButton>
+          <VcButton
+            size="s"
+            variant="outline"
+            @click="close"
+            >Cancel</VcButton
+          >
+          <VcButton
+            size="s"
+            variant="danger"
+            @click="
+              () => {
+                confirmDelete();
+                close();
+              }
+            "
+            >Delete</VcButton
+          >
         </div>
       </div>
     </template>
@@ -227,9 +226,16 @@ By default, `padded` is `true`, which adds compact padding and rounded item back
 
 ```vue
 <template>
-  <VcDropdown v-model="isOpen" :items="items" floating>
+  <VcDropdown
+    v-model="isOpen"
+    :items="items"
+    floating
+  >
     <template #trigger="{ open, close, isActive }">
-      <VcButton @mouseenter="open" @mouseleave="close">
+      <VcButton
+        @mouseenter="open"
+        @mouseleave="close"
+      >
         {{ isActive ? "Hover to close" : "Hover to open" }}
       </VcButton>
     </template>
@@ -288,60 +294,60 @@ By default, `padded` is `true`, which adds compact padding and rounded item back
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `boolean` | `false` | Controls open/closed state via `v-model` |
-| `items` | `T[]` | `[]` | Items to render in the dropdown |
-| `emptyText` | `string` | `""` | Text shown when items array is empty |
-| `itemText` | `(item: T) => string` | -- | Maps an item to display text (default renderer only) |
-| `isItemActive` | `(item: T) => boolean` | -- | Marks the currently active item (highlighted state) |
-| `itemKey` | `(item: T, index: number) => string \| number` | index | Unique key function for items |
-| `floating` | `boolean` | `false` | Enable floating positioning via `@floating-ui` |
-| `teleport` | `boolean` | -- | Force teleport to body (defaults to match `floating`) |
-| `teleportTo` | `string \| HTMLElement` | -- | Custom teleport target |
-| `placement` | `Placement` | `"bottom"` | Floating UI placement |
-| `offset` | `{ mainAxis?: number; crossAxis?: number }` | `{ mainAxis: 0, crossAxis: 0 }` | Offset from the trigger element |
-| `variant` | `"default" \| "secondary"` | `"default"` | Visual style variant |
-| `maxHeight` | `number \| string` | `300` | Maximum panel height (number = px, string = CSS value) |
-| `role` | `"menu" \| "listbox"` | `"menu"` | ARIA role for the dropdown panel |
-| `closeOnClickOutside` | `boolean` | `true` | Close when clicking outside the dropdown |
-| `closeOnEscape` | `boolean` | `true` | Close on Escape key press |
-| `closeOnSelect` | `boolean` | `false` | Close after selecting an item |
-| `autoFocusPanel` | `boolean` | `true` | Focus the panel element when opened |
-| `padded` | `boolean` | `true` | Apply compact padding and rounded item backgrounds |
-| `zIndex` | `number` | `10000` | Z-index for the floating panel |
+| Prop                  | Type                                           | Default                         | Description                                            |
+| --------------------- | ---------------------------------------------- | ------------------------------- | ------------------------------------------------------ |
+| `modelValue`          | `boolean`                                      | `false`                         | Controls open/closed state via `v-model`               |
+| `items`               | `T[]`                                          | `[]`                            | Items to render in the dropdown                        |
+| `emptyText`           | `string`                                       | `""`                            | Text shown when items array is empty                   |
+| `itemText`            | `(item: T) => string`                          | --                              | Maps an item to display text (default renderer only)   |
+| `isItemActive`        | `(item: T) => boolean`                         | --                              | Marks the currently active item (highlighted state)    |
+| `itemKey`             | `(item: T, index: number) => string \| number` | index                           | Unique key function for items                          |
+| `floating`            | `boolean`                                      | `false`                         | Enable floating positioning via `@floating-ui`         |
+| `teleport`            | `boolean`                                      | --                              | Force teleport to body (defaults to match `floating`)  |
+| `teleportTo`          | `string \| HTMLElement`                        | --                              | Custom teleport target                                 |
+| `placement`           | `Placement`                                    | `"bottom"`                      | Floating UI placement                                  |
+| `offset`              | `{ mainAxis?: number; crossAxis?: number }`    | `{ mainAxis: 0, crossAxis: 0 }` | Offset from the trigger element                        |
+| `variant`             | `"default" \| "secondary"`                     | `"default"`                     | Visual style variant                                   |
+| `maxHeight`           | `number \| string`                             | `300`                           | Maximum panel height (number = px, string = CSS value) |
+| `role`                | `"menu" \| "listbox"`                          | `"menu"`                        | ARIA role for the dropdown panel                       |
+| `closeOnClickOutside` | `boolean`                                      | `true`                          | Close when clicking outside the dropdown               |
+| `closeOnEscape`       | `boolean`                                      | `true`                          | Close on Escape key press                              |
+| `closeOnSelect`       | `boolean`                                      | `false`                         | Close after selecting an item                          |
+| `autoFocusPanel`      | `boolean`                                      | `true`                          | Focus the panel element when opened                    |
+| `padded`              | `boolean`                                      | `true`                          | Apply compact padding and rounded item backgrounds     |
+| `zIndex`              | `number`                                       | `10000`                         | Z-index for the floating panel                         |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:modelValue` | `boolean` | Open/close state changed |
-| `item-click` | `T` | An item was selected |
-| `open` | -- | Dropdown opened |
-| `close` | `"outside" \| "escape" \| "action"` | Dropdown closed with reason |
+| Event               | Payload                             | Description                 |
+| ------------------- | ----------------------------------- | --------------------------- |
+| `update:modelValue` | `boolean`                           | Open/close state changed    |
+| `item-click`        | `T`                                 | An item was selected        |
+| `open`              | --                                  | Dropdown opened             |
+| `close`             | `"outside" \| "escape" \| "action"` | Dropdown closed with reason |
 
 ## Slots
 
-| Slot | Props | Description |
-|------|-------|-------------|
-| `trigger` | `{ isActive: boolean, toggle: () => void, open: () => void, close: () => void }` | Custom trigger element |
-| `item` | `{ item: T, click: () => void }` | Custom item rendering |
-| `empty` | -- | Content when items array is empty |
-| `items-container` | `{ items: T[], close: () => void }` | Full control over the items list |
+| Slot              | Props                                                                            | Description                       |
+| ----------------- | -------------------------------------------------------------------------------- | --------------------------------- |
+| `trigger`         | `{ isActive: boolean, toggle: () => void, open: () => void, close: () => void }` | Custom trigger element            |
+| `item`            | `{ item: T, click: () => void }`                                                 | Custom item rendering             |
+| `empty`           | --                                                                               | Content when items array is empty |
+| `items-container` | `{ items: T[], close: () => void }`                                              | Full control over the items list  |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--vc-dropdown-bg` | `var(--additional-50)` | Panel background color |
-| `--vc-dropdown-text` | `var(--neutrals-950)` | Default text color |
-| `--vc-dropdown-border` | `var(--neutrals-200)` | Floating panel border color |
-| `--vc-dropdown-accent` | `var(--neutrals-100)` | Hover/focus background color |
-| `--vc-dropdown-accent-foreground` | `var(--neutrals-900)` | Hover/focus text color |
-| `--vc-dropdown-divider` | `var(--neutrals-200)` | Mobile item divider color |
-| `--vc-dropdown-trigger-focus-ring-width` | `2px` | Trigger focus ring width |
-| `--vc-dropdown-trigger-focus-ring-offset` | `1px` | Trigger focus ring offset |
-| `--vc-dropdown-trigger-focus-ring-color` | `var(--primary-300)` | Trigger focus ring color |
+| Variable                                  | Default                | Description                  |
+| ----------------------------------------- | ---------------------- | ---------------------------- |
+| `--vc-dropdown-bg`                        | `var(--additional-50)` | Panel background color       |
+| `--vc-dropdown-text`                      | `var(--neutrals-950)`  | Default text color           |
+| `--vc-dropdown-border`                    | `var(--neutrals-200)`  | Floating panel border color  |
+| `--vc-dropdown-accent`                    | `var(--neutrals-100)`  | Hover/focus background color |
+| `--vc-dropdown-accent-foreground`         | `var(--neutrals-900)`  | Hover/focus text color       |
+| `--vc-dropdown-divider`                   | `var(--neutrals-200)`  | Mobile item divider color    |
+| `--vc-dropdown-trigger-focus-ring-width`  | `2px`                  | Trigger focus ring width     |
+| `--vc-dropdown-trigger-focus-ring-offset` | `1px`                  | Trigger focus ring offset    |
+| `--vc-dropdown-trigger-focus-ring-color`  | `var(--primary-300)`   | Trigger focus ring color     |
 
 ## Accessibility
 

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