@maltjoy/mcp-server 0.3.1 → 0.3.2

package/README.md

@@ -4,7 +4,7 @@ MCP (Model Context Protocol) server for the Joy Design System. This server expos
 
 ## Features
 
-- 🔍 List all 74 available Joy Vue3 components
+- 🔍 List all available Joy Vue3 components with descriptions
 - 📚 Access component documentation (props, events, slots, exposed members)
 - 🏷️ Retrieve TypeScript types definitions for component props (variants, sizes, etc.)
 - 🎨 List 132 design tokens (colors, spacing, typography, etc.)
@@ -20,7 +20,7 @@ pnpm install
 pnpm build  # This also generates component documentation JSON files
 ```
 
-> **Note:** The build process automatically generates JSON documentation for all 74 components. This is required for the server to work.
+> **Note:** The build process automatically generates JSON documentation for all components. This is required for the server to work.
 
 ## Usage
 
@@ -43,7 +43,7 @@ pnpm dev
 
 ### 1. `joy_list_components`
 
-Lists all available Joy Vue3 components from the @maltjoy/core-vue library.
+Lists all available Joy Vue3 components from the @maltjoy/core-vue library, with descriptions extracted from Storybook stories.
 
 **Parameters:** None
 
@@ -51,9 +51,10 @@ Lists all available Joy Vue3 components from the @maltjoy/core-vue library.
 ```json
 {
   "components": [
-    "VJoyAdminBanner",
-    "VJoyAvailability",
-    "VJoyAvatar",
+    {
+      "name": "VJoyButton",
+      "description": "A versatile button component supporting multiple variants, sizes, and states."
+    },
     "..."
   ],
   "count": 74
@@ -234,11 +235,10 @@ joy-mcp-server/
 │           └── *.types.ts          # Component TypeScript types
 ├── package.json
 ├── tsconfig.json
-├── README.md
-└── TROUBLESHOOTING.md              # Troubleshooting guide
+└── README.md
 ```
 
-The server reads the generated JSON documentation from `dist/doc/` which is automatically created during the build process by extracting metadata from Vue component files in `@maltjoy/core-vue`.
+The server reads the generated JSON documentation from `dist/doc/` which is automatically created during the build process by extracting metadata from Vue component files in `@maltjoy/core-vue`. Component descriptions are extracted from JSDoc comments in Storybook story files.
 
 ## Development
 
@@ -260,12 +260,6 @@ pnpm run dev
 # Generate only documentation (no compilation)
 pnpm run generate:components-docs:json
 
-# Test the server locally
-pnpm run test
-
-# Reload the server (kill MCP process)
-pnpm run reload
-
 # Start the server
 pnpm start
 
@@ -275,23 +269,12 @@ pnpm run inspector
 
 ## Troubleshooting
 
-### MCP server returns 0 components in Cursor
-
-If you're getting an empty list of components in Cursor but the server works fine locally:
-
-1. **Quick fix:** Use Cursor Command Palette → `Developer: Reload Window`
-
-2. **Or run:** `pnpm run reload` to kill the old server process
-
-3. **Verify locally:** `pnpm run test` should show 74 components
-
-For detailed troubleshooting steps, see [TROUBLESHOOTING.md](./TROUBLESHOOTING.md)
-
 ### Common Issues
 
 - **Documentation not generated:** Run `pnpm run build` to compile and generate docs
-- **Changes not taking effect:** Reload Cursor window to restart MCP server
+- **Changes not taking effect:** Reload your editor window to restart the MCP server
 - **Server fails to start:** Check that `dist/doc/index.json` exists
+- **0 components returned:** Reload your editor window (`Developer: Reload Window` in Cursor/VS Code)
 
 ## License
 

package/dist/doc/VJoyAdminBanner/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyAdminBanner",
   "displayName": "VJoyAdminBanner",
+  "description": "The AdminBanner component displays a visual indicator when users are viewing the application in admin mode. It features a distinctive banner with an eye icon and customizable label, typically positioned at the top of the interface to clearly communicate the current viewing context to administrators.",
   "props": [
     {
       "name": "label",

package/dist/doc/VJoyAvailability/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyAvailability",
   "displayName": "VJoyAvailability",
+  "description": "A status indicator component for displaying user availability information. Features colored dots and optional labels to communicate different availability states such as available, not available, available soon, or partially available. Can be displayed as a simple dot indicator or with descriptive text labels that handle long content gracefully.",
   "props": [
     {
       "name": "label",

package/dist/doc/VJoyAvatar/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyAvatar",
   "displayName": "VJoyAvatar",
+  "description": "A versatile avatar component for displaying user profile pictures, initials, or placeholders depending on given properties. Supports multiple sizes, fallback to initials when no photo is provided, anonymous states with icons, numeric indicators for \"more users\" displays, and special variants like strategy profiles and company avatars. Can be styled as clickable links and includes empty states for various use cases.",
   "props": [
     {
       "name": "size",

package/dist/doc/VJoyAvatarsList/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyAvatarsList",
   "displayName": "VJoyAvatarsList",
+  "description": "A container component for displaying multiple avatars in a styled group layout. Provides consistent spacing and alignment for avatar collections, with an optional compressed mode for more compact displays. Designed to work seamlessly with VJoyAvatar components.",
   "props": [
     {
       "name": "compress",

package/dist/doc/VJoyBadge/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyBadge",
   "displayName": "VJoyBadge",
+  "description": "A versatile badge component for labeling, categorizing, and highlighting content with colored indicators. Supports various color variants for different semantic meanings, optional bulletpoint dots for visual emphasis, and can display either text labels or numeric values. Perfect for status indicators, tags, and notification counters.",
   "props": [
     {
       "name": "label",

package/dist/doc/VJoyBadgeLevel/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyBadgeLevel",
   "displayName": "VJoyBadgeLevel",
+  "description": "A specialized badge component for displaying user achievement levels and status indicators. Features custom SVG icons for different categories including SuperMalter levels (with crown icons), High Potential badges (with diamond icons), verified status, and special designations like Malt Linker. Can display icons only or with accompanying text labels for different user recognition levels.",
   "props": [
     {
       "name": "superMalterLevel",

package/dist/doc/VJoyBlockSkeleton/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyBlockSkeleton",
   "displayName": "VJoyBlockSkeleton",
+  "description": "A highly configurable skeleton loading component for creating placeholder blocks during content loading. Features customizable dimensions, circle variant for avatars, and smooth shimmer animations to improve perceived performance. More flexible than VJoyFormFieldSkeleton and integrates seamlessly with VJoyWrapper for responsive layouts.",
   "props": [
     {
       "name": "circle",

package/dist/doc/VJoyBottomSheet/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyBottomSheet",
   "displayName": "VJoyBottomSheet",
+  "description": "",
   "props": [
     {
       "name": "closeLabel",

package/dist/doc/VJoyBottomSheetTrigger/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyBottomSheetTrigger",
   "displayName": "VJoyBottomSheetTrigger",
+  "description": "",
   "props": [
     {
       "name": "bottomSheet",

package/dist/doc/VJoyButton/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyButton",
   "displayName": "VJoyButton",
+  "description": "A button component supporting multiple variants, sizes, and states. Features icon support, loading states and can function as either a button or link element. Includes ripple effects and comprehensive styling options for different use cases from primary actions to subtle ghost buttons. **Tips:** set a \"href\" attribute to make the button a link.",
   "props": [
     {
       "name": "size",

package/dist/doc/VJoyCheckbox/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyCheckbox",
   "displayName": "VJoyCheckbox",
+  "description": "A form checkbox component with support for standard, indeterminate, and disabled states. Features accessible labeling, focus indicators, form integration with validation feedback, and additional content slots. Supports both single selections scenarios with proper event handling and state management.",
   "props": [
     {
       "name": "invalid",

package/dist/doc/VJoyCollapse/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyCollapse",
   "displayName": "VJoyCollapse",
+  "description": "A container component for creating accordion and collapsible content sections. Manages multiple VJoyCollapseItem components with support for accordion mode (single open item) or standard collapse behavior (multiple open items). Features v-model integration for programmatic control and various visual modes for different design requirements.",
   "props": [
     {
       "name": "accordion",

package/dist/doc/VJoyCollapseItem/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyCollapseItem",
   "displayName": "VJoyCollapseItem",
+  "description": "An individual collapsible content item that can expand and collapse to show/hide content. Features header and subheader support, optional summary icons, preview content when collapsed, and custom header actions. Can be used within VJoyCollapse for grouped accordion behavior.",
   "props": [
     {
       "name": "open",

package/dist/doc/VJoyCompanyAvatar/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyCompanyAvatar",
   "displayName": "VJoyCompanyAvatar",
+  "description": "DEPRECATED. Use VJoyAvatar component instead.",
   "props": [
     {
       "name": "size",

package/dist/doc/VJoyDialog/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyDialog",
   "displayName": "VJoyDialog",
+  "description": "VJoyDialog component exposes two methods: `show` and `hide`. **Both are asynchronous**. You can use the `VJoyDialogTrigger` component as well if it's easier. ```html <template> <VJoyDialog ref=\"dialog\">...</VJoyDialog> </template> <script lang=\"ts\" setup> import {ref} from 'vue'; import {VJoyDialog} from '@maltjoy/core-vue'; const dialog = ref<InstanceType<typeof VJoyDialog>>(); async function showDialog() { await dialog.value?.show(); } // execute the publicly exposed hide function. async function hideDialog() { // you can pass an object as parameter: {fireHideEvent: false} if you don't want to emit dialog:hide event. await dialog.value?.hide(); } </script> ``` > FYI, the \"teleport\" property is applied on these docs only for preview quality purpose. > By default, dialogs are rendered at the end of body tag.",
   "props": [
     {
       "name": "size",

package/dist/doc/VJoyDialogTrigger/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyDialogTrigger",
   "displayName": "VJoyDialogTrigger",
+  "description": "",
   "props": [
     {
       "name": "dialog",

package/dist/doc/VJoyDot/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyDot",
   "displayName": "VJoyDot",
+  "description": "A simple colored dot indicator component for status display and notifications. Can display as a plain colored dot or include numeric values for notification counters. Features automatic formatting for large numbers (99+) and supports multiple color variants for different semantic meanings and visual emphasis.",
   "props": [
     {
       "name": "number",

package/dist/doc/VJoyDrawer/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyDrawer",
   "displayName": "VJoyDrawer",
+  "description": "VJoyDrawer component exposes two methods: `show` and `hide`. **Both are asynchronous**. You can use the `VJoyDrawerTrigger` component as well if it's easier. ```html <template> <VJoyDrawer ref=\"dialog\">...</VJoyDrawer> </template> <script lang=\"ts\" setup> import {ref} from 'vue'; import {VJoyDrawer} from '@maltjoy/core-vue'; const drawer = ref<InstanceType<typeof VJoyDrawer> | null>(null); async function showDrawer() { await drawer.value?.show(); } // execute the publicly exposed hide function. async function hideDrawer() { // you can pass an object as parameter: {fireHideEvent: false} if you don't want to emit drawer:hide event. await drawer.value?.hide(); } </script> ``` If you need confirmation from the user or wait for an API call to close the drawer you can use the `on-before-hide` function property. This function can be either synchronous or asynchronous and should return a boolean. Returning `true` closes the drawer and returning `false` cancels the closing.",
   "props": [
     {
       "name": "size",

package/dist/doc/VJoyDrawerTrigger/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyDrawerTrigger",
   "displayName": "VJoyDrawerTrigger",
+  "description": "",
   "props": [
     {
       "name": "drawer",

package/dist/doc/VJoyDropdown/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyDropdown",
   "displayName": "VJoyDropdown",
+  "description": "A flexible dropdown component for creating contextual menus and option lists. Features customizable trigger buttons, positioning options (left/right/up/down), and support for both predefined option lists and completely custom content. Includes proper accessibility support and click-outside behavior for seamless user interaction. **ACCESSIBILITY FOCUS:** When using this component, to properly apply useful informations for screen readers, you will need to set an **aria-label** to your dropdown trigger if it has no default text.",
   "props": [
     {
       "name": "reset",

package/dist/doc/VJoyDropdownList/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyDropdownList",
   "displayName": "VJoyDropdownList",
+  "description": "The core list component used within dropdown interfaces for displaying selectable options. Features customizable sizing, header/footer slots, keyboard navigation, and accessibility compliance. Supports both predefined option arrays and custom content through slots. Can be used standalone or as part of the VJoyDropdown component for complete dropdown functionality.",
   "props": [
     {
       "name": "reset",

package/dist/doc/VJoyDropzone/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyDropzone",
   "displayName": "VJoyDropzone",
+  "description": "A file upload component with drag-and-drop functionality for handling file selection and management. Supports single or multiple file uploads, file validation and customizable file displays. Features visual feedback for drag states, error handling, and flexible content slots for file information and actions. The dropzone required as `v-model` an array containing objects with at least the \"name\" property.",
   "props": [
     {
       "name": "modelValue",

package/dist/doc/VJoyFilterBar/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyFilterBar",
   "displayName": "VJoyFilterBar",
+  "description": "A container component for creating grouped filter interfaces with connected filter buttons. Automatically applies appropriate border radius styling to create seamless filter groups that work perfectly with VJoyFilterBarButton components. Includes accessibility support and integrates well with dropdowns for complex filtering scenarios.",
   "props": [
     {
       "name": "ariaLabel",

package/dist/doc/VJoyFilterBarButton/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyFilterBarButton",
   "displayName": "VJoyFilterBarButton",
+  "description": "",
   "props": [
     {
       "name": "active",

package/dist/doc/VJoyFormError/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyFormError",
   "displayName": "VJoyFormError",
+  "description": "A form error display component for showing error messages. Features a warning icon, support for single error messages or multiple error lists, and visibility control for conditional error display. Includes proper accessibility attributes with alert role for screen reader announcement of form errors.",
   "props": [
     {
       "name": "visible",

package/dist/doc/VJoyFormFieldSkeleton/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyFormFieldSkeleton",
   "displayName": "VJoyFormFieldSkeleton",
+  "description": "A specialized skeleton loading component designed specifically for form field placeholders. Features form-appropriate sizing, flexible layout support with VJoyWrapper integration, and consistent styling that matches form field dimensions. Perfect for creating skeleton forms and improving perceived loading performance in form-heavy interfaces. Skeleton is 100% width by default. If you want to have a better control on this, use the \"width\" property.",
   "props": [
     {
       "name": "size",

package/dist/doc/VJoyFormGroup/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyFormGroup",
   "displayName": "VJoyFormGroup",
+  "description": "A form group component to group form elements together. It is used to group a label, any form component, and form errors together. It is also used to handle the gap between the form elements, and **it resets the existing margins** within form elements!",
   "props": [],
   "events": [],
   "slots": [

package/dist/doc/VJoyFunnel/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyFunnel",
   "displayName": "VJoyFunnel",
+  "description": "A full-page layout component designed for multi-step workflows and guided user flows. Features decorative background shapes, header and footer areas, and seamless integration with stepper components. Optimized for mobile experiences and onboarding funnels with different visual profiles and customizable content areas.",
   "props": [
     {
       "name": "profile",

package/dist/doc/VJoyFunnelFooter/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyFunnelFooter",
   "displayName": "VJoyFunnelFooter",
+  "description": "",
   "props": [],
   "events": [],
   "slots": [

package/dist/doc/VJoyFunnelHeader/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyFunnelHeader",
   "displayName": "VJoyFunnelHeader",
+  "description": "",
   "props": [],
   "events": [],
   "slots": [

package/dist/doc/VJoyHighlight/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyHighlight",
   "displayName": "VJoyHighlight",
+  "description": "A content highlighting component for displaying important information with visual emphasis. Features different severity levels (success, info, warning, error, neutral), optional accent borders, customizable icons, and title support. Includes an experimental AI variant for AI-related content with special styling and decorative elements.",
   "props": [
     {
       "name": "variant",

package/dist/doc/VJoyIcon/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyIcon",
   "displayName": "VJoyIcon",
+  "description": "An icon component supporting the complete Joy icon library with customizable sizing and theming. Features accessibility support with aria labels, multiple color variants and different size options. Provides consistent icon rendering across the design system with proper semantic markup and keyboard navigation capabilities.",
   "props": [
     {
       "name": "size",

package/dist/doc/VJoyIndicator/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyIndicator",
   "displayName": "VJoyIndicator",
+  "description": "",
   "props": [
     {
       "name": "variant",

package/dist/doc/VJoyIndicators/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyIndicators",
   "displayName": "VJoyIndicators",
+  "description": "A navigation component for creating page or content indicators, commonly used in carousels and dialogs. Manages a collection of VJoyIndicator components with selection state and v-model support. Features visual variants and automatic indicator management for seamless navigation experiences with proper accessibility and keyboard interaction support.",
   "props": [
     {
       "name": "variant",

package/dist/doc/VJoyInput/JoyInput.types.ts

@@ -10,7 +10,7 @@ export interface VJoyInputProps {
     disabled?: boolean;
     id?: string;
     invalid?: boolean;
-    name: string;
+    name?: string;
     required?: boolean;
     /** Display a label on top of the element. Handy if you only need to pass a string. If you need more, use the VJoyLabel. */
     label?: string;

package/dist/doc/VJoyInput/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyInput",
   "displayName": "VJoyInput",
+  "description": "A comprehensive form input component with extensive customization and validation features. Supports multiple input types, icon support, clearable functionality, unit displays, and comprehensive validation states. Features auto-focus capabilities, accessibility compliance, and seamless integration with form validation systems.",
   "props": [
     {
       "name": "autofocus",
@@ -57,10 +58,12 @@
     },
     {
       "name": "name",
-      "type": "string",
-      "required": true,
+      "type": "string | undefined",
+      "required": false,
       "description": "",
-      "possibleValues": null
+      "possibleValues": [
+        "string"
+      ]
     },
     {
       "name": "required",
@@ -288,7 +291,7 @@
     },
     {
       "name": "name",
-      "type": "string",
+      "type": "string | undefined",
       "isMethod": false
     },
     {

package/dist/doc/VJoyInputDigit/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyInputDigit",
   "displayName": "VJoyInputDigit",
+  "description": "One-time code input with auto-navigation between slots. Supports numeric filtering with disabled/invalid states.",
   "props": [
     {
       "name": "modelValue",

package/dist/doc/VJoyInputPassword/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyInputPassword",
   "displayName": "VJoyInputPassword",
+  "description": "Password input built on top of VJoyInput with built-in visibility toggle.",
   "props": [
     {
       "name": "invalid",
@@ -73,11 +74,13 @@
     },
     {
       "name": "name",
-      "type": "string",
+      "type": "string | undefined",
       "required": false,
       "default": "\"joy-input-password\"",
       "description": "",
-      "possibleValues": null
+      "possibleValues": [
+        "string"
+      ]
     },
     {
       "name": "modelValue",

package/dist/doc/VJoyLabel/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyLabel",
   "displayName": "VJoyLabel",
+  "description": "A flexible form label component with enhanced functionality for complex form layouts. Features size variants, required/optional indicators, tooltip support, and legend text capabilities. Supports both label and legend tag rendering for different form contexts with integrated accessibility features and consistent styling across the design system. All native attributes are not declared as Vue component properties. But the actual label tag inherits from every attribute you pass.",
   "props": [
     {
       "name": "size",

package/dist/doc/VJoyLink/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyLink",
   "displayName": "VJoyLink",
+  "description": "Simple link component that should adapt its style depending on the context. Could be a button if **href** prop is undefined (add a **type** prop if needed).",
   "props": [
     {
       "name": "color",

package/dist/doc/VJoyListItem/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyListItem",
   "displayName": "VJoyListItem",
+  "description": "A structured list item component for creating consistent, interactive list entries. Features left and right content areas, optional icon support, hover states, and click handling. Perfect for data lists, navigation items, and content cards where consistent spacing and interactive feedback are essential for user experience.",
   "props": [
     {
       "name": "icon",

package/dist/doc/VJoyMenu/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyMenu",
   "displayName": "VJoyMenu",
+  "description": "A navigation menu component for creating accessible menu lists with keyboard navigation support. Works with VJoyMenuItem components to build complex navigation structures with icons, status indicators, and various link types. Features proper ARIA attributes, selection states, and integration with routing systems for seamless navigation experiences. items property is deprecated. Please use VJoyMenuItem with default slot. Docs generation is broken for the VJoyMenuItem component. Here you have the props interface as workaround. ```ts interface IJoyMenuItem { label: string; icon?: TJoyIconsNames; current?: boolean; disabled?: boolean; status?: TJoyIconsNames; statusColor?: TJoyIconsColors; type?: Component | 'a' | 'button'; linkProps?: ComponentProps<T>; } ```",
   "props": [
     {
       "name": "items",

package/dist/doc/VJoyMenuItem/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyMenuItem",
   "displayName": "VJoyMenuItem",
+  "description": "",
   "props": [
     {
       "name": "label",

package/dist/doc/VJoyMultiCheckbox/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyMultiCheckbox",
   "displayName": "VJoyMultiCheckbox",
+  "description": "A multi-selection checkbox group component for handling arrays of selected values. Simplifies multi-selection scenarios by managing checkbox states and array manipulation automatically. Features integrated labeling, fieldset structure for accessibility, and customizable checkbox content through slots. Perfect for filtering interfaces and bulk selection operations.",
   "props": [
     {
       "name": "options",

package/dist/doc/VJoyPagination/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyPagination",
   "displayName": "VJoyPagination",
+  "description": "A complete pagination component for navigating through large datasets with proper accessibility support. Features automatic page number calculation, gap handling for large page counts, customizable navigation arrows, and router integration support through slots. Includes proper ARIA attributes and keyboard navigation for an accessible pagination experience across different content types.",
   "props": [
     {
       "name": "currentPage",

package/dist/doc/VJoyPanel/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyPanel",
   "displayName": "VJoyPanel",
+  "description": "A structured content container component providing consistent layout patterns for cards and sections. Features header with title/subtitle/actions, main body content, footer actions, and loading overlay support. Includes flexible sizing, padding options, AI variant styling, and seamless integration with VJoyPanelSection for complex nested layouts and modular content organization.",
   "props": [
     {
       "name": "loading",

package/dist/doc/VJoyPanelSection/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyPanelSection",
   "displayName": "VJoyPanelSection",
+  "description": "",
   "props": [],
   "events": [],
   "slots": [

package/dist/doc/VJoyPasswordRequirement/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyPasswordRequirement",
   "displayName": "VJoyPasswordRequirement",
+  "description": "A component to display a password requirement status. This is meant to be displayed under a VJoyInput of type password.",
   "props": [
     {
       "name": "label",

package/dist/doc/VJoyProductTour/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyProductTour",
   "displayName": "VJoyProductTour",
+  "description": "An advanced guided tour component for creating interactive product demonstrations with element highlighting. Features intelligent positioning around target elements, multi-step tour progression, customizable banners and actions, and spotlight effects for drawing user attention. Includes SSR compatibility and proper z-index management through Teleport for seamless user onboarding and feature discovery experiences.",
   "props": [
     {
       "name": "icon",

package/dist/doc/VJoyProductTourTrigger/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyProductTourTrigger",
   "displayName": "VJoyProductTourTrigger",
+  "description": "",
   "props": [
     {
       "name": "productTour",

package/dist/doc/VJoyProgressBar/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyProgressBar",
   "displayName": "VJoyProgressBar",
+  "description": "A visual progress indicator component for displaying completion status with percentage or step-based progress. Features multiple color variants for different semantic meanings (success, warning, error), optional label display, and dual mode support (percentage-based or step-based calculations). Perfect for indicating task completion, loading states, and multi-step process progress with clear visual feedback.",
   "props": [
     {
       "name": "color",

package/dist/doc/VJoyRadio/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyRadio",
   "displayName": "VJoyRadio",
+  "description": "",
   "props": [
     {
       "name": "invalid",

package/dist/doc/VJoyRadioGroup/metadata.json

@@ -1,6 +1,7 @@
 {
   "name": "JoyRadioGroup",
   "displayName": "VJoyRadioGroup",
+  "description": "A container component for organizing radio button groups with proper fieldset structure and accessibility. Features horizontal and vertical layout options, legend support for group labeling, and seamless integration with VJoyRadio components. Provides proper ARIA attributes and form association for accessible single-choice selection interfaces with consistent spacing and visual organization. Use the same v-model for each `VJoyRadio` (modelValue). Create a ref for it.",
   "props": [
     {
       "name": "direction",