@dxtmisha/wiki 0.25.1 → 0.39.1

package/src/media/descriptions/wikiDescriptionsImage.ts

@@ -3,7 +3,7 @@ import type { StorybookComponentsDescriptionItem } from '../../types/storybookTy
 export const wikiDescriptionsImage: StorybookComponentsDescriptionItem = {
   name: 'Image',
   description: {
-    en: 'Image component for displaying images',
+    en: 'Component for displaying images and icons. Based on `ImageDesign` and supports working with files, links, and icon names.',
     ru: 'Компонент для отображения изображений и иконок. Основан на `ImageDesign` и поддерживает работу с файлами, ссылками и именами икон'
   },
   possibilities: {
@@ -160,6 +160,7 @@ export const wikiDescriptionsImage: StorybookComponentsDescriptionItem = {
     body: `
 <StorybookDescriptions componentName={'Image'} type={'image'}/>
 <StorybookDescriptions componentName={'Image'} type={'value'}/>
+<StorybookDescriptions componentName={'Image'} type={'flag'}/>
 <Canvas of={Component.ImageType}/>
 
 <StorybookDescriptions componentName={'Image'} type={'img-tag'}/>
@@ -177,5 +178,53 @@ export const wikiDescriptionsImage: StorybookComponentsDescriptionItem = {
     expose: `
 <StorybookDescriptions componentName={'Image'} type={'expose'}/>
     `
+  },
+  ai: {
+    render: `
+<div
+  :class="classDemo.item"
+  style="position: relative; width: 48px; height: 48px;"
+>
+  <Image v-bind="args"/>
+</div>
+    `,
+    description: `
+Image is a universal component for displaying graphic content.
+It automatically determines the type of content (image, icon, file, PDF)
+based on the \`value\` property.
+
+**Key Features:**
+1. **Automatic Type Detection:**
+   - **Image:** If \`value\` is a URL to an image or a File object.
+   - **Icon:** If \`value\` is a string matching an icon name
+     (e.g., "home", "filled-home"). Supports Material Symbols/Icons.
+   - **PDF:** If \`value\` is a URL to a PDF file.
+   - **Color:** If \`value\` is a color string (e.g., "#ff0000").
+
+2. **Display Modes (\`size\`):**
+   - \`auto\` (default): Standard behavior.
+   - \`contain\`: Scales the image to fit within the container while maintaining aspect ratio.
+   - \`cover\`: Scales the image to cover the container, cropping if necessary.
+
+3. **Rendering Method (\`tagImg\`):**
+   - \`false\` (default): Renders as a background image (\`background-image\`) on a \`<span>\`.
+     Useful for precise positioning and sizing.
+   - \`true\`: Renders as a standard \`<img>\` tag. Required for SEO (alt text), lazy loading,
+     and accessibility.
+
+4. **Adaptivity (\`adaptive\`):**
+   - Allows scaling the image relative to its original size using \`objectWidth\` and \`objectHeight\`.
+
+5. **Advanced Positioning:**
+   - \`coordinator\`: Array \`[top, right, bottom, left]\` for cropping or positioning the background.
+   - \`x\`, \`y\`: Direct control over background position.
+
+**Usage Examples:**
+
+- **Icon:** \`<Image value="home" />\`
+- **Image (Background):** \`<Image value="https://example.com/img.jpg" size="cover" />\`
+- **Image (Tag):** \`<Image value="https://example.com/img.jpg" tag-img alt="Description" />\`
+- **PDF:** \`<Image value="https://example.com/doc.pdf" />\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsInput.ts

@@ -253,5 +253,61 @@ export const wikiDescriptionsInput: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Slot'} type={'leading'} />
 <StorybookDescriptions componentName={'Slot'} type={'trailing'} />
     `
+  },
+  ai: {
+    description: `
+Input is the primary component for getting user data. It wraps the native \`<input>\` element and adds support for floating labels, validation, masking, and formatting.
+
+**When to use:**
+1. **Text Fields:** Names, emails, addresses, search queries.
+2. **Numeric Data:** Quantities, prices (use \`type="number"\` or \`type="currency"\`).
+3. **Formatted Inputs:** Phone numbers, credit cards (use \`mask\`).
+4. **Passwords:** Secure entry with visibility toggle (use \`type="password"\`).
+5. **Date/Time:** Date selection (use \`type="date"\`, \`type="time"\`).
+
+**Key Properties & Logic:**
+
+1. **Input Types (\`type\`):**
+   - **Standard:** \`text\`, \`email\`, \`search\`, \`url\`, \`tel\`.
+   - **Password:** \`password\`. Automatically adds a "show/hide" eye icon.
+   - **Native Number:** \`number\`. Uses browser's native number input.
+   - **Formatted Number:** \`number-format\`. A text input that formats numbers with thousands separators (e.g., "1,234.56") based on \`language\`.
+   - **Currency:** \`currency\`. Formats input as money. Requires \`currency\` prop (e.g., "USD").
+   - **Date/Time:** \`date\`, \`datetime\`, \`time\`, \`year-month\`.
+
+2. **Masking (\`mask\`):**
+   - Applies a strict pattern to the input.
+   - Example: \`mask="+1 (###) ###-####"\` for phones.
+   - The component automatically handles placeholder characters and cursor movement.
+   - Use \`match\` to restrict allowed characters (e.g., \`match="[0-9]"\`).
+
+3. **Validation:**
+   - **Error State:** Set \`validationMessage\` to show an error text and turn the field red.
+   - **Regex Pattern:** Use \`pattern\` to validate the final value.
+   - **Input Filter:** Use \`match\` to prevent typing invalid characters.
+
+4. **Field Structure (Visuals):**
+   - **Label:** \`label\` prop. Can be floating or static.
+   - **Placeholder:** \`placeholder\` prop. Shown when empty.
+   - **Helper Text:** \`helperMessage\` prop. Shown below the input.
+   - **Icons:** \`icon\` (left/leading) and \`iconTrailing\` (right/trailing).
+   - **Affixes:** \`prefix\` (text before value, e.g., "$") and \`suffix\` (text after value, e.g., "kg").
+   - **Counter:** \`counter\` prop. Shows character count (requires \`maxlength\`).
+
+5. **Behavior:**
+   - **Loading:** \`loading\` prop shows a spinner/skeleton.
+   - **Clearable:** \`cancel\` prop adds a clear (X) button.
+   - **Read-only/Disabled:** \`readonly\` and \`disabled\` props.
+
+**Design Identification:**
+- **Standard Input:** A box or underline with text.
+- **With Icon:** Input with a symbol on the left or right.
+- **With Prefix/Suffix:** Input containing fixed text like "$" or "items".
+- **Error State:** Input with red border/text and a message below.
+- **Password:** Input with dots and an eye icon.
+
+**Example:**
+\`<Input label="Email" type="email" icon="mail" />\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsList.ts

@@ -116,5 +116,36 @@ export const wikiDescriptionsList: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'List'} type={'slot.html'}/>
     `
+  },
+  ai: {
+    description: `
+List is a core structural component for rendering interactive lists.
+It is the engine behind Dropdowns, Selects, and Navigation Menus.
+
+**Key Features:**
+1. **Data Structure:**
+   - \`list\`: Array of objects. Supports types: \`item\` (default), \`group\`, \`menu\`, \`line\` (separator), \`space\`, \`subtitle\`, \`html\`.
+   - Items properties: \`label\`, \`value\`, \`icon\`, \`description\`, \`disabled\`, \`to\` (link).
+
+2. **Interaction:**
+   - **Selection:** \`v-model:selected\` (single or array).
+   - **Keyboard:** Full arrow key navigation, Enter to select.
+   - **Focus:** Manages internal focus.
+
+3. **Search & Filtering:**
+   - \`highlight\`: Text to highlight.
+   - \`filterMode\`: Hides non-matching items.
+
+**Usage Examples:**
+
+- **Basic List:**
+  \`<List :list="[{ label: 'Home', icon: 'home' }, { label: 'Settings', icon: 'settings' }]" />\`
+
+- **With Selection:**
+  \`<List v-model:selected="current" :list="options" />\`
+
+- **Filtered List:**
+  \`<List :list="data" :highlight="searchText" filter-mode />\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsListGroup.ts

@@ -75,5 +75,62 @@ export const wikiDescriptionsListGroup: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'ListGroup'} type={'slots'}/>
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <ListGroup v-bind="args">
+    <template #head="{ binds }">
+      <span v-bind="binds">head</span>
+    </template>
+    <template #list>
+      list
+    </template>
+  </ListGroup>
+</div>
+    `,
+    description: `
+ListGroup is a structural component designed to group related list items, often providing collapsible/expandable functionality.
+It serves as a container that manages the visibility of nested items, creating a hierarchical structure within lists or menus.
+
+**Key Features:**
+1. **Collapsible Logic:**
+   - Wraps content in a \`MotionTransform\` component for smooth height animations.
+   - Can be controlled programmatically via the \`open\` prop or interactively via the header.
+
+2. **Slots Structure:**
+   - \`#head\`: The header area acting as the trigger. It receives \`binds\` (click handlers, ARIA attributes) that **must** be applied to the interactive element (e.g., \`ListItem\`) to enable toggling.
+   - \`#list\`: The content area where nested \`ListItem\` or other components are placed.
+
+3. **Styling:**
+   - \`divider\`: Adds a visual separator if enabled.
+   - Automatically handles ARIA roles (\`role="group"\`).
+
+**When to use:**
+- **Navigation Menus:** To create submenus or grouped links (e.g., "Settings" -> "Profile", "Security").
+- **Categorized Lists:** To group items under a common heading.
+- **Accordions within Lists:** When list items need to expand to show details.
+
+**Usage Examples:**
+
+- **Basic Group:**
+  \`<ListGroup>
+     <template #head="{ binds }">
+       <ListItem v-bind="binds" label="My Group" icon="folder" />
+     </template>
+     <template #list>
+       <ListItem label="File 1" />
+       <ListItem label="File 2" />
+     </template>
+   </ListGroup>\`
+
+- **Open by Default:**
+  \`<ListGroup open>
+     <template #head="{ binds }">
+       <ListItem v-bind="binds" label="Always Open" />
+     </template>
+     <template #list>...</template>
+   </ListGroup>\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsListItem.ts

@@ -144,5 +144,47 @@ export const wikiDescriptionsListItem: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Slot'} type={'description'}/>
 <StorybookDescriptions componentName={'ListItem'} type={'slots'}/>
     `
+  },
+  ai: {
+    description: `
+ListItem is a versatile structural component used to render items within lists, menus, or navigation bars.
+It provides a standardized layout with slots for leading (prefix) and trailing (suffix) elements, along with a central content area.
+
+**Key Features:**
+1. **Layout Structure:**
+   - **Prefix:** Left-most area (e.g., for avatars, checkboxes, or icons).
+   - **Content:** Central area containing:
+     - \`label\`: Main title.
+     - \`caption\`: Meta text (above or next to label).
+     - \`description\`: Subtitle text (below label).
+   - **Suffix:** Right-side meta content (e.g., timestamp, status).
+   - **Trailing:** Far-right action area (e.g., arrow icon, badge).
+
+2. **Interaction:**
+   - **Navigation:** Renders as an \`<a>\` tag if \`href\` is provided.
+   - **Selection:** Supports \`selected\` state (useful for menus).
+   - **Feedback:** Includes ripple effect and hover/active states.
+   - **Disabled:** \`disabled\` prop prevents interaction.
+
+3. **Styling:**
+   - \`divider\` adds a bottom border.
+   - Supports \`badge\` integration via props.
+
+**Usage Examples:**
+
+- **Navigation Link:**
+  \`<ListItem href="/home" label="Home" icon="chevron_right">
+     <template #prefix>prefix</template>
+   </ListItem>\`
+
+- **User List Item:**
+  \`<ListItem label="John Doe" description="Online" divider>
+     <template #prefix><Avatar src="..."/></template>
+     <template #suffix>12:30 PM</template>
+   </ListItem>\`
+
+- **Menu Item:**
+  \`<ListItem label="Settings" icon="settings" selected />\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsListMenu.ts

@@ -73,5 +73,46 @@ export const wikiDescriptionsListMenu: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'ListGroup'} type={'slots'}/>
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <ListMenu v-bind="args">
+    <template #head="{ binds }">
+      <span v-bind="binds as any">head</span>
+    </template>
+    <template #list>
+      list
+    </template>
+  </ListMenu>
+</div>
+    `,
+    description: `
+ListMenu is a specialized wrapper component designed to create dropdown menus or nested navigation lists.
+It utilizes the \`Window\` component logic with a menu preset to manage the visibility and positioning of a list of items relative to a trigger.
+
+**Key Features:**
+1. **Structure:**
+   - \`#head\`: The trigger area (Control). It exposes \`binds\` which **must** be applied to the interactive element (e.g., \`ListItem\`, \`Button\`) to toggle the menu.
+   - \`#list\`: The content area containing the menu items.
+
+2. **Behavior:**
+   - **Popup/Dropdown:** By default, it behaves like a dropdown menu (\`adaptive="menu"\`).
+   - **Interaction:** Manages click/hover events via \`binds\` to open/close the list.
+   - **Accessibility:** Automatically applies \`role="menu"\` and \`aria-haspopup\`.
+
+**Usage Examples:**
+
+- **List Item with Submenu:**
+  \`<ListMenu>
+     <template #head="{ binds }">
+       <ListItem v-bind="binds" label="Settings" icon="settings" />
+     </template>
+     <template #list>
+       <ListItem label="Profile" />
+       <ListItem label="Account" />
+     </template>
+   </ListMenu>\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsMask.ts

@@ -227,5 +227,47 @@ export const wikiDescriptionsMask: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Mask'} type={'expose'}/>
 <StorybookDescriptions componentName={'Expose'} type={'clear'}/>
     `
+  },
+  ai: {
+    description: `
+ **Note:** This component is already integrated into the \`Input\` component and should not be used directly.
+
+ Mask is a low-level utility component responsible for controlling and formatting user input. It ensures that the data entered matches a predefined structure (mask) or data type (date, number, currency).
+
+ **How it works:**
+ The component intercepts input events (\`beforeinput\`, \`input\`) and validates each character against allowed patterns (\`match\`). It automatically inserts static characters defined in the \`mask\` (like parentheses, dashes) and skips over them during navigation. For complex types like \`date\` or \`number\`, it uses internal logic to validate ranges (e.g., month 1-12) and format values (e.g., adding thousands separators).
+
+ **Key Properties & Usage:**
+
+ 1. **Masking (\`mask\`):**
+    - **String:** A single pattern (e.g., \`+1 (***) ***-****\`). The \`*\` character (or value of \`special\`) represents an input slot. All other characters are treated as static literals and are automatically inserted/skipped.
+    - **Array:** A list of patterns (e.g., \`['(***) ***-****', '+1 (***) ***-****']\`). The component automatically selects the most appropriate mask based on the input length.
+
+ 2. **Input Types (\`type\`):**
+    - \`text\` (default): Uses the \`mask\` pattern directly.
+    - \`number\`: Formats input as a number. Automatically adds thousands separators based on \`language\`.
+    - \`currency\`: Formats as currency. Requires \`currency\` prop (e.g., 'USD'). Uses \`fraction\` for decimal places.
+    - \`date\` / \`datetime\` / \`time\`: Enforces valid date/time entry. The format (e.g., DD.MM.YYYY vs MM/DD/YYYY) is determined by the \`language\` prop.
+
+ 3. **Validation & Constraints:**
+    - \`match\`: A Regular Expression string (e.g., \`[0-9a-fA-F]\`). Only characters matching this pattern are accepted. Useful for Hex codes, alphanumeric IDs, etc.
+    - \`pattern\`: A Regex for validating the *completed* value.
+    - \`min\`, \`max\`: For number/currency types, restricts the value range.
+
+ 4. **Customization:**
+    - \`special\`: Defines the placeholder character in the \`mask\`. Default is \`*\`. Change this if your mask needs to contain literal asterisks.
+    - \`language\`: Determines locale-specific formatting for dates and numbers (separators, date order).
+    - \`fraction\`: Specifies the number of decimal places for numbers/currency.
+
+ **When to use (Design Identification):**
+ - **Formatted Text:** Inputs that require specific formatting like Phone Numbers \`+1 (555) ...\`, Credit Cards \`0000 0000 ...\`, or License Plates.
+ - **Financial Data:** Inputs for amounts that need thousands separators or currency symbols.
+ - **Dates:** Inputs requiring strict date structure (DD.MM.YYYY).
+
+ **Example Scenarios:**
+ - **Phone:** \`<Mask mask="+1 (***) ***-****" match="[0-9]"/>\`
+ - **Price:** \`<Mask type="currency" currency="USD" fraction="2"/>\`
+ - **Date:** \`<Mask type="date" language="en-GB"/>\` (DD/MM/YYYY)
+     `
   }
 }

package/src/media/descriptions/wikiDescriptionsMenu.ts

@@ -206,5 +206,61 @@ export const wikiDescriptionsMenu: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Menu'} type={'slotsControl'}/>
 <StorybookDescriptions componentName={'Menu'} type={'slots'}/>
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <Menu embedded :window-attrs="{open: true}" v-bind="args">
+    <template #control="{ binds }">
+      <button class="wiki-storybook-button" v-bind="binds">
+        Open Menu
+      </button>
+    </template>
+  </Menu>
+</div>
+    `,
+    description: `
+Menu is a comprehensive dropdown component used for navigation, actions, and selection.
+It combines a trigger (Control), a popup container (Window), and a structured list (List).
+
+**Key Features:**
+1. **Structure:**
+   - **Control Slot (\`#control\`):** The trigger element (e.g., Button, Avatar). Receives \`binds\` (click/keydown handlers) which **must** be applied.
+   - **Popup:** Opens a floating window positioned relative to the trigger.
+   - **Content:** Renders a list of items defined in the \`list\` prop.
+
+2. **Data Model (\`list\` prop):**
+   - Array of objects: \`{ label, value, icon, disabled, to, ... }\`.
+   - Supports special types: \`line\` (separator), \`group\` (headers), \`menu\` (nested submenus).
+
+3. **Interaction:**
+   - **Selection:** Tracks selected values via \`v-model:selected\`.
+   - **Navigation:** Supports keyboard navigation (Arrows, Enter, Esc).
+   - **Async:** Can load data dynamically using the \`ajax\` prop.
+
+**When to use:**
+- **Dropdown Menus:** For user profile menus, settings, or navigation.
+- **Context Menus:** For right-click actions.
+- **Select-like UI:** When a standard select is not enough (needs icons, groups, custom rendering).
+
+**Usage Examples:**
+
+- **Basic Menu:**
+  \`<Menu :list="[{ label: 'Item 1' }, { label: 'Item 2' }]">
+     <template #control="{ binds }">
+       <button v-bind="binds">Options</button>
+     </template>
+   </Menu>\`
+
+- **With Selection:**
+  \`<Menu
+     v-model:selected="currentValue"
+     :list="options"
+   >
+     <template #control="{ binds }">
+       <button v-bind="binds">Select: {{ currentValue }}</button>
+     </template>
+   </Menu>\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsModal.ts

@@ -8,19 +8,19 @@ import type { StorybookComponentsDescriptionItem } from '../../types/storybookTy
 export const wikiDescriptionsModal: StorybookComponentsDescriptionItem = {
   name: 'Modal',
   description: {
-    en: 'Simplified wrapper over Window component for creating centered modal dialogs',
+    en: 'Simplified wrapper over a Window component for creating centered modal dialogs',
     ru: 'Упрощенная обертка над компонентом Window для создания центрированных модальных диалогов'
   },
   possibilities: {
     en: [
       'pre-configured modal window with centered positioning',
       'overlay backdrop with background blocking',
-      'close on ESC key and click outside',
+      'close on the ESC key and click outside',
       'integration with scrollbar for long content',
       'slots for title, content and footer customization',
       'lifecycle events (preparation, opening, closing)',
-      'close button with customizable icon',
-      'programmatic control via v-model:open',
+      'close a button with a customizable icon',
+      'programmatic control via a v-model:open',
       'focus management and keyboard navigation',
       'responsive design with mobile optimization'
     ],
@@ -56,7 +56,7 @@ export const wikiDescriptionsModal: StorybookComponentsDescriptionItem = {
           <p>Use modals sparingly and only for content that genuinely requires immediate attention. Ensure modals have clear actions (confirm/cancel), provide easy ways to dismiss them, and avoid nesting modals within modals. The component should be large enough to display content comfortably but not so large that it overwhelms the screen.</p>
 
           <h4>Relationship with Window</h4>
-          <p>Modal is essentially Window with <code>adaptive="modal"</code> preset, simplifying the usage for standard dialog scenarios. All Window properties, slots, and events are available in Modal component.</p>
+          <p>Modal is essentially Window with <code>adaptive="modal"</code> preset, simplifying the usage for standard dialog scenarios. All Window properties, slots, and events are available in a Modal component.</p>
         </template>
       </DesignComponent>
     `,
@@ -98,7 +98,7 @@ export const wikiDescriptionsModal: StorybookComponentsDescriptionItem = {
 
           <template #default>
             <h4>Default Slot Content</h4>
-            <p>This is the main content area of the modal. You can place any content here including text, forms, images, or other components.</p>
+            <p>This is the main content area of the modal. You can place any content here, including text, forms, images, or other components.</p>
 
             <div class="wiki-storybook-info">
               <strong>Available slots:</strong>
@@ -141,5 +141,60 @@ export const wikiDescriptionsModal: StorybookComponentsDescriptionItem = {
 <Canvas of={Component.ModalAllSlots}/>
 <StorybookDescriptions componentName={'Window'} type={'slots'}/>
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <Modal embedded open v-bind="args">
+    <template #default>
+      <p>This is a modal dialog.</p>
+    </template>
+  </Modal>
+</div>
+    `,
+    description: `
+Modal is a simplified wrapper over the Window component for creating centered modal dialogs.
+It is designed to handle standard use cases for pop-ups, alerts, and forms with minimal configuration.
+
+**Note:** The \`embedded\` prop is used only for documentation examples to render the component inline. Do not use it in production code.
+
+**Key Features:**
+1. **Positioning & Overlay:**
+   - Always centered on the screen.
+   - Renders a backdrop (overlay) to block background interactions.
+   - Preset \`adaptive="modal"\` ensures correct behavior on all devices.
+
+2. **State Management:**
+   - Controlled via \`v-model:open\` (boolean).
+   - Automatically manages focus and scroll locking on the body.
+
+3. **Slots Structure:**
+   - \`#control\`: The trigger element (e.g., button). Receives \`binds\` (click handlers) to automatically toggle the modal.
+   - \`#title\`: The header area of the modal.
+   - \`#default\`: The main content body.
+   - \`#footer\`: The footer area, typically for action buttons.
+
+4. **User Interaction:**
+   - Closes on ESC key press.
+   - Closes on clicking outside the modal (backdrop).
+   - Supports a close button in the header.
+
+**Usage Examples:**
+
+- **With Trigger Button:**
+  \`<Modal>
+     <template #control="{ binds }">
+       <button v-bind="binds">Open Modal</button>
+     </template>
+     <template #default>
+       <p>Are you sure?</p>
+     </template>
+   </Modal>\`
+
+- **Programmatic Control:**
+  \`<Modal v-model:open="showModal">
+     <p>Content...</p>
+   </Modal>\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsMotionTransform.ts

@@ -208,5 +208,62 @@ export const wikiDescriptionsMotionTransform: StorybookComponentsDescriptionItem
     slots: `
 <StorybookDescriptions componentName={'MotionTransform'} type={'slots'}/>
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <MotionTransform :auto-close="false" v-bind="args">
+    <template #head>
+      <button class="wiki-storybook-button">Toggle Content</button>
+    </template>
+    <template #body>
+      <div class="wiki-storybook-item--padding">
+        <p>Expandable content goes here.</p>
+      </div>
+    </template>
+  </MotionTransform>
+</div>
+    `,
+    description: `
+MotionTransform is a core utility component for creating expanding, collapsing, or floating UI elements with smooth animations.
+It serves as the base for Dropdowns, Accordions, and custom interactive panels.
+
+**Key Features:**
+1. **Structure:**
+   - \`#head\`: The trigger area (e.g., a button or title).
+   - \`#body\`: The content area that animates in/out.
+
+2. **Animation Logic:**
+   - Automatically handles height calculations for smooth CSS transitions (expand/collapse).
+   - \`animationHeadPosition\`: Controls the visual flow (e.g., \`top\` for standard dropdowns, \`toBottom\` for specific motion effects).
+
+3. **Positioning & Teleport:**
+   - **Inline (Default):** Content expands within the flow (Accordion style).
+   - **Teleported:** With \`teleport\`, content moves to the \`<body>\` tag, useful for floating menus/popups that need to overlay other content.
+
+4. **Interaction:**
+   - \`clickOpen\`: Toggles state when clicking the head.
+   - \`autoClose\`: Closes when clicking outside the component.
+   - \`ignore\`: Selectors to exclude from the "click outside" check.
+
+**When to use:**
+- **Accordion/Collapse:** When clicking a header should push content down.
+- **Dropdown/Menu:** When clicking a button should show a floating list (use with \`teleport\`).
+- **Custom Toggles:** Any UI pattern requiring show/hide transitions.
+
+**Usage Examples:**
+
+- **Accordion:**
+  \`<MotionTransform click-open>
+     <template #head>Title</template>
+     <template #body>Content</template>
+   </MotionTransform>\`
+
+- **Floating Menu:**
+  \`<MotionTransform teleport auto-close>
+     <template #head><button>Options</button></template>
+     <template #body><menu>...</menu></template>
+   </MotionTransform>\`
+    `
   }
 }