@maz-ui/mcp 5.0.0-beta.5 → 5.0.0-beta.51

package/docs/src/guide/migration-v5.md

@@ -23,7 +23,7 @@ npx @maz-ui/upgrade ./ --dry-run
 npx @maz-ui/upgrade ./
 ```
 
-It rewrites: CSS subpath imports (`maz-ui/styles` → `maz-ui/style.css`), `left-icon`/`right-icon` → `start-icon`/`end-icon` (props, slots, `--has-*-icon` classes), `footer-align`/`variant` direction values, `color="background"` / `active-color="background"` → `surface`, `rounded-size="base"` → `md`, `--maz-background` / `--maz-border` CSS vars → `--maz-surface` / `--maz-divider`, `hsl(var(--maz-X))` collapse, Nuxt `injectMainCss` → `injectCss`, theme `strategy: 'hybrid'` → `'runtime'`, drops the removed theme options (`injectCriticalCSS`, `injectFullCSS`, `injectAllCSSOnServer`), and renames `colors.{light,dark}.background` → `surface` / `.border` → `divider` inside custom presets. It also bumps every `maz-ui` and `@maz-ui/*` entry in your `package.json` files to `^5.0.0` and runs the right `<pm> install` for you (detected from your lockfile — pnpm, yarn, bun, npm). Pass `--no-install` if you want to skip the install step.
+It handles the mechanical part of the migration (CSS subpath imports, prop renames, CSS var renames, the `MazAvatar` size scale fix, Nuxt config keys, custom preset color keys, and `package.json` version bumps)
 
 What it can't decide for you: the `MazIcon` API simplification (section 4), `MazBadge` numeric size mapping (section 9), `foundation.radius` → `scales.rounded.md` reshape (section 11) and `MazChart` `update-mode` defaults (section 8). Those are best handled with the MCP server below.
 
@@ -54,11 +54,11 @@ For Cursor, Windsurf, VS Code Copilot, Cline and Claude Desktop, see the [MCP gu
 
 3. **Apply the easy ones in batch.** The mechanical renames are safe to automate:
 
-   > Apply the codemod for sections 2, 3, 6 and 14 (CSS subpath, `rounded-size="base"`, `left-icon`/`right-icon`, Nuxt `injectMainCss`). Show me a diff before saving.
+   > Apply the codemod for "Required changes" sections 2, 3, 6 and 14 (CSS subpath, `rounded-size="base"`, `left-icon`/`right-icon`, Nuxt `injectMainCss`). Show me a diff before saving.
 
 4. **Discuss the judgment calls.** For sections that have more than a rename — `MazIcon` API, `MazChart` `update-mode`, theme preset reshape — let the assistant ask before rewriting:
 
-   > For sections 4, 8 and 10–12, do not patch automatically. Tell me which of my call sites are affected and propose options.
+   > For "Required changes" sections 4, 8 and 10–12, do not patch automatically. Tell me which of my call sites are affected and propose options.
 
 5. **Verify.** After patches:
 
@@ -83,7 +83,11 @@ The MCP server is read-only — it ships docs, not code edits — so the assista
 6. **`MazIcon` API simplified** — drop `name`, `path` and `src` props; use a single `icon` prop that accepts a Vue component, a URL/`data:` URI, or a raw SVG string.
 7. Rename **`left-icon` / `right-icon`** to **`start-icon` / `end-icon`** (and the matching slots / `--has-*-icon` classes) on `MazBtn`, `MazInput`, `MazLink`, `MazContainer`, `MazSelect`. Same idea for `MazCard`'s `footer-align` and `MazDrawer`'s `variant` — `'left' | 'right'` becomes `'start' | 'end'`.
 8. **`MazChart`** drops `vue-chartjs` (lighter bundle, no eager registration of unused chart types). The `update-mode` prop now defaults to `'none'` — pass `update-mode="default"` if you want animated data updates.
-9. That's it for most apps. Everything else is opt-in.
+9. **`MazAvatar` size scale fixed.** A CSS-unit `size` now renders at its real value (`size="2rem"` is a 32px avatar, it was ~96px before). Multiply your unit values by 3 to keep the same render, or switch to a `MazSize` keyword (`'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'`). The upgrade tool does the ×3 rewrite for you on static values.
+10. Rename **`MazPullToRefresh`**'s `on-click` prop to `on-refresh` (handled by the upgrade tool).
+11. Replace bare **`from 'maz-ui'`** utility imports with **`from '@maz-ui/utils'`** (the root re-export of utils was removed; handled by the upgrade tool). Components/composables/directives/plugins stay on their subpaths; types remain importable from `maz-ui`.
+12. If you use **`useFormValidator` / `useFormField`** with Valibot, add **`valibot`** to your own dependencies (it is no longer installed by `maz-ui`). The composables now accept any [Standard Schema](https://standardschema.dev) library (Valibot, Zod, ArkType...).
+13. That's it for most apps. Everything else is opt-in.
 
 ## Prerequisites
 
@@ -553,11 +557,148 @@ The components that exposed `color="background"` in their public prop now use `c
 rg "color\s*=\s*['\"]background['\"]" src/
 ```
 
+### 16. `MazAvatar` size scale fixed + `MazSize` keywords
+
+`MazAvatar`'s `size` prop now accepts the standard `MazSize` keywords on top of CSS units, and a long-standing scale bug is fixed.
+
+**The scale bug:** the avatar wrapper is sized at `3em` of a root `font-size: size`, so a CSS-unit `size` rendered the avatar **3x larger** than the value you passed. `size="2rem"` produced a ~96px avatar instead of 32px. In v5 the value is honored 1:1 - `size="2rem"` is a 32px avatar.
+
+**New `MazSize` keywords** (aligned with `MazBtn`, `MazInput`, ...):
+
+| Keyword | Rendered size |
+| --- | --- |
+| `mini` | 24px |
+| `xs` | 32px |
+| `sm` | 40px |
+| `md` | 48px (matches the old default) |
+| `lg` | 56px |
+| `xl` | 64px |
+
+```vue
+<!-- v5 - keyword sizes -->
+<MazAvatar size="sm" />
+<MazAvatar size="lg" />
+```
+
+Custom CSS units still work - you just need to triple the value to keep the exact rendering you had in v4:
+
+```vue
+<!-- v4 - rendered ~96px -->
+<MazAvatar size="2rem" />
+
+<!-- v5 - same ~96px render -->
+<MazAvatar size="6rem" />
+<!-- or adopt the corrected scale / a keyword -->
+<MazAvatar size="2rem" />
+<MazAvatar size="xl" />
+```
+
+The upgrade tool rewrites static `size="<unit>"` values on `<MazAvatar>` automatically (every CSS unit is supported). Bound expressions (`:size="…"`) can't be rewritten safely - they are left untouched and listed at the end of the run so you can check them by hand.
+
+```bash
+# Find avatars still passing a size you may want to review
+rg "<MazAvatar[^>]*\bsize=" src/
+```
+
+### 17. `MazPullToRefresh` — `on-click` → `on-refresh`
+
+The callback prop of `MazPullToRefresh` was renamed from `on-click` to `on-refresh` to reflect what it actually does: it runs when the refresh is triggered on release, not on a click.
+
+```vue
+<!-- v4 -->
+<MazPullToRefresh :on-click="fetchData" />
+
+<!-- v5 -->
+<MazPullToRefresh :on-refresh="fetchData" />
+```
+
+The upgrade tool rewrites this automatically on `<MazPullToRefresh>` tags (both `on-click` and `onClick`, bound or static).
+
+```bash
+# Find usages to update
+rg "<MazPullToRefresh[^>]*\bon-?[Cc]lick" src/
+```
+
+The component was also rewritten on top of the new [usePullToRefresh](./../composables/use-pull-to-refresh.md) composable. Behavior changes to check:
+
+- **The pull follows the scroll container.** It starts only when the closest scrollable ancestor (or `container-selector`, or the window) is at the top. In v4, only the window scroll was read, so a layout with a scrolling `<main>` refreshed in the middle of a list.
+- **`distance` is now the indicator distance after resistance** (default `80`, was `100` of raw finger movement). With the default `resistance` of `0.5`, the trigger needs about 160px of finger movement. Lower `distance` or raise `resistance` for a shorter gesture.
+- **`spinner-color` defaults to `primary`** (was `contrast`) and also colors the progress ring.
+- **`offset` is deprecated** and has no effect.
+- **Texts are translated** (`pullToRefresh.*` in `@maz-ui/translations`) instead of hard coded in English. The `pull-before`, `pull-ready` and `pull-loading` slots still replace them, and now receive `{ progress, distance }`.
+- **An error thrown by `on-refresh` is emitted (`error`, then `finish`) and no longer thrown again**, so it does not end up as an unhandled rejection.
+
+### 18. Root `maz-ui` import removed for utilities
+
+In v4, the bare `maz-ui` entry re-exported `@maz-ui/utils`, so you could write `import { sleep } from 'maz-ui'`. In v5 that root re-export is gone — import helpers from their package directly:
+
+```ts
+// v4
+import { sleep, formatDate } from 'maz-ui'
+
+// v5
+import { sleep, formatDate } from '@maz-ui/utils'
+```
+
+Components, composables, directives and plugins were **already** subpath-only in v4 (`maz-ui/components/MazBtn`, `maz-ui/composables/useToast`, …) and are unchanged. The upgrade tool rewrites the utility imports for you.
+
+The `maz-ui` root now exposes **types only** (zero runtime cost), so shared types stay importable from the short path:
+
+```ts
+import type { MazColor, MazSize } from 'maz-ui'
+```
+
+### 19. ESM-only
+
+`maz-ui` and its `@maz-ui/*` packages ship **ESM only** (no CommonJS build). This was already the case in v4, but if you consume the library from a CommonJS context (old Jest without ESM, `require()`), use a bundler/test runner with ESM support (Vitest, Jest ≥ 29 with ESM, or native `import`).
+
+### 20. `useFormValidator`: validation library agnostic (Standard Schema)
+
+`useFormValidator` and `useFormField` no longer depend on Valibot. They accept any library implementing [Standard Schema](https://standardschema.dev): Valibot (>= 1.0), Zod (>= 3.24), ArkType (>= 2.0), or your own validator. Your existing Valibot schemas keep working as is: same validation, same error messages, same inferred types for `model` and the `handleSubmit` payload.
+
+```ts
+// v4 and v5 - unchanged
+import { pipe, string, minLength } from 'valibot'
+useFormValidator({ schema: { name: pipe(string(), minLength(3)) } })
+
+// v5 - Zod (or mix both in the same schema)
+import { z } from 'zod'
+useFormValidator({ schema: { name: z.string().min(3) } })
+```
+
+What can break:
+
+**`valibot` is no longer a dependency of `maz-ui`.** Valibot, Zod and ArkType are now declared as optional peer dependencies (`valibot >=1.0.0 <2.0.0`, `zod >=3.24.0 <5.0.0`, `arktype >=2.0.0 <3.0.0`). If your app imports `valibot` without declaring it (it was installed transitively), add it:
+
+```bash
+pnpm add valibot
+```
+
+**Issue types are now the Standard Schema ones.** `ValidationIssues` (returned by `errors`, `fieldsStates[field].errors`, `useFormField().errors` and the `onError` payload of `handleSubmit`) is now typed as an array of `{ message: string, path?: ... }` instead of Valibot's `BaseIssue<unknown>`. Only TypeScript is affected: at runtime, the issues are still the native Valibot objects. If you read Valibot specific properties (`kind`, `type`, `input`, `expected`, `received`, `requirement`...), cast the issue:
+
+```ts
+import type { BaseIssue } from 'valibot'
+
+// v4
+const type = errors.value.email[0].type
+
+// v5
+const type = (errors.value.email[0] as BaseIssue<unknown>).type
+```
+
+**`FormSchema` values are typed as `StandardSchemaV1`.** If you typed a schema object with `FormSchema<Model>` and then read Valibot specific properties of its entries (`schema.email.type`, `schema.email.pipe`...), declare the object with `as const satisfies FormSchema<Model>` or without annotation, so TypeScript keeps the Valibot types.
+
+```bash
+# Find usages to check
+rg "useFormValidator|useFormField" src/
+rg "from 'valibot'" src/
+```
+
 ## Informational changes (probably no action needed)
 
 ### Theme colors are now emitted as OKLCh
 
-`@maz-ui/themes` now ships its bundled presets (`mazUi`, `ocean`, `pristine`, `obsidian`) in `oklch()` form, and the dynamic color scale generator (`generateColorScale`, `adjustColorLightness`, `getContrastColor`) steps in OKLCh space and emits `oklch(L C H)` strings. The runtime CSS variables (`--maz-primary`, `--maz-primary-100`, …) therefore hold OKLCh colors.
+`@maz-ui/themes` now ships its bundled presets (`mazUi`, `ocean`, `pristine`, `obsidian`, `nova`) in `oklch()` form, and the runtime CSS variables (`--maz-primary`, `--maz-primary-100`, …) therefore hold OKLCh colors. The 50–950 scale is derived in CSS via OKLCh relative color syntax — `oklch(from var(--maz-X) clamp(0, calc(l ± offset), 1) calc(c * mult) h)` — perceptually uniform, chroma-preserving, and live-reactive to base color overrides.
 
 This is **transparent for consumers**:
 
@@ -568,16 +709,8 @@ This is **transparent for consumers**:
 
 You only need to do something if you were:
 
-- **Reading the channel format** of a color from `--maz-*` in JS — the value used to be an `hsl(...)` string, it's now an `oklch(...)` string. Use `getComputedStyle(...).getPropertyValue(...)` and a CSS color parser if you need channels.
-- **Calling `adjustColorLightness`** directly — the `adjustment` parameter is now in OKLCh L units (`0..1`) instead of HSL L percentage (`0..100`). Divide your existing values by 100.
-
-```ts
-// v4: HSL L percentage
-adjustColorLightness('hsl(210 50% 40%)', 20)  // → 'hsl(210 50% 60%)'
-
-// v5: OKLCh L (0..1)
-adjustColorLightness('hsl(210 50% 40%)', 0.2) // → 'oklch(0.65 0.108 232.62)'
-```
+- **Reading the channel format** of a color from `--maz-*` in JS — the value used to be an `hsl(...)` string, it's now an `oklch(...)` string (and at runtime the base may resolve through `light-dark()`). Use `getComputedStyle(...).getPropertyValue(...)` and a CSS color parser if you need channels.
+- **Calling the legacy JS palette helpers** (`generateColorScale`, `adjustColorLightness`, `getContrastColor`, `parseHSL`) — these exports were removed in v5. See [BREAKING — removed exports](#breaking-removed-exports) for replacements.
 
 Why the switch: OKLCh is perceptually uniform, so generated scales (`primary-50` → `primary-950`) ramp consistently across hues — yellow-700 won't look muddy compared to blue-700 anymore. It also unlocks Display P3 colors when you author a vivid preset.
 
@@ -615,6 +748,69 @@ Four bundled presets remain (`mazUi`, `pristine`, `ocean`, `obsidian`) plus a ne
 
 Switching to one of the bundled presets does not require any code change beyond the preset name. If you depended on the previous (washed-out gray) `secondary` color in a custom theme, override it back via `colors.{light,dark}.secondary` in your preset.
 
+### Theming: native CSS rewrite (new — non-breaking by default)
+
+The `@maz-ui/themes` CSS pipeline was rewritten to lean on native CSS instead of JS:
+
+- Base colors are now emitted as a single `--maz-X: light-dark(L, D)` declaration. The browser resolves it for you.
+- Color scales `--maz-X-50` through `--maz-X-950` are derived via OKLCh relative color syntax at runtime, so any override on the base color cascades through the whole scale automatically (and preserves its chroma).
+- `:root` declares `color-scheme: light dark` so native widgets (scrollbars, native `<select>`, date pickers, autofill) follow the active mode out of the box.
+- A `<meta name="color-scheme">` tag is **automatically injected** at boot (Vue + Nuxt SSR). No user action — prevents the Flash of inAccurate coloR Theme.
+
+Consumer-visible CSS surface is unchanged: `var(--maz-primary)`, `--maz-primary-500`, Tailwind utilities `bg-primary/60`, `bg-primary-500`, etc. all keep working.
+
+#### `lightClass` (new — optional, default `'light'`)
+
+Mirror of `darkClass`. When `colorMode === 'light'` and `darkModeStrategy === 'class'`, this class is added to `<html>` to force `color-scheme: only light`. Default `'light'` — set to `false`/custom string if it clashes with an existing class in your app:
+
+```ts
+app.use(MazUi, {
+  theme: {
+    preset: mazUi,
+    darkClass: 'dark',
+    lightClass: 'light', // new
+  },
+})
+```
+
+Non-breaking: if you never explicitly forced light, nothing changes.
+
+#### `setColorMode` / `toggleDarkMode` now return `Promise<void>`
+
+Both functions are now async to support the optional `{ animate: true }` parameter (View Transitions). Existing callers that ignored the return value keep working — `await` is only required when you need to chain.
+
+```ts
+const { setColorMode, toggleDarkMode } = useTheme()
+
+// Existing v4 call — still works, return value ignored
+setColorMode('dark')
+toggleDarkMode()
+
+// v5 — await to chain after the change is applied
+await setColorMode('dark')
+
+// v5 — animated full-page switch via document.startViewTransition()
+await toggleDarkMode({ animate: true })
+await setColorMode('dark', { animate: true })
+```
+
+The View Transitions glue is lazy-imported — when `animate` is not used, it stays out of your boot bundle. Browsers that don't support the API apply the change immediately with no animation.
+
+#### BREAKING — removed exports
+
+The JS-based palette generator is gone. The following helpers used to be exported from `@maz-ui/themes` and **no longer exist** in v5:
+
+| Removed export | Replacement |
+| --- | --- |
+| `generateColorScale(base, mode)` | The scale is now generated in CSS via `oklch(from var(--maz-X) clamp(0, calc(l ± offset), 1) calc(c * mult) h)`. Read the live value from `--maz-X-{50..950}`, or replicate the formula inline. |
+| `parseHSL(value)` | Use a CSS color parser or `parseColorAsOklch` from `@maz-ui/themes/utils/color-conversions`. |
+| `adjustColorLightness(color, amount)` | Inline with `oklch(from <color> calc(l + N) c h)` to shift lightness while preserving chroma and hue. |
+| `getContrastColor(color)` | Use the preset's `*-foreground` token, which is what components consume internally. |
+
+`colorToHex`, `parseColorAsOklch` and `formatAsOklch` are **preserved**, now exported from `@maz-ui/themes/utils/color-conversions`.
+
+If you were importing any of the removed helpers from `@maz-ui/themes`, replace them before upgrading.
+
 ### Preset name persistence (new — opt-out, no breaking change)
 
 `@maz-ui/themes` now persists the active preset name in a `maz-preset` cookie (1-year TTL, `SameSite=Lax`) — same shape as the existing `maz-color-mode` cookie:

package/docs/src/guide/resolvers.md

@@ -12,7 +12,7 @@ head:
 Supercharge your Vue development with Maz-UI's intelligent auto-import resolvers. Never write import statements again while maintaining perfect tree-shaking and TypeScript support.
 
 ::: tip Vue Only Feature
-Auto-import resolvers are designed for Vue projects using build tools like Vite or Webpack. For Nuxt users, everything is already integrated in the [@maz-ui/nuxt module](/guide/nuxt).
+Auto-import resolvers are designed for Vue projects using build tools like Vite or Webpack. For Nuxt users, everything is already integrated in the [@maz-ui/nuxt module](/ecosystem/nuxt).
 :::
 
 ## Why Use Auto-Import Resolvers?
@@ -229,18 +229,18 @@ function showSuccess() {
 
 | Category             | Composables                               |
 | -------------------- | --------------------------------------------------- |
-| **UI Management**    | [`useToast`](./../composables/use-toast.md), [`useDialog`](./../composables/use-dialog.md), [`useTheme`](./../guide/themes.md#usetheme-composable-api), [`useWait`](./../composables/use-wait.md)      |
+| **UI Management**    | [`useToast`](./../composables/use-toast.md), [`useDialog`](./../composables/use-dialog.md), [`useTheme`](./../ecosystem/themes.md#usetheme-composable-api), [`useWait`](./../composables/use-wait.md)      |
 | **Responsive**       | [`useBreakpoints`](./../composables/use-breakpoints.md), [`useWindowSize`](./../composables/use-window-size.md)                   |
-| **User Interaction** | [`useUserVisibility`](./../composables/use-user-visibility.md), [`useIdleTimeout`](./../composables/use-idle-timeout.md), [`useSwipe`](./../composables/use-swipe.md)   |
+| **User Interaction** | [`useUserVisibility`](./../composables/use-user-visibility.md), [`useIdleTimeout`](./../composables/use-idle-timeout.md), [`useSwipe`](./../composables/use-swipe.md), [`usePullToRefresh`](./../composables/use-pull-to-refresh.md)   |
 | **Form Handling**    | [`useFormValidator`](./../composables/use-form-validator.md)                  |
 | **Advanced**         | [`useTimer`](./../composables/use-timer.md), [`useStringMatching`](./../composables/use-string-matching.md)           |
 
 **Most used available formatters and utilities:**
 
-| Category             | Utilities/Formatters                               |
-| -------------------- | --------------------------------------------------- |
-| **Formatters**       | [`formatCurrency`](./../helpers/currency.md), [`formatDate`](./../helpers/date.md), [`sleep`](./../helpers/sleep.md) |
-| **Utilities**        | [`debounce`](./../helpers/debounce.md), [`throttle`](./../helpers/throttle.md), [`isEqual`](./../helpers/is-equal.md) |
+| Category       | Utilities/Formatters                                                                                                                         |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Formatters** | [`formatCurrency`](./../ecosystem/utils/currency.md), [`formatDate`](./../ecosystem/utils/date.md), [`sleep`](./../ecosystem/utils/sleep.md) |
+| **Utilities**  | [`debounce`](./../ecosystem/utils/debounce.md), [`throttle`](./../ecosystem/utils/throttle.md), [`isEqual`](./../ecosystem/utils/is-equal.md) |
 
 ## Advanced Configuration
 
@@ -670,7 +670,7 @@ const toast = useToast()
 
 - [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) - The underlying auto-import system
 - [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) - Auto-import for composables and utilities
-- [Nuxt Module](/guide/nuxt) - All auto-imports included out of the box
+- [Nuxt Module](/ecosystem/nuxt) - All auto-imports included out of the box
 
 ---
 

package/docs/src/guide/tailwind.md

@@ -47,6 +47,10 @@ Each one comes with `bg-X`, `text-X`, `border-X`, an 11-step scale (`bg-X-50`
 <div class="bg-success-100 text-success-700">Saved!</div>
 ```
 
+::: info Alpha utilities and scales in v5
+`bg-primary/60`, `text-primary/40`, `border-primary/50` and the rest of Tailwind's alpha syntax continue to work unchanged. In v5 the 50–950 scales are derived in CSS via OKLCh relative color syntax and the base colors are resolved through `light-dark()`, but this is invisible at the utility level — your Tailwind classes don't change.
+:::
+
 ### Neutral & surface colors
 
 These don't have a foreground variant — they're typically used for backgrounds, text, borders or overlays directly. Each one still ships an 11-step scale.

package/docs/src/guide/vue.md

@@ -81,7 +81,7 @@ app.use(MazUi, {
   /**
    * Theme configuration (optional if you are using the default theme)
    * More information in dedicated documentation
-   * @see https://maz-ui.com/guide/themes
+   * @see https://maz-ui.com/ecosystem/themes
    */
   theme: {
     preset: mazUi, // 'ocean' | 'pristine' | 'obsidian' | 'nova'
@@ -103,7 +103,7 @@ app.use(MazUi, {
   /**
    * Translations configuration (optional if you are using english)
    * More information in dedicated documentation
-   * @see https://maz-ui.com/guide/translations
+   * @see https://maz-ui.com/ecosystem/translations
    */
   translations: {
     locale: 'fr',
@@ -143,11 +143,11 @@ function handleClick() {
 
 ## Theming
 
-More information in the [theme documentation](/guide/themes).
+More information in the [theme documentation](/ecosystem/themes).
 
 ## Translations
 
-More information in the [translations documentation](/guide/translations).
+More information in the [translations documentation](/ecosystem/translations).
 
 ## Plugins
 

package/docs/src/index.md

@@ -219,7 +219,7 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
         This library is written in Typescript, so all types and declarations are directly available.
       </p>
     </MazCardSpotlight>
-    <a href="/guide/themes" class="maz:flex">
+    <a href="/ecosystem/themes" class="maz:flex">
       <MazCardSpotlight class="maz:w-full" content-class="maz:flex maz:flex-col maz:gap-2 maz:items-start">
         <span class="maz:py-1 maz:px-2 maz:bg-surface-600 maz:dark:bg-surface-400 maz:rounded-md maz:text-2xl">
           💄
@@ -229,7 +229,7 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
           Created with TailwindCSS | Optimized CSS file sizes | Complies with all CSS best practices | Use your theme easily.
         </p>
         <div class="maz:flex-1"></div>
-        <MazBtn color="surface" outlined size="sm" block href="/guide/themes">Discover</MazBtn>
+        <MazBtn color="surface" outlined size="sm" block href="/ecosystem/themes">Discover</MazBtn>
       </MazCardSpotlight>
     </a>
     <a href="/guide/dark-mode" class="maz:flex">
@@ -265,7 +265,7 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
   <h2 class="maz:text-2xl maz:font-bold maz:mb-8">Ecosystem</h2>
 
   <div class="maz:grid maz:grid-cols-1 maz:tab-m:grid-cols-2 maz:gap-4">
-    <a href="/guide/nuxt" class="maz:flex">
+    <a href="/ecosystem/nuxt" class="maz:flex">
       <MazCardSpotlight class="maz:w-full" color="accent" content-class="maz:flex maz:flex-col maz:gap-2 maz:items-start">
         <div class="maz:flex maz:items-start maz:gap-2 maz:justify-between maz:w-full">
           <span class="maz:py-1 maz:px-2 maz:bg-surface-600 maz:dark:bg-surface-400 maz:rounded-md maz:text-2xl">
@@ -278,10 +278,10 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
           Official Nuxt module with auto-imports, optimized builds, and seamless SSR support. Zero configuration required.
         </p>
         <div class="maz:flex-1"></div>
-        <MazBtn color="surface" outlined size="sm" block href="/guide/nuxt">Discover</MazBtn>
+        <MazBtn color="surface" outlined size="sm" block href="/ecosystem/nuxt">Discover</MazBtn>
       </MazCardSpotlight>
     </a>
-    <a href="/guide/icons" class="maz:flex">
+    <a href="/ecosystem/icons/" class="maz:flex">
       <MazCardSpotlight class="maz:w-full" color="accent" content-class="maz:flex maz:flex-col maz:gap-2 maz:items-start">
         <div class="maz:flex maz:items-start maz:gap-2 maz:justify-between maz:w-full">
           <span class="maz:py-1 maz:px-2 maz:bg-surface-600 maz:dark:bg-surface-400 maz:rounded-md maz:text-2xl">
@@ -294,10 +294,10 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
           860+ beautiful SVG icons ready for Vue. Multiple usage patterns: components, direct SVG files, raw SVG strings or auto-import.
         </p>
         <div class="maz:flex-1"></div>
-        <MazBtn color="surface" outlined size="sm" block href="/guide/icons">Discover</MazBtn>
+        <MazBtn color="surface" outlined size="sm" block href="/ecosystem/icons/">Discover</MazBtn>
       </MazCardSpotlight>
     </a>
-    <a href="/guide/translations" class="maz:flex">
+    <a href="/ecosystem/translations" class="maz:flex">
       <MazCardSpotlight class="maz:w-full" color="accent" content-class="maz:flex maz:flex-col maz:gap-2 maz:items-start">
         <div class="maz:flex maz:items-start maz:gap-2 maz:justify-between maz:w-full">
           <span class="maz:py-1 maz:px-2 maz:bg-surface-600 maz:dark:bg-surface-400 maz:rounded-md maz:text-2xl">
@@ -310,10 +310,10 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
           Simple internationalization system for Maz-UI components. Translate your interface into any language with ease.
         </p>
         <div class="maz:flex-1"></div>
-        <MazBtn color="surface" outlined size="sm" block href="/guide/translations">Discover</MazBtn>
+        <MazBtn color="surface" outlined size="sm" block href="/ecosystem/translations">Discover</MazBtn>
       </MazCardSpotlight>
     </a>
-    <a href="/guide/themes" class="maz:flex">
+    <a href="/ecosystem/themes" class="maz:flex">
       <MazCardSpotlight class="maz:w-full" color="accent" content-class="maz:flex maz:flex-col maz:gap-2 maz:items-start">
         <div class="maz:flex maz:items-start maz:gap-2 maz:justify-between maz:w-full">
           <span class="maz:py-1 maz:px-2 maz:bg-surface-600 maz:dark:bg-surface-400 maz:rounded-md maz:text-2xl">
@@ -326,10 +326,10 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
           Pre-built theme collections and design tokens for rapid UI development. Ready-to-use color schemes and styles.
         </p>
         <div class="maz:flex-1"></div>
-        <MazBtn color="surface" outlined size="sm" block href="/guide/themes">Discover</MazBtn>
+        <MazBtn color="surface" outlined size="sm" block href="/ecosystem/themes">Discover</MazBtn>
       </MazCardSpotlight>
     </a>
-     <a href="/guide/mcp" class="maz:flex">
+     <a href="/ecosystem/mcp" class="maz:flex">
       <MazCardSpotlight class="maz:w-full" color="accent" content-class="maz:flex maz:flex-col maz:gap-2 maz:items-start">
         <div class="maz:flex maz:items-start maz:gap-2 maz:justify-between maz:w-full">
           <span class="maz:py-1 maz:px-2 maz:bg-surface-600 maz:dark:bg-surface-400 maz:rounded-md maz:text-2xl">
@@ -342,7 +342,7 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
           Provides a Model Context Protocol (MCP) server that exposes Maz-UI documentation to AI agents. This server enables AI agents to generate code and assist developers in using Maz-UI.
         </p>
         <div class="maz:flex-1"></div>
-        <MazBtn color="surface" outlined size="sm" block href="/guide/mcp">Discover</MazBtn>
+        <MazBtn color="surface" outlined size="sm" block href="/ecosystem/mcp">Discover</MazBtn>
       </MazCardSpotlight>
     </a>
   </div>
@@ -465,7 +465,7 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
       </div>
       <h3 class="maz:text-base maz:font-semibold">useFormValidator</h3>
       <p class="maz:dark:text-gray-300 maz:text-muted maz:text-sm">
-        A Vue composable designed to simplify form validation using Valibot as the validation library. Offers a flexible and typed approach to handle form validation.
+        A Vue composable designed to simplify form validation with any Standard Schema library (Valibot, Zod, ArkType...). Offers a flexible and typed approach to handle form validation.
       </p>
       <div class="maz:flex-1"></div>
       <MazBtn color="surface" outlined size="sm" block href="/composables/use-form-validator">Discover</MazBtn>

package/docs/src/plugins/aos.md

@@ -231,7 +231,7 @@ You can choose one of these timing function to animate elements nicely:
 ## Nuxt
 
 ::: tip
-For **NuxtJS v3** and higher, use the dedicated Nuxt module to take advantage of auto-imports of components, plugins, composables and css files: [Nuxt Module Documentation](./../guide/nuxt.md)
+For **NuxtJS v3** and higher, use the dedicated Nuxt module to take advantage of auto-imports of components, plugins, composables and css files: [Nuxt Module Documentation](./../ecosystem/nuxt.md)
 :::
 
 Should be executed on client side

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maz-ui/mcp",
   "type": "module",
-  "version": "5.0.0-beta.5",
+  "version": "5.0.0-beta.51",
   "description": "Maz-UI ModelContextProtocol Client",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -41,18 +41,19 @@
     "docs"
   ],
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.29.0",
-    "@maz-ui/node": "5.0.0-beta.5",
-    "@maz-ui/utils": "5.0.0-beta.5"
+    "@maz-ui/utils": "5.0.0-beta.46",
+    "@modelcontextprotocol/sdk": "^1.32.0",
+    "maz-ui": "5.0.0-beta.51"
   },
   "devDependencies": {
-    "@modelcontextprotocol/inspector": "^0.21.2",
-    "@swc/core": "1.15.33",
-    "prettier": "^3.8.3",
+    "@maz-ui/eslint-config": "5.0.0-beta.47",
+    "@maz-ui/node": "5.0.0-beta.44",
+    "@modelcontextprotocol/inspector": "^2.9.0",
+    "@swc/core": "1.16.13",
+    "prettier": "^3.9.9",
     "ts-node-maintained": "^10.9.5",
-    "tsx": "^4.21.0",
-    "unbuild": "^3.6.1",
-    "@maz-ui/eslint-config": "5.0.0-beta.5"
+    "tsx": "^4.23.15",
+    "unbuild": "^3.6.1"
   },
   "lint-staged": {
     "*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"

package/docs/src/helpers/camel-case.md

@@ -1,14 +0,0 @@
----
-title: camelCase
-description: Utility method to convert a string to camel case
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-::: warning
-
-TO DO
-
-:::

package/docs/src/helpers/check-availability.md

@@ -1,14 +0,0 @@
----
-title: checkAvailability
-description: Utility method to execute a call back when the awaited data is available with timeout and check interval
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-::: warning
-
-TO DO
-
-:::

package/docs/src/helpers/debounce-callback.md

@@ -1,14 +0,0 @@
----
-title: debounceCallback
-description: Utility method to debounce a function call and execute a callback
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-::: warning
-
-TO DO
-
-:::

package/docs/src/helpers/debounce-id.md

@@ -1,14 +0,0 @@
----
-title: debounceId
-description: Utility method to debounce a function call and execute a callback with an identifier
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-::: warning
-
-TO DO
-
-:::

package/docs/src/helpers/debounce.md

@@ -1,14 +0,0 @@
----
-title: debounce
-description: Utility method to debounce a function call
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-::: warning
-
-TO DO
-
-:::

package/docs/src/helpers/is-client.md

@@ -1,14 +0,0 @@
----
-title: isClient
-description: Utility method to check if your are on client side
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-::: warning
-
-TO DO
-
-:::

package/docs/src/helpers/is-equal.md

@@ -1,14 +0,0 @@
----
-title: isEqual
-description: Utility method to check if two values are equal with deep comparison (Array, Object, string, anything)
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-::: warning
-
-TO DO
-
-:::

package/docs/src/helpers/is-standalone-mode.md

@@ -1,14 +0,0 @@
----
-title: isStandaloneMode
-description: Utility method to check if the browser is in standalone mode
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-::: warning
-
-TO DO
-
-:::