@maltjoy/mcp-server 0.3.2 → 0.4.0

package/dist/doc/VJoySelect/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoySelect",
   "displayName": "VJoySelect",
-  "description": "A styled select dropdown component with integrated labeling. Features multiple size variants, disabled and invalid states, and flexible option rendering. Supports both inline label props and external VJoyLabel component usage.",
+  "description": "A styled select dropdown component with integrated labeling.\nFeatures multiple size variants, disabled and invalid states, and flexible option rendering.\nSupports both inline label props and external VJoyLabel component usage.",
+  "category": "Forms",
   "props": [
     {
       "name": "invalid",
@@ -48,6 +49,17 @@
         "true"
       ]
     },
+    {
+      "name": "requiredMark",
+      "type": "boolean | undefined",
+      "required": false,
+      "default": "false",
+      "description": "",
+      "possibleValues": [
+        "false",
+        "true"
+      ]
+    },
     {
       "name": "modelValue",
       "type": "string | number | null | undefined",
@@ -60,17 +72,6 @@
         "number"
       ]
     },
-    {
-      "name": "requiredMark",
-      "type": "boolean | undefined",
-      "required": false,
-      "default": "false",
-      "description": "",
-      "possibleValues": [
-        "false",
-        "true"
-      ]
-    },
     {
       "name": "label",
       "type": "string | undefined",
@@ -98,15 +99,6 @@
         "string"
       ]
     },
-    {
-      "name": "ariaLabel",
-      "type": "string | undefined",
-      "required": false,
-      "description": "aria-label is available only if 'label' property is undefined *",
-      "possibleValues": [
-        "string"
-      ]
-    },
     {
       "name": "labelSize",
       "type": "TJoyLabelSizes | undefined",
@@ -126,6 +118,15 @@
       "possibleValues": [
         "string"
       ]
+    },
+    {
+      "name": "ariaLabel",
+      "type": "string | undefined",
+      "required": false,
+      "description": "aria-label is available only if 'label' property is undefined *",
+      "possibleValues": [
+        "string"
+      ]
     }
   ],
   "events": [
@@ -167,13 +168,13 @@
       "isMethod": false
     },
     {
-      "name": "modelValue",
-      "type": "string | number | null",
+      "name": "requiredMark",
+      "type": "boolean",
       "isMethod": false
     },
     {
-      "name": "requiredMark",
-      "type": "boolean",
+      "name": "modelValue",
+      "type": "string | number | null",
       "isMethod": false
     },
     {
@@ -192,22 +193,22 @@
       "isMethod": false
     },
     {
-      "name": "onUpdate:modelValue",
-      "type": "((value: string) => any) | undefined",
-      "isMethod": true
+      "name": "labelSize",
+      "type": "TJoyLabelSizes | undefined",
+      "isMethod": false
     },
     {
-      "name": "ariaLabel",
+      "name": "optionalLabel",
       "type": "string | undefined",
       "isMethod": false
     },
     {
-      "name": "labelSize",
-      "type": "TJoyLabelSizes | undefined",
-      "isMethod": false
+      "name": "onUpdate:modelValue",
+      "type": "((value: string) => any) | undefined",
+      "isMethod": true
     },
     {
-      "name": "optionalLabel",
+      "name": "ariaLabel",
       "type": "string | undefined",
       "isMethod": false
     },

package/dist/doc/VJoySelectableItem/metadata.json

@@ -2,6 +2,7 @@
   "name": "JoySelectableItem",
   "displayName": "VJoySelectableItem",
   "description": "",
+  "category": "Forms",
   "props": [
     {
       "name": "disabled",

package/dist/doc/VJoySelectableItemGroup/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoySelectableItemGroup",
   "displayName": "VJoySelectableItemGroup",
-  "description": "Basic full implementation example : ```html <template> <VJoySelectableItemGroup :options=\"options\" v-model:value=\"selectableModel\" /> <template> <script setup lang=\"ts\"> import {ref} from 'vue'; import {TJoySelectableItemOption} from '@maltjoy/core-vue'; const options = ref<TJoySelectableItemOption[]>([ {value: 'first-selectable-value', label: 'Option 1'}, {value: 'second-selectable-value', label: 'Option 2'}, {value: 'third-selectable-value', label: 'Option 3', {attrs: {...}}}, ]); // Use any type you prefer here, depending on what the backend is sending to you const selectableModel = ref(['second-selectable-value']); </script> ``` > When passing the `options` property, you can include both `value` and `label` properties to each option. > But if it's simpler to use other key names, you can use `valueKey` and `labelKey` properties from `VJoySelectableItemGroup` to define the keys you prefer. > > You will have to deal with the typings by yourself, by creating a mix of interfaces or using satifies with type `TJoySelectableItemOption` depending on your cases. > > Example: `satisfies (TJoySelectableItemOption & Record<string, unknown>)[]`",
+  "description": "Basic full implementation example :\n\n```html\n\n <template>\n     <VJoySelectableItemGroup :options=\"options\" v-model:value=\"selectableModel\" />\n <template>\n\n<script setup lang=\"ts\">\n import {ref} from 'vue';\n import {TJoySelectableItemOption} from '@maltjoy/core-vue';\n\nconst options = ref<TJoySelectableItemOption[]>([\n  {value: 'first-selectable-value', label: 'Option 1'},\n  {value: 'second-selectable-value', label: 'Option 2'},\n  {value: 'third-selectable-value', label: 'Option 3', {attrs: {...}}},\n]); // Use any type you prefer here, depending on what the backend is sending to you\n\n\nconst selectableModel = ref(['second-selectable-value']);\n\n</script>\n```\n\n> When passing the `options` property, you can include both `value` and `label` properties to each option.\n> But if it's simpler to use other key names, you can use `valueKey` and `labelKey` properties from `VJoySelectableItemGroup` to define the keys you prefer.\n>\n> You will have to deal with the typings by yourself, by creating a mix of interfaces or using satifies with type `TJoySelectableItemOption` depending on your cases.\n>\n> Example: `satisfies (TJoySelectableItemOption & Record<string, unknown>)[]`",
+  "category": "Forms",
   "props": [
     {
       "name": "options",

package/dist/doc/VJoySeparator/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoySeparator",
   "displayName": "VJoySeparator",
-  "description": "A visual content separator component with text labeling capabilities for organizing interface sections. Features customizable text content, multiple size options, and styled horizontal lines for improved visual hierarchy. Enhanced version of the HTML hr element with better styling control and integrated text display for clearer content separation and section identification.",
+  "description": "A visual content separator component with text labeling capabilities for organizing interface sections.\nFeatures customizable text content, multiple size options, and styled horizontal lines for improved\nvisual hierarchy. Enhanced version of the HTML hr element with better styling control and\nintegrated text display for clearer content separation and section identification.",
+  "category": "View",
   "props": [
     {
       "name": "size",

package/dist/doc/VJoySnackbar/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoySnackbar",
   "displayName": "VJoySnackbar",
-  "description": "This component should not be directly used. To display it, please use the pushVJoySnackbar service : ```typescript import {pushVJoySnackbar} from '@maltjoy/core-vue'; function yourFunction() { pushVJoySnackbar({ props: { // at least message is mandatory message: 'Your message' } }); } ``` If you need to listen  to events fired by the component, you can actually grab the event bus : ```typescript import {pushVJoySnackbar} from '@maltjoy/core-vue'; function yourFunction() { const {snackbarEventBus} = pushVJoySnackbar({ props: { // at least message is mandatory message: 'Your message' } }); snackbarEventBus.on('snackbar:hide', () => { // do what you want, and don't forget to unregister the listener on component destroy }); } ``` On the other hand, if you need to access the component instance, you can grab it as well ```typescript import {pushVJoySnackbar} from '@maltjoy/core-vue'; function yourFunction() { const {snackbarApp} = pushVJoySnackbar({ props: { // at least message is mandatory message: 'Your message' } }); } ```",
+  "description": "This component should not be directly used. To display it, please use the pushVJoySnackbar service :\n\n```typescript\nimport {pushVJoySnackbar} from '@maltjoy/core-vue';\n\nfunction yourFunction() {\n   pushVJoySnackbar({\n      props: {\n        // at least message is mandatory\n        message: 'Your message'\n      }\n   });\n}\n```\n\nIf you need to listen  to events fired by the component, you can actually grab the event bus :\n\n```typescript\nimport {pushVJoySnackbar} from '@maltjoy/core-vue';\n\nfunction yourFunction() {\n   const {snackbarEventBus} = pushVJoySnackbar({\n      props: {\n        // at least message is mandatory\n        message: 'Your message'\n      }\n   });\n\n   snackbarEventBus.on('snackbar:hide', () => {\n      // do what you want, and don't forget to unregister the listener on component destroy\n   });\n}\n```\n\nOn the other hand, if you need to access the component instance, you can grab it as well\n\n```typescript\nimport {pushVJoySnackbar} from '@maltjoy/core-vue';\n\nfunction yourFunction() {\n   const {snackbarApp} = pushVJoySnackbar({\n      props: {\n        // at least message is mandatory\n        message: 'Your message'\n      }\n   });\n\n}\n```",
+  "category": "Overlays",
   "props": [
     {
       "name": "frozen",

package/dist/doc/VJoySpinner/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoySpinner",
   "displayName": "VJoySpinner",
-  "description": "A simple animated loading spinner component for indicating processing or loading states. Features customizable color variants to match different contexts and design requirements. Lightweight and performant with CSS-based animations, perfect for buttons, forms, and content areas that need visual loading feedback.",
+  "description": "A simple animated loading spinner component for indicating processing or loading states.\nFeatures customizable color variants to match different contexts and design requirements.\nLightweight and performant with CSS-based animations, perfect for buttons, forms,\nand content areas that need visual loading feedback.",
+  "category": "Loader",
   "props": [
     {
       "name": "color",

package/dist/doc/VJoyStep/metadata.json

@@ -2,6 +2,7 @@
   "name": "JoyStep",
   "displayName": "VJoyStep",
   "description": "",
+  "category": "View",
   "props": [
     {
       "name": "size",

package/dist/doc/VJoyStepper/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoyStepper",
   "displayName": "VJoyStepper",
-  "description": "A progress stepper component for visualizing multi-step processes and user workflows. Manages a collection of VJoyStep components with support for main steps and sub-steps for granular progress tracking. Features automatic step state management (completed, current, upcoming), visual progress indicators, and flexible step sizing. Perfect for onboarding flows, form wizards, and guided processes. See **VJoyStep** stories for properties related to `VJoyStepper` children",
+  "description": "A progress stepper component for visualizing multi-step processes and user workflows.\nManages a collection of VJoyStep components with support for main steps and sub-steps for granular progress tracking.\nFeatures automatic step state management (completed, current, upcoming), visual progress indicators,\nand flexible step sizing. Perfect for onboarding flows, form wizards, and guided processes.\n\nSee **VJoyStep** stories for properties related to `VJoyStepper` children",
+  "category": "View",
   "props": [
     {
       "name": "subStep",

package/dist/doc/VJoyTab/metadata.json

@@ -2,6 +2,7 @@
   "name": "JoyTab",
   "displayName": "VJoyTab",
   "description": "",
+  "category": "Navigation",
   "props": [
     {
       "name": "notification",

package/dist/doc/VJoyTabs/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoyTabs",
   "displayName": "VJoyTabs",
-  "description": "A tabbed navigation component for organizing content into switchable panels with proper accessibility support. Features scrollable tab headers for overflow management, notification badges, custom header content slots, and both local navigation and external link support. Includes automatic tab selection management and event handling for seamless content organization and user experience.",
+  "description": "A tabbed navigation component for organizing content into switchable panels with proper accessibility support.\nFeatures scrollable tab headers for overflow management, notification badges, custom header content slots,\nand both local navigation and external link support. Includes automatic tab selection management\nand event handling for seamless content organization and user experience.",
+  "category": "Navigation",
   "props": [
     {
       "name": "selectedTab",

package/dist/doc/VJoyTag/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoyTag",
   "displayName": "VJoyTag",
-  "description": "A versatile tag component for labeling, categorizing, and interactive content organization. Features multiple variants and sizes, removable functionality, drag visual indicators, selectable states, link styling, and AI-specific variants. Supports click handlers, removal events, and flexible content through slots for complex tag implementations.",
+  "description": "A versatile tag component for labeling, categorizing, and interactive content organization.\nFeatures multiple variants and sizes, removable functionality, drag visual indicators,\nselectable states, link styling, and AI-specific variants. Supports click handlers,\nremoval events, and flexible content through slots for complex tag implementations.",
+  "category": "View",
   "props": [
     {
       "name": "label",
@@ -181,13 +182,13 @@
       "isMethod": false
     },
     {
-      "name": "value",
-      "type": "string | number",
+      "name": "disabled",
+      "type": "boolean",
       "isMethod": false
     },
     {
-      "name": "disabled",
-      "type": "boolean",
+      "name": "value",
+      "type": "string | number",
       "isMethod": false
     },
     {

package/dist/doc/VJoyTagsInput/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoyTagsInput",
   "displayName": "VJoyTagsInput",
-  "description": "A specialized form input component for managing collections of tags with dynamic add/remove functionality. Features email validation, duplication detection, multi-line responsive layout, and comprehensive error handling. Integrates seamlessly with VJoyTag components for consistent tag display and provides flexible labeling options for complex form scenarios with collections management. > **To render the component with default model, pass it an array of values.** > **Storybook code snippet is broken at the moment.**",
+  "description": "A specialized form input component for managing collections of tags with dynamic add/remove functionality.\nFeatures email validation, duplication detection, multi-line responsive layout, and comprehensive error handling.\nIntegrates seamlessly with VJoyTag components for consistent tag display and provides flexible labeling\noptions for complex form scenarios with collections management.\n\n> **To render the component with default model, pass it an array of values.**\n> **Storybook code snippet is broken at the moment.**",
+  "category": "Forms",
   "props": [
     {
       "name": "name",

package/dist/doc/VJoyTagsList/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoyTagsList",
   "displayName": "VJoyTagsList",
-  "description": "**VJoyTagsList** is a simple wrapper for **VJoyTag** allowing you to create a list with pre-defined style. If it is more flexible for you to directly use **VJoyTag** don't hesitate to get rid of this parent component! Instead you can wrap your **VJoyTag** list in a **VJoyWrapper** for instance",
+  "description": "**VJoyTagsList** is a simple wrapper for **VJoyTag** allowing you to create a list with pre-defined style.\nIf it is more flexible for you to directly use **VJoyTag** don't hesitate to get rid of this parent component!\nInstead you can wrap your **VJoyTag** list in a **VJoyWrapper** for instance",
+  "category": "View",
   "props": [
     {
       "name": "variant",
@@ -22,6 +23,18 @@
         "ai-secondary"
       ]
     },
+    {
+      "name": "align",
+      "type": "TJoyTagsListAlign | undefined",
+      "required": false,
+      "default": "\"left\"",
+      "description": "",
+      "possibleValues": [
+        "left",
+        "right",
+        "center"
+      ]
+    },
     {
       "name": "removable",
       "type": "boolean | undefined",
@@ -44,18 +57,6 @@
         "true"
       ]
     },
-    {
-      "name": "align",
-      "type": "TJoyTagsListAlign | undefined",
-      "required": false,
-      "default": "\"left\"",
-      "description": "",
-      "possibleValues": [
-        "left",
-        "right",
-        "center"
-      ]
-    },
     {
       "name": "tags",
       "type": "TJoyTagsList | undefined",
@@ -823,18 +824,18 @@
       "isMethod": false
     },
     {
-      "name": "removable",
-      "type": "boolean",
+      "name": "align",
+      "type": "TJoyTagsListAlign",
       "isMethod": false
     },
     {
-      "name": "selectable",
+      "name": "removable",
       "type": "boolean",
       "isMethod": false
     },
     {
-      "name": "align",
-      "type": "TJoyTagsListAlign",
+      "name": "selectable",
+      "type": "boolean",
       "isMethod": false
     },
     {

package/dist/doc/VJoyTemplate/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoyTemplate",
   "displayName": "VJoyTemplate",
-  "description": "A comprehensive page layout template component providing structured slots for complete page organization. Features header area with title/subtitle/actions, main content with optional sidebar, back navigation support, loading overlay integration, and decorative background shapes. Perfect for creating consistent page layouts with flexible content positioning and professional presentation across the application.",
+  "description": "A comprehensive page layout template component providing structured slots for complete page organization.\nFeatures header area with title/subtitle/actions, main content with optional sidebar, back navigation support,\nloading overlay integration, and decorative background shapes. Perfect for creating consistent page layouts\nwith flexible content positioning and professional presentation across the application.",
+  "category": "Layout",
   "props": [
     {
       "name": "loading",

package/dist/doc/VJoyText/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoyText",
   "displayName": "VJoyText",
-  "description": "This component is directly dependant from `@maltjoy/css` package, a CSS class utils package built on top of `@maltjoy/themes` that contains our design tokens. **Reminder**: values ending with 50 have same size but are bold. See \"Fonts\" section here https://doc.malt.tech/joy-storybook/?path=/docs/css-framework--docs#advanced-fonts **Warning** If you use long text within a VJoyWrapper, you'll have to set a max-width to prevent the text from breaking the layout.",
+  "description": "This component is directly dependant from `@maltjoy/css` package, a CSS class utils package built on top of `@maltjoy/themes` that contains our design tokens.\n\n**Reminder**: values ending with 50 have same size but are bold.\n\nSee \"Fonts\" section here https://doc.malt.tech/joy-storybook/?path=/docs/css-framework--docs#advanced-fonts\n\n**Warning** If you use long text within a VJoyWrapper, you'll have to set a max-width to prevent the text from breaking the layout.",
+  "category": "View",
   "props": [
     {
       "name": "tagName",

package/dist/doc/VJoyTextarea/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoyTextarea",
   "displayName": "VJoyTextarea",
-  "description": "A comprehensive multi-line text input component with advanced features for form interfaces. Features autogrow functionality, character count validation, min/max length constraints, integrated labeling, and form validation support. Includes visual feedback for length limits, disabled states, and seamless integration with VJoyLabel for flexible form layouts.",
+  "description": "A comprehensive multi-line text input component with advanced features for form interfaces.\nFeatures autogrow functionality, character count validation, min/max length constraints,\nintegrated labeling, and form validation support. Includes visual feedback for length limits,\ndisabled states, and seamless integration with VJoyLabel for flexible form layouts.",
+  "category": "Forms",
   "props": [
     {
       "name": "invalid",
@@ -37,17 +38,19 @@
       ]
     },
     {
-      "name": "modelValue",
-      "type": "string | undefined",
+      "name": "labelSize",
+      "type": "TJoyLabelSizes | undefined",
       "required": false,
-      "default": "\"\"",
+      "default": "\"medium\"",
       "description": "",
       "possibleValues": [
-        "string"
+        "medium",
+        "large",
+        "small"
       ]
     },
     {
-      "name": "autofocus",
+      "name": "requiredMark",
       "type": "boolean | undefined",
       "required": false,
       "default": "false",
@@ -58,19 +61,17 @@
       ]
     },
     {
-      "name": "labelSize",
-      "type": "TJoyLabelSizes | undefined",
+      "name": "modelValue",
+      "type": "string | undefined",
       "required": false,
-      "default": "\"medium\"",
+      "default": "\"\"",
       "description": "",
       "possibleValues": [
-        "medium",
-        "large",
-        "small"
+        "string"
       ]
     },
     {
-      "name": "requiredMark",
+      "name": "autofocus",
       "type": "boolean | undefined",
       "required": false,
       "default": "false",
@@ -193,22 +194,22 @@
       "isMethod": false
     },
     {
-      "name": "modelValue",
-      "type": "string",
+      "name": "labelSize",
+      "type": "TJoyLabelSizes",
       "isMethod": false
     },
     {
-      "name": "autofocus",
+      "name": "requiredMark",
       "type": "boolean",
       "isMethod": false
     },
     {
-      "name": "labelSize",
-      "type": "TJoyLabelSizes",
+      "name": "modelValue",
+      "type": "string",
       "isMethod": false
     },
     {
-      "name": "requiredMark",
+      "name": "autofocus",
       "type": "boolean",
       "isMethod": false
     },
@@ -237,16 +238,16 @@
       "type": "string | undefined",
       "isMethod": false
     },
-    {
-      "name": "onUpdate:modelValue",
-      "type": "((value: string) => any) | undefined",
-      "isMethod": true
-    },
     {
       "name": "optionalLabel",
       "type": "string | undefined",
       "isMethod": false
     },
+    {
+      "name": "onUpdate:modelValue",
+      "type": "((value: string) => any) | undefined",
+      "isMethod": true
+    },
     {
       "name": "minlengthLabel",
       "type": "string | undefined",

package/dist/doc/VJoyTitleBrand/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoyTitleBrand",
   "displayName": "VJoyTitleBrand",
-  "description": "A branded title component for creating visually striking headings with highlighted text segments. Features flexible HTML tag rendering (h1-h6, p) and automatic styling for span elements with rotated background highlights. Perfect for page headers, dialog titles, and marketing content where brand emphasis is important for visual hierarchy and user attention. This component can be used in `VJoyTemplate` or `VJoyDialog`.",
+  "description": "A branded title component for creating visually striking headings with highlighted text segments.\nFeatures flexible HTML tag rendering (h1-h6, p) and automatic styling for span elements with\nrotated background highlights. Perfect for page headers, dialog titles, and marketing content\nwhere brand emphasis is important for visual hierarchy and user attention.\n\nThis component can be used in `VJoyTemplate` or `VJoyDialog`.",
+  "category": "View",
   "props": [
     {
       "name": "tag",

package/dist/doc/VJoyToggle/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoyToggle",
   "displayName": "VJoyToggle",
-  "description": "A form toggle switch component for binary on/off state management with visual feedback. Features multiple variants including default (with smile icon) and admin (with eye icon), integrated labeling, disabled states, and proper accessibility attributes. Provides smooth animations and clear visual indicators for user interactions in forms and settings interfaces.",
+  "description": "A form toggle switch component for binary on/off state management with visual feedback.\nFeatures multiple variants including default (with smile icon) and admin (with eye icon), integrated labeling, disabled states, and proper accessibility attributes.\nProvides smooth animations and clear visual indicators for user interactions in forms and settings interfaces.",
+  "category": "Forms",
   "props": [
     {
       "name": "invalid",
@@ -37,24 +38,24 @@
       ]
     },
     {
-      "name": "value",
-      "type": "string | undefined",
+      "name": "disabled",
+      "type": "boolean | undefined",
       "required": false,
-      "default": "\"on\"",
+      "default": "false",
       "description": "",
       "possibleValues": [
-        "string"
+        "false",
+        "true"
       ]
     },
     {
-      "name": "disabled",
-      "type": "boolean | undefined",
+      "name": "value",
+      "type": "string | undefined",
       "required": false,
-      "default": "false",
+      "default": "\"on\"",
       "description": "",
       "possibleValues": [
-        "false",
-        "true"
+        "string"
       ]
     },
     {
@@ -137,13 +138,13 @@
       "isMethod": false
     },
     {
-      "name": "value",
-      "type": "string",
+      "name": "disabled",
+      "type": "boolean",
       "isMethod": false
     },
     {
-      "name": "disabled",
-      "type": "boolean",
+      "name": "value",
+      "type": "string",
       "isMethod": false
     },
     {

package/dist/doc/VJoyTooltip/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoyTooltip",
   "displayName": "VJoyTooltip",
-  "description": "A floating tooltip overlay component for providing contextual information and help text. Features intelligent positioning with automatic placement adjustments, support for both hover and click triggers, and flexible content through text props or HTML slots. Uses Teleport for proper z-index management and includes proper accessibility attributes with ARIA support for screen readers.",
+  "description": "A floating tooltip overlay component for providing contextual information and help text.\nFeatures intelligent positioning with automatic placement adjustments, support for both hover and click triggers,\nand flexible content through text props or HTML slots. Uses Teleport for proper z-index management\nand includes proper accessibility attributes with ARIA support for screen readers.",
+  "category": "Overlays",
   "props": [
     {
       "name": "show",

package/dist/doc/VJoyUserCard/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoyUserCard",
   "displayName": "VJoyUserCard",
-  "description": "A comprehensive user profile card component for displaying user information in a structured layout. Features integrated avatar display, name/subtitle presentation, rating stars support, and optional link functionality for navigation. Includes multiple customization slots for avatar, title, subtitle, and rating components, with full attribute inheritance for link behavior and accessibility.",
+  "description": "A comprehensive user profile card component for displaying user information in a structured layout.\nFeatures integrated avatar display, name/subtitle presentation, rating stars support, and optional\nlink functionality for navigation. Includes multiple customization slots for avatar, title, subtitle,\nand rating components, with full attribute inheritance for link behavior and accessibility.",
+  "category": "View",
   "props": [
     {
       "name": "fullName",

package/dist/doc/VJoyWalkthrough/metadata.json

@@ -1,7 +1,8 @@
 {
   "name": "JoyWalkthrough",
   "displayName": "VJoyWalkthrough",
-  "description": "A comprehensive guided tour component for creating interactive onboarding experiences and feature walkthroughs. Features collapsible modal interface with trigger button, progress tracking with visual indicators, mobile-responsive design, and flexible content slots for illustrations, descriptions, and custom actions. Uses Teleport for proper z-index management and includes accessibility support for guided user experiences. > ⚠ The use of **disableTeleport** property is only for documentation purpose. You won't need it in production.",
+  "description": "A comprehensive guided tour component for creating interactive onboarding experiences and feature walkthroughs.\nFeatures collapsible modal interface with trigger button, progress tracking with visual indicators, mobile-responsive\ndesign, and flexible content slots for illustrations, descriptions, and custom actions. Uses Teleport for proper\nz-index management and includes accessibility support for guided user experiences.\n\n> ⚠ The use of **disableTeleport** property is only for documentation purpose. You won't need it in production.",
+  "category": "Overlays",
   "props": [
     {
       "name": "open",

package/dist/doc/VJoyWalkthroughTrigger/metadata.json

@@ -2,6 +2,7 @@
   "name": "JoyWalkthroughTrigger",
   "displayName": "VJoyWalkthroughTrigger",
   "description": "",
+  "category": "Overlays",
   "props": [
     {
       "name": "icon",