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

package/docs/src/composables/use-toast.md

@@ -1,71 +0,0 @@
----
-title: useToast
-description: Vue composable for handling toast plugin in your components
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-::: warning
-You must install [toast plugin](./../plugins/toast.md#install) before use it
-:::
-
-::: tip
-More info about [toast plugin](./../plugins/toast.md) in its documentation
-:::
-
-## Usage
-
-```vue
-<script lang="ts" setup>
-import { useToast } from 'maz-ui/composables'
-
-const toast = useToast()
-
-toast.info('info message', {
-  button: {
-    onClick: () => toast.success('clicked'),
-    text: 'Click me',
-    closeToast: true
-  }
-})
-toast.success('success message', {
-  button: {
-    href: '/composables/use-toast',
-    text: 'Follow me',
-    closeToast: true,
-  }
-})
-toast.warning('warning message')
-toast.error('error message')
-</script>
-```
-
-<script lang="ts" setup>
-  import { onMounted } from 'vue'
-  import { useToast } from 'maz-ui/composables/useToast'
-
-  const toast = useToast()
-
-  onMounted(() => {
-    toast.info('info message', {
-      button: {
-        onClick: () => toast.success('clicked'),
-        text: 'Click me',
-        closeToast: true
-      }
-    })
-    toast.success('success message', {
-      button: {
-        href: '/composables/use-toast',
-        text: 'Follow me',
-        closeToast: true,
-      }
-    })
-    toast.warning('warning message')
-    toast.error('error message')
-    toast.message('message')
-  })
-
-</script>

package/docs/src/composables/use-wait.md

@@ -1,62 +0,0 @@
----
-title: useWait
-description: Vue composable for handling wait plugins
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-::: warning
-You must install the [wait plugin](./../plugins/wait.md#install) before using it
-:::
-
-::: tip
-More info about the [wait plugin](./../plugins/wait.md) in its documentation
-:::
-
-## Usage
-
-<MazFullscreenLoader v-if="wait.isLoading('MAIN_LOADER')">
-  Loading
-</MazFullscreenLoader>
-<p v-else> Loaded </p>
-
-```vue
-<script lang="ts" setup>
-import { sleep } from '@maz-ui/utils'
-import { useWait } from 'maz-ui/composables'
-import { onMounted } from 'vue'
-
-const wait = useWait()
-
-onMounted(async () => {
-  wait.start('MAIN_LOADER')
-  await sleep(2000)
-  wait.stop('MAIN_LOADER')
-})
-</script>
-
-<template>
-  <MazFullscreenLoader v-if="wait.isLoading('MAIN_LOADER')">
-    Loading
-  </MazFullscreenLoader>
-  <p v-else>
-    Loaded
-  </p>
-</template>
-```
-
-<script lang="ts" setup>
-  import { onMounted } from 'vue'
-  import { sleep } from '@maz-ui/utils'
-  import { useWait } from 'maz-ui/composables/useWait'
-
-  const wait = useWait()
-
-  onMounted(async () => {
-    wait.start('MAIN_LOADER')
-    await sleep(2000)
-    wait.stop('MAIN_LOADER')
-  })
-</script>

package/docs/src/composables/use-window-size.md

@@ -1,18 +0,0 @@
----
-title: useWindowSize
-description: This composable provides a simple utility to track the width and height of the browser window with reactivity
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-## Basic usage
-
-```ts
-const { height, width } = useWindowSize()
-```
-
-::: warning
-More documentation to come
-:::

package/docs/src/ecosystem/icons/icon-set.md

@@ -1,123 +0,0 @@
-# Icon Set (860+ icons)
-
-The library includes **860+ icons**
-
-## Icon Naming Convention
-
-All icons follow a consistent naming pattern:
-
-- 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
-
-<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()" :start-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-md 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="surface" 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="surface" 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="surface" outlined @click="copyLazyImport(icon.name)" :icon="ClipboardDocumentListIcon" />
-        </div>
-      </div>
-    </div>
-  </div>
-</ComponentDemo>
-
-<script setup>
-import { computed, ref, shallowRef } from 'vue'
-import { useToast } from 'maz-ui/composables/useToast'
-import { vTooltip } from 'maz-ui/directives/vTooltip'
-
-const LazyIcons = shallowRef()
-const SearchIcon = shallowRef()
-const ClipboardDocumentIcon = shallowRef()
-const ClipboardDocumentListIcon = shallowRef()
-
-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)
-  }
-
-  acc.all.push(iconComponent)
-
-  return acc
-}, {
-  commonIcons: [],
-  flags: [],
-  flagsSquare: [],
-  logos: [],
-  all: [],
-})
-
-const currentTab = ref(1)
-
-const tabs = [
-  { label: 'All', badge: { color: 'secondary', content: all.length, roundedSize: 'full' } },
-  { label: 'Icons', badge: { color: 'secondary', content: commonIcons.length, roundedSize: 'full' } },
-  { label: 'Logos', badge: { color: 'secondary', content: logos.length, roundedSize: 'full' } },
-  { label: 'Flags', badge: { color: 'secondary', content: flags.length, roundedSize: 'full' } },
-  { label: 'Flags Square', badge: { color: 'secondary', content: flagsSquare.length, roundedSize: 'full' } },
-]
-
-const { success } = useToast()
-
-const search = ref()
-
-const filteredIcons = computed(() => {
-  const _currentTab = currentTab.value
-
-  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
-
-  return baseIcons.filter(icon => icon.name.toLowerCase().includes(_search) || _search.includes(icon.name.toLowerCase()))
-})
-
-const copyIcon = (icon) => {
-  navigator.clipboard.writeText(icon)
-  success('Icon name copied to clipboard')
-}
-
-const copyStaticImport = (icon) => {
-  navigator.clipboard.writeText(`import { ${icon} } from '@maz-ui/icons/${icon}'`)
-  success('Static import copied to clipboard')
-}
-
-const copyLazyImport = (icon) => {
-  navigator.clipboard.writeText(`import { ${icon} } from '@maz-ui/icons/lazy/${icon}'`)
-  success('Lazy import copied to clipboard')
-}
-</script>

package/docs/src/ecosystem/mcp.md

@@ -1,210 +0,0 @@
----
-title: Model Context Protocol (MCP)
-description: Connect Maz-UI with AI assistants using Model Context Protocol - Get intelligent help with components, guides, composables, directives, plugins, and helpers
-head:
-  - - meta
-    - name: keywords
-      content: mcp, model context protocol, ai assistant, claude, cline, maz-ui integration, ai development
----
-
-# {{ $frontmatter.title }}
-
----
-
-<NpmBadge package="@maz-ui/mcp" />
-
-Connect your AI assistant directly to Maz-UI's documentation and get intelligent help with components, composables, directives, plugins, helpers, and best practices.
-
----
-
-- [{{ $frontmatter.title }}](#-frontmattertitle-)
-  - [What is MCP?](#what-is-mcp)
-  - [AI Assistant Configuration](#ai-assistant-configuration)
-    - [Claude Code](#claude-code)
-    - [Claude Desktop](#claude-desktop)
-    - [Cursor IDE](#cursor-ide)
-    - [Windsurf](#windsurf)
-    - [Visual Studio Code (Copilot)](#visual-studio-code-copilot)
-    - [Cline](#cline)
-  - [Available Resources](#available-resources)
-
-## What is MCP?
-
-Think of MCP (Model Context Protocol) as a **smart bridge** between your AI assistant and Maz-UI. It's like giving your AI assistant a direct phone line to all of Maz-UI's documentation!
-
-Instead of asking *"How do I use MazBtn?"* and getting generic answers or answers based on old documentation, your AI can now:
-- 🔍 **Search** through all 50+ Maz-UI components and others
-- 📖 **Read** the exact documentation for any component, composables, directives, plugins, helpers, and best practices
-- 💡 **Suggest** the best way to implement your needs
-- 🛠️ **Help** with implementation examples
-
-::: tip Maz-UI provides a free MCP server with access to:
-
-- 50+ Vue components documentation
-- 14+ composables and utilities
-- 11 comprehensive guides
-- 5 directives and 4 plugins
-- 20+ helper functions
-
-:::
-
-## AI Assistant Configuration
-
-### Claude Code
-
-1. Run the following command:
-
-   ```bash
-   claude mcp add maz-ui npx @maz-ui/mcp --scope (project | local | user)
-   ```
-
-2. Will add the following to your `~/.mcp.json` (for project scope):
-
-   ```json
-   {
-     "mcpServers": {
-       "maz-ui": {
-         "type": "stdio",
-         "command": "npx",
-         "args": ["@maz-ui/mcp"]
-       }
-     }
-   }
-   ```
-
-3. Restart Claude code to apply the new configuration.
-
-### Claude Desktop
-
-1. Open Claude desktop and navigate to Settings.
-
-2. Under the Developer tab, tap Edit Config to open the configuration file.
-
-3. Add the following configuration:
-
-   ```json
-   {
-     "mcpServers": {
-       "maz-ui": {
-         "type": "stdio",
-         "command": "npx",
-         "args": ["@maz-ui/mcp"]
-       }
-     }
-   }
-   ```
-
-4. Save the configuration file and restart Claude desktop.
-
-5. From the new chat screen, you should see a hammer (MCP) icon appear with the new MCP server available.
-
-### Cursor IDE
-
-1. Open Cursor and create a .cursor directory in your project root if it doesn't exist.
-
-2. Create a .cursor/mcp.json file if it doesn't exist and open it.
-
-3. Add the following configuration:
-
-   ```json
-   {
-     "mcpServers": {
-       "maz-ui": {
-         "command": "npx",
-         "args": ["@maz-ui/mcp"]
-       }
-     }
-   }
-   ```
-
-4. Save the configuration file.
-
-5. Open Cursor and navigate to Settings/MCP. You should see a green active status after the server is successfully connected.
-
-### Windsurf
-
-1. Open Windsurf and navigate to the Cascade assistant.
-
-2. Tap on the hammer (MCP) icon, then Configure to open the configuration file.
-
-3. Add the following configuration:
-
-   ```json
-   {
-     "mcpServers": {
-       "maz-ui": {
-         "command": "npx",
-         "args": ["@maz-ui/mcp"]
-       }
-     }
-   }
-   ```
-
-4. Save the configuration file and reload by tapping Refresh in the Cascade assistant.
-
-5. You should see a green active status after the server is successfully connected.
-
-### Visual Studio Code (Copilot)
-
-1. Open VS Code and create a .vscode directory in your project root if it doesn't exist.
-
-2. Create a .vscode/mcp.json file if it doesn't exist and open it.
-
-3. Add the following configuration:
-
-   ```json
-   {
-     "servers": {
-       "maz-ui": {
-         "command": "npx",
-         "args": ["@maz-ui/mcp"]
-       }
-     }
-   }
-   ```
-
-4. Save the configuration file.
-
-5. Open Copilot chat and switch to "Agent" mode. You should see a tool icon that you can tap to confirm the MCP tools are available. Once you begin using the server, you will be prompted to enter your personal access token. Enter the token that you created earlier.
-
-### Cline
-
-1. Open the Cline extension in VS Code and tap the MCP Servers icon.
-
-2. Tap Configure MCP Servers to open the configuration file.
-
-3. Add the following configuration:
-
-   ```json
-   {
-     "mcpServers": {
-       "maz-ui": {
-         "command": "npx",
-         "args": ["@maz-ui/mcp"]
-       }
-     }
-   }
-   ```
-
-4. Save the configuration file. Cline should automatically reload the configuration.
-
-5. You should see a green active status after the server is successfully connected.
-
-## Available Resources
-
-Your AI assistant now has access to:
-
-| Resource Type | Count | Description |
-|---------------|-------|-------------|
-| **Components** | 50+ | All Vue components with props, events, and examples |
-| **Guides** | 11 | Installation, theming, migration, and best practices |
-| **Composables** | 14+ | Reusable Vue composition functions |
-| **Directives** | 5 | Vue directives for enhanced functionality |
-| **Plugins** | 4 | Toast, dialog, AOS, and wait overlay systems |
-| **Helpers** | 20+ | Utility functions for common tasks |
-
-::: warning 🔒 Security Note
-The MCP server provides read-only access to documentation. No sensitive data is transmitted or stored.
-:::
-
-Happy coding with AI-powered Maz-UI assistance! 🚀✨

package/docs/src/ecosystem/node/index.md

@@ -1,53 +0,0 @@
----
-title: '@maz-ui/node'
-description: Lightweight Node.js utilities — promise-based shell execution, an opinionated consola-backed logger, and a banner printer for CLIs.
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-<NpmBadge package="@maz-ui/node" />
-
-`@maz-ui/node` powers the CLIs and build scripts inside the maz-ui ecosystem. It's intentionally tiny: an `exec` wrapper that returns a real `Promise`, a colourful logger built on [consola](https://github.com/unjs/consola), and a banner helper using [figlet](https://github.com/patorjk/figlet.js).
-
-## Installation
-
-::: code-group
-
-```bash [pnpm]
-pnpm add @maz-ui/node
-```
-
-```bash [npm]
-npm install @maz-ui/node
-```
-
-```bash [yarn]
-yarn add @maz-ui/node
-```
-
-:::
-
-## Basic usage
-
-```ts
-import { execPromise, logger, printBanner } from '@maz-ui/node'
-
-printBanner({ name: 'my-cli', version: '1.0.0' })
-
-logger.info('Running tests…')
-await execPromise('npm test', { packageName: 'tests' })
-logger.success('Done')
-```
-
-## What's inside
-
-- [`execPromise`](./exec-promise) — Promise-based `child_process.exec` with structured logging.
-- [`logger` / `createLogger`](./logger) — consola-backed logger with semantic log levels and helpers (`box`, `divider`, `brand`, …).
-- [`printBanner`](./print-banner) — ASCII-art banner printer (figlet) with versioning, dividers and clearing.
-
-## Requirements
-
-- Node.js >= 22.12.0
-- ESM only — published as `"type": "module"`.

package/docs/src/ecosystem/utils/camel-case.md

@@ -1,31 +0,0 @@
----
-title: camelCase
-description: Convert a kebab-case string to camelCase by stripping dashes and uppercasing the following letter.
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-## Usage
-
-```ts
-import { camelCase } from '@maz-ui/utils'
-
-camelCase('my-component-name') // → 'myComponentName'
-camelCase('hello-world') // → 'helloWorld'
-```
-
-## API
-
-```ts
-function camelCase(str: string): string
-```
-
-| Parameter | Type     | Description           |
-| --------- | -------- | --------------------- |
-| `str`     | `string` | The string to convert |
-
-## Notes
-
-`camelCase` is intentionally minimal — it only handles `kebab-case` input. For more general normalization (snake_case, spaces, PascalCase), use [`normalizeString`](./normalize-string) with the `case: 'camelCase'` option.

package/docs/src/ecosystem/utils/capitalize.md

@@ -1,50 +0,0 @@
----
-title: capitalize
-description: The module capitalize is a function that adds a capital letter to a string
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-<MazInput v-model="stringValue" />
-
-<div
-  class="maz:flex maz:flex-center maz:rounded-md maz:gap-0.5 maz:p-4 maz:mt-16 maz:bg-surface-300"
->
-  formatted value: <strong>{{ stringFormatted }}</strong>
-</div>
-
-```vue
-<script lang="ts" setup>
-import { capitalize } from '@maz-ui/utils'
-import { computed, ref } from 'vue'
-
-const stringValue = ref('string value')
-
-const stringFormatted = computed(() =>
-  capitalize(stringValue.value),
-)
-</script>
-
-<template>
-  <MazInput v-model="stringValue" />
-
-  <div
-    class="flex flex-center rounded-md gap-0.5 p-4 mt-16 bg-surface-300"
-  >
-    {{ stringFormatted }}
-  </div>
-</template>
-```
-
-<script lang="ts" setup>
-  import { capitalize } from '@maz-ui/utils'
-  import { ref, computed } from 'vue'
-
-  const stringValue = ref('string value')
-
-  const stringFormatted = computed(() =>
-    capitalize(stringValue.value),
-  )
-</script>