@maz-ui/mcp 4.6.1 → 4.7.0-beta.0

package/dist/mcp.mjs

@@ -7,7 +7,7 @@ import { existsSync, readFileSync, readdirSync } from 'node:fs';
 import { resolve, dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-const version = "4.4.0";
+const version = "4.6.1";
 
 const _dirname = dirname(fileURLToPath(import.meta.url));
 class DocumentationService {

package/docs/generated-docs/maz-accordion.doc.md

@@ -1,10 +1,10 @@
 ## Props
 
-| Name              | Description | Type      | Required | Default     |
-| ----------------- | ----------- | --------- | -------- | ----------- |
-| **id**            |             | `string`  | No       | `undefined` |
-| **model-value**   |             | `number`  | No       | `0`         |
-| **content-class** |             | `unknown` | No       | `undefined` |
+| Name              | Description | Type      | Required |
+| ----------------- | ----------- | --------- | -------- |
+| **id**            |             | `string`  | No       |
+| **model-value**   |             | `number`  | No       |
+| **content-class** |             | `unknown` | No       |
 
 ## Events
 

package/docs/generated-docs/maz-ui-provider.doc.md

@@ -0,0 +1,12 @@
+## Props
+
+| Name             | Description | Type                       | Required |
+| ---------------- | ----------- | -------------------------- | -------- |
+| **theme**        |             | `intersection`             | Yes      |
+| **translations** |             | `MazUiTranslationsOptions` | No       |
+
+## Slots
+
+| Name    | Description | Bindings |
+| ------- | ----------- | -------- |
+| default |             |          |

package/docs/src/blog/v4.md

@@ -91,7 +91,7 @@ app.use(MazUi, {
 
 ### Specialized Ecosystem Packages
 
-- **@maz-ui/icons** - 840+ Icons
+- **@maz-ui/icons** - 860+ Icons
 SVG icon library with Vue components, direct SVG files, and auto-import support.
 
 - **@maz-ui/nuxt** - Nuxt Integration

package/docs/src/guide/getting-started.md

@@ -130,7 +130,7 @@ npm install @maz-ui/icons
 
 **Features:**
 
-- 840+ icons
+- 860+ icons
 - Usable as Vue components (e.g. `<MazStar />`)
 - Tree-shakable imports
 - Multiple sizes and variants
@@ -231,6 +231,10 @@ Learn about [theming and customization](./themes.md) to match your brand.
 
 Learn about [internationalization](./translations.md) to support multiple languages.
 
+### Lazy Loading with MazUiProvider
+
+Use [`MazUiProvider`](./maz-ui-provider.md) to defer Maz-UI initialization to lazy-loaded pages for zero entry-bundle overhead.
+
 ### Get Help
 
 Browse [GitHub discussions](https://github.com/LouisMazel/maz-ui/discussions) or open an issue on [GitHub](https://github.com/LouisMazel/maz-ui/issues).

package/docs/src/guide/icon-set.md

@@ -1,12 +1,13 @@
-# Icon Set (840+ icons)
+# Icon Set (860+ icons)
 
-The library includes **840+ carefully**
+The library includes **860+ icons**
 
 ## Icon Naming Convention
 
 All icons follow a consistent naming pattern:
 
-- Vue components: `Maz` + PascalCase (e.g., `MazUserCircle`)
+- Static Vue components: `Maz` + PascalCase (e.g., `MazUserCircle`)
+- Lazy Vue components: `LazyMaz` + PascalCase (e.g., `LazyMazUserCircle`)
 - SVG files: kebab-case (e.g., `user-circle.svg`)
 
 ## Find your icon
@@ -14,18 +15,19 @@ All icons follow a consistent naming pattern:
 <ComponentDemo>
   <div class="maz-flex maz-flex-col maz-gap-4">
     <div class="maz-flex maz-gap-2 maz-items-start">
-      <MazInput v-model="search" label="Search icon" @update:model-value="search = $event.trim()" :left-icon="MazIcons.MazMagnifyingGlass" class="flex-1" :assistive-text="`${filteredIcons.length} icons found`" />
+      <MazInput v-model="search" label="Search icon" @update:model-value="search = $event.trim()" :left-icon="SearchIcon" class="flex-1" :assistive-text="`${filteredIcons.length} icons found`" />
     </div>
     <MazTabs v-model="currentTab">
       <MazTabsBar :items="tabs" />
     </MazTabs>
     <div class="maz-grid maz-grid-cols-3 maz-gap-2">
-      <div v-for="icon in filteredIcons" :key="icon.name" class="maz-flex maz-flex-col maz-items-center maz-gap-3 maz-text-center maz-border maz-border-solid maz-border-divider maz-rounded maz-p-4 maz-truncate hover:maz-bg-surface-600/50 dark:hover:maz-bg-surface-400">
+      <div v-for="icon in filteredIcons" :key="icon.name" class="maz-flex maz-flex-col maz-items-center maz-gap-3 maz-text-center maz-border maz-border-solid maz-border-divider maz-rounded maz-p-4 maz-truncate">
         <component :is="icon.component" class="maz-size-8" />
         <span class="maz-text-xs maz-text-muted maz-truncate">{{ icon.name }}</span>
         <div class="maz-flex maz-flex-row maz-gap-2 maz-w-full">
-          <MazBtn v-tooltip="{ text: 'Copy Name', panelClass: 'maz-text-xs' }" class="maz-flex-1" size="xs" color="background" outlined @click="copyIcon(icon.name)" :icon="MazClipboardDocument" />
-          <MazBtn v-tooltip="{ text: 'Copy Import', panelClass: 'maz-text-xs' }" class="maz-flex-1" size="xs" color="background" outlined @click="copyIconImport(icon.name)" :icon="MazClipboardDocumentList" />
+          <MazBtn v-tooltip="{ text: 'Copy Name', panelClass: 'maz-text-xs' }" class="maz-flex-1" size="xs" color="background" outlined @click="copyIcon(icon.name)" :icon="ClipboardDocumentIcon" />
+          <MazBtn v-tooltip="{ text: 'Copy Static Import', panelClass: 'maz-text-xs' }" class="maz-flex-1" size="xs" color="background" outlined @click="copyStaticImport(icon.name)" :icon="ClipboardDocumentListIcon" />
+          <MazBtn v-tooltip="{ text: 'Copy Lazy Import', panelClass: 'maz-text-xs' }" class="maz-flex-1" size="xs" color="background" outlined @click="copyLazyImport(icon.name)" :icon="ClipboardDocumentListIcon" />
         </div>
       </div>
     </div>
@@ -33,25 +35,39 @@ All icons follow a consistent naming pattern:
 </ComponentDemo>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { computed, ref, shallowRef } from 'vue'
 import { useToast } from 'maz-ui/composables/useToast'
 import { vTooltip } from 'maz-ui/directives/vTooltip'
-import { MazClipboardDocument, MazClipboardDocumentList } from '@maz-ui/icons'
 
-const MazIcons = await import('@maz-ui/icons')
+const LazyIcons = shallowRef()
+const SearchIcon = shallowRef()
+const ClipboardDocumentIcon = shallowRef()
+const ClipboardDocumentListIcon = shallowRef()
 
-const icons = Object.entries(MazIcons).sort(([nameA, _], [nameB, __]) => nameA.localeCompare(nameB)).map(([name, component]) => ({
-  name,
-  component,
-}))
+const lazyIconModule = await import('@maz-ui/icons/lazy')
+LazyIcons.value = lazyIconModule
+SearchIcon.value = lazyIconModule.MazMagnifyingGlass
+ClipboardDocumentIcon.value = lazyIconModule.MazClipboardDocument
+ClipboardDocumentListIcon.value = lazyIconModule.MazClipboardDocumentList
+
+const icons = Object.entries(LazyIcons.value)
+  .filter(([name]) => name.startsWith('Maz'))
+  .sort(([nameA], [nameB]) => nameA.localeCompare(nameB))
+  .map(([name, component]) => ({ name, component }))
 
 const { commonIcons, flags, flagsSquare, logos, all } = icons.reduce((acc, iconComponent) => {
   if (iconComponent.name.startsWith('MazFlagSquare')) {
     acc.flagsSquare.push(iconComponent)
   }
-  else if (iconComponent.name.startsWith('MazFlag') && iconComponent.name.length >= 8) acc.flags.push(iconComponent)
-  else if (iconComponent.name.startsWith('MazLogo') && iconComponent.name.length >= 8) acc.logos.push(iconComponent)
-  else if (iconComponent.name.startsWith('Maz')) acc.commonIcons.push(iconComponent)
+  else if (iconComponent.name.startsWith('MazFlag') && iconComponent.name.length >= 8) {
+    acc.flags.push(iconComponent)
+  }
+  else if (iconComponent.name.startsWith('MazLogo') && iconComponent.name.length >= 8) {
+    acc.logos.push(iconComponent)
+  }
+  else if (iconComponent.name.startsWith('Maz')) {
+    acc.commonIcons.push(iconComponent)
+  }
 
   acc.all.push(iconComponent)
 
@@ -81,7 +97,8 @@ const search = ref()
 const filteredIcons = computed(() => {
   const _currentTab = currentTab.value
 
-  const baseIcons = _currentTab === 1 ? all : _currentTab === 2 ? commonIcons : _currentTab === 3 ? logos : _currentTab === 4 ? flags : _currentTab === 5 ? flagsSquare : all
+  const tabMap = { 1: all, 2: commonIcons, 3: logos, 4: flags, 5: flagsSquare }
+  const baseIcons = tabMap[_currentTab] || all
 
   const _search = search.value?.toLowerCase().replace(/\s/g, '')
   if (!_search) return baseIcons
@@ -91,11 +108,16 @@ const filteredIcons = computed(() => {
 
 const copyIcon = (icon) => {
   navigator.clipboard.writeText(icon)
-  success('Icon copied to clipboard')
+  success('Icon name copied to clipboard')
 }
 
-const copyIconImport = (icon) => {
+const copyStaticImport = (icon) => {
   navigator.clipboard.writeText(`import { ${icon} } from '@maz-ui/icons'`)
-  success('Icon import copied to clipboard')
+  success('Static import copied to clipboard')
+}
+
+const copyLazyImport = (icon) => {
+  navigator.clipboard.writeText(`import { Lazy${icon} } from '@maz-ui/icons'`)
+  success('Lazy import copied to clipboard')
 }
 </script>

package/docs/src/guide/icons.md

@@ -1,10 +1,11 @@
 # @maz-ui/icons
 
-A comprehensive collection of **328 beautiful SVG icons** ready for use in your Vue.js applications. Built with performance and flexibility in mind, these icons are optimized for modern web development.
+A comprehensive collection of **860 beautiful SVG icons** ready for use in your Vue.js applications. Built with performance and flexibility in mind, these icons are optimized for modern web development.
 
 ## Features
 
-- **840+ icons** - All icons are available [in the icon set page](./icon-set.md)
+- **860+ icons** - All icons are available [in the icon set page](./icon-set.md)
+- **Static & Lazy components** - Static (eagerly loaded) by default, lazy (async) when you need to optimize bundle size
 - **Multiple usage patterns** - Direct SVG files, Vue components, or auto-import
 - **TypeScript support** - Full type definitions included
 - **Tree-shakeable** - Import only the icons you need
@@ -53,11 +54,18 @@ npm install @maz-ui/icons vite-svg-loader
 
 ### Method 1: Vue Components (Recommended)
 
-Import and use icons as Vue components:
+Import and use icons as Vue components. Icons are available in two variants:
+
+- **Static** (default) — eagerly loaded, rendered immediately with no async overhead
+- **Lazy** — loaded on demand via `defineAsyncComponent`, ideal for optimizing bundle size
+
+#### Static Icons (default)
 
 ```vue
 <script setup lang="ts">
 import { MazCheck, MazHeart, MazUser } from '@maz-ui/icons'
+// Or import from the static sub-path:
+// import { MazCheck } from '@maz-ui/icons/static'
 </script>
 
 <template>
@@ -69,11 +77,44 @@ import { MazCheck, MazHeart, MazUser } from '@maz-ui/icons'
 </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:
+
+```vue
+<script setup lang="ts">
+import { LazyMazCheck, LazyMazHeart, LazyMazUser } from '@maz-ui/icons'
+// Or import from the lazy sub-path (without Lazy prefix):
+// import { MazCheck } from '@maz-ui/icons/lazy'
+</script>
+
+<template>
+  <div>
+    <LazyMazCheck class="text-green-500" />
+    <LazyMazUser class="w-6 h-6" />
+    <LazyMazHeart class="text-red-500 hover:scale-110 transition-transform" />
+  </div>
+</template>
+```
+
+::: tip Sub-path imports for better tree-shaking
+You can also import individual icons directly for optimal tree-shaking:
+
+```ts
+// Static icon (individual file)
+import { MazCheck } from '@maz-ui/icons/MazCheck'
+
+// Lazy icon (individual file)
+import { MazCheck } from '@maz-ui/icons/lazy/MazCheck'
+```
+
+:::
+
 **Benefits:**
 
 - ✅ Tree-shaking - Only bundled icons are included
 - ✅ TypeScript support with full IntelliSense
-- ✅ Vue optimized with `defineAsyncComponent`
+- ✅ Static icons render immediately, lazy icons optimize bundle size
 - ✅ Easy to style with CSS classes
 
 ### Method 2: Auto-import with Resolver
@@ -115,11 +156,13 @@ export default defineConfig({
 
 <template>
   <div class="navigation">
-    <!-- Icons are automatically imported when used -->
+    <!-- Static icons (eagerly loaded) -->
     <MazHome class="nav-icon" />
     <MazUser class="nav-icon" />
     <MazSettings class="nav-icon" />
-    <MazLogout class="nav-icon" />
+
+    <!-- Lazy icons (async loaded) — prefix with "Lazy" -->
+    <LazyMazLogout class="nav-icon" />
   </div>
 </template>
 
@@ -130,11 +173,16 @@ export default defineConfig({
 </style>
 ```
 
+The resolver automatically resolves:
+- `MazXxx` → static icon from `@maz-ui/icons/MazXxx`
+- `LazyMazXxx` → lazy icon from `@maz-ui/icons/lazy/MazXxx`
+
 **Benefits:**
 
 - ✅ Zero import boilerplate
 - ✅ Full TypeScript support
 - ✅ Tree-shaking still works
+- ✅ Both static and lazy variants supported
 - ✅ IntelliSense for all available icons
 
 ### Method 3: With vite-svg-loader
@@ -270,23 +318,33 @@ All icons support CSS custom properties for advanced styling:
 
 ## Available Icons
 
-The library includes **840+ carefully** covering all common use cases:
+The library includes **860+ carefully** covering all common use cases:
 
 ### Icon Naming Convention
 
 All icons follow a consistent naming pattern:
 
-- Vue components: `Maz` + PascalCase (e.g., `MazUserCircle`)
+- Static Vue components: `Maz` + PascalCase (e.g., `MazUserCircle`)
+- Lazy Vue components: `LazyMaz` + PascalCase (e.g., `LazyMazUserCircle`)
 - SVG files: kebab-case (e.g., `user-circle.svg`)
 
 ```typescript
-// Component imports
+// Static component imports (eagerly loaded)
 import {
   MazArrowRight, // arrow-right.svg
   MazChatBubbleLeft, // chat-bubble-left.svg
   MazShoppingCart, // shopping-cart.svg
   MazUserCircle // user-circle.svg
 } from '@maz-ui/icons'
+
+// Lazy component imports (async loaded)
+import {
+  LazyMazArrowRight,
+  LazyMazUserCircle
+} from '@maz-ui/icons'
+
+// Or import lazy icons without the Lazy prefix from the sub-path
+import { MazArrowRight } from '@maz-ui/icons/lazy'
 ```
 
 You can search icons on [Heroicons](https://heroicons.com/) and copy the name of the icon to use it in your project.
@@ -474,12 +532,13 @@ export const useIconStore = defineStore('icons', () => {
 
 ## Bundle Size
 
-| Usage Method    | Bundle Impact | Best For                      |
-| --------------- | ------------- | ----------------------------- |
-| Direct SVG      | Minimal       | Static usage, minimal bundles |
-| Vue Components  | Tree-shaken   | Dynamic usage, Vue apps       |
-| Auto-import     | Tree-shaken   | Development experience        |
-| vite-svg-loader | Optimized     | Build-time optimization       |
+| Usage Method         | Bundle Impact | Best For                              |
+| -------------------- | ------------- | ------------------------------------- |
+| Static components    | Tree-shaken   | Immediate rendering, critical UI      |
+| Lazy components      | Code-split    | Non-critical icons, large icon sets   |
+| Direct SVG           | Minimal       | Static usage, minimal bundles         |
+| Auto-import          | Tree-shaken   | Development experience                |
+| vite-svg-loader      | Optimized     | Build-time optimization               |
 
 ## Related Packages
 

package/docs/src/guide/maz-ui-provider.md

@@ -0,0 +1,199 @@
+---
+title: MazUiProvider
+description: A component-based alternative to the MazUi plugin for initializing theme and translations, ideal for lazy-loaded pages and micro-frontends.
+head:
+  - - meta
+    - name: keywords
+      content: maz-ui provider, vue provider component, lazy loading, theme provider, translations provider, tree-shaking, code splitting, maz-ui
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+## Why MazUiProvider?
+
+The standard approach to initialize Maz-UI is the [`MazUi` plugin](./vue.md#install-plugin) in your `main.ts`. This works well, but it means theme and translation setup code is loaded in your **entry bundle** -- even on pages that don't use Maz-UI components.
+
+`MazUiProvider` solves this by moving the initialization into a **component** that you place in a lazy-loaded route or subtree. The result: **zero Maz-UI footprint in your entry bundle**.
+
+## Before & After
+
+### Before: Plugin in main.ts (entry bundle)
+
+```typescript
+// main.ts -- loaded on EVERY page
+import { MazUi } from 'maz-ui/plugins/maz-ui'
+import { mazUi } from '@maz-ui/themes/presets/mazUi'
+import { fr } from '@maz-ui/translations'
+import 'maz-ui/styles'
+
+app.use(MazUi, {
+  theme: {
+    preset: mazUi,
+    strategy: 'hybrid',
+  },
+  translations: {
+    locale: 'fr',
+    messages: { fr },
+  },
+})
+```
+
+All of `@maz-ui/themes`, `@maz-ui/translations`, and the preset data end up in the initial bundle.
+
+### After: Provider in a lazy-loaded page
+
+```typescript
+// main.ts -- clean, no Maz-UI code
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import App from './App.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/dashboard',
+      // Lazy-loaded -- Maz-UI code only loads when user navigates here
+      component: () => import('./pages/Dashboard.vue'),
+    },
+  ],
+})
+
+createApp(App).use(router).mount('#app')
+```
+
+```vue
+<!-- pages/Dashboard.vue -- lazy-loaded -->
+<script setup lang="ts">
+import { MazUiProvider } from 'maz-ui/components'
+import { mazUi } from '@maz-ui/themes/presets/mazUi'
+import { fr } from '@maz-ui/translations'
+</script>
+
+<template>
+  <MazUiProvider
+    :theme="{ preset: mazUi, strategy: 'hybrid' }"
+    :translations="{ locale: 'fr', messages: { fr } }"
+  >
+    <!-- All Maz-UI components inside this subtree work as expected -->
+    <MazBtn color="primary">Dashboard Action</MazBtn>
+    <MazInput placeholder="Search..." />
+  </MazUiProvider>
+</template>
+```
+
+The entire Maz-UI setup is now code-split into the Dashboard chunk.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `theme` | `MazUiThemeOptions` | Yes | -- | Theme configuration (preset, strategy, dark mode, etc.). Same options as the `theme` key in the [MazUi plugin](./vue.md#install-plugin). See [Theming](./themes.md) for details. |
+| `translations` | `MazUiTranslationsOptions` | No | `undefined` | Translations configuration (locale, messages, fallback). Same options as the `translations` key in the [MazUi plugin](./vue.md#install-plugin). See [Translations](./translations.md) for details. |
+
+### MazUiThemeOptions
+
+```typescript
+interface MazUiThemeOptions {
+  preset?: ThemePreset         // Theme preset (mazUi, ocean, pristine, obsidian, or custom)
+  overrides?: ThemePresetOverrides // Partial overrides for colors, foundation, etc.
+  strategy?: 'runtime' | 'buildtime' | 'hybrid' // CSS generation strategy (default: 'hybrid')
+  darkModeStrategy?: 'class' | 'media'           // Dark mode handling (default: 'class')
+  colorMode?: 'light' | 'dark' | 'auto'          // Initial color mode (default: 'auto')
+  mode?: 'light' | 'dark' | 'both'               // Supported color modes (default: 'both')
+}
+```
+
+### MazUiTranslationsOptions
+
+```typescript
+interface MazUiTranslationsOptions {
+  locale?: string                    // Active locale (default: 'en')
+  fallbackLocale?: string            // Fallback locale (default: 'en')
+  preloadFallback?: boolean          // Preload fallback locale (default: true)
+  messages?: MazUiTranslationsMessages // Locale messages (static objects or lazy loaders)
+}
+```
+
+## Plugin vs Provider
+
+| | Plugin (`MazUi`) | Component (`MazUiProvider`) |
+|---|---|---|
+| **Setup location** | `main.ts` via `app.use()` | Any `.vue` template |
+| **Bundle impact** | Loaded in the entry bundle | Can be lazy-loaded with the page |
+| **Scope** | Global (entire app) | Subtree (children of the provider) |
+| **Reconfigurable** | Configured once at install | Reactive to prop changes |
+| **Best for** | Apps that use Maz-UI on every page | Apps with Maz-UI on specific pages, micro-frontends, testing |
+
+### When to use the plugin
+
+- Your app uses Maz-UI components on most or all pages
+- You want a simple, one-time setup
+- You're using Nuxt (the [Nuxt module](./nuxt.md) handles everything automatically)
+
+### When to use the provider
+
+- Maz-UI is only used on certain lazy-loaded routes
+- You want zero Maz-UI overhead in the initial bundle
+- You're building a micro-frontend or embedding Maz-UI in a larger app
+- You need different theme/translation configurations in different parts of your app
+- You want theme configuration to be reactive to prop changes
+
+## Using Both Together
+
+If you use both the plugin and the provider, **the provider takes precedence in its subtree**. Children of `MazUiProvider` will use the provider's theme and translations, while the rest of the app uses the plugin's configuration.
+
+```vue
+<!-- App.vue -->
+<!-- Plugin provides global defaults -->
+<template>
+  <div>
+    <!-- Uses plugin theme (mazUi preset) -->
+    <MazBtn color="primary">Global Theme</MazBtn>
+
+    <!-- Provider overrides in this subtree -->
+    <MazUiProvider :theme="{ preset: ocean }">
+      <!-- Uses ocean preset -->
+      <MazBtn color="primary">Ocean Theme</MazBtn>
+    </MazUiProvider>
+  </div>
+</template>
+```
+
+This is possible because both the plugin and the provider use the same Vue `provide` injection keys (`mazThemeState` and `mazTranslations`). Vue's `provide`/`inject` mechanism ensures the nearest ancestor provider wins.
+
+## Full Example
+
+```vue
+<script setup lang="ts">
+import { MazUiProvider } from 'maz-ui/components'
+import { mazUi } from '@maz-ui/themes/presets/mazUi'
+import { fr } from '@maz-ui/translations'
+import { ref } from 'vue'
+
+const locale = ref('fr')
+</script>
+
+<template>
+  <MazUiProvider
+    :theme="{
+      preset: mazUi,
+      strategy: 'hybrid',
+      colorMode: 'auto',
+    }"
+    :translations="{
+      locale,
+      fallbackLocale: 'en',
+      messages: { fr },
+    }"
+  >
+    <div class="maz-bg-background maz-text-foreground maz-p-4">
+      <h1>My Dashboard</h1>
+      <MazBtn color="primary">Action</MazBtn>
+      <MazInput placeholder="Search..." />
+    </div>
+  </MazUiProvider>
+</template>
+```

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

@@ -68,7 +68,7 @@ v4.0.0 separates functionality into specialized packages for better modularity:
 | **@maz-ui/themes** | Theme system and presets | New |
 | **@maz-ui/translations** | i18n translations | New |
 | **@maz-ui/utils** | JavaScript/TypeScript utilities | New |
-| **@maz-ui/icons** | SVG icons and flags (840+ icons) | New |
+| **@maz-ui/icons** | SVG icons and flags (860+ icons) | New |
 | **@maz-ui/cli** | CLI for theme generation | Renamed |
 | **@maz-ui/nuxt** | Nuxt module | New |
 | **@maz-ui/mcp** | MCP server for IA agent | New |

package/docs/src/guide/nuxt.md

@@ -445,6 +445,10 @@ export default defineNuxtConfig({
 })
 ```
 
+::: tip Subtree Overrides with MazUiProvider
+You can use [`MazUiProvider`](./maz-ui-provider.md) within a Nuxt app to override theme or translations in a specific subtree, while the module handles global defaults.
+:::
+
 ## Troubleshooting
 
 ### Theme System Issues

package/docs/src/guide/themes.md

@@ -48,6 +48,10 @@ app.use(MazUi, {
 })
 ```
 
+::: tip Alternative: MazUiProvider
+You can also initialize the theme via the [`MazUiProvider`](./maz-ui-provider.md) component for lazy-loaded pages or subtree-scoped themes.
+:::
+
 ### 2. Setup your CSS to support theme foundation and dark mode
 
 ```css

package/docs/src/guide/translations.md

@@ -72,6 +72,10 @@ app.use(MazUi, {
 })
 ```
 
+::: tip Alternative: MazUiProvider
+You can also provide translations via the [`MazUiProvider`](./maz-ui-provider.md) component for lazy-loaded pages or subtree-scoped configurations.
+:::
+
 ## How it works
 
 1. 🌍 **You install the MazUi plugin** - This tells your app to use translations

package/docs/src/guide/vue.md

@@ -41,7 +41,7 @@ yarn add maz-ui @maz-ui/themes
 import { MazUi } from 'maz-ui/plugins/maz-ui'
 
 import { mazUi } from '@maz-ui/themes'
-import { en } from '@maz-ui/translations'
+import { en } from '@maz-ui/translations/locales'
 
 import 'maz-ui/styles'
 
@@ -65,7 +65,8 @@ You must the MazUi plugin to initialize the theme and translations.
 ```typescript
 import { MazUi } from 'maz-ui/plugins/maz-ui'
 import { mazUi } from '@maz-ui/themes/presets'
-import { fr } from '@maz-ui/translations'
+import { fr } from '@maz-ui/translations/locales'
+// or import fr from '@maz-ui/translations/locales/fr'
 
 // Import Maz-UI styles before your own CSS
 import 'maz-ui/styles'
@@ -108,6 +109,10 @@ app.use(MazUi, {
 app.mount('#app')
 ```
 
+::: tip Alternative: MazUiProvider
+If Maz-UI is only used on specific pages, you can use the [`MazUiProvider`](./maz-ui-provider.md) component instead of the plugin to keep Maz-UI out of your entry bundle.
+:::
+
 ## Using your first component
 
 Let's start with a simple button to see Maz-UI in action:

package/docs/src/index.md

@@ -239,7 +239,7 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
         </div>
         <h3 class="maz-text-base maz-font-semibold">@maz-ui/icons</h3>
         <p class="dark:maz-text-gray-300 maz-text-muted maz-text-sm">
-          328+ beautiful SVG icons ready for Vue. Multiple usage patterns: components, direct SVG files, or auto-import.
+          860+ beautiful SVG icons ready for Vue. Multiple usage patterns: components, direct SVG files, or auto-import.
         </p>
         <div class="maz-flex-1"></div>
         <MazBtn color="background" outlined size="sm" block href="/guide/icons">Discover</MazBtn>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maz-ui/mcp",
   "type": "module",
-  "version": "4.6.1",
+  "version": "4.7.0-beta.0",
   "description": "Maz-UI ModelContextProtocol Client",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -41,12 +41,12 @@
     "docs"
   ],
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.25.3",
+    "@modelcontextprotocol/sdk": "^1.26.0",
     "@maz-ui/node": "4.6.1",
-    "@maz-ui/utils": "4.6.1"
+    "@maz-ui/utils": "4.7.0-beta.0"
   },
   "devDependencies": {
-    "@modelcontextprotocol/inspector": "^0.19.0",
+    "@modelcontextprotocol/inspector": "^0.20.0",
     "@swc/core": "1.15.11",
     "eslint": "^9.39.2",
     "lint-staged": "^16.2.7",
@@ -54,7 +54,7 @@
     "ts-node-maintained": "^10.9.5",
     "tsx": "^4.21.0",
     "unbuild": "^3.6.1",
-    "@maz-ui/eslint-config": "4.6.1"
+    "@maz-ui/eslint-config": "4.7.0-beta.0"
   },
   "lint-staged": {
     "*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"