@maz-ui/mcp 5.1.0-beta.2 → 5.1.1

package/dist/cli.mjs

@@ -3,7 +3,7 @@ import 'node:path';
 import 'node:util';
 import '@maz-ui/node';
 import '@maz-ui/utils/helpers/getErrorMessage';
-export { H as HELP, m as main, i as runCli, k as runInit, n as runReview } from './shared/mcp.BFjMMLqy.mjs';
+export { H as HELP, m as main, i as runCli, k as runInit, n as runReview } from './shared/mcp.cBFLVChV.mjs';
 import 'node:fs';
 import 'node:url';
 import 'zod';

package/dist/index.mjs

@@ -1,4 +1,4 @@
-export { D as DocSearch, K as Knowledge, T as TOOLS, b as buildInstructions, c as countBySeverity, a as createContext, d as createMazUiMcpServer, f as filterBySeverity, e as findProjectMazUi, g as formatFindings, l as loadKnowledge, m as main, r as reviewCode, h as reviewFiles, i as runCli, s as searchIcons, j as startStdioServer } from './shared/mcp.BFjMMLqy.mjs';
+export { D as DocSearch, K as Knowledge, T as TOOLS, b as buildInstructions, c as countBySeverity, a as createContext, d as createMazUiMcpServer, f as filterBySeverity, e as findProjectMazUi, g as formatFindings, l as loadKnowledge, m as main, r as reviewCode, h as reviewFiles, i as runCli, s as searchIcons, j as startStdioServer } from './shared/mcp.cBFLVChV.mjs';
 export { setupAgents } from '@maz-ui/node';
 import 'node:buffer';
 import 'node:path';

package/dist/shared/{mcp.BFjMMLqy.mjs → mcp.cBFLVChV.mjs}

@@ -1398,11 +1398,12 @@ function reportUnknownProp(name, offset, component, context) {
   const near = propSuggestions(name, component, { containing: !passthrough });
   if (passthrough && near.length === 0)
     return;
+  const names = near.map((entry) => entry === "modelValue" ? "`v-model`" : `\`${toKebab(entry)}\``).join(" or ");
   context.report({
     rule: "unknown-prop",
     severity: "warning",
-    message: `${component.name} has no prop \`${name}\`${passthrough ? "" : ": it will only be forwarded as an HTML attribute"}.`,
-    suggestion: near.length > 0 ? `Did you mean ${near.map((entry) => entry === "modelValue" ? "`v-model`" : `\`${toKebab(entry)}\``).join(" or ")}? Check \`get_component_api({ names: ["${component.name}"] })\`.` : `Check the real API with \`get_component_api({ names: ["${component.name}"] })\`.`
+    message: passthrough ? `\`${name}\` is not a prop of ${component.name}: it is only forwarded as an HTML attribute (the component may not use it).` : `${component.name} has no prop \`${name}\`: it will only be forwarded as an HTML attribute.`,
+    suggestion: near.length > 0 ? `Did you mean ${names}? Check \`get_component_api({ names: ["${component.name}"] })\`.` : `Check the real API with \`get_component_api({ names: ["${component.name}"] })\`.`
   }, offset);
 }
 function checkModel(directive, component, context) {
@@ -1512,15 +1513,15 @@ function checkMazComponent(element, component, source, context) {
 }
 const SVG_SHAPES = /* @__PURE__ */ new Set(["path", "circle", "rect", "polyline", "polygon", "line", "ellipse"]);
 const ICON_MAX_VIEWBOX = 32;
-function svgDescendants(element) {
-  return element.children.filter(isElement).flatMap((child) => [child, ...svgDescendants(child)]);
+function descendantsOf(element) {
+  return element.children.filter(isElement).flatMap((child) => [child, ...descendantsOf(child)]);
 }
 function isAnimated(element) {
   const classes = staticAttribute(element, "class")?.value?.content ?? "";
   return element.tag.startsWith("animate") || /\banimate-|\[animation/.test(classes) || element.props.some((prop) => prop.name.startsWith("stroke-dash"));
 }
 function isIconLikeSvg(svg) {
-  const descendants = svgDescendants(svg);
+  const descendants = descendantsOf(svg);
   if (!descendants.some((child) => SVG_SHAPES.has(child.tag)))
     return false;
   const viewBox = staticAttribute(svg, "viewBox")?.value?.content.trim().split(/[\s,]+/).map(Number);
@@ -1528,6 +1529,32 @@ function isIconLikeSvg(svg) {
     return false;
   return ![svg, ...descendants].some((node) => isAnimated(node) || node !== svg && node.props.some((prop) => prop.type === NodeTypes.DIRECTIVE));
 }
+const LAYOUT_TAGS = /* @__PURE__ */ new Set(["div", "p", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "li", "dl", "img", "picture", "video", "canvas", "section", "article", "header", "footer", "figure", "table"]);
+const NEUTRAL_COMPONENTS = /* @__PURE__ */ new Set(["Transition", "TransitionGroup", "KeepAlive", "Teleport", "Suspense", "ClientOnly", "NuxtLink", "RouterLink"]);
+function contentOf(element) {
+  return element.children.filter((child) => child.type !== NodeTypes.COMMENT && !(child.type === NodeTypes.TEXT && child.content.trim() === ""));
+}
+function isIconOrDecoration(element, context) {
+  const pascal = toPascal(element.tag).replace(/^Lazy/, "");
+  return element.tag === "svg" || element.tag === "component" || context.knowledge.iconNames.has(pascal) || pascal.endsWith("Icon") || ["i", "span"].includes(element.tag) && contentOf(element).length === 0;
+}
+function isComponentTag(element) {
+  return /^[A-Z]/.test(element.tag) || element.tag.includes("-");
+}
+function isCompositeButton(button, context) {
+  const descendants = descendantsOf(button);
+  if (descendants.some((node) => LAYOUT_TAGS.has(node.tag)))
+    return true;
+  if (descendants.some((node) => isComponentTag(node) && !NEUTRAL_COMPONENTS.has(toPascal(node.tag)) && !isIconOrDecoration(node, context)))
+    return true;
+  return hasStackedLabels(button, context);
+}
+function hasStackedLabels(element, context) {
+  const content = contentOf(element);
+  const labels = content.filter((child) => isElement(child) && !isIconOrDecoration(child, context));
+  const isSentence = content.some((child) => !isElement(child));
+  return labels.length >= 2 && !isSentence || labels.some((label) => hasStackedLabels(label, context));
+}
 function checkNativeElement(element, context) {
   if (element.tag === "svg" && isIconLikeSvg(element)) {
     context.report({
@@ -1538,6 +1565,8 @@ function checkNativeElement(element, context) {
     }, element.loc.start.offset);
     return;
   }
+  if (element.tag === "button" && (contentOf(element).length === 0 || isCompositeButton(element, context)))
+    return;
   const replacement = nativeReplacement(element.tag, staticAttribute(element, "type")?.value?.content);
   if (replacement) {
     context.report({

package/docs/components/maz-dialog-confirm.md

@@ -174,10 +174,10 @@ type Size = 'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 - `message` (`string`): Dialog message displayed in the body.
 - `reject-text` (`string`): Text for the reject button - will be applied only if buttons props is not provided.
 - `reject-props` (`(Omit<MazBtnProps, "type"> & MazDialogConfirmButton)`, default: `{ color: 'destructive', type: 'reject', text: 'Cancel', response: 'reject' }`): Props for the reject button - will be applied only if buttons props is not provided.
-- `hide-reject-button` (`boolean`, default: `true`): Whether to display the reject button.
+- `hide-reject-button` (`boolean`, default: `false`): Hide the reject button (unset: the value of `useMazDialogConfirm().data`, else shown).
 - `accept-text` (`string`): Text for the accept button.
 - `accept-props` (`(Omit<MazBtnProps, "type"> & MazDialogConfirmButton)`, default: `{ color: 'success', type: 'accept', text: 'Confirm', response: 'accept' }`): Props for the accept button - will be applied only if buttons props is not provided.
-- `hide-accept-button` (`boolean`, default: `true`): Whether to display the accept button.
+- `hide-accept-button` (`boolean`, default: `false`): Hide the accept button (unset: the value of `useMazDialogConfirm().data`, else shown).
 - `buttons` (`MazDialogConfirmButton[]`): Buttons to display in the footer.
 - `model-value` (`boolean`): Modal's model value.
 - `hide-close-button` (`boolean`): Remove the close button in header.

package/docs/components/maz-link.md

@@ -130,7 +130,7 @@ If no `to` or `href` is provided, the component will be a `button` by default. Y
 - `target` (`string`, default: `"_self"`): The target of the link. Values: `'_blank'`, `'_self'`, `'_parent'`, `'_top'` (non exhaustive).
 - `download` (`string`): The download of the link.
 - `rel` (`string`): The rel of the link.
-- `aria-label` (`string`): The aria-label of the link.
+- `aria-label` (`string`): The aria-label of the link (or of the button).
 - `underline` (`boolean`, default: `false`): Add an underline to the link.
 - `underline-hover` (`boolean`, default: `true`): Add an underline only on hover.
 - `auto-external` (`boolean`, default: `true`): Add an external icon to the link if target is '_blank'.

package/docs/components/maz-select-country.md

@@ -484,10 +484,10 @@ This ensures consistent internationalization across your application while provi
 - `required` (`boolean`): Make the input required in the form.
 - `placeholder` (`string`): The placeholder of the select.
 - `label` (`string`): The label of the select.
-- `search-function` (`((query: string, options: Option[]) => Option[] | undefined)`): Replace the default search function to provide a custom search function.
 - `transition` (`string`, default: `'scale-fade'`): The transition name of the panel list options.
 - `prefer-position` (`MazPopoverPreferPosition`, default: `'bottom-start'`): The prefer position of the list.
 - `fallback-position` (`MazPopoverFallbackPosition`, default: `'top-start'`): The fallback position of the list.
+- `search-function` (`((query: string, options: Option[]) => Option[] | undefined)`): Replace the default search function to provide a custom search function.
 - `top-label` (`string`): Static label displayed above the input field. Unlike the floating label, this remains fixed.
 - `autocomplete` (`string`, default: `'off'`): The autocomplete attribute of the input.
 - `option-value-key` (`string`, default: `"code"`): The key of the option value.

package/docs/composables/use-dialog.md

@@ -26,7 +26,8 @@ More info about [dialog plugin](../plugins/dialog.md) in its documentation
 
 ```vue
 <script lang="ts" setup>
-import { useDialog, useToast } from 'maz-ui/composables'
+import { useDialog } from 'maz-ui/composables/useDialog'
+import { useToast } from 'maz-ui/composables/useToast'
 
 const dialog = useDialog()
 

package/docs/ecosystem/icons/index.md

@@ -79,16 +79,16 @@ import { MazCheck, MazHeart, MazUser } from '@maz-ui/icons'
 
 <template>
   <div>
-    <MazCheck class="text-green-500" />
-    <MazUser class="w-6 h-6" />
-    <MazHeart class="text-red-500 hover:scale-110 transition-transform" />
+    <MazCheck class="text-success" />
+    <MazUser class="size-6" />
+    <MazHeart class="text-destructive hover:scale-110 transition-transform" />
   </div>
 </template>
 ```
 
 #### Lazy Icons
 
-Lazy icons are prefixed with `Lazy` and use `defineAsyncComponent` under the hood. Use them when you want to reduce your initial bundle size:
+Lazy icons use `defineAsyncComponent` under the hood. Use them when you want to reduce your initial bundle size. From the `lazy/` sub-paths they keep their name; from the `@maz-ui/icons` root (and with the resolver) they are prefixed with `Lazy` (`LazyMazCheck`):
 
 ```vue
 <script setup lang="ts">
@@ -99,9 +99,9 @@ import { MazUser } from '@maz-ui/icons/lazy/MazUser'
 
 <template>
   <div>
-    <LazyMazCheck class="text-green-500" />
-    <LazyMazUser class="w-6 h-6" />
-    <LazyMazHeart class="text-red-500 hover:scale-110 transition-transform" />
+    <MazCheck class="text-success" />
+    <MazUser class="size-6" />
+    <MazHeart class="text-destructive hover:scale-110 transition-transform" />
   </div>
 </template>
 ```
@@ -191,17 +191,17 @@ export default defineConfig({
     <!-- Static icons (eagerly loaded) -->
     <MazHome class="nav-icon" />
     <MazUser class="nav-icon" />
-    <MazSettings class="nav-icon" />
+    <MazCog6Tooth class="nav-icon" />
 
     <!-- Lazy icons (async loaded) - prefix with "Lazy" -->
-    <LazyMazLogout class="nav-icon" />
+    <LazyMazArrowRightStartOnRectangle class="nav-icon" />
   </div>
 </template>
 
 <style scoped>
 @reference "../../.vitepress/theme/main.css";
 .nav-icon {
-  @apply w-6 h-6 text-gray-600 hover:text-blue-500 transition-colors cursor-pointer;
+  @apply size-6 text-muted hover:text-primary transition-colors cursor-pointer;
 }
 </style>
 ```
@@ -250,9 +250,9 @@ import UserIcon from '@maz-ui/icons/svg/user.svg?component'
 
 <template>
   <div class="flex items-center gap-2">
-    <CheckIcon class="w-5 h-5 text-green-600" />
-    <UserIcon class="w-6 h-6 text-blue-500" />
-    <HeartIcon class="w-4 h-4 text-red-500 animate-pulse" />
+    <CheckIcon class="size-5 text-success" />
+    <UserIcon class="size-6 text-primary" />
+    <HeartIcon class="size-4 text-destructive animate-pulse" />
   </div>
 </template>
 ```
@@ -286,7 +286,7 @@ onMounted(async () => {
     <img src="@maz-ui/icons/svg/check.svg" alt="Check" class="w-6 h-6">
 
     <!-- Inline SVG with fetch -->
-    <div class="text-blue-500" v-html="checkSvg" />
+    <div class="text-primary" v-html="checkSvg" />
   </div>
 </template>
 ```
@@ -311,19 +311,19 @@ Icons inherit the current text color and can be styled like any other element:
     <MazStar class="text-2xl" />
 
     <!-- Colors -->
-    <MazHeart class="text-red-500" />
-    <MazLeaf class="text-green-600" />
-    <MazSky class="text-blue-400" />
+    <MazHeart class="text-destructive" />
+    <MazCheckCircle class="text-success" />
+    <MazSun class="text-warning" />
 
     <!-- Interactive states -->
-    <MazBtn class="hover:text-blue-500 transition-colors cursor-pointer" />
+    <MazStar class="hover:text-primary transition-colors cursor-pointer" />
 
     <!-- Animations -->
     <MazSpinner class="animate-spin" />
     <MazHeart class="hover:scale-110 transition-transform" />
 
     <!-- With background -->
-    <MazCheck class="p-2 bg-green-100 text-green-600 rounded-full" />
+    <MazCheck class="p-2 bg-success/15 text-success rounded-full" />
   </div>
 </template>
 ```
@@ -504,9 +504,9 @@ export function iconOptimizer(): Plugin {
 ```vue
 <template>
   <div class="flex items-center space-x-4">
-    <MazHome class="w-5 h-5 text-gray-500 hover:text-blue-500 transition-colors" />
-    <MazUser class="w-6 h-6 text-indigo-600" />
-    <MazSettings class="w-4 h-4 text-gray-400 hover:text-gray-600" />
+    <MazHome class="size-5 text-muted hover:text-primary transition-colors" />
+    <MazUser class="size-6 text-secondary" />
+    <MazCog6Tooth class="size-4 text-muted hover:text-foreground" />
   </div>
 </template>
 ```

package/docs/guide/ai-agents.md

@@ -180,7 +180,7 @@ The command exits with an error code when it finds errors (or more warnings than
 | `boolean-prop-string` | error | `disabled="false"` (a truthy string) |
 | `unknown-model`, `unknown-event`, `unknown-slot` | error | `v-model:foo`, `@clik`, `<template #captions>` |
 | `unknown-icon` | error | An icon that does not exist in `@maz-ui/icons` |
-| `prefer-maz-component` | warning | `<button>`, `<input>`, `<select>`, `<textarea>`, `<dialog>`... |
+| `prefer-maz-component` | warning | `<button>`, `<input>`, `<select>`, `<textarea>`, `<dialog>`... (a `<button>` that is a clickable card, with a layout, a component or a title and a subtitle, or an empty hit area, is left alone) |
 | `inline-svg` | warning | SVG icons written inline |
 | `prefer-ecosystem`, `prefer-utils` | warning / info | lodash, VueUse, toast, icon, tooltip, date picker... libraries that maz-ui already covers |
 | `theme-colors` | warning | Default Tailwind palette (`bg-blue-500`, `text-gray-600`, `bg-white`) |