@maz-ui/mcp 5.0.1-beta.0 → 5.1.0-beta.1

package/docs/src/blog/v4.md

@@ -1,276 +0,0 @@
----
-title: Maz-UI v4.0.0 - The Complete Rebuild
-description: Discover the complete rebuild of Maz-UI - now with modular architecture, advanced tree-shaking, comprehensive theming system, and performance optimizations that will transform your Vue & Nuxt development experience.
-date: 2024-12-15
-author: Louis Mazel
-layout: doc
-head:
-  - - meta
-    - name: keywords
-      content: vue ui library, vue components, nuxt ui, maz-ui v4, tree-shaking, theming, typescript, performance
----
-
-<img src="/img/post-layer.png" alt="Maz-UI v4.0.0" class="maz:rounded-md maz:w-full maz:mb-12" />
-
-# Maz-UI v4.0.0 - The Complete Rebuild
-
-After months of development, I'm announcing **Maz-UI v4.0.0** — a complete architectural rebuild focused on performance, modularity, and developer experience.
-
-## Why I Built v4.0.0
-
-Modern applications require better performance, smaller bundle sizes, and improved developer tooling. Maz-UI v3 served its purpose, but I wanted to address these requirements with a ground-up rebuild.
-
-**The goals were:** Better tree-shaking, modular architecture, and enhanced TypeScript support.
-
-## What's New
-
-### Modular Architecture
-
-Maz-UI v4 uses a monorepo structure where every component, composable, directive, and utility can be imported independently. This gives you better control over your bundle size.
-
-### Bundle Size Improvements
-
-Optimal tree-shaking implementation results in **60-90% bundle size reductions** compared to v3. You can now import exactly what you need.
-
-```typescript
-// Before v4: Large bundle with unused code
-import * as MazUI from 'maz-ui/components'
-
-// v4: Surgical imports for minimal bundles
-import MazBtn from 'maz-ui/components/MazBtn'
-import { useToast } from 'maz-ui/composables'
-import { formatCurrency } from '@maz-ui/utils'
-```
-
-### Theme System
-
-#### Four Theme Presets
-
-Choose from four pre-built themes:
-
-- **Maz-UI**: Vibrant and modern with signature Maz-UI aesthetics
-- **Pristine**: Minimalist elegance
-- **Ocean**: Fresh aquatic theme with deep blues and coral accents
-- **Obsidian**: Sophisticated dark theme focused on readability
-
-#### HSL CSS Variables & Smart Dark Mode
-
-The theming system uses HSL variables for flexibility, with automatic color scale generation (50-950) and dark mode support.
-
-```typescript
-import { MazUi } from 'maz-ui/plugins/maz-ui'
-import { ocean } from '@maz-ui/themes/presets'
-
-app.use(MazUi, {
-  theme: {
-    preset: ocean,
-    strategy: 'hybrid', // Optimal performance
-    darkModeStrategy: 'class'
-  }
-})
-```
-
-### Internationalization
-
-#### Multi-language Support
-
-Support for 9 languages: English, French, German, Spanish, Italian, Portuguese, Japanese, and Chinese, with custom language integration.
-
-```typescript
-import { MazUi } from 'maz-ui/plugins/maz-ui'
-import { fr, en } from '@maz-ui/translations'
-
-app.use(MazUi, {
-  translations: {
-    locale: 'fr',
-    fallbackLocale: 'en',
-    messages: { fr, en }
-  }
-})
-```
-
-### Specialized Ecosystem Packages
-
-- **@maz-ui/icons** - 860+ Icons
-SVG icon library with Vue components, direct SVG files, and auto-import support.
-
-- **@maz-ui/nuxt** - Nuxt Integration
-Nuxt module with auto-imports and SSR support.
-
-- **@maz-ui/themes** - Theming System
-Pre-built theme collections and design tokens.
-
-- **@maz-ui/translations** - Internationalization
-Lightweight i18n system for Maz-UI components.
-
-- **@maz-ui/mcp** - MCP Server
-Model Context Protocol server that connects AI agents to Maz-UI documentation.
-
-### New & Enhanced Components
-
-- **MazPopover** - Overlay Component
-Popover with positioning, trigger modes, and accessibility features.
-
-- **MazSelectCountry** - Country Selector
-Country/language selector with i18n support and flag display.
-
-- **MazLink** - Link Component
-Replaces `MazBtn variant="link"` with auto-external detection and icons.
-
-- **MazExpandAnimation** - CSS Grid Animations
-Replaces `MazTransitionExpand` with v-model control and timing functions.
-
-- **MazDropzone** - File Upload
-Rewritten without external dependencies, featuring auto-upload and event handling.
-
-## Performance Improvements
-
-| Metric | v3.x | v4.0.0 | Improvement |
-|--------|------|--------|-------------|
-| **Bundle Size** | ~500KB | ~50-200KB | **60-90%** reduction |
-| **Tree-shaking** | Limited | Optimal | Perfect granular imports |
-| **TypeScript** | Good | Excellent | Strict types with auto-completion |
-| **Build Speed** | Standard | Enhanced | Faster compilation |
-
-## Developer Experience
-
-### TypeScript-First Architecture
-
-All components, composables, and utilities include TypeScript definitions with IDE auto-completion. Types are prefixed with `Maz` for consistency.
-
-### Auto-Import Resolvers
-
-Integration with `unplugin-vue-components` and `unplugin-auto-import` for auto-imports.
-
-### Composable-Based Architecture
-
-Several utilities are now Vue composables:
-
-```typescript
-// Before: Utility function
-import { idleTimeout } from 'maz-ui'
-
-// v4: Vue composable with reactive state
-import { useIdleTimeout } from 'maz-ui/composables'
-const { isIdle } = useIdleTimeout({ timeout: 5000 })
-```
-
-### Enhanced Development Tools
-
-- Nuxt DevTools integration
-- Interactive documentation with live examples
-- Comprehensive migration guides
-- MCP server for AI-assisted development
-
-## Key Features
-
-### Modular
-
-Import individual components without the entire library. Tree-shaking ensures minimal bundle size.
-
-### SSR Compatible
-
-Compatible with Nuxt and server-side rendering.
-
-### TypeScript Support
-
-Built with TypeScript with auto-completion and type safety.
-
-### Theming System
-
-HSL-based theming with CSS custom properties and multiple rendering strategies.
-
-### Dark Mode
-
-Components support light and dark themes with system preference detection.
-
-### Complete Ecosystem
-
-Components, plugins, directives, composables, and utilities.
-
-## Getting Started
-
-### For Vue Projects
-
-```bash
-npm install maz-ui@4.0.0
-```
-
-```typescript
-// main.ts
-import { createApp } from 'vue'
-import { MazUi } from 'maz-ui/plugins/maz-ui'
-import { mazUi } from '@maz-ui/themes/presets'
-import { fr } from '@maz-ui/translations'
-import 'maz-ui/style.css'
-
-const app = createApp(App)
-
-app.use(MazUi, {
-  theme: { preset: mazUi },
-  translations: {
-    locale: 'fr',
-    fallbackLocale: 'en',
-    messages: { fr }
-  }
-})
-
-app.mount('#app')
-```
-
-### For Nuxt Projects
-
-```bash
-npm install @maz-ui/nuxt
-```
-
-```typescript
-// nuxt.config.ts
-export default defineNuxtConfig({
-  modules: ['@maz-ui/nuxt'],
-})
-```
-
-## Migration Resources
-
-To help with migration from v3 to v4:
-
-- **[Complete Migration Guide](../guide/migration-v4.md)** - Step-by-step migration instructions
-- **[MCP Integration](../ecosystem/mcp.md)** - Connect AI agents for migration assistance
-- **[Interactive Examples](../index.md)** - Live demonstrations of new features
-- **[Community Support](https://github.com/LouisMazel/maz-ui/discussions)** - Get help from the community
-
-## Summary
-
-Maz-UI v4.0.0 is a complete rebuild focusing on performance, modularity, and developer experience. The new architecture provides better tree-shaking, smaller bundles, and improved TypeScript support.
-
-Whether you're building a small project or large application, v4 offers the components and tools you need with better performance characteristics.
-
-## Essential Links
-
-- **[Get Started](/guide/getting-started)** - Installation and setup
-- **[View Components](/components/maz-btn)** - Explore 50+ components
-- **[Migration Guide](/guide/migration-v4)** - Upgrade from v3.x
-- **[GitHub Repository](https://github.com/LouisMazel/maz-ui)** - Source code & issues
-- **[Changelog](https://github.com/LouisMazel/maz-ui/blob/master/CHANGELOG.md)** - Detailed release notes
-- **[v3 Documentation](https://v3.maz-ui.com)** - Legacy version support
-
-## Get Started
-
-**Ready to try Maz-UI v4.0.0?**
-
-<div class="maz:flex maz:gap-4 maz:mt-8 maz:flex-wrap">
-  <MazBtn href="https://maz-ui.com/guide/getting-started" size="md" class="vp-raw">
-    Get Started Now
-  </MazBtn>
-  <MazBtn href="https://maz-ui.com/guide/migration-v4" color="surface" outlined size="md" class="vp-raw">
-    Migration Guide
-  </MazBtn>
-  <MazBtn href="https://github.com/LouisMazel/maz-ui" color="surface" outlined size="md" target="blank" class="vp-raw">
-    View on GitHub
-  </MazBtn>
-</div>
-
----
-
-*Feel free to share your feedback and contribute to the project on GitHub.*

package/docs/src/blog/v5.md

@@ -1,184 +0,0 @@
----
-title: Maz-UI v5.0.0 - Theming, perfected
-description: Maz-UI v5 is a focused major release - a theming overhaul on top of Tailwind v4, sharper presets, RTL-correct components, a lighter chart, and tooling to make the upgrade itself a single command.
-date: 2026-05-05
-author: Louis Mazel
-layout: doc
-head:
-  - - meta
-    - name: keywords
-      content: vue ui library, vue components, nuxt ui, maz-ui v5, theming, tailwindcss v4, oklch, rtl, migration
----
-
-<img src="/img/post-layer-v5.jpg" alt="Maz-UI v5.0.0" class="maz:rounded-md maz:w-full maz:mb-12" />
-
-# Maz-UI v5.0.0 - Theming, perfected
-
-After the v4 rebuild, **Maz-UI v5** is a focused major: **theming**, the move to **Tailwind v4**, and a few long-standing rough edges I wanted gone before tagging stable.
-
-## Why v5
-
-Two things forced the major.
-
-**Tailwind v4 landed.** v4's CSS-first config, new prefix syntax and renamed utilities don't migrate behind the scenes. Bumping Tailwind is a real version change.
-
-**Theming had outgrown the v4 design.** The single foundation `radius`, the `background` / `border` color names that meant something else than what components actually used, the dual-stage critical-CSS pipeline — none of that aged well. v5 cleans the surface, switches the color system to **OKLCh** for perceptually uniform scales, and exposes proper `scales` and `components` blocks.
-
-The rest builds on those: components flip cleanly under `dir="rtl"`, the chart is lighter, the icon API is simpler, and there's a CLI for the mechanical part of the upgrade.
-
-## What's new
-
-### Theming, top to bottom
-
-**OKLCh under the hood.** Bundled presets and the dynamic scale generator emit `oklch()` strings. Generated scales (`primary-50` → `primary-950`) ramp consistently across hues — yellow-700 no longer looks muddy next to blue-700, and Display P3 is on the table. Existing custom presets in `hsl()`, `rgb()`, `#hex` or the legacy `'210 100% 56%'` form keep parsing.
-
-**Honest names.** `background` is now `surface`, `border` is now `divider` — same rename in the runtime CSS variables (`--maz-surface[-N]`, `--maz-divider[-N]`).
-
-**A real radius scale.** `foundation.radius` becomes `scales.rounded.{xs..3xl}`, so `maz:rounded-md`, `maz:rounded-lg`, etc. all move with your preset.
-
-**A `components` block.** Per-component tokens (button font weight, container/input backgrounds, …) are now explicit knobs you can override. Optional, with sensible defaults.
-
-**A new bundled preset, `nova`** — electric violet primary, cyan accent, hot coral secondary, Geist font stack — joins `mazUi`, `pristine`, `ocean` and `obsidian`. Each existing preset got a palette refresh so secondary and accent voices actually pop.
-
-**Preset persistence.** v5 remembers the user's last preset choice in a `maz-preset` cookie (1-year, `SameSite=Lax`) so a runtime theme switcher survives reloads. Opt out with `persistPreset: false`.
-
-**Single rendering path.** The two-stage critical-CSS / async-full-CSS dance is gone. `Strategy` is now `'runtime' | 'buildtime'`. Less surface, less to worry about.
-
-### Components that respect direction
-
-Every prop, slot and CSS hook that named a *visual* edge is now a *logical* edge:
-
-- `left-icon` / `right-icon` → `start-icon` / `end-icon` (props, slots, classes)
-- `MazCard` `footer-align` and `MazDrawer` `variant` flip from `left | right` to `start | end`
-- `top` / `bottom` stay (block-axis edges that don't flip in RTL)
-
-Drop `dir="rtl"` on `<html>` and components mirror correctly. Same approach as Radix, MUI or native CSS logical properties.
-
-### A lighter chart
-
-`MazChart` no longer wraps `vue-chartjs`. It talks to `chart.js` directly, lazy-loads the engine on mount, and only registers the modules the chart `type` actually needs. `update-mode` defaults to `'none'` so reactive data updates don't re-animate every frame — pass `update-mode="default"` for the v4 behavior.
-
-### A simpler icon API
-
-`MazIcon` v4 had four ways to specify an icon. v5 collapses everything into a single `icon` prop that accepts a Vue component, a URL/`data:` URI, or a raw SVG string.
-
-Plus three small additions:
-
-- `fallback` — used when the icon is missing or fails to load.
-- `flip-icon-for-rtl` — auto-mirrors chevrons / arrows in RTL.
-- `@maz-ui/icons/raw/*` — every bundled icon as a **raw SVG string** for inlining without a Vue component or async chunk.
-
-### `MazBadge` size, standardized
-
-The numeric `size="0.8rem"` form is gone. Like the rest of the library, `MazBadge`'s `size` is one of `'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'`.
-
-### Modern browsers, finally
-
-v5 leans on `color-mix()`, `@property` and native CSS nesting. That means **Chromium 111+, Safari 16.4+, Firefox 128+** — no polyfill path. If your audience still relies on older browsers, stay on v4. Full rationale on the [Browser Support](/guide/browser-support) page.
-
-## Migration
-
-Two tools so the upgrade isn't a chore.
-
-### `@maz-ui/upgrade` — a one-shot CLI
-
-```bash
-# Preview
-npx @maz-ui/upgrade ./ --dry-run
-
-# Apply
-npx @maz-ui/upgrade ./
-```
-
-It handles the mechanical part of the migration (CSS subpath imports, prop renames, CSS var renames, Nuxt config keys, custom preset color keys, and `package.json` version bumps)
-
-### `@maz-ui/mcp` — for everything else
-
-A few changes need a human eye: `MazIcon` API (needs your original asset paths), `MazBadge` numeric size mapping, `foundation.radius` → `scales.rounded.md` reshape, and `MazChart` `update-mode` default.
-
-The [`@maz-ui/mcp`](/ecosystem/mcp) server exposes the migration guide and every other Maz-UI doc to your AI assistant. Connect it once, then walk the guide section by section against your codebase — there's a [step-by-step flow](/guide/migration-v5#migrate-with-the-maz-ui-mcp-server) ready to copy-paste.
-
-```bash
-# Claude Code
-claude mcp add maz-ui npx @maz-ui/mcp --scope project
-```
-
-Cursor, Windsurf, VS Code Copilot, Cline and Claude Desktop are all in the [MCP guide](/ecosystem/mcp).
-
-### The full guide
-
-Everything that changed: [v5 migration guide](/guide/migration-v5).
-
-## Solo maintainer notice
-
-Maz-UI is maintained by a single developer. After v5 stable, **v4 will no longer receive support** — no security fixes, no backports. Plan your upgrade.
-
-## Getting Started
-
-### For Vue projects
-
-```bash
-npm install maz-ui@5
-```
-
-```typescript
-// main.ts
-import { createApp } from 'vue'
-import { MazUi } from 'maz-ui/plugins/maz-ui'
-import { mazUi } from '@maz-ui/themes/presets'
-import { fr } from '@maz-ui/translations'
-import 'maz-ui/style.css'
-
-const app = createApp(App)
-
-app.use(MazUi, {
-  theme: { preset: mazUi },
-  translations: { locale: 'fr', fallbackLocale: 'en', messages: { fr } },
-})
-
-app.mount('#app')
-```
-
-### For Nuxt projects
-
-```bash
-npm install @maz-ui/nuxt@5
-```
-
-```typescript
-// nuxt.config.ts
-export default defineNuxtConfig({
-  modules: ['@maz-ui/nuxt'],
-})
-```
-
-## Essential Links
-
-- **[v5 Migration Guide](/guide/migration-v5)** — every breaking change, the upgrade CLI, the MCP flow
-- **[Theming](/ecosystem/themes)** — preset authoring, `scales` and `components` blocks, runtime switching
-- **[Browser Support](/guide/browser-support)** — minimum versions and the features they enable
-- **[Tailwind integration](/guide/tailwind)** — for consumers who ship their own Tailwind setup
-- **[`@maz-ui/upgrade` README](https://github.com/LouisMazel/maz-ui/tree/master/packages/upgrade)** — full transform list and CLI reference
-- **[Model Context Protocol (MCP)](/ecosystem/mcp)** — connect AI assistants to the Maz-UI docs
-- **[GitHub Repository](https://github.com/LouisMazel/maz-ui)** — source code & issues
-- **[Changelog](https://github.com/LouisMazel/maz-ui/blob/master/CHANGELOG.md)** — detailed release notes
-
-## Get Started
-
-**Ready to upgrade to Maz-UI v5?**
-
-<div class="maz:flex maz:gap-4 maz:mt-8 maz:flex-wrap">
-  <MazBtn href="https://maz-ui.com/guide/migration-v5" size="md" class="vp-raw">
-    Migration Guide
-  </MazBtn>
-  <MazBtn href="https://maz-ui.com/guide/getting-started" color="surface" outlined size="md" class="vp-raw">
-    Get Started
-  </MazBtn>
-  <MazBtn href="https://github.com/LouisMazel/maz-ui" color="surface" outlined size="md" target="blank" class="vp-raw">
-    View on GitHub
-  </MazBtn>
-</div>
-
----
-
-*Feedback and contributions welcome — open an issue or discussion on GitHub.*

package/docs/src/changelog.md

@@ -1,7 +0,0 @@
----
-title: Changelog
-description: Latest changes in Maz-UI and its ecosystem.
-sidebar: false
----
-
-<!--@include: ./../../../CHANGELOG.md-->

package/docs/src/components/index.md

@@ -1,8 +0,0 @@
----
-title: Components
-description: todo
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}

package/docs/src/components/maz-accordion.md

@@ -1,80 +0,0 @@
----
-title: MazAccordion
-description: MazAccordion is a standalone component that allows you to create an accordion with a title and content.
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
-
-## Basic usage
-
-<MazAccordion class="maz:w-full">
-  <template #title-1>
-    Title 1
-  </template>
-  <template #content-1>
-    Content 1
-  </template>
-  <template #title-2>
-    Title 2
-  </template>
-  <template #content-2>
-    Content 2
-  </template>
-  <template #title-3>
-    Title 3
-  </template>
-  <template #content-3>
-    Content 3
-  </template>
-  <template #title-4>
-    Title 4
-  </template>
-  <template #content-4>
-    Content 4
-  </template>
-</MazAccordion>
-
-```vue
-<script lang="ts" setup>
-import MazAccordion from 'maz-ui/components/MazAccordion'
-</script>
-
-<template>
-  <MazAccordion>
-    <template #title-1>
-      Title 1
-    </template>
-    <template #content-1>
-      Content 1
-    </template>
-
-    <template #title-2>
-      Title 2
-    </template>
-    <template #content-2>
-      Content 2
-    </template>
-
-    <template #title-3>
-      Title 3
-    </template>
-    <template #content-3>
-      Content 3
-    </template>
-
-    <template #title-4>
-      Title 4
-    </template>
-    <template #content-4>
-      Content 4
-    </template>
-    <MazAccordion />
-  </mazaccordion>
-</template>
-```
-
-<!--@include: ./../../.vitepress/generated-docs/maz-accordion.doc.md-->

package/docs/src/components/maz-animated-counter.md

@@ -1,124 +0,0 @@
----
-title: MazAnimatedCounter
-description: MazAnimatedCounter is a standalone component that allows you to animate a number from 0 to a specific value. Fully animated with CSS.
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
-
-## Basic usage
-
-<ComponentDemo expanded>
-  <MazAnimatedCounter :count="count" />
-
-<template #code>
-
-```vue
-<script lang="ts" setup>
-import MazAnimatedCounter from 'maz-ui/components/MazAnimatedCounter'
-
-const count = ref(Math.floor(Math.random() * 99999))
-
-onMounted(() => {
-  setInterval(() => {
-    count.value = Math.floor(Math.random() * 99999)
-  }, 3000)
-})
-</script>
-
-<template>
-  <MazAnimatedCounter :count="4000" />
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-<script setup lang="ts">
-  import { ref, onMounted } from 'vue'
-  const count = ref(Math.floor(Math.random() * 99999))
-
-  onMounted(() => {
-    setInterval(() => {
-      count.value = Math.floor(Math.random() * 99999)
-    }, 3000)
-  })
-</script>
-
-## duration
-
-You can set the duration of the animation with the `duration` prop. The default value is `1000` ms.
-
-<ComponentDemo>
-  <MazAnimatedCounter :count="4000" :duration="5000" />
-
-<template #code>
-
-```vue
-<MazAnimatedCounter :count="4000" :duration="5000" />
-```
-
-  </template>
-</ComponentDemo>
-
-## prefix and suffix
-
-You can add a prefix and a suffix to the number with props or slots.
-
-Be careful, you can't use both at the same time.
-
-<ComponentDemo>
-  <p class="maz:font-semibold">
-    Prefixed
-  </p>
-
-  <br />
-
-  <MazAnimatedCounter :count="20" prefix="$" />
-  <br />
-  <MazAnimatedCounter :count="20">
-    <template #prefix>$</template>
-  </MazAnimatedCounter>
-
-  <br />
-  <br />
-
-  <p class="maz:font-semibold">
-    Suffixed
-  </p>
-
-  <br />
-  <MazAnimatedCounter :count="100" suffix="%" />
-  <br />
-
-  <MazAnimatedCounter :count="100">
-    <template #suffix>%</template>
-  </MazAnimatedCounter>
-
-<template #code>
-
-```html
-<p class="maz:font-semibold">Prefixed</p>
-
-<MazAnimatedCounter :count="20" prefix="$" />
-
-<MazAnimatedCounter :count="20">
-  <template #prefix>$</template>
-</MazAnimatedCounter>
-
-<p class="maz:font-semibold">Suffixed</p>
-
-<MazAnimatedCounter :count="100" suffix="%" />
-
-<MazAnimatedCounter :count="100">
-  <template #suffix>%</template>
-</MazAnimatedCounter>
-```
-
-  </template>
-</ComponentDemo>
-
-<!--@include: ./../../.vitepress/generated-docs/maz-animated-counter.doc.md-->