@maz-ui/mcp 5.0.0-beta.3 → 5.0.0-beta.31

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

@@ -13,7 +13,7 @@ Performance has also been significantly improved thanks to optimal tree-shaking,
 
 ::: tip Connected to Maz-UI MCP
 
-Follow the [MCP](/guide/mcp) guide to connect your AI assistant to Maz-UI's documentation for a smooth migration process.
+Follow the [MCP](/ecosystem/mcp) guide to connect your AI assistant to Maz-UI's documentation for a smooth migration process.
 
 :::
 
@@ -41,6 +41,10 @@ v4.0.0 isn't just an update, it's a **complete rebuild** that transforms Maz-UI
 - **Dynamic CSS Variables**: Automatic CSS variable generation
 - **Intelligent dark mode**: Configurable strategies for dark mode based on system preferences and user choice stored in cookies
 
+::: tip Theming further evolved in v5
+The theme system has been rewritten on top of native `light-dark()` + `color-scheme` + `color-mix(in oklch)` in v5. If you are upgrading past v4, see the dedicated [v5 migration guide](./migration-v5.md#theming-native-css-rewrite-new-non-breaking-by-default) for the full theming changes (new `lightClass`, `Promise<void>` returns, removed JS helpers).
+:::
+
 #### Complete Internationalization
 
 - **9 supported languages by default**: EN, FR, DE, ES, IT, PT, JA, ZH-CN
@@ -688,12 +692,12 @@ app.use(MazUi, {
 <script setup>
 import { useTheme } from 'maz-ui/composables'
 
-const { isDark, toggleDarkMode, setTheme } = useTheme()
+const { isDark, toggleDarkMode, updateTheme } = useTheme()
 
 // Change theme
-setTheme('ocean')
+updateTheme('ocean')
 
-// Toggle dark mode
+// Toggle dark mode (v5: returns Promise<void>, optional { animate } param)
 toggleDarkMode()
 </script>
 
@@ -704,7 +708,7 @@ toggleDarkMode()
 </template>
 ```
 
-**📖 Complete documentation:** [Theme Guide](/guide/themes)
+**📖 Complete documentation:** [Theme Guide](/ecosystem/themes)
 
 ## Translation System
 
@@ -744,7 +748,7 @@ setLocale('fr')
 </template>
 ```
 
-**📖 Complete documentation:** [Translation Guide](/guide/translations)
+**📖 Complete documentation:** [Translation Guide](/ecosystem/translations)
 
 ## Common Errors and Solutions
 
@@ -901,10 +905,10 @@ app.use(MazUi)
 ## Additional Resources
 
 - **[Official v4 Documentation](https://maz-ui.com)** - Complete documentation
-- **[Theme Guide](/guide/themes)** - Advanced theme system
-- **[Translation Guide](/guide/translations)** - Internationalization
+- **[Theme Guide](/ecosystem/themes)** - Advanced theme system
+- **[Translation Guide](/ecosystem/translations)** - Internationalization
 - **[Vue Installation Guide](/guide/vue)** - Vue setup
-- **[Nuxt Installation Guide](/guide/nuxt)** - Nuxt setup
+- **[Nuxt Installation Guide](/ecosystem/nuxt)** - Nuxt setup
 - **[Resolvers Guide](/guide/resolvers)** - Smart auto-imports
 - **[Complete Changelog](https://github.com/LouisMazel/maz-ui/blob/master/CHANGELOG.md)** - All changes
 

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.
 
@@ -83,7 +83,8 @@ 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. That's it for most apps. Everything else is opt-in.
 
 ## Prerequisites
 
@@ -553,11 +554,54 @@ 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/
+```
+
 ## 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 +612,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 +651,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,7 +229,7 @@ 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)   |
 | **Form Handling**    | [`useFormValidator`](./../composables/use-form-validator.md)                  |
@@ -237,10 +237,10 @@ function showSuccess() {
 
 **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>

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/docs/src/plugins/wait.md

@@ -46,7 +46,7 @@ export default defineNuxtConfig({
 
 <br />
 
-<div v-if="submitted" style="padding: 20px; background-color: var(--maz-surface-300); border-radius: 10px; margin-top: 1rem;">
+<div v-if="submitted" style="padding: 20px; background-color: var(--maz-color-surface-300); border-radius: 10px; margin-top: 1rem;">
   Data Submitted
 </div>
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maz-ui/mcp",
   "type": "module",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0-beta.31",
   "description": "Maz-UI ModelContextProtocol Client",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -42,17 +42,18 @@
   ],
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "@maz-ui/utils": "5.0.0-beta.3",
-    "@maz-ui/node": "5.0.0-beta.3"
+    "@maz-ui/utils": "5.0.0-beta.28",
+    "maz-ui": "5.0.0-beta.31"
   },
   "devDependencies": {
     "@modelcontextprotocol/inspector": "^0.21.2",
-    "@swc/core": "1.15.33",
-    "prettier": "^3.8.3",
+    "@swc/core": "1.15.40",
+    "prettier": "^3.8.4",
     "ts-node-maintained": "^10.9.5",
-    "tsx": "^4.21.0",
+    "tsx": "^4.22.3",
     "unbuild": "^3.6.1",
-    "@maz-ui/eslint-config": "5.0.0-beta.3"
+    "@maz-ui/eslint-config": "5.0.0-beta.28",
+    "@maz-ui/node": "5.0.0-beta.26"
   },
   "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
-
-:::

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

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

package/docs/src/helpers/normalize-string.md

@@ -1,14 +0,0 @@
----
-title: normalizeString
-description: Utility method to normalize string with options
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-::: warning
-
-TO DO
-
-:::

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

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