idosal/mcp-ui/main 438k tokens More Tools
```
├── .github/
   ├── CONTRIBUTING.md (1100 tokens)
   ├── copilot-instructions.md (1500 tokens)
   ├── workflows/
      ├── ci.yml (1800 tokens)
      ├── deploy-docs.yml (400 tokens)
├── .gitignore (500 tokens)
├── .prettierignore (omitted)
├── .prettierrc.json
├── .releaserc.json (200 tokens)
├── .ruby-version
├── CHANGELOG.md (1800 tokens)
├── CODE_OF_CONDUCT.md (1000 tokens)
├── LICENSE (omitted)
├── README.md (3.7k tokens)
├── SECURITY.md (100 tokens)
├── docs/
   ├── .vitepress/
      ├── cache/
         ├── deps/
            ├── @theme_index.js (3.4k tokens)
            ├── @theme_index.js.map (omitted)
            ├── _metadata.json (300 tokens)
            ├── chunk-5SIPG2HA.js (56.5k tokens)
            ├── chunk-5SIPG2HA.js.map (omitted)
            ├── chunk-O3I43HSE.js (74.6k tokens)
            ├── chunk-O3I43HSE.js.map (omitted)
            ├── package.json
            ├── vitepress___@vue_devtools-api.js (26.7k tokens)
            ├── vitepress___@vue_devtools-api.js.map (omitted)
            ├── vitepress___@vueuse_core.js (2.1k tokens)
            ├── vitepress___@vueuse_core.js.map (omitted)
            ├── vue.js (1100 tokens)
            ├── vue.js.map (omitted)
   ├── README.md (700 tokens)
   ├── package-lock.json (16.9k tokens)
   ├── package.json (100 tokens)
   ├── src/
      ├── .vitepress/
         ├── config.ts (2.2k tokens)
         ├── theme/
            ├── custom.css (2.3k tokens)
            ├── index.ts (200 tokens)
      ├── about.md (300 tokens)
      ├── guide/
         ├── apps-sdk.md (1100 tokens)
         ├── client/
            ├── app-renderer.md (1600 tokens)
            ├── custom-component-libraries.md (1500 tokens)
            ├── html-resource.md (1400 tokens)
            ├── overview.md (1100 tokens)
            ├── react-usage-examples.md (3.9k tokens)
            ├── remote-dom-resource.md (600 tokens)
            ├── resource-renderer.md (3.2k tokens)
            ├── using-a-proxy.md (1500 tokens)
            ├── walkthrough.md (2.2k tokens)
            ├── wc-usage-examples.md (800 tokens)
         ├── embeddable-ui.md (2.5k tokens)
         ├── getting-started.md (1700 tokens)
         ├── introduction.md (1800 tokens)
         ├── mcp-apps.md (4.4k tokens)
         ├── protocol-details.md (2.1k tokens)
         ├── server/
            ├── python/
               ├── overview.md (400 tokens)
               ├── usage-examples.md (900 tokens)
               ├── walkthrough.md (2.7k tokens)
            ├── ruby/
               ├── overview.md (200 tokens)
               ├── usage-examples.md (900 tokens)
               ├── walkthrough.md (900 tokens)
            ├── typescript/
               ├── overview.md (700 tokens)
               ├── usage-examples.md (1900 tokens)
               ├── walkthrough.md (1200 tokens)
         ├── supported-hosts.md (700 tokens)
      ├── index.md (1000 tokens)
      ├── public/
         ├── favicon.png
         ├── logo-black.png
         ├── logo-lg-black.png
         ├── logo-lg.png
         ├── logo.png
         ├── og-image.png
      ├── team.md
├── eslint.config.mjs (400 tokens)
├── examples/
   ├── appssdk-adapter-demo/
      ├── README.md (1600 tokens)
      ├── example.ts (2.4k tokens)
   ├── external-url-demo/
      ├── index.html (100 tokens)
      ├── package.json (200 tokens)
      ├── src/
         ├── App.css (200 tokens)
         ├── App.tsx (600 tokens)
         ├── index.css (100 tokens)
         ├── main.tsx
      ├── tsconfig.app.json (100 tokens)
      ├── tsconfig.json
      ├── tsconfig.node.json
      ├── vite.config.ts
   ├── mcp-apps-demo/
      ├── package.json (100 tokens)
      ├── src/
         ├── index.ts (2.5k tokens)
      ├── tsconfig.json (100 tokens)
   ├── python-server-demo/
      ├── README.md (800 tokens)
      ├── pyproject.toml (200 tokens)
      ├── python_server_demo.py (1100 tokens)
      ├── uv.lock (omitted)
   ├── remote-dom-demo/
      ├── .gitignore (100 tokens)
      ├── README.md (800 tokens)
      ├── eslint.config.js (100 tokens)
      ├── index.html (100 tokens)
      ├── package.json (200 tokens)
      ├── src/
         ├── App.css (100 tokens)
         ├── App.tsx (1300 tokens)
         ├── index.css (300 tokens)
         ├── libraries/
            ├── radix-styles.css (200 tokens)
            ├── radix.tsx (3k tokens)
            ├── webcomponents.ts (800 tokens)
         ├── main.tsx
         ├── vite-env.d.ts (omitted)
      ├── tsconfig.app.json (100 tokens)
      ├── tsconfig.json
      ├── tsconfig.node.json (100 tokens)
      ├── vite.config.ts
   ├── ruby-server-demo/
      ├── Gemfile
      ├── Gemfile.lock (omitted)
      ├── README.md (200 tokens)
      ├── server.rb (600 tokens)
   ├── server/
      ├── .react-router/
         ├── types/
            ├── +future.ts
            ├── +routes.ts (100 tokens)
            ├── +server-build.d.ts (omitted)
            ├── app/
               ├── +types/
                  ├── root.ts (300 tokens)
               ├── routes/
                  ├── +types/
                     ├── home.ts (400 tokens)
                     ├── task.ts (400 tokens)
                     ├── user.ts (400 tokens)
      ├── README.md (100 tokens)
      ├── app/
         ├── app.css (100 tokens)
         ├── entry.server.tsx (300 tokens)
         ├── graph/
            ├── avatar1.png
            ├── avatar2.png
            ├── avatar3.png
            ├── graph.tsx (4.2k tokens)
         ├── images.d.ts (omitted)
         ├── root.tsx (400 tokens)
         ├── routes.ts
         ├── routes/
            ├── home.tsx
            ├── task.tsx (100 tokens)
            ├── user.tsx (100 tokens)
         ├── user/
            ├── user.tsx (1700 tokens)
         ├── utils/
            ├── messageUtils.ts (100 tokens)
      ├── biome.json (100 tokens)
      ├── package-lock.json (17.5k tokens)
      ├── package.json (300 tokens)
      ├── pnpm-lock.yaml (27.5k tokens)
      ├── pnpm-workspace.yaml
      ├── public/
         ├── avatar1.png
         ├── avatar2.png
         ├── avatar3.png
      ├── react-router.config.ts
      ├── src/
         ├── index.ts (2.9k tokens)
      ├── tsconfig.cloudflare.json (100 tokens)
      ├── tsconfig.json (100 tokens)
      ├── tsconfig.node.json (100 tokens)
      ├── vite.config.ts (100 tokens)
      ├── worker-configuration.d.ts (omitted)
      ├── wrangler.jsonc (100 tokens)
   ├── typescript-server-demo/
      ├── README.md (200 tokens)
      ├── package.json (100 tokens)
      ├── src/
         ├── index.ts (1000 tokens)
      ├── tsconfig.json (100 tokens)
   ├── wc-demo/
      ├── index.html (100 tokens)
      ├── main.js (200 tokens)
      ├── package.json (100 tokens)
      ├── vite.config.js
├── lefthook.yml (100 tokens)
├── package-lock.json (omitted)
├── package.json (500 tokens)
├── pnpm-lock.yaml (omitted)
├── pnpm-workspace.yaml
├── sdks/
   ├── python/
      ├── server/
         ├── CHANGELOG.md (2.1k tokens)
         ├── README.md (2000 tokens)
         ├── pyproject.toml (400 tokens)
         ├── release.config.js (200 tokens)
         ├── src/
            ├── mcp_ui_server/
               ├── __init__.py (200 tokens)
               ├── core.py (1800 tokens)
               ├── exceptions.py (100 tokens)
               ├── types.py (1100 tokens)
               ├── utils.py (1000 tokens)
         ├── tests/
            ├── __init__.py
            ├── test_create_ui_resource.py (1900 tokens)
            ├── test_metadata.py (1800 tokens)
            ├── test_ui_action_results.py (700 tokens)
         ├── uv.lock (omitted)
   ├── ruby/
      ├── .rspec
      ├── .rubocop.yml (100 tokens)
      ├── CHANGELOG.md
      ├── Gemfile
      ├── Gemfile.lock (omitted)
      ├── README.md (900 tokens)
      ├── Rakefile
      ├── lib/
         ├── mcp_ui_server.rb (1000 tokens)
         ├── mcp_ui_server/
            ├── version.rb
      ├── mcp_ui_server.gemspec (200 tokens)
      ├── release.config.js (200 tokens)
      ├── spec/
         ├── mcp_ui_server_spec.rb (1500 tokens)
         ├── spec_helper.rb (400 tokens)
   ├── typescript/
      ├── client/
         ├── CHANGELOG.md (4.2k tokens)
         ├── README.md (3.9k tokens)
         ├── package.json (500 tokens)
         ├── scripts/
            ├── bundle-iframe.js (300 tokens)
            ├── iframe-entry.js (300 tokens)
            ├── proxy/
               ├── index.html (900 tokens)
         ├── src/
            ├── __tests__/
               ├── capabilities.test.ts (400 tokens)
            ├── capabilities.ts (400 tokens)
            ├── components/
               ├── AppFrame.tsx (2k tokens)
               ├── AppRenderer.tsx (3.7k tokens)
               ├── HTMLResourceRenderer.tsx (1900 tokens)
               ├── RemoteDOMRenderer.tsx (100 tokens)
               ├── RemoteDOMResourceRenderer.tsx (1000 tokens)
               ├── UIResourceRenderer.tsx (400 tokens)
               ├── UIResourceRendererWC.tsx (800 tokens)
               ├── __tests__/
                  ├── AppFrame.test.tsx (2.4k tokens)
                  ├── AppRenderer.test.tsx (4.2k tokens)
                  ├── HTMLResourceRenderer.test.tsx (4.4k tokens)
                  ├── ProxyScript.test.ts (600 tokens)
                  ├── RemoteDOMResourceRenderer.test.tsx (700 tokens)
                  ├── UIResourceRenderer.test.tsx (900 tokens)
                  ├── UIResourceRenderer.unmocked.test.tsx (900 tokens)
                  ├── UIResourceRendererWC.test.tsx (1100 tokens)
            ├── index.ts (400 tokens)
            ├── remote-dom/
               ├── component-libraries/
                  ├── basic.tsx (800 tokens)
               ├── iframe-bundle.ts (10.3k tokens)
               ├── remote-elements/
                  ├── index.ts (100 tokens)
            ├── test-setup.ts (100 tokens)
            ├── types.ts (500 tokens)
            ├── utils/
               ├── __tests__/
                  ├── isUIResource.test.ts (300 tokens)
                  ├── metadataUtils.test.ts (200 tokens)
                  ├── processResource.test.ts (2.7k tokens)
               ├── app-host-utils.ts (700 tokens)
               ├── isUIResource.ts (100 tokens)
               ├── metadataUtils.ts (100 tokens)
               ├── processResource.ts (1200 tokens)
         ├── tsconfig.json
         ├── tsconfig.test.json
         ├── vite.config.ts (300 tokens)
         ├── vite.config.wc.ts (100 tokens)
         ├── vitest.config.ts (100 tokens)
      ├── server/
         ├── CHANGELOG.md (3.6k tokens)
         ├── README.md (4k tokens)
         ├── package.json (400 tokens)
         ├── scripts/
            ├── bundle-adapter.js (300 tokens)
         ├── src/
            ├── __tests__/
               ├── adapters/
                  ├── adapter-integration.test.ts (3.3k tokens)
                  ├── appssdk-adapter.behavior.test.ts (4.3k tokens)
                  ├── appssdk-adapter.test.ts (1400 tokens)
                  ├── mcp-apps-adapter.behavior.test.ts (3.7k tokens)
                  ├── mcp-apps-adapter.test.ts (1000 tokens)
               ├── index.test.ts (3.8k tokens)
               ├── utils.test.ts (2000 tokens)
            ├── adapters/
               ├── appssdk/
                  ├── README.md (500 tokens)
                  ├── adapter-runtime.ts (3k tokens)
                  ├── adapter.ts (500 tokens)
                  ├── index.ts (100 tokens)
                  ├── types.ts (800 tokens)
               ├── index.ts
               ├── mcp-apps/
                  ├── README.md (1600 tokens)
                  ├── adapter-runtime.ts (5k tokens)
                  ├── adapter.ts (200 tokens)
                  ├── index.ts
                  ├── types.ts (500 tokens)
            ├── index.ts (1700 tokens)
            ├── types.ts (1200 tokens)
            ├── utils.ts (1000 tokens)
         ├── tsconfig.json
         ├── vite.config.ts (100 tokens)
         ├── vitest.config.ts (100 tokens)
      ├── shared/
         ├── package.json (100 tokens)
         ├── src/
            ├── index.ts
         ├── tsconfig.json
         ├── vite.config.ts (200 tokens)
├── tsconfig.base.json (100 tokens)
├── vitest.config.ts (200 tokens)
├── vitest.global-setup.ts (200 tokens)
├── vitest.setup.ts
```


## /.github/CONTRIBUTING.md

# Contributing to MCP-UI

First of all, thank you for your interest in contributing to MCP-UI! We appreciate the time and effort you're willing to invest in improving the project. This document provides guidelines and information to make the contribution process as smooth as possible.

## Table of Contents

- [Getting Started](#getting-started)
- [Local Development](#local-development)
  - [Prerequisites](#prerequisites)
  - [Setting Up Your Development Environment](#setting-up-your-development-environment)
  - [Running the Project Locally](#running-the-project-locally)
  - [Testing](#testing)
  - [Code Formatting](#code-formatting)
  - [Development Workflow](#development-workflow)
  - [Project Structure](#project-structure)
- [How to Contribute](#how-to-contribute)
  - [Reporting Bugs](#reporting-bugs)
  - [Suggesting Enhancements](#suggesting-enhancements)
  - [Submitting Pull Requests](#submitting-pull-requests)
- [Style Guidelines](#style-guidelines)
  - [Code Style](#code-style)
  - [Commit Messages](#commit-messages)
- [Additional Resources](#additional-resources)

## Getting Started

1. Fork the repository and clone it to your local machine.
2. Set up the development environment.
3. Explore the codebase, run tests, and verify that everything works as expected.

## Local Development

### Prerequisites

Before you start working on MCP-UI, make sure you have the following installed:

- [Node.js](https://nodejs.org/) (version 18 or higher recommended)
- [pnpm](https://pnpm.io/) (version 8.15.7 or higher)
- Git

### Setting Up Your Development Environment

1. Clone your forked repository:

   ```bash
   git clone https://github.com/your-username/mcp-ui.git
   cd mcp-ui
   ```

2. Install dependencies:

   ```bash
   pnpm install
   ```

3. Set up environment variables:
   - Create a `.env.local` file in the root directory
   - Add any necessary environment variables (ask project maintainers if you need access to specific API keys)

### Running the Project Locally

To start the development server:

```bash
pnpm vercel dev
```

This will start the Next.js development server, typically at http://localhost:3000.

For running with the MCP Inspector (useful for debugging MCP endpoints):

```bash
pnpm run inspector
```

### Testing

To run tests:

```bash
pnpm test
```

MCP-UI uses Vitest as the testing framework. When adding new features, please include appropriate tests.

### Code Formatting

MCP-UI uses Prettier for code formatting and lint-staged to ensure code is properly formatted before committing. Pre-commit hooks are set up with Husky to run these checks automatically.

To manually format your code:

```bash
pnpm prettier --write .
```

### Development Workflow

1. Create a new branch for your feature/bugfix
2. Make your changes
3. Add tests for your changes when applicable
4. Run the tests to ensure they pass
5. Commit your changes following the commit message guidelines
6. Push your branch and open a pull request

### Project Structure

- `api/`: Contains the server-side code and MCP implementation
  - `tools/`: MCP tools implementation
  - `utils/`: Utility functions for the API
- `app/`: Next.js app directory with React components
- `pages/`: Additional Next.js pages
- `public/`: Static assets
- `shared/`: Shared utilities used across the codebase

## How to Contribute

### Reporting Bugs

If you encounter a bug or issue while using MCP-UI, please open a new issue on the [GitHub Issues](https://github.com/idosal/mcp-ui/issues) page. Provide a clear and concise description of the problem, steps to reproduce it, and any relevant error messages or logs.

### Suggesting Enhancements

We welcome ideas for improvements and new features. To suggest an enhancement, open a new issue on the [GitHub Issues](https://github.com/idosal/mcp-ui/issues) page. Describe the enhancement in detail, explain the use case, and outline the benefits it would bring to the project.

### Submitting Pull Requests

1. Create a new branch for your feature or bugfix. Use a descriptive name like `feature/your-feature-name` or `fix/your-bugfix-name`.
2. Make your changes, following the [Style Guidelines](#style-guidelines) below.
3. Test your changes and ensure that they don't introduce new issues or break existing functionality.
4. Commit your changes, following the [commit message guidelines](#commit-messages).
5. Push your branch to your fork on GitHub.
6. Open a new pull request against the `main` branch of the `mcp-ui` repository. Include a clear and concise description of your changes, referencing any related issues.

## Style Guidelines

### Code Style

MCP-UI uses [ESLint](https://eslint.org/) as its code style guide. Please ensure that your code follows these guidelines.

### Commit Messages

Write clear and concise commit messages that briefly describe the changes made in each commit. Use the imperative mood and start with a capitalized verb, e.g., "Add new feature" or "Fix bug in function".

## Additional Resources

- [GitHub Help](https://help.github.com/)
- [GitHub Pull Request Documentation](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests)
- [ESLint Style Guide](https://eslint.org/)

Thank you once again for your interest in contributing to MCP UI. We look forward to collaborating with you and creating an even better project together!


## /.github/copilot-instructions.md

# MCP-UI Development Instructions

**ALWAYS follow these instructions first and fallback to additional search and context gathering only if the information here is incomplete or found to be in error.**

MCP-UI is a Model Context Protocol UI SDK monorepo providing TypeScript and Ruby SDKs for building MCP enabled applications with interactive UI components. The repository includes client SDKs, server SDKs, documentation, and examples.

## Working Effectively

### Bootstrap and Build (CRITICAL - Set 60+ minute timeouts)
- Install Node.js 22.x and pnpm 9+: `npm install -g pnpm`
- Install Ruby 3.x and bundler: `sudo apt-get install -y ruby ruby-dev build-essential && sudo gem install bundler`
- Clone repository: `git clone https://github.com/idosal/mcp-ui.git && cd mcp-ui`
- Install dependencies: `pnpm install` -- takes ~60 seconds. NEVER CANCEL.
- Build all packages: `pnpm build` -- takes ~15 seconds. NEVER CANCEL. Set timeout to 120+ seconds.
- Build documentation: `pnpm docs:build` -- takes ~17 seconds. NEVER CANCEL. Set timeout to 180+ seconds.

### Testing (CRITICAL - Set 30+ minute timeouts)
- Run TypeScript tests: `pnpm test:ts` -- takes ~6 seconds. NEVER CANCEL. Set timeout to 300+ seconds.
- Run Ruby tests: `pnpm test:ruby` -- takes ~1 second. NEVER CANCEL. Set timeout to 300+ seconds.
- Run all tests: `pnpm test` -- combines TypeScript and Ruby tests. NEVER CANCEL. Set timeout to 300+ seconds.
- Run with coverage: `pnpm coverage` -- NEVER CANCEL. Set timeout to 600+ seconds.

### Code Quality (Always run before committing)
- Lint code: `pnpm lint` -- takes ~2.4 seconds. Uses ESLint with TypeScript parser.
- Fix linting issues: `pnpm lint:fix`
- Format code: `pnpm format` -- Uses Prettier with single quotes, trailing commas, 100 char width.

### Development Workflow
- Run TypeScript SDKs in development: `pnpm dev` -- starts all TypeScript package dev servers in parallel.
- Run docs in development: `pnpm docs:dev` -- starts VitePress dev server.
- Preview builds: `pnpm preview` -- preview built packages.

## Validation (CRITICAL - Always perform these after changes)

### Mandatory End-to-End Validation Scenarios
1. **Always build and test after making changes:** Run `pnpm build && pnpm test` to ensure nothing is broken.
2. **Validate examples work:** Test working examples by running:
   - `cd examples/remote-dom-demo && npm run build` -- takes ~1 second. Always works.
   - `cd examples/wc-demo && npm run build` -- takes ~1 second. Always works.
   - NOTE: `typescript-server-demo` may have import issues and should be tested separately after SDK changes.
3. **Test UI components:** When changing client components, manually verify React rendering works by running example applications.
4. **Validate SDK functionality:** When changing server SDKs, test resource creation with both TypeScript and Ruby implementations.
5. **Documentation validation:** When updating docs, run `pnpm docs:build` and verify no broken links or build errors.

### Ruby SDK Specific Validation
- Ruby gems must be installed with `sudo bundle install` in `sdks/ruby/` directory
- Run Ruby linting: `cd sdks/ruby && sudo bundle exec rubocop`
- Ruby tests validate resource creation: `cd sdks/ruby && sudo bundle exec rake spec`

## Project Structure

### Key Directories
- `sdks/typescript/` - TypeScript SDKs (client, server, shared)
  - `client/` - React components for rendering MCP-UI resources
  - `server/` - Utilities for creating UI resources on MCP servers
  - `shared/` - Common types and utilities
- `sdks/ruby/` - Ruby SDK (`mcp_ui_server` gem)
- `examples/` - Demo applications showcasing SDK usage
  - `remote-dom-demo/` - Interactive UI script testing
  - `typescript-server-demo/` - Complete TypeScript server example
  - `ruby-server-demo/` - Complete Ruby server example
- `docs/` - VitePress documentation site

### Critical Files
- `package.json` - Root monorepo configuration with pnpm workspaces
- `pnpm-workspace.yaml` - Workspace configuration for TypeScript packages and examples
- `.github/workflows/ci.yml` - CI pipeline with build, test, and release steps
- `vitest.config.ts` - Test configuration for TypeScript packages
- `tsconfig.base.json` - Base TypeScript configuration

## Build System Details

### Package Management
- Uses pnpm workspaces for monorepo management
- TypeScript packages use Vite for building with dual ESM/CJS output
- Ruby uses standard gem building with bundler

### Dependencies and Versions
- Node.js 22.x (required for TypeScript SDKs)
- pnpm 9+ (required for workspace management)
- Ruby 3.x (required for Ruby SDK)
- React 18+ (peer dependency for client SDK)

### Build Outputs
- TypeScript client: Builds to `dist/` with ESM, CJS, and Web Component builds
- TypeScript server: Builds to `dist/` with ESM and CJS formats
- Ruby gem: Standard gem structure in `lib/`
- Documentation: Static site built to `docs/src/.vitepress/dist/`

## Common Development Tasks

### Adding New Features
1. Determine if change affects TypeScript SDKs, Ruby SDK, or both
2. Make changes following existing patterns
3. Add appropriate tests (Vitest for TypeScript, RSpec for Ruby)
4. Update documentation if needed
5. Run full validation workflow: `pnpm build && pnpm test && pnpm lint`

### Working with Examples
- Examples use workspace dependencies and build independently
- External URL demo shows partial externalUrl content type functionality
- Remote DOM demo shows partial remote-dom content type functionality
- The Server demo shows a full MCP server implementation with Cloudflare
- The Ruby and Typescript server demos show basic MCP server implementations
- WC-demo showcases the web components client implementation
- Always test example builds after making SDK changes

### Documentation Updates
- Documentation uses VitePress with enhanced styling
- Edit files in `docs/src/` directory
- Test changes with `pnpm docs:dev` before building
- Always build docs to check for errors: `pnpm docs:build`

## Troubleshooting

### Common Issues
- **TypeScript version warnings:** Current setup uses TypeScript 5.8.3 with ESLint plugins that support <5.4.0. This is expected and working.
- **Ruby permission errors:** Use `sudo bundle install` and `sudo bundle exec` for Ruby commands in CI environment.
- **Build failures:** Always run `pnpm install` first, then check individual package builds.
- **Test failures:** Check if all dependencies are installed and built before running tests.

### CI/CD Pipeline
- CI runs on Node.js 22.x with pnpm 10
- Separate jobs for TypeScript and Ruby testing
- Path filtering prevents unnecessary builds
- Semantic release handles versioning and publishing

### Performance Notes
- TypeScript builds are fast (~15 seconds total)
- Ruby tests run very quickly (~1 second)
- Documentation builds may take longer (~17 seconds)
- Full CI pipeline completes in under 5 minutes

## CRITICAL REMINDERS
- **NEVER CANCEL builds or long-running commands** - Always set appropriate timeouts
- **Always validate changes** with complete build and test cycle
- **Test examples** after SDK changes to ensure compatibility
- **Run linting and formatting** before committing changes
- **Update documentation** when adding or changing features
- **Use workspace commands** from root directory for consistency


## /.github/workflows/ci.yml

```yml path="/.github/workflows/ci.yml" 
name: CI

on:
  push:
    branches:
      - main
      - alpha
  pull_request:
    branches:
      - main
      - alpha
  release:
    types: [published]

jobs:
  filter_changed_paths:
    runs-on: ubuntu-latest
    outputs:
      ts_client_files: ${{ steps.filter.outputs.ts_client_files }}
      ts_server_files: ${{ steps.filter.outputs.ts_server_files }}
      ruby_sdk_files: ${{ steps.filter.outputs.ruby_sdk_files }}
      python_sdk_files: ${{ steps.filter.outputs.python_sdk_files }}
      example_files: ${{ steps.filter.outputs.example_files }}
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: dorny/paths-filter@v2
        id: filter
        with:
          base: ${{ github.event_name == 'push' && github.event.before || github.base_ref }}
          filters: |
            ts_client_files:
              - 'sdks/typescript/client/**'
            ts_server_files:
              - 'sdks/typescript/server/**'
            ruby_sdk_files:
              - 'sdks/ruby/**'
            python_sdk_files:
              - 'sdks/python/**'
            example_files:
              - 'examples/**'

  js_build_and_test:
    needs: filter_changed_paths
    if: needs.filter_changed_paths.outputs.ts_client_files == 'true' || needs.filter_changed_paths.outputs.ts_server_files == 'true'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22.x
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Lint
        run: pnpm lint

      - name: Test
        run: pnpm test:ts

      - name: Build
        run: pnpm build

  ruby_sdk_test:
    needs: filter_changed_paths
    if: needs.filter_changed_paths.outputs.ruby_sdk_files == 'true'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22.x
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Set up Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'
          bundler: latest
          bundler-cache: true
          working-directory: 'sdks/ruby'

      - name: Lint
        run: bundle exec rubocop
        working-directory: 'sdks/ruby'

      - name: Run tests
        run: pnpm test:ruby

  python_sdk_test:
    needs: filter_changed_paths
    if: needs.filter_changed_paths.outputs.python_sdk_files == 'true'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Set up Python
        uses: actions/setup-python@v4
        with:
          python-version: '3.11'

      - name: Set up uv
        uses: astral-sh/setup-uv@v3
        with:
          enable-cache: true

      - name: Install dependencies
        run: uv sync --dev
        working-directory: sdks/python/server

      - name: Lint with ruff
        run: uv run ruff check
        working-directory: sdks/python/server

      - name: Type check with pyright
        run: uv run pyright
        working-directory: sdks/python/server

      - name: Run tests
        run: uv run pytest
        working-directory: sdks/python/server

      - name: Build package
        run: uv build
        working-directory: sdks/python/server

  release_ts_client:
    needs: [js_build_and_test, filter_changed_paths]
    if: (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/alpha') && needs.filter_changed_paths.outputs.ts_client_files == 'true'
    runs-on: ubuntu-latest
    permissions:
      contents: write
      pull-requests: write # to be able to comment on released pull requests
      issues: write
      id-token: write
    steps:
      - uses: actions/checkout@v4
        with: { fetch-depth: 0 }
      - name: Fetch all tags
        run: git fetch --tags --force
      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with: { version: 10 }
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with: { node-version: 22.x, cache: 'pnpm' }
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      - name: Release
        working-directory: sdks/typescript/client
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: npx semantic-release

  release_ts_server:
    needs: [js_build_and_test, release_ts_client, filter_changed_paths]
    if: >
      always() &&
      (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/alpha') &&
      needs.filter_changed_paths.outputs.ts_server_files == 'true' &&
      needs.js_build_and_test.result == 'success'
    runs-on: ubuntu-latest
    permissions:
      contents: write
      issues: write
      pull-requests: write
      id-token: write
    steps:
      - uses: actions/checkout@v4
        with: { fetch-depth: 0 }
      - name: Pull latest changes
        run: git pull --rebase origin ${{ github.ref_name }}
      - name: Fetch all tags
        run: git fetch --tags --force
      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with: { version: 10 }
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with: { node-version: 22.x, cache: 'pnpm' }
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      - name: Release
        working-directory: sdks/typescript/server
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: npx semantic-release

  release_ruby_sdk:
    name: Release Ruby SDK
    needs: [ruby_sdk_test, filter_changed_paths, release_ts_server]
    if: >
      always() &&
      (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/alpha') &&
      needs.filter_changed_paths.outputs.ruby_sdk_files == 'true' &&
      needs.ruby_sdk_test.result == 'success'
    runs-on: ubuntu-latest
    environment: release
    permissions:
      contents: write # to push commits and tags
      id-token: write # for trusted publishing
      issues: write # to comment on issues
      pull-requests: write # to comment on pull requests
    steps:
      - uses: actions/checkout@v4
        with: { fetch-depth: 0 }
      - name: Pull latest changes
        run: git pull --rebase origin ${{ github.ref_name }}
      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with: { version: 10 }
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with: { node-version: 22.x, cache: 'pnpm' }
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      - name: Set up Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'
          bundler: latest
          bundler-cache: true
          working-directory: sdks/ruby
      - name: Configure RubyGems Credentials
        uses: rubygems/configure-rubygems-credentials@main
      - name: Release
        working-directory: sdks/ruby
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: npx semantic-release

  release_python_sdk:
    name: Release Python SDK
    needs: [python_sdk_test, filter_changed_paths, release_ruby_sdk]
    if: >
      always() &&
      (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/alpha') &&
      needs.filter_changed_paths.outputs.python_sdk_files == 'true' &&
      needs.python_sdk_test.result == 'success'
    runs-on: ubuntu-latest
    environment: release
    permissions:
      contents: write # to push commits and tags
      id-token: write # for trusted publishing to PyPI
      issues: write # to comment on issues
      pull-requests: write # to comment on pull requests
    steps:
      - uses: actions/checkout@v4
        with: { fetch-depth: 0 }
      - name: Pull latest changes
        run: git pull --rebase origin ${{ github.ref_name }}
      - name: Fetch all tags
        run: git fetch --tags --force
      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with: { version: 10 }
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with: { node-version: 22.x, cache: 'pnpm' }
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      - name: Set up Python
        uses: actions/setup-python@v4
        with:
          python-version: '3.11'
      - name: Set up uv
        uses: astral-sh/setup-uv@v3
        with:
          enable-cache: true
      - name: Install Python dependencies
        run: uv sync --dev
        working-directory: sdks/python/server
      - name: Release
        working-directory: sdks/python/server
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: npx semantic-release

```

## /.github/workflows/deploy-docs.yml

```yml path="/.github/workflows/deploy-docs.yml" 
#
name: Deploy VitePress site to Pages

on:
  # Runs on pushes targeting the `main` branch. Change this to `master` if you\'re
  # using the `master` branch as the default branch.
  push:
    branches: [main]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0 # Not needed if lastUpdated is not enabled
      - name: Use pnpm
        uses: pnpm/action-setup@v3
        with:
          version: 10 # Specify pnpm version from package.json
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Install dependencies
        run: pnpm install
      - name: Build with VitePress
        run: pnpm docs:build # This script is \'vitepress build docs\'
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Path to the output directory of 'vitepress build docs/src'
          path: docs/src/.vitepress/dist

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

```

## /.gitignore

```gitignore path="/.gitignore" 
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

examples/server/build

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# PNPM
.pnpm-store/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarnclean

# dotenv environment variables file
.env
.env.development.local
.env.test.local
.env.production.local
.env.local

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
DynamoDBLocal_lib/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

# Parcel cache files
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build output
.nuxt

# Svelte build output
.svelte-kit

# Docusaurus build output
.docusaurus

# Gatsby cache
.cache/


# Vite build output
dist

# VitePress
docs/src/.vitepress/dist
docs/.vitepress/cache
docs/src/.vitepress/cache

# Monorepo specific
/sdks/**/dist
/sdks/**/coverage
/examples/**/dist
/examples/**/coverage

# OS generated files #
######################
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db

# IDEs and Editors #
####################

# VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
*.code-workspace

# JetBrains
.idea/
*.iws
*.iml
*.ipr

# Sublime Text
*.sublime-project
*.sublime-workspace

# Compilation artifacts
#######################
*.o
*.obj
*.exe
*.dll
*.so
*.dylib

# C/C++ specific
*.gch
*.pch

# Python specific
__pycache__/
*.py[cod]
*$py.class

# Environment variables
.env*
!.env.example

# Husky
.husky/_/
.husky/.gitignore

# Auto-generated files
adapter-runtime.bundled.ts
```

## /.prettierrc.json

```json path="/.prettierrc.json" 
{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "plugins": ["prettier-plugin-tailwindcss"]
}

```

## /.releaserc.json

```json path="/.releaserc.json" 
{
  "branches": [
    "main",
    {
      "name": "alpha",
      "prerelease": true
    }
  ],
  "plugins": [
    "@semantic-release/commit-analyzer",
    "@semantic-release/release-notes-generator",
    "@semantic-release/changelog",
    [
      "@semantic-release/npm",
      {
        "pkgRoot": "sdks/typescript/client",
        "npmPublish": true
      }
    ],
    [
      "@semantic-release/npm",
      {
        "pkgRoot": "sdks/typescript/server",
        "npmPublish": true
      }
    ],
    [
      "@semantic-release/npm",
      {
        "npmPublish": false
      }
    ],
    [
      "@semantic-release/exec",
      {
        "prepareCmd": "pnpm install --lockfile-only --ignore-scripts"
      }
    ],
    [
      "@semantic-release/git",
      {
        "assets": [
          "CHANGELOG.md",
          "package.json",
          "sdks/typescript/client/package.json",
          "sdks/typescript/server/package.json",
          "pnpm-lock.yaml"
        ],
        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
      }
    ],
    "@semantic-release/github"
  ]
}

```

## /.ruby-version

```ruby-version path="/.ruby-version" 
3.2.2

```

## /CHANGELOG.md

# [5.2.0](https://github.com/idosal/mcp-ui/compare/v5.1.2...v5.2.0) (2025-07-18)


### Features

* support generic messages response ([#35](https://github.com/idosal/mcp-ui/issues/35)) ([10b407b](https://github.com/idosal/mcp-ui/commit/10b407b279b3ee9608ef077445f4d714f88343c5))

## [5.1.2](https://github.com/idosal/mcp-ui/compare/v5.1.1...v5.1.2) (2025-07-18)


### Bug Fixes

* use targetOrigin in the proxy message relay ([#40](https://github.com/idosal/mcp-ui/issues/40)) ([b3fb54e](https://github.com/idosal/mcp-ui/commit/b3fb54e28ca7b8eeda896b5bcf478b6343dbba47))

## [5.1.1](https://github.com/idosal/mcp-ui/compare/v5.1.0...v5.1.1) (2025-07-18)


### Bug Fixes

* add a bridge to pass messages in and out of the proxy ([#38](https://github.com/idosal/mcp-ui/issues/38)) ([30ccac0](https://github.com/idosal/mcp-ui/commit/30ccac0706ad8e02ebcd8960924ed1d58ddedf85))

# [5.1.0](https://github.com/idosal/mcp-ui/compare/v5.0.0...v5.1.0) (2025-07-18)


### Features

* add proxy option to externalUrl ([#37](https://github.com/idosal/mcp-ui/issues/37)) ([7b95cd0](https://github.com/idosal/mcp-ui/commit/7b95cd0b3873fc1cde28748ec463e81c6ff1c494))

# [5.0.0](https://github.com/idosal/mcp-ui/compare/v4.1.4...v5.0.0) (2025-07-17)


### Bug Fixes

* rename delivery -> encoding and flavor -> framework ([#36](https://github.com/idosal/mcp-ui/issues/36)) ([9a509ed](https://github.com/idosal/mcp-ui/commit/9a509ed80d051b0a8042b36958b401a0a7c1e138))


### BREAKING CHANGES

* The existing naming is ambiguous. Renaming delivery to encoding and flavor to framework should clarify the intent.

## [4.1.4](https://github.com/idosal/mcp-ui/compare/v4.1.3...v4.1.4) (2025-07-16)


### Bug Fixes

* pass ref explicitly using iframeProps ([#33](https://github.com/idosal/mcp-ui/issues/33)) ([d01b5d1](https://github.com/idosal/mcp-ui/commit/d01b5d1e4cdaedc436ba2fa8984d866d93d59087))

## [4.1.3](https://github.com/idosal/mcp-ui/compare/v4.1.2...v4.1.3) (2025-07-15)


### Bug Fixes

* ref passing to UIResourceRenderer ([#32](https://github.com/idosal/mcp-ui/issues/32)) ([d28c23f](https://github.com/idosal/mcp-ui/commit/d28c23f9b8ee320f4e361200ae02a23f0d2a1c0c))

## [4.1.2](https://github.com/idosal/mcp-ui/compare/v4.1.1...v4.1.2) (2025-07-10)


### Bug Fixes

* validate URL ([b7c994d](https://github.com/idosal/mcp-ui/commit/b7c994dfdd947b3dfbb903fc8cb896d61004c8d8))

## [4.1.1](https://github.com/idosal/mcp-ui/compare/v4.1.0...v4.1.1) (2025-07-06)


### Bug Fixes

* text and blob support in RemoteDOM resources ([ec68eb9](https://github.com/idosal/mcp-ui/commit/ec68eb90df984da8b492cc25eafdafdeda79f299))

# [4.1.0](https://github.com/idosal/mcp-ui/compare/v4.0.0...v4.1.0) (2025-07-05)


### Features

* separate html and remote-dom props ([#24](https://github.com/idosal/mcp-ui/issues/24)) ([a7f0529](https://github.com/idosal/mcp-ui/commit/a7f05299dc9cc40184f9ab25c5b648ee7077be64))

# [4.0.0](https://github.com/idosal/mcp-ui/compare/v3.0.0...v4.0.0) (2025-07-05)


### Bug Fixes

* rename components and methods to fit new scope ([#22](https://github.com/idosal/mcp-ui/issues/22)) ([6bab1fe](https://github.com/idosal/mcp-ui/commit/6bab1fe3a168a18e7ba4762e23478abf4e0cc84c))


### BREAKING CHANGES

* exported names have changed

# [3.0.0](https://github.com/idosal/mcp-ui/compare/v2.5.1...v3.0.0) (2025-07-04)


### Features

* switch to UiResourceRenderer ([#21](https://github.com/idosal/mcp-ui/issues/21)) ([6fe3166](https://github.com/idosal/mcp-ui/commit/6fe316682675e27db914d60696754677e3783448))


### BREAKING CHANGES

* removed deprecated client API

## [2.5.1](https://github.com/idosal/mcp-ui/compare/v2.5.0...v2.5.1) (2025-06-28)


### Bug Fixes

* export RemoteDomResource ([2b86f2d](https://github.com/idosal/mcp-ui/commit/2b86f2dd4506de49c69908e23d84a2a323170446))
* export UiResourceRenderer and HtmlResource ([2b841a5](https://github.com/idosal/mcp-ui/commit/2b841a556c1111ed70ccb3d3987afd21fe7df897))

# [2.5.0](https://github.com/idosal/mcp-ui/compare/v2.4.0...v2.5.0) (2025-06-27)


### Features

* add remote-dom content type ([#18](https://github.com/idosal/mcp-ui/issues/18)) ([5dacf37](https://github.com/idosal/mcp-ui/commit/5dacf37c22b5ee6ae795049a8d573fc073b8a1f5))

# [2.4.0](https://github.com/idosal/mcp-ui/compare/v2.3.3...v2.4.0) (2025-06-20)


### Features

* **client:** allow setting supportedContentTypes for HtmlResource ([#17](https://github.com/idosal/mcp-ui/issues/17)) ([e009ef1](https://github.com/idosal/mcp-ui/commit/e009ef10010134ba3d9893314cc4d8e1274f1f07))

## [2.3.3](https://github.com/idosal/mcp-ui/compare/v2.3.2...v2.3.3) (2025-06-19)


### Bug Fixes

* typescript types to be compatible with MCP SDK ([#10](https://github.com/idosal/mcp-ui/issues/10)) ([74365d7](https://github.com/idosal/mcp-ui/commit/74365d7ed6422beef6cd9ee0f5a97c847bd9827b))

## [2.3.2](https://github.com/idosal/mcp-ui/compare/v2.3.1...v2.3.2) (2025-06-14)


### Bug Fixes

* trigger release ([aaca831](https://github.com/idosal/mcp-ui/commit/aaca83125c3f7825ccdebf0f04f8553e953c5249))

## [2.3.1](https://github.com/idosal/mcp-ui/compare/v2.3.0...v2.3.1) (2025-06-14)


### Bug Fixes

* iframe handle ([#15](https://github.com/idosal/mcp-ui/issues/15)) ([66bd4fd](https://github.com/idosal/mcp-ui/commit/66bd4fd3d04f82e3e4557f064e701b68e1d8af11))

# [2.3.0](https://github.com/idosal/mcp-ui/compare/v2.2.0...v2.3.0) (2025-06-13)


### Features

* pass iframe props down ([#14](https://github.com/idosal/mcp-ui/issues/14)) ([112539d](https://github.com/idosal/mcp-ui/commit/112539d28640a96e8375a6b416f2ba559370b312))

# [2.2.0](https://github.com/idosal/mcp-ui/compare/v2.1.0...v2.2.0) (2025-06-03)


### Features

* support ui action result types ([#6](https://github.com/idosal/mcp-ui/issues/6)) ([899d152](https://github.com/idosal/mcp-ui/commit/899d1527286a281a23fbb8f3a207d435dfc3fe96))

# [2.1.0](https://github.com/idosal/mcp-ui/compare/v2.0.0...v2.1.0) (2025-05-31)


### Features

* consolidate ui:// and ui-app:// ([#8](https://github.com/idosal/mcp-ui/issues/8)) ([2e08035](https://github.com/idosal/mcp-ui/commit/2e08035676bb6a46ef3c94dba916bc895f1fa3cc))

# [2.0.0](https://github.com/idosal/mcp-ui/compare/v1.1.0...v2.0.0) (2025-05-23)


### Documentation

* bump ([#4](https://github.com/idosal/mcp-ui/issues/4)) ([ad4d163](https://github.com/idosal/mcp-ui/commit/ad4d1632cc1f9c99072349a8f0cdaac343236132))


### BREAKING CHANGES

* (previous one didn't take due to semantic-release misalignment)

# [1.1.0](https://github.com/idosal/mcp-ui/compare/v1.0.7...v1.1.0) (2025-05-16)


### Bug Fixes

* update deps ([4091ef4](https://github.com/idosal/mcp-ui/commit/4091ef47da048fab3c4feb002f5287b2ff295744))


### Features

* change onGenericMcpAction to optional onUiAction ([1913b59](https://github.com/idosal/mcp-ui/commit/1913b5977c30811f9e67659949e2d961f2eda983))

## [1.0.7](https://github.com/idosal/mcp-ui/compare/v1.0.6...v1.0.7) (2025-05-16)


### Bug Fixes

* **client:** specify iframe ([fd0b70a](https://github.com/idosal/mcp-ui/commit/fd0b70a84948d3aa5d7a79269ff7c3bcd0946689))

## [1.0.6](https://github.com/idosal/mcp-ui/compare/v1.0.5...v1.0.6) (2025-05-16)


### Bug Fixes

* support react-router ([21ffb95](https://github.com/idosal/mcp-ui/commit/21ffb95fe6d77a348b95b38dbf3741ba6442894e))

## [1.0.5](https://github.com/idosal/mcp-ui/compare/v1.0.4...v1.0.5) (2025-05-16)


### Bug Fixes

* **client:** styling ([6ff9b68](https://github.com/idosal/mcp-ui/commit/6ff9b685fd1be770fd103943e45275e9ec86905c))

## [1.0.4](https://github.com/idosal/mcp-ui/compare/v1.0.3...v1.0.4) (2025-05-16)


### Bug Fixes

* packaging ([9e6babd](https://github.com/idosal/mcp-ui/commit/9e6babd3a587213452ea7aec4cc9ae3a50fa1965))

## [1.0.3](https://github.com/idosal/mcp-ui/compare/v1.0.2...v1.0.3) (2025-05-16)


### Bug Fixes

* exports ([3a93a16](https://github.com/idosal/mcp-ui/commit/3a93a16e1b7438ba7b2ef49ca854479f755abcc6))

## [1.0.2](https://github.com/idosal/mcp-ui/compare/v1.0.1...v1.0.2) (2025-05-16)


### Bug Fixes

* remove shared dependency ([e66e8f4](https://github.com/idosal/mcp-ui/commit/e66e8f49b1ba46090db6e4682060488566f4fe41))

## [1.0.1](https://github.com/idosal/mcp-ui/compare/v1.0.0...v1.0.1) (2025-05-16)


### Bug Fixes

* publish ([0943e7a](https://github.com/idosal/mcp-ui/commit/0943e7acaf17f32aae085c2313bfbec47bc59f1f))

# 1.0.0 (2025-05-16)


### Bug Fixes

* dependencies ([887f61f](https://github.com/idosal/mcp-ui/commit/887f61f827b4585c17493d4fa2dfb251ea598587))
* lint ([4487820](https://github.com/idosal/mcp-ui/commit/44878203a71c3c9173d463b809be36769e996ba9))
* lint ([d0a91f9](https://github.com/idosal/mcp-ui/commit/d0a91f9a07ec0042690240c3d8d0bad620f8c765))
* package config ([8dc1e53](https://github.com/idosal/mcp-ui/commit/8dc1e5358c3c8e641206a5e6851427d360cc1955))


## /CODE_OF_CONDUCT.md

# Contributor Covenant Code of Conduct

## Our Pledge

We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.

We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.

## Our Standards

Examples of behavior that contributes to a positive environment for our
community include:

* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes,
  and learning from the experience
* Focusing on what is best not just for us as individuals, but for the
  overall community

Examples of unacceptable behavior include:

* The use of sexualized language or imagery, and sexual attention or
  advances of any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email
  address, without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
  professional setting

## Enforcement Responsibilities

Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.

Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.

## Scope

This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.

## Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
idosalomon@gmail.com.
All complaints will be reviewed and investigated promptly and fairly.

All community leaders are obligated to respect the privacy and security of the
reporter of any incident.

## Enforcement Guidelines

Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:

### 1. Correction

**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.

**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.

### 2. Warning

**Community Impact**: A violation through a single incident or series
of actions.

**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.

### 3. Temporary Ban

**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.

**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.

### 4. Permanent Ban

**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior,  harassment of an
individual, or aggression toward or disparagement of classes of individuals.

**Consequence**: A permanent ban from any sort of public interaction within
the community.

## Attribution

This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.

Community Impact Guidelines were inspired by [Mozilla's code of conduct
enforcement ladder](https://github.com/mozilla/diversity).

[homepage]: https://www.contributor-covenant.org

For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.


## /README.md

## 📦 Model Context Protocol UI SDK

<p align="center">
  <img width="250" alt="image" src="https://github.com/user-attachments/assets/65b9698f-990f-4846-9b2d-88de91d53d4d" />
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@mcp-ui/server"><img src="https://img.shields.io/npm/v/@mcp-ui/server?label=server&color=green" alt="Server Version"></a>
  <a href="https://www.npmjs.com/package/@mcp-ui/client"><img src="https://img.shields.io/npm/v/@mcp-ui/client?label=client&color=blue" alt="Client Version"></a>
  <a href="https://rubygems.org/gems/mcp_ui_server"><img src="https://img.shields.io/gem/v/mcp_ui_server" alt="Ruby Server SDK Version"></a>
  <a href="https://pypi.org/project/mcp-ui-server/"><img src="https://img.shields.io/pypi/v/mcp-ui-server?label=python&color=yellow" alt="Python Server SDK Version"></a>
  <a href="https://discord.gg/CEAG4KW7ZH"><img src="https://img.shields.io/discord/1401195140436983879?logo=discord&label=discord" alt="Discord"></a>
  <a href="https://gitmcp.io/idosal/mcp-ui"><img src="https://img.shields.io/endpoint?url=https://gitmcp.io/badge/idosal/mcp-ui" alt="MCP Documentation"></a>
</p>

<p align="center">
  <a href="#-whats-mcp-ui">What's mcp-ui?</a> •
  <a href="#-core-concepts">Core Concepts</a> •
  <a href="#-installation">Installation</a> •
  <a href="#-getting-started">Getting Started</a> •
  <a href="#-walkthrough">Walkthrough</a> •
  <a href="#-examples">Examples</a> •
  <a href="#-supported-hosts">Supported Hosts</a> •
  <a href="#-security">Security</a> •
  <a href="#-roadmap">Roadmap</a> •
  <a href="#-contributing">Contributing</a> •
  <a href="#-license">License</a>
</p>

----

**`mcp-ui`** pioneered the concept of interactive UI over [MCP](https://modelcontextprotocol.io/introduction), enabling rich web interfaces for AI tools. Alongside Apps SDK, the patterns developed here directly influenced the [MCP Apps](https://github.com/modelcontextprotocol/ext-apps) specification, which standardized UI delivery over the protocol.

The `@mcp-ui/*` packages implement the MCP Apps standard. `@mcp-ui/client` is the recommended SDK for MCP Apps Hosts.

> *The @mcp-ui/* packages are fully compliant with the MCP Apps specification and ready for production use.*

<p align="center">
  <video src="https://github.com/user-attachments/assets/7180c822-2dd9-4f38-9d3e-b67679509483"></video>
</p>

## 💡 What's `mcp-ui`?

`mcp-ui` is an SDK implementing the [MCP Apps](https://github.com/modelcontextprotocol/ext-apps) standard for UI over MCP. It provides:

* **`@mcp-ui/server` (TypeScript)**: Create UI resources with `createUIResource`. Works with `registerAppTool` and `registerAppResource` from `@modelcontextprotocol/ext-apps/server`.
* **`@mcp-ui/client` (TypeScript)**: Render tool UIs with `AppRenderer` (MCP Apps) or `UIResourceRenderer` (legacy MCP-UI hosts).
* **`mcp_ui_server` (Ruby)**: Create UI resources in Ruby.
* **`mcp-ui-server` (Python)**: Create UI resources in Python.

The MCP Apps pattern links tools to their UIs via `_meta.ui.resourceUri`. Hosts fetch and render the UI alongside tool results.

## ✨ Core Concepts

### MCP Apps Pattern (Recommended)

The MCP Apps standard links tools to their UIs via `_meta.ui.resourceUri`:

```ts
import { registerAppTool, registerAppResource } from '@modelcontextprotocol/ext-apps/server';
import { createUIResource } from '@mcp-ui/server';

// 1. Create UI resource
const widgetUI = createUIResource({
  uri: 'ui://my-server/widget',
  content: { type: 'rawHtml', htmlString: '<h1>Widget</h1>' },
  encoding: 'text',
});

// 2. Register resource handler
registerAppResource(server, 'widget_ui', widgetUI.resource.uri, {}, async () => ({
  contents: [widgetUI.resource]
}));

// 3. Register tool with _meta linking
registerAppTool(server, 'show_widget', {
  description: 'Show widget',
  inputSchema: { query: z.string() },
  _meta: { ui: { resourceUri: widgetUI.resource.uri } }  // Links tool → UI
}, async ({ query }) => {
  return { content: [{ type: 'text', text: `Query: ${query}` }] };
});
```

Hosts detect `_meta.ui.resourceUri`, fetch the UI via `resources/read`, and render it with `AppRenderer`.

### UIResource (Wire Format)

The underlying payload for UI content:

```ts
interface UIResource {
  type: 'resource';
  resource: {
    uri: string;       // e.g., ui://component/id
    mimeType: 'text/html' | 'text/uri-list' | 'application/vnd.mcp-ui.remote-dom';
    text?: string;      // Inline HTML, external URL, or remote-dom script
    blob?: string;      // Base64-encoded content
  };
}
```

* **`uri`**: Unique identifier using `ui://` scheme
* **`mimeType`**: `text/html` for HTML, `text/uri-list` for URLs, `text/html;profile=mcp-app` for MCP Apps
* **`text` vs. `blob`**: Plain text or Base64-encoded content

### Client Components

#### AppRenderer (MCP Apps)

For MCP Apps hosts, use `AppRenderer` to render tool UIs:

```tsx
import { AppRenderer } from '@mcp-ui/client';

function ToolUI({ client, toolName, toolInput, toolResult }) {
  return (
    <AppRenderer
      client={client}
      toolName={toolName}
      sandbox={{ url: sandboxUrl }}
      toolInput={toolInput}
      toolResult={toolResult}
      onOpenLink={async ({ url }) => window.open(url)}
      onMessage={async (params) => console.log('Message:', params)}
    />
  );
}
```

Key props:
- **`client`**: Optional MCP client for automatic resource fetching
- **`toolName`**: Tool name to render UI for
- **`sandbox`**: Sandbox configuration with proxy URL
- **`toolInput`** / **`toolResult`**: Tool arguments and results
- **`onOpenLink`** / **`onMessage`**: Handlers for UI requests

#### UIResourceRenderer (Legacy MCP-UI)

For legacy hosts that embed resources in tool responses:

```tsx
import { UIResourceRenderer } from '@mcp-ui/client';

<UIResourceRenderer
  resource={mcpResource.resource}
  onUIAction={(action) => console.log('Action:', action)}
/>
```

Props:
- **`resource`**: Resource object with `uri`, `mimeType`, and content (`text`/`blob`)
- **`onUIAction`**: Callback for handling tool, prompt, link, notify, and intent actions

Also available as a Web Component:
```html
<ui-resource-renderer
  resource='{ "mimeType": "text/html", "text": "<h2>Hello!</h2>" }'
></ui-resource-renderer>
```

### Supported Resource Types

#### HTML (`text/html;profile=mcp-app`)

Rendered using the internal `<HTMLResourceRenderer />` component, which displays content inside an `<iframe>`. This is suitable for self-contained HTML.

*   **`mimeType`**: `text/html;profile=mcp-app` (MCP Apps standard)

### UI Action

UI snippets must be able to interact with the agent. In `mcp-ui`, this is done by hooking into events sent from the UI snippet and reacting to them in the host (see `onUIAction` prop). For example, an HTML may trigger a tool call when a button is clicked by sending an event which will be caught handled by the client.


### Platform Adapters

MCP-UI SDKs includes adapter support for host-specific implementations, enabling your open MCP-UI widgets to work seamlessly regardless of host. Adapters automatically translate between MCP-UI's `postMessage` protocol and host-specific APIs. Over time, as hosts become compatible with the open spec, these adapters wouldn't be needed.

#### Available Adapters

##### Apps SDK Adapter

For Apps SDK environments (e.g., ChatGPT), this adapter translates MCP-UI protocol to Apps SDK API calls (e.g., `window.openai`).

**How it Works:**
- Intercepts MCP-UI `postMessage` calls from your widgets
- Translates them to appropriate Apps SDK API calls
- Handles bidirectional communication (tools, prompts, state management)
- Works transparently - your existing MCP-UI code continues to work without changes

**Usage:**

```ts
import { createUIResource } from '@mcp-ui/server';

const htmlResource = createUIResource({
  uri: 'ui://greeting/1',
  content: { 
    type: 'rawHtml', 
    htmlString: `
      <button onclick="window.parent.postMessage({ type: 'tool', payload: { toolName: 'myTool', params: {} } }, '*')">
        Call Tool
      </button>
    ` 
  },
  encoding: 'text',
  // Enable adapters
  adapters: {
    appsSdk: {
      enabled: true,
      config: ...
    }
    // Future adapters can be enabled here
  }
});
```

The adapter scripts are automatically injected into your HTML content and handle all protocol translation.

**Supported Actions:**
- ✅ **Tool calls** - `{ type: 'tool', payload: { toolName, params } }`
- ✅ **Prompts** - `{ type: 'prompt', payload: { prompt } }`
- ✅ **Intents** - `{ type: 'intent', payload: { intent, params } }` (converted to prompts)
- ✅ **Notifications** - `{ type: 'notify', payload: { message } }`
- ✅ **Render data** - Access to `toolInput`, `toolOutput`, `widgetState`, `theme`, `locale`
- ⚠️ **Links** - `{ type: 'link', payload: { url } }` (may not be supported, returns error in some environments)

#### Advanced Usage

You can manually wrap HTML with adapters or access adapter scripts directly:

```ts
import { wrapHtmlWithAdapters, getAppsSdkAdapterScript } from '@mcp-ui/server';

// Manually wrap HTML with adapters
const wrappedHtml = wrapHtmlWithAdapters(
  '<button>Click me</button>',
  {
    appsSdk: {
      enabled: true,
      config: { intentHandling: 'ignore' }
    }
  }
);

// Get a specific adapter script
const appsSdkScript = getAppsSdkAdapterScript({ timeout: 60000 });
```

## 🏗️ Installation

### TypeScript

```bash
# using npm
npm install @mcp-ui/server @mcp-ui/client

# or pnpm
pnpm add @mcp-ui/server @mcp-ui/client

# or yarn
yarn add @mcp-ui/server @mcp-ui/client
```

### Ruby

```bash
gem install mcp_ui_server
```

### Python

```bash
# using pip
pip install mcp-ui-server

# or uv
uv add mcp-ui-server
```

## 🚀 Getting Started

You can use [GitMCP](https://gitmcp.io/idosal/mcp-ui) to give your IDE access to `mcp-ui`'s latest documentation!

### TypeScript (MCP Apps Pattern)

1. **Server-side**: Create a tool with UI using `_meta.ui.resourceUri`

   ```ts
   import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
   import { registerAppTool, registerAppResource } from '@modelcontextprotocol/ext-apps/server';
   import { createUIResource } from '@mcp-ui/server';
   import { z } from 'zod';

   const server = new McpServer({ name: 'my-server', version: '1.0.0' });

   // Create UI resource
   const widgetUI = createUIResource({
     uri: 'ui://my-server/widget',
     content: { type: 'rawHtml', htmlString: '<h1>Interactive Widget</h1>' },
     encoding: 'text',
   });

   // Register resource handler
   registerAppResource(server, 'widget_ui', widgetUI.resource.uri, {}, async () => ({
     contents: [widgetUI.resource]
   }));

   // Register tool with _meta linking
   registerAppTool(server, 'show_widget', {
     description: 'Show widget',
     inputSchema: { query: z.string() },
     _meta: { ui: { resourceUri: widgetUI.resource.uri } }
   }, async ({ query }) => {
     return { content: [{ type: 'text', text: `Query: ${query}` }] };
   });
   ```

2. **Client-side**: Render tool UIs with `AppRenderer`

   ```tsx
   import { AppRenderer } from '@mcp-ui/client';

   function ToolUI({ client, toolName, toolInput, toolResult }) {
     return (
       <AppRenderer
         client={client}
         toolName={toolName}
         sandbox={{ url: sandboxUrl }}
         toolInput={toolInput}
         toolResult={toolResult}
         onOpenLink={async ({ url }) => window.open(url)}
         onMessage={async (params) => console.log('Message:', params)}
       />
     );
   }
   ```

### Legacy MCP-UI Pattern

For hosts that don't support MCP Apps yet:

   ```tsx
   import { UIResourceRenderer } from '@mcp-ui/client';

   <UIResourceRenderer
     resource={mcpResource.resource}
     onUIAction={(action) => console.log('Action:', action)}
   />
   ```

### Python

**Server-side**: Build your UI resources

   ```python
   from mcp_ui_server import create_ui_resource

   # Inline HTML
   html_resource = create_ui_resource({
     "uri": "ui://greeting/1",
     "content": { "type": "rawHtml", "htmlString": "<p>Hello, from Python!</p>" },
     "encoding": "text",
   })

   # External URL
   external_url_resource = create_ui_resource({
     "uri": "ui://greeting/2",
     "content": { "type": "externalUrl", "iframeUrl": "https://example.com" },
     "encoding": "text",
   })
   ```

### Ruby

**Server-side**: Build your UI resources

   ```ruby
   require 'mcp_ui_server'

   # Inline HTML
   html_resource = McpUiServer.create_ui_resource(
     uri: 'ui://greeting/1',
     content: { type: :raw_html, htmlString: '<p>Hello, from Ruby!</p>' },
     encoding: :text
   )

   # External URL
   external_url_resource = McpUiServer.create_ui_resource(
     uri: 'ui://greeting/2',
     content: { type: :external_url, iframeUrl: 'https://example.com' },
     encoding: :text
   )

   # remote-dom
   remote_dom_resource = McpUiServer.create_ui_resource(
     uri: 'ui://remote-component/action-button',
     content: {
       type: :remote_dom,
       script: "
        const button = document.createElement('ui-button');
        button.setAttribute('label', 'Click me from Ruby!');
        button.addEventListener('press', () => {
          window.parent.postMessage({ type: 'tool', payload: { toolName: 'uiInteraction', params: { action: 'button-click', from: 'ruby-remote-dom' } } }, '*');
        });
        root.appendChild(button);
        ",
       framework: :react,
     },
     encoding: :text
   )
   ```

## 🚶 Walkthrough

For a detailed, simple, step-by-step guide on how to integrate `mcp-ui` into your own server, check out the full server walkthroughs on the [mcp-ui documentation site](https://mcpui.dev):

- **[TypeScript Server Walkthrough](https://mcpui.dev/guide/server/typescript/walkthrough)**
- **[Ruby Server Walkthrough](https://mcpui.dev/guide/server/ruby/walkthrough)**
- **[Python Server Walkthrough](https://mcpui.dev/guide/server/python/walkthrough)**

These guides will show you how to add a `mcp-ui` endpoint to an existing server, create tools that return UI resources, and test your setup with the `ui-inspector`!

## 🌍 Examples

**Client Examples**
* [Goose](https://github.com/block/goose) - open source AI agent that supports `mcp-ui`.
* [LibreChat](https://github.com/danny-avila/LibreChat) - enhanced ChatGPT clone that supports `mcp-ui`.
* [ui-inspector](https://github.com/idosal/ui-inspector) - inspect local `mcp-ui`-enabled servers.
* [MCP-UI Chat](https://github.com/idosal/scira-mcp-ui-chat) - interactive chat built with the `mcp-ui` client. Check out the [hosted version](https://scira-mcp-chat-git-main-idosals-projects.vercel.app/)!
* MCP-UI RemoteDOM Playground (`examples/remote-dom-demo`) - local demo app to test RemoteDOM resources
* MCP-UI Web Component Demo (`examples/wc-demo`) - local demo app to test the Web Component integration in hosts

**Server Examples**
* **TypeScript**: A [full-featured server](examples/server) that is deployed to a hosted environment for easy testing.
  * **[`typescript-server-demo`](./examples/typescript-server-demo)**: A simple Typescript server that demonstrates how to generate UI resources.
  * **server**: A [full-featured Typescript server](examples/server) that is deployed to a hosted Cloudflare environment for easy testing.
    * **HTTP Streaming**: `https://remote-mcp-server-authless.idosalomon.workers.dev/mcp`
    * **SSE**: `https://remote-mcp-server-authless.idosalomon.workers.dev/sse`
* **Ruby**: A barebones [demo server](/examples/ruby-server-demo) that shows how to use `mcp_ui_server` and `mcp` gems together.
* **Python**: A simple [demo server](/examples/python-server-demo) that shows how to use the `mcp-ui-server` Python package.
* [XMCP](https://github.com/basementstudio/xmcp/tree/main/examples/mcp-ui) - Typescript MCP framework with `mcp-ui` starter example.

Drop those URLs into any MCP-compatible host to see `mcp-ui` in action. For a supported local inspector, see the [ui-inspector](https://github.com/idosal/ui-inspector).

## 💻 Supported Hosts

The `@mcp-ui/*` packages work with both MCP Apps hosts and legacy MCP-UI hosts.

### MCP Apps Hosts

These hosts implement the [MCP Apps specification](https://github.com/modelcontextprotocol/ext-apps) and support tools with `_meta.ui.resourceUri`:

| Host | Notes |
| :--- | :---- |
| [Claude](https://www.claude.ai/) | ✅ | ✅ |
| [VSCode](https://github.com/microsoft/vscode/issues/260218) | |
| [Postman](https://www.postman.com/) | |
| [Goose](https://block.github.io/goose/) | |
| [MCPJam](https://www.mcpjam.com/) | |
| [LibreChat](https://www.librechat.ai/) | |
| [mcp-use](https://mcp-use.com/) | |
| [Smithery](https://smithery.ai/playground) | |

### Legacy MCP-UI Hosts

These hosts expect UI resources embedded directly in tool responses:

| Host | Rendering | UI Actions | Notes |
| :--- | :-------: | :--------: | :---- |
| [Nanobot](https://www.nanobot.ai/) | ✅ | ✅ |
| [MCPJam](https://www.mcpjam.com/) | ✅ | ✅ |
| [Postman](https://www.postman.com/) | ✅ | ⚠️ | |
| [Goose](https://block.github.io/goose/) | ✅ | ⚠️ | |
| [LibreChat](https://www.librechat.ai/) | ✅ | ⚠️ | |
| [Smithery](https://smithery.ai/playground) | ✅ | ❌ | |
| [fast-agent](https://fast-agent.ai/mcp/mcp-ui/) | ✅ | ❌ | |

### Hosts Requiring Adapters

| Host | Protocol | Notes |
| :--- | :------: | :---- |
| [ChatGPT](https://chatgpt.com/) | Apps SDK | [Guide](https://mcpui.dev/guide/apps-sdk) |

**Legend:** ✅ Supported · ⚠️ Partial · ❌ Not yet supported

## 🔒 Security
Host and user security is one of `mcp-ui`'s primary concerns. In all content types, the remote code is executed in a sandboxed iframe.

## 🛣️ Roadmap

- [X] Add online playground
- [X] Expand UI Action API (beyond tool calls)
- [X] Support Web Components
- [X] Support Remote-DOM
- [ ] Add component libraries (in progress)
- [ ] Add SDKs for additional programming languages (in progress; Ruby, Python available)
- [ ] Support additional frontend frameworks
- [ ] Explore providing a UI SDK (in addition to the client and server one)
- [ ] Add declarative UI content type
- [ ] Support generative UI?
      
## Core Team
`mcp-ui` is a project by [Ido Salomon](https://x.com/idosal1), in collaboration with [Liad Yosef](https://x.com/liadyosef).

## 🤝 Contributing

Contributions, ideas, and bug reports are welcome! See the [contribution guidelines](https://github.com/idosal/mcp-ui/blob/main/.github/CONTRIBUTING.md) to get started.

## 📄 License

Apache License 2.0 © [The MCP-UI Authors](LICENSE)

## Disclaimer

This project is provided "as is", without warranty of any kind. The `mcp-ui` authors and contributors shall not be held liable for any damages, losses, or issues arising from the use of this software. Use at your own risk.


## /SECURITY.md

# Security Policy

MCP-UI is committed to maintaining the highest security standards, and actively works with web security experts to improve the spec and implementations. We welcome disclosures, suggestions, and feedback that can improve it.

## Disclosing an Issue

Please report any issues using this private [form](https://forms.gle/6WbAJU7m2LSxfY6K6). All disclosures will be handled as soon as possible.


## /docs/.vitepress/cache/deps/@theme_index.js

```js path="/docs/.vitepress/cache/deps/@theme_index.js" 
import { useMediaQuery } from './chunk-5SIPG2HA.js';
import { computed, ref, shallowRef, watch } from './chunk-O3I43HSE.js';

// node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/index.js
import '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/styles/fonts.css';

// node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/without-fonts.js
import '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/styles/vars.css';
import '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/styles/base.css';
import '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/styles/icons.css';
import '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/styles/utils.css';
import '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/styles/components/custom-block.css';
import '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code.css';
import '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code-group.css';
import '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/styles/components/vp-doc.css';
import '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/styles/components/vp-sponsor.css';
import VPBadge from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPBadge.vue';
import Layout from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/Layout.vue';
import { default as default2 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPBadge.vue';
import { default as default3 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPButton.vue';
import { default as default4 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPDocAsideSponsors.vue';
import { default as default5 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPFeatures.vue';
import { default as default6 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPHomeContent.vue';
import { default as default7 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPHomeFeatures.vue';
import { default as default8 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPHomeHero.vue';
import { default as default9 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPHomeSponsors.vue';
import { default as default10 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPImage.vue';
import { default as default11 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPLink.vue';
import { default as default12 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPNavBarSearch.vue';
import { default as default13 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPSocialLink.vue';
import { default as default14 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPSocialLinks.vue';
import { default as default15 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPSponsors.vue';
import { default as default16 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPTeamMembers.vue';
import { default as default17 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPTeamPage.vue';
import { default as default18 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageSection.vue';
import { default as default19 } from '/Users/idosal/mcp-ui/node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageTitle.vue';

// node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/composables/local-nav.js
import { onContentUpdated } from 'vitepress';

// node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/composables/outline.js
import { getScrollOffset } from 'vitepress';

// node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/support/utils.js
import { withBase } from 'vitepress';

// node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/composables/data.js
import { useData as useData$ } from 'vitepress';
var useData = useData$;

// node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/support/utils.js
function ensureStartingSlash(path) {
  return path.startsWith('/') ? path : `/${path}`;
}

// node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/support/sidebar.js
function getSidebar(_sidebar, path) {
  if (Array.isArray(_sidebar)) return addBase(_sidebar);
  if (_sidebar == null) return [];
  path = ensureStartingSlash(path);
  const dir = Object.keys(_sidebar)
    .sort((a, b) => {
      return b.split('/').length - a.split('/').length;
    })
    .find((dir2) => {
      return path.startsWith(ensureStartingSlash(dir2));
    });
  const sidebar = dir ? _sidebar[dir] : [];
  return Array.isArray(sidebar) ? addBase(sidebar) : addBase(sidebar.items, sidebar.base);
}
function getSidebarGroups(sidebar) {
  const groups = [];
  let lastGroupIndex = 0;
  for (const index in sidebar) {
    const item = sidebar[index];
    if (item.items) {
      lastGroupIndex = groups.push(item);
      continue;
    }
    if (!groups[lastGroupIndex]) {
      groups.push({ items: [] });
    }
    groups[lastGroupIndex].items.push(item);
  }
  return groups;
}
function addBase(items, _base) {
  return [...items].map((_item) => {
    const item = { ..._item };
    const base = item.base || _base;
    if (base && item.link) item.link = base + item.link;
    if (item.items) item.items = addBase(item.items, base);
    return item;
  });
}

// node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/composables/sidebar.js
function useSidebar() {
  const { frontmatter, page, theme: theme2 } = useData();
  const is960 = useMediaQuery('(min-width: 960px)');
  const isOpen = ref(false);
  const _sidebar = computed(() => {
    const sidebarConfig = theme2.value.sidebar;
    const relativePath = page.value.relativePath;
    return sidebarConfig ? getSidebar(sidebarConfig, relativePath) : [];
  });
  const sidebar = ref(_sidebar.value);
  watch(_sidebar, (next, prev) => {
    if (JSON.stringify(next) !== JSON.stringify(prev)) sidebar.value = _sidebar.value;
  });
  const hasSidebar = computed(() => {
    return (
      frontmatter.value.sidebar !== false &&
      sidebar.value.length > 0 &&
      frontmatter.value.layout !== 'home'
    );
  });
  const leftAside = computed(() => {
    if (hasAside)
      return frontmatter.value.aside == null
        ? theme2.value.aside === 'left'
        : frontmatter.value.aside === 'left';
    return false;
  });
  const hasAside = computed(() => {
    if (frontmatter.value.layout === 'home') return false;
    if (frontmatter.value.aside != null) return !!frontmatter.value.aside;
    return theme2.value.aside !== false;
  });
  const isSidebarEnabled = computed(() => hasSidebar.value && is960.value);
  const sidebarGroups = computed(() => {
    return hasSidebar.value ? getSidebarGroups(sidebar.value) : [];
  });
  function open() {
    isOpen.value = true;
  }
  function close() {
    isOpen.value = false;
  }
  function toggle() {
    isOpen.value ? close() : open();
  }
  return {
    isOpen,
    sidebar,
    sidebarGroups,
    hasSidebar,
    hasAside,
    leftAside,
    isSidebarEnabled,
    open,
    close,
    toggle,
  };
}

// node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/composables/outline.js
var ignoreRE = /\b(?:VPBadge|header-anchor|footnote-ref|ignore-header)\b/;
var resolvedHeaders = [];
function getHeaders(range) {
  const headers = [...document.querySelectorAll('.VPDoc :where(h1,h2,h3,h4,h5,h6)')]
    .filter((el) => el.id && el.hasChildNodes())
    .map((el) => {
      const level = Number(el.tagName[1]);
      return {
        element: el,
        title: serializeHeader(el),
        link: '#' + el.id,
        level,
      };
    });
  return resolveHeaders(headers, range);
}
function serializeHeader(h) {
  let ret = '';
  for (const node of h.childNodes) {
    if (node.nodeType === 1) {
      if (ignoreRE.test(node.className)) continue;
      ret += node.textContent;
    } else if (node.nodeType === 3) {
      ret += node.textContent;
    }
  }
  return ret.trim();
}
function resolveHeaders(headers, range) {
  if (range === false) {
    return [];
  }
  const levelsRange =
    (typeof range === 'object' && !Array.isArray(range) ? range.level : range) || 2;
  const [high, low] =
    typeof levelsRange === 'number'
      ? [levelsRange, levelsRange]
      : levelsRange === 'deep'
        ? [2, 6]
        : levelsRange;
  return buildTree(headers, high, low);
}
function buildTree(data, min, max) {
  resolvedHeaders.length = 0;
  const result = [];
  const stack = [];
  data.forEach((item) => {
    const node = { ...item, children: [] };
    let parent = stack[stack.length - 1];
    while (parent && parent.level >= node.level) {
      stack.pop();
      parent = stack[stack.length - 1];
    }
    if (node.element.classList.contains('ignore-header') || (parent && 'shouldIgnore' in parent)) {
      stack.push({ level: node.level, shouldIgnore: true });
      return;
    }
    if (node.level > max || node.level < min) return;
    resolvedHeaders.push({ element: node.element, link: node.link });
    if (parent) parent.children.push(node);
    else result.push(node);
    stack.push(node);
  });
  return result;
}

// node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/composables/local-nav.js
function useLocalNav() {
  const { theme: theme2, frontmatter } = useData();
  const headers = shallowRef([]);
  const hasLocalNav = computed(() => {
    return headers.value.length > 0;
  });
  onContentUpdated(() => {
    headers.value = getHeaders(frontmatter.value.outline ?? theme2.value.outline);
  });
  return {
    headers,
    hasLocalNav,
  };
}

// node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/without-fonts.js
var theme = {
  Layout,
  enhanceApp: ({ app }) => {
    app.component('Badge', VPBadge);
  },
};
var without_fonts_default = theme;
export {
  default2 as VPBadge,
  default3 as VPButton,
  default4 as VPDocAsideSponsors,
  default5 as VPFeatures,
  default6 as VPHomeContent,
  default7 as VPHomeFeatures,
  default8 as VPHomeHero,
  default9 as VPHomeSponsors,
  default10 as VPImage,
  default11 as VPLink,
  default12 as VPNavBarSearch,
  default13 as VPSocialLink,
  default14 as VPSocialLinks,
  default15 as VPSponsors,
  default16 as VPTeamMembers,
  default17 as VPTeamPage,
  default18 as VPTeamPageSection,
  default19 as VPTeamPageTitle,
  without_fonts_default as default,
  useLocalNav,
  useSidebar,
};
//# sourceMappingURL=@theme_index.js.map

```

## /docs/.vitepress/cache/deps/_metadata.json

```json path="/docs/.vitepress/cache/deps/_metadata.json" 
{
  "hash": "ea534343",
  "configHash": "bcb9b8b0",
  "lockfileHash": "de901af9",
  "browserHash": "6269a7f8",
  "optimized": {
    "vue": {
      "src": "../../../../node_modules/.pnpm/vue@3.5.14_typescript@5.8.3/node_modules/vue/dist/vue.runtime.esm-bundler.js",
      "file": "vue.js",
      "fileHash": "57d991d9",
      "needsInterop": false
    },
    "vitepress > @vue/devtools-api": {
      "src": "../../../../node_modules/.pnpm/@vue+devtools-api@7.7.6/node_modules/@vue/devtools-api/dist/index.js",
      "file": "vitepress___@vue_devtools-api.js",
      "fileHash": "73e4779e",
      "needsInterop": false
    },
    "vitepress > @vueuse/core": {
      "src": "../../../../node_modules/.pnpm/@vueuse+core@12.8.2_typescript@5.8.3/node_modules/@vueuse/core/index.mjs",
      "file": "vitepress___@vueuse_core.js",
      "fileHash": "1696037d",
      "needsInterop": false
    },
    "@theme/index": {
      "src": "../../../../node_modules/.pnpm/vitepress@1.6.3_@algolia+client-search@5.25.0_@types+node@20.17.47_@types+react@18.3.21_postc_3d2t5mvdnqmir7u3qhtpv6wwsi/node_modules/vitepress/dist/client/theme-default/index.js",
      "file": "@theme_index.js",
      "fileHash": "f945b636",
      "needsInterop": false
    }
  },
  "chunks": {
    "chunk-5SIPG2HA": {
      "file": "chunk-5SIPG2HA.js"
    },
    "chunk-O3I43HSE": {
      "file": "chunk-O3I43HSE.js"
    }
  }
}

```

## /docs/.vitepress/cache/deps/package.json

```json path="/docs/.vitepress/cache/deps/package.json" 
{
  "type": "module"
}

```

## /docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js

```js path="/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js" 
// node_modules/.pnpm/@vue+devtools-shared@7.7.6/node_modules/@vue/devtools-shared/dist/index.js
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __esm = (fn, res) =>
  function __init() {
    return (fn && (res = (0, fn[__getOwnPropNames(fn)[0]])((fn = 0))), res);
  };
var __commonJS = (cb, mod) =>
  function __require() {
    return (
      mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod),
      mod.exports
    );
  };
var __copyProps = (to, from, except, desc) => {
  if ((from && typeof from === 'object') || typeof from === 'function') {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, {
          get: () => from[key],
          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable,
        });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target2) => (
  (target2 = mod != null ? __create(__getProtoOf(mod)) : {}),
  __copyProps(
    // If the importer is in node compatibility mode or this is not an ESM
    // file that has been converted to a CommonJS file using a Babel-
    // compatible transform (i.e. "__esModule" has not been set), then set
    // "default" to the CommonJS "module.exports" for node compatibility.
    isNodeMode || !mod || !mod.__esModule
      ? __defProp(target2, 'default', { value: mod, enumerable: true })
      : target2,
    mod,
  )
);
var init_esm_shims = __esm({
  '../../node_modules/.pnpm/tsup@8.4.0_@microsoft+api-extractor@7.51.1_@types+node@22.13.14__jiti@2.4.2_postcss@8.5_96eb05a9d65343021e53791dd83f3773/node_modules/tsup/assets/esm_shims.js'() {
    'use strict';
  },
});
var require_rfdc = __commonJS({
  '../../node_modules/.pnpm/rfdc@1.4.1/node_modules/rfdc/index.js'(exports, module) {
    'use strict';
    init_esm_shims();
    module.exports = rfdc2;
    function copyBuffer(cur) {
      if (cur instanceof Buffer) {
        return Buffer.from(cur);
      }
      return new cur.constructor(cur.buffer.slice(), cur.byteOffset, cur.length);
    }
    function rfdc2(opts) {
      opts = opts || {};
      if (opts.circles) return rfdcCircles(opts);
      const constructorHandlers = /* @__PURE__ */ new Map();
      constructorHandlers.set(Date, (o) => new Date(o));
      constructorHandlers.set(Map, (o, fn) => new Map(cloneArray(Array.from(o), fn)));
      constructorHandlers.set(Set, (o, fn) => new Set(cloneArray(Array.from(o), fn)));
      if (opts.constructorHandlers) {
        for (const handler2 of opts.constructorHandlers) {
          constructorHandlers.set(handler2[0], handler2[1]);
        }
      }
      let handler = null;
      return opts.proto ? cloneProto : clone;
      function cloneArray(a, fn) {
        const keys = Object.keys(a);
        const a2 = new Array(keys.length);
        for (let i = 0; i < keys.length; i++) {
          const k = keys[i];
          const cur = a[k];
          if (typeof cur !== 'object' || cur === null) {
            a2[k] = cur;
          } else if (
            cur.constructor !== Object &&
            (handler = constructorHandlers.get(cur.constructor))
          ) {
            a2[k] = handler(cur, fn);
          } else if (ArrayBuffer.isView(cur)) {
            a2[k] = copyBuffer(cur);
          } else {
            a2[k] = fn(cur);
          }
        }
        return a2;
      }
      function clone(o) {
        if (typeof o !== 'object' || o === null) return o;
        if (Array.isArray(o)) return cloneArray(o, clone);
        if (o.constructor !== Object && (handler = constructorHandlers.get(o.constructor))) {
          return handler(o, clone);
        }
        const o2 = {};
        for (const k in o) {
          if (Object.hasOwnProperty.call(o, k) === false) continue;
          const cur = o[k];
          if (typeof cur !== 'object' || cur === null) {
            o2[k] = cur;
          } else if (
            cur.constructor !== Object &&
            (handler = constructorHandlers.get(cur.constructor))
          ) {
            o2[k] = handler(cur, clone);
          } else if (ArrayBuffer.isView(cur)) {
            o2[k] = copyBuffer(cur);
          } else {
            o2[k] = clone(cur);
          }
        }
        return o2;
      }
      function cloneProto(o) {
        if (typeof o !== 'object' || o === null) return o;
        if (Array.isArray(o)) return cloneArray(o, cloneProto);
        if (o.constructor !== Object && (handler = constructorHandlers.get(o.constructor))) {
          return handler(o, cloneProto);
        }
        const o2 = {};
        for (const k in o) {
          const cur = o[k];
          if (typeof cur !== 'object' || cur === null) {
            o2[k] = cur;
          } else if (
            cur.constructor !== Object &&
            (handler = constructorHandlers.get(cur.constructor))
          ) {
            o2[k] = handler(cur, cloneProto);
          } else if (ArrayBuffer.isView(cur)) {
            o2[k] = copyBuffer(cur);
          } else {
            o2[k] = cloneProto(cur);
          }
        }
        return o2;
      }
    }
    function rfdcCircles(opts) {
      const refs = [];
      const refsNew = [];
      const constructorHandlers = /* @__PURE__ */ new Map();
      constructorHandlers.set(Date, (o) => new Date(o));
      constructorHandlers.set(Map, (o, fn) => new Map(cloneArray(Array.from(o), fn)));
      constructorHandlers.set(Set, (o, fn) => new Set(cloneArray(Array.from(o), fn)));
      if (opts.constructorHandlers) {
        for (const handler2 of opts.constructorHandlers) {
          constructorHandlers.set(handler2[0], handler2[1]);
        }
      }
      let handler = null;
      return opts.proto ? cloneProto : clone;
      function cloneArray(a, fn) {
        const keys = Object.keys(a);
        const a2 = new Array(keys.length);
        for (let i = 0; i < keys.length; i++) {
          const k = keys[i];
          const cur = a[k];
          if (typeof cur !== 'object' || cur === null) {
            a2[k] = cur;
          } else if (
            cur.constructor !== Object &&
            (handler = constructorHandlers.get(cur.constructor))
          ) {
            a2[k] = handler(cur, fn);
          } else if (ArrayBuffer.isView(cur)) {
            a2[k] = copyBuffer(cur);
          } else {
            const index = refs.indexOf(cur);
            if (index !== -1) {
              a2[k] = refsNew[index];
            } else {
              a2[k] = fn(cur);
            }
          }
        }
        return a2;
      }
      function clone(o) {
        if (typeof o !== 'object' || o === null) return o;
        if (Array.isArray(o)) return cloneArray(o, clone);
        if (o.constructor !== Object && (handler = constructorHandlers.get(o.constructor))) {
          return handler(o, clone);
        }
        const o2 = {};
        refs.push(o);
        refsNew.push(o2);
        for (const k in o) {
          if (Object.hasOwnProperty.call(o, k) === false) continue;
          const cur = o[k];
          if (typeof cur !== 'object' || cur === null) {
            o2[k] = cur;
          } else if (
            cur.constructor !== Object &&
            (handler = constructorHandlers.get(cur.constructor))
          ) {
            o2[k] = handler(cur, clone);
          } else if (ArrayBuffer.isView(cur)) {
            o2[k] = copyBuffer(cur);
          } else {
            const i = refs.indexOf(cur);
            if (i !== -1) {
              o2[k] = refsNew[i];
            } else {
              o2[k] = clone(cur);
            }
          }
        }
        refs.pop();
        refsNew.pop();
        return o2;
      }
      function cloneProto(o) {
        if (typeof o !== 'object' || o === null) return o;
        if (Array.isArray(o)) return cloneArray(o, cloneProto);
        if (o.constructor !== Object && (handler = constructorHandlers.get(o.constructor))) {
          return handler(o, cloneProto);
        }
        const o2 = {};
        refs.push(o);
        refsNew.push(o2);
        for (const k in o) {
          const cur = o[k];
          if (typeof cur !== 'object' || cur === null) {
            o2[k] = cur;
          } else if (
            cur.constructor !== Object &&
            (handler = constructorHandlers.get(cur.constructor))
          ) {
            o2[k] = handler(cur, cloneProto);
          } else if (ArrayBuffer.isView(cur)) {
            o2[k] = copyBuffer(cur);
          } else {
            const i = refs.indexOf(cur);
            if (i !== -1) {
              o2[k] = refsNew[i];
            } else {
              o2[k] = cloneProto(cur);
            }
          }
        }
        refs.pop();
        refsNew.pop();
        return o2;
      }
    }
  },
});
init_esm_shims();
init_esm_shims();
init_esm_shims();
var isBrowser = typeof navigator !== 'undefined';
var target =
  typeof window !== 'undefined'
    ? window
    : typeof globalThis !== 'undefined'
      ? globalThis
      : typeof global !== 'undefined'
        ? global
        : {};
var isInChromePanel = typeof target.chrome !== 'undefined' && !!target.chrome.devtools;
var isInIframe = isBrowser && target.self !== target.top;
var _a;
var isInElectron =
  typeof navigator !== 'undefined' &&
  ((_a = navigator.userAgent) == null ? void 0 : _a.toLowerCase().includes('electron'));
var isNuxtApp = typeof window !== 'undefined' && !!window.__NUXT__;
init_esm_shims();
var import_rfdc = __toESM(require_rfdc(), 1);
var classifyRE = /(?:^|[-_/])(\w)/g;
function toUpper(_, c) {
  return c ? c.toUpperCase() : '';
}
function classify(str) {
  return str && `${str}`.replace(classifyRE, toUpper);
}
function basename(filename, ext) {
  let normalizedFilename = filename.replace(/^[a-z]:/i, '').replace(/\\/g, '/');
  if (normalizedFilename.endsWith(`index${ext}`)) {
    normalizedFilename = normalizedFilename.replace(`/index${ext}`, ext);
  }
  const lastSlashIndex = normalizedFilename.lastIndexOf('/');
  const baseNameWithExt = normalizedFilename.substring(lastSlashIndex + 1);
  if (ext) {
    const extIndex = baseNameWithExt.lastIndexOf(ext);
    return baseNameWithExt.substring(0, extIndex);
  }
  return '';
}
var HTTP_URL_RE = /^https?:\/\//;
function isUrlString(str) {
  return str.startsWith('/') || HTTP_URL_RE.test(str);
}
var deepClone = (0, import_rfdc.default)({ circles: true });

// node_modules/.pnpm/perfect-debounce@1.0.0/node_modules/perfect-debounce/dist/index.mjs
var DEBOUNCE_DEFAULTS = {
  trailing: true,
};
function debounce(fn, wait = 25, options = {}) {
  options = { ...DEBOUNCE_DEFAULTS, ...options };
  if (!Number.isFinite(wait)) {
    throw new TypeError('Expected `wait` to be a finite number');
  }
  let leadingValue;
  let timeout;
  let resolveList = [];
  let currentPromise;
  let trailingArgs;
  const applyFn = (_this, args) => {
    currentPromise = _applyPromised(fn, _this, args);
    currentPromise.finally(() => {
      currentPromise = null;
      if (options.trailing && trailingArgs && !timeout) {
        const promise = applyFn(_this, trailingArgs);
        trailingArgs = null;
        return promise;
      }
    });
    return currentPromise;
  };
  return function (...args) {
    if (currentPromise) {
      if (options.trailing) {
        trailingArgs = args;
      }
      return currentPromise;
    }
    return new Promise((resolve) => {
      const shouldCallNow = !timeout && options.leading;
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        timeout = null;
        const promise = options.leading ? leadingValue : applyFn(this, args);
        for (const _resolve of resolveList) {
          _resolve(promise);
        }
        resolveList = [];
      }, wait);
      if (shouldCallNow) {
        leadingValue = applyFn(this, args);
        resolve(leadingValue);
      } else {
        resolveList.push(resolve);
      }
    });
  };
}
async function _applyPromised(fn, _this, args) {
  return await fn.apply(_this, args);
}

// node_modules/.pnpm/hookable@5.5.3/node_modules/hookable/dist/index.mjs
function flatHooks(configHooks, hooks2 = {}, parentName) {
  for (const key in configHooks) {
    const subHook = configHooks[key];
    const name = parentName ? `${parentName}:${key}` : key;
    if (typeof subHook === 'object' && subHook !== null) {
      flatHooks(subHook, hooks2, name);
    } else if (typeof subHook === 'function') {
      hooks2[name] = subHook;
    }
  }
  return hooks2;
}
var defaultTask = { run: (function_) => function_() };
var _createTask = () => defaultTask;
var createTask = typeof console.createTask !== 'undefined' ? console.createTask : _createTask;
function serialTaskCaller(hooks2, args) {
  const name = args.shift();
  const task = createTask(name);
  return hooks2.reduce(
    (promise, hookFunction) => promise.then(() => task.run(() => hookFunction(...args))),
    Promise.resolve(),
  );
}
function parallelTaskCaller(hooks2, args) {
  const name = args.shift();
  const task = createTask(name);
  return Promise.all(hooks2.map((hook2) => task.run(() => hook2(...args))));
}
function callEachWith(callbacks, arg0) {
  for (const callback of [...callbacks]) {
    callback(arg0);
  }
}
var Hookable = class {
  constructor() {
    this._hooks = {};
    this._before = void 0;
    this._after = void 0;
    this._deprecatedMessages = void 0;
    this._deprecatedHooks = {};
    this.hook = this.hook.bind(this);
    this.callHook = this.callHook.bind(this);
    this.callHookWith = this.callHookWith.bind(this);
  }
  hook(name, function_, options = {}) {
    if (!name || typeof function_ !== 'function') {
      return () => {};
    }
    const originalName = name;
    let dep;
    while (this._deprecatedHooks[name]) {
      dep = this._deprecatedHooks[name];
      name = dep.to;
    }
    if (dep && !options.allowDeprecated) {
      let message = dep.message;
      if (!message) {
        message =
          `${originalName} hook has been deprecated` + (dep.to ? `, please use ${dep.to}` : '');
      }
      if (!this._deprecatedMessages) {
        this._deprecatedMessages = /* @__PURE__ */ new Set();
      }
      if (!this._deprecatedMessages.has(message)) {
        console.warn(message);
        this._deprecatedMessages.add(message);
      }
    }
    if (!function_.name) {
      try {
        Object.defineProperty(function_, 'name', {
          get: () => '_' + name.replace(/\W+/g, '_') + '_hook_cb',
          configurable: true,
        });
      } catch {}
    }
    this._hooks[name] = this._hooks[name] || [];
    this._hooks[name].push(function_);
    return () => {
      if (function_) {
        this.removeHook(name, function_);
        function_ = void 0;
      }
    };
  }
  hookOnce(name, function_) {
    let _unreg;
    let _function = (...arguments_) => {
      if (typeof _unreg === 'function') {
        _unreg();
      }
      _unreg = void 0;
      _function = void 0;
      return function_(...arguments_);
    };
    _unreg = this.hook(name, _function);
    return _unreg;
  }
  removeHook(name, function_) {
    if (this._hooks[name]) {
      const index = this._hooks[name].indexOf(function_);
      if (index !== -1) {
        this._hooks[name].splice(index, 1);
      }
      if (this._hooks[name].length === 0) {
        delete this._hooks[name];
      }
    }
  }
  deprecateHook(name, deprecated) {
    this._deprecatedHooks[name] = typeof deprecated === 'string' ? { to: deprecated } : deprecated;
    const _hooks = this._hooks[name] || [];
    delete this._hooks[name];
    for (const hook2 of _hooks) {
      this.hook(name, hook2);
    }
  }
  deprecateHooks(deprecatedHooks) {
    Object.assign(this._deprecatedHooks, deprecatedHooks);
    for (const name in deprecatedHooks) {
      this.deprecateHook(name, deprecatedHooks[name]);
    }
  }
  addHooks(configHooks) {
    const hooks2 = flatHooks(configHooks);
    const removeFns = Object.keys(hooks2).map((key) => this.hook(key, hooks2[key]));
    return () => {
      for (const unreg of removeFns.splice(0, removeFns.length)) {
        unreg();
      }
    };
  }
  removeHooks(configHooks) {
    const hooks2 = flatHooks(configHooks);
    for (const key in hooks2) {
      this.removeHook(key, hooks2[key]);
    }
  }
  removeAllHooks() {
    for (const key in this._hooks) {
      delete this._hooks[key];
    }
  }
  callHook(name, ...arguments_) {
    arguments_.unshift(name);
    return this.callHookWith(serialTaskCaller, name, ...arguments_);
  }
  callHookParallel(name, ...arguments_) {
    arguments_.unshift(name);
    return this.callHookWith(parallelTaskCaller, name, ...arguments_);
  }
  callHookWith(caller, name, ...arguments_) {
    const event = this._before || this._after ? { name, args: arguments_, context: {} } : void 0;
    if (this._before) {
      callEachWith(this._before, event);
    }
    const result = caller(name in this._hooks ? [...this._hooks[name]] : [], arguments_);
    if (result instanceof Promise) {
      return result.finally(() => {
        if (this._after && event) {
          callEachWith(this._after, event);
        }
      });
    }
    if (this._after && event) {
      callEachWith(this._after, event);
    }
    return result;
  }
  beforeEach(function_) {
    this._before = this._before || [];
    this._before.push(function_);
    return () => {
      if (this._before !== void 0) {
        const index = this._before.indexOf(function_);
        if (index !== -1) {
          this._before.splice(index, 1);
        }
      }
    };
  }
  afterEach(function_) {
    this._after = this._after || [];
    this._after.push(function_);
    return () => {
      if (this._after !== void 0) {
        const index = this._after.indexOf(function_);
        if (index !== -1) {
          this._after.splice(index, 1);
        }
      }
    };
  }
};
function createHooks() {
  return new Hookable();
}

// node_modules/.pnpm/birpc@2.3.0/node_modules/birpc/dist/index.mjs
var { clearTimeout: clearTimeout2, setTimeout: setTimeout2 } = globalThis;
var random = Math.random.bind(Math);

// node_modules/.pnpm/@vue+devtools-kit@7.7.6/node_modules/@vue/devtools-kit/dist/index.js
var __create2 = Object.create;
var __defProp2 = Object.defineProperty;
var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
var __getOwnPropNames2 = Object.getOwnPropertyNames;
var __getProtoOf2 = Object.getPrototypeOf;
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
var __esm2 = (fn, res) =>
  function __init() {
    return (fn && (res = (0, fn[__getOwnPropNames2(fn)[0]])((fn = 0))), res);
  };
var __commonJS2 = (cb, mod) =>
  function __require() {
    return (
      mod || (0, cb[__getOwnPropNames2(cb)[0]])((mod = { exports: {} }).exports, mod),
      mod.exports
    );
  };
var __copyProps2 = (to, from, except, desc) => {
  if ((from && typeof from === 'object') || typeof from === 'function') {
    for (let key of __getOwnPropNames2(from))
      if (!__hasOwnProp2.call(to, key) && key !== except)
        __defProp2(to, key, {
          get: () => from[key],
          enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable,
        });
  }
  return to;
};
var __toESM2 = (mod, isNodeMode, target22) => (
  (target22 = mod != null ? __create2(__getProtoOf2(mod)) : {}),
  __copyProps2(
    // If the importer is in node compatibility mode or this is not an ESM
    // file that has been converted to a CommonJS file using a Babel-
    // compatible transform (i.e. "__esModule" has not been set), then set
    // "default" to the CommonJS "module.exports" for node compatibility.
    isNodeMode || !mod || !mod.__esModule
      ? __defProp2(target22, 'default', { value: mod, enumerable: true })
      : target22,
    mod,
  )
);
var init_esm_shims2 = __esm2({
  '../../node_modules/.pnpm/tsup@8.4.0_@microsoft+api-extractor@7.51.1_@types+node@22.13.14__jiti@2.4.2_postcss@8.5_96eb05a9d65343021e53791dd83f3773/node_modules/tsup/assets/esm_shims.js'() {
    'use strict';
  },
});
var require_speakingurl = __commonJS2({
  '../../node_modules/.pnpm/speakingurl@14.0.1/node_modules/speakingurl/lib/speakingurl.js'(
    exports,
    module,
  ) {
    'use strict';
    init_esm_shims2();
    (function (root) {
      'use strict';
      var charMap = {
        // latin
        À: 'A',
        Á: 'A',
        Â: 'A',
        Ã: 'A',
        Ä: 'Ae',
        Å: 'A',
        Æ: 'AE',
        Ç: 'C',
        È: 'E',
        É: 'E',
        Ê: 'E',
        Ë: 'E',
        Ì: 'I',
        Í: 'I',
        Î: 'I',
        Ï: 'I',
        Ð: 'D',
        Ñ: 'N',
        Ò: 'O',
        Ó: 'O',
        Ô: 'O',
        Õ: 'O',
        Ö: 'Oe',
        Ő: 'O',
        Ø: 'O',
        Ù: 'U',
        Ú: 'U',
        Û: 'U',
        Ü: 'Ue',
        Ű: 'U',
        Ý: 'Y',
        Þ: 'TH',
        ß: 'ss',
        à: 'a',
        á: 'a',
        â: 'a',
        ã: 'a',
        ä: 'ae',
        å: 'a',
        æ: 'ae',
        ç: 'c',
        è: 'e',
        é: 'e',
        ê: 'e',
        ë: 'e',
        ì: 'i',
        í: 'i',
        î: 'i',
        ï: 'i',
        ð: 'd',
        ñ: 'n',
        ò: 'o',
        ó: 'o',
        ô: 'o',
        õ: 'o',
        ö: 'oe',
        ő: 'o',
        ø: 'o',
        ù: 'u',
        ú: 'u',
        û: 'u',
        ü: 'ue',
        ű: 'u',
        ý: 'y',
        þ: 'th',
        ÿ: 'y',
        ẞ: 'SS',
        // language specific
        // Arabic
        ا: 'a',
        أ: 'a',
        إ: 'i',
        آ: 'aa',
        ؤ: 'u',
        ئ: 'e',
        ء: 'a',
        ب: 'b',
        ت: 't',
        ث: 'th',
        ج: 'j',
        ح: 'h',
        خ: 'kh',
        د: 'd',
        ذ: 'th',
        ر: 'r',
        ز: 'z',
        س: 's',
        ش: 'sh',
        ص: 's',
        ض: 'dh',
        ط: 't',
        ظ: 'z',
        ع: 'a',
        غ: 'gh',
        ف: 'f',
        ق: 'q',
        ك: 'k',
        ل: 'l',
        م: 'm',
        ن: 'n',
        ه: 'h',
        و: 'w',
        ي: 'y',
        ى: 'a',
        ة: 'h',
        ﻻ: 'la',
        ﻷ: 'laa',
        ﻹ: 'lai',
        ﻵ: 'laa',
        // Persian additional characters than Arabic
        گ: 'g',
        چ: 'ch',
        پ: 'p',
        ژ: 'zh',
        ک: 'k',
        ی: 'y',
        // Arabic diactrics
        'َ': 'a',
        'ً': 'an',
        'ِ': 'e',
        'ٍ': 'en',
        'ُ': 'u',
        'ٌ': 'on',
        'ْ': '',
        // Arabic numbers
        '٠': '0',
        '١': '1',
        '٢': '2',
        '٣': '3',
        '٤': '4',
        '٥': '5',
        '٦': '6',
        '٧': '7',
        '٨': '8',
        '٩': '9',
        // Persian numbers
        '۰': '0',
        '۱': '1',
        '۲': '2',
        '۳': '3',
        '۴': '4',
        '۵': '5',
        '۶': '6',
        '۷': '7',
        '۸': '8',
        '۹': '9',
        // Burmese consonants
        က: 'k',
        ခ: 'kh',
        ဂ: 'g',
        ဃ: 'ga',
        င: 'ng',
        စ: 's',
        ဆ: 'sa',
        ဇ: 'z',
        စျ: 'za',
        ည: 'ny',
        ဋ: 't',
        ဌ: 'ta',
        ဍ: 'd',
        ဎ: 'da',
        ဏ: 'na',
        တ: 't',
        ထ: 'ta',
        ဒ: 'd',
        ဓ: 'da',
        န: 'n',
        ပ: 'p',
        ဖ: 'pa',
        ဗ: 'b',
        ဘ: 'ba',
        မ: 'm',
        ယ: 'y',
        ရ: 'ya',
        လ: 'l',
        ဝ: 'w',
        သ: 'th',
        ဟ: 'h',
        ဠ: 'la',
        အ: 'a',
        // consonant character combos
        'ြ': 'y',
        'ျ': 'ya',
        'ွ': 'w',
        'ြွ': 'yw',
        'ျွ': 'ywa',
        'ှ': 'h',
        // independent vowels
        ဧ: 'e',
        '၏': '-e',
        ဣ: 'i',
        ဤ: '-i',
        ဉ: 'u',
        ဦ: '-u',
        ဩ: 'aw',
        သြော: 'aw',
        ဪ: 'aw',
        // numbers
        '၀': '0',
        '၁': '1',
        '၂': '2',
        '၃': '3',
        '၄': '4',
        '၅': '5',
        '၆': '6',
        '၇': '7',
        '၈': '8',
        '၉': '9',
        // virama and tone marks which are silent in transliteration
        '္': '',
        '့': '',
        'း': '',
        // Czech
        č: 'c',
        ď: 'd',
        ě: 'e',
        ň: 'n',
        ř: 'r',
        š: 's',
        ť: 't',
        ů: 'u',
        ž: 'z',
        Č: 'C',
        Ď: 'D',
        Ě: 'E',
        Ň: 'N',
        Ř: 'R',
        Š: 'S',
        Ť: 'T',
        Ů: 'U',
        Ž: 'Z',
        // Dhivehi
        ހ: 'h',
        ށ: 'sh',
        ނ: 'n',
        ރ: 'r',
        ބ: 'b',
        ޅ: 'lh',
        ކ: 'k',
        އ: 'a',
        ވ: 'v',
        މ: 'm',
        ފ: 'f',
        ދ: 'dh',
        ތ: 'th',
        ލ: 'l',
        ގ: 'g',
        ޏ: 'gn',
        ސ: 's',
        ޑ: 'd',
        ޒ: 'z',
        ޓ: 't',
        ޔ: 'y',
        ޕ: 'p',
        ޖ: 'j',
        ޗ: 'ch',
        ޘ: 'tt',
        ޙ: 'hh',
        ޚ: 'kh',
        ޛ: 'th',
        ޜ: 'z',
        ޝ: 'sh',
        ޞ: 's',
        ޟ: 'd',
        ޠ: 't',
        ޡ: 'z',
        ޢ: 'a',
        ޣ: 'gh',
        ޤ: 'q',
        ޥ: 'w',
        'ަ': 'a',
        'ާ': 'aa',
        'ި': 'i',
        'ީ': 'ee',
        'ު': 'u',
        'ޫ': 'oo',
        'ެ': 'e',
        'ޭ': 'ey',
        'ޮ': 'o',
        'ޯ': 'oa',
        'ް': '',
        // Georgian https://en.wikipedia.org/wiki/Romanization_of_Georgian
        // National system (2002)
        ა: 'a',
        ბ: 'b',
        გ: 'g',
        დ: 'd',
        ე: 'e',
        ვ: 'v',
        ზ: 'z',
        თ: 't',
        ი: 'i',
        კ: 'k',
        ლ: 'l',
        მ: 'm',
        ნ: 'n',
        ო: 'o',
        პ: 'p',
        ჟ: 'zh',
        რ: 'r',
        ს: 's',
        ტ: 't',
        უ: 'u',
        ფ: 'p',
        ქ: 'k',
        ღ: 'gh',
        ყ: 'q',
        შ: 'sh',
        ჩ: 'ch',
        ც: 'ts',
        ძ: 'dz',
        წ: 'ts',
        ჭ: 'ch',
        ხ: 'kh',
        ჯ: 'j',
        ჰ: 'h',
        // Greek
        α: 'a',
        β: 'v',
        γ: 'g',
        δ: 'd',
        ε: 'e',
        ζ: 'z',
        η: 'i',
        θ: 'th',
        ι: 'i',
        κ: 'k',
        λ: 'l',
        μ: 'm',
        ν: 'n',
        ξ: 'ks',
        ο: 'o',
        π: 'p',
        ρ: 'r',
        σ: 's',
        τ: 't',
        υ: 'y',
        φ: 'f',
        χ: 'x',
        ψ: 'ps',
        ω: 'o',
        ά: 'a',
        έ: 'e',
        ί: 'i',
        ό: 'o',
        ύ: 'y',
        ή: 'i',
        ώ: 'o',
        ς: 's',
        ϊ: 'i',
        ΰ: 'y',
        ϋ: 'y',
        ΐ: 'i',
        Α: 'A',
        Β: 'B',
        Γ: 'G',
        Δ: 'D',
        Ε: 'E',
        Ζ: 'Z',
        Η: 'I',
        Θ: 'TH',
        Ι: 'I',
        Κ: 'K',
        Λ: 'L',
        Μ: 'M',
        Ν: 'N',
        Ξ: 'KS',
        Ο: 'O',
        Π: 'P',
        Ρ: 'R',
        Σ: 'S',
        Τ: 'T',
        Υ: 'Y',
        Φ: 'F',
        Χ: 'X',
        Ψ: 'PS',
        Ω: 'O',
        Ά: 'A',
        Έ: 'E',
        Ί: 'I',
        Ό: 'O',
        Ύ: 'Y',
        Ή: 'I',
        Ώ: 'O',
        Ϊ: 'I',
        Ϋ: 'Y',
        // Latvian
        ā: 'a',
        // 'č': 'c', // duplicate
        ē: 'e',
        ģ: 'g',
        ī: 'i',
        ķ: 'k',
        ļ: 'l',
        ņ: 'n',
        // 'š': 's', // duplicate
        ū: 'u',
        // 'ž': 'z', // duplicate
        Ā: 'A',
        // 'Č': 'C', // duplicate
        Ē: 'E',
        Ģ: 'G',
        Ī: 'I',
        Ķ: 'k',
        Ļ: 'L',
        Ņ: 'N',
        // 'Š': 'S', // duplicate
        Ū: 'U',
        // 'Ž': 'Z', // duplicate
        // Macedonian
        Ќ: 'Kj',
        ќ: 'kj',
        Љ: 'Lj',
        љ: 'lj',
        Њ: 'Nj',
        њ: 'nj',
        Тс: 'Ts',
        тс: 'ts',
        // Polish
        ą: 'a',
        ć: 'c',
        ę: 'e',
        ł: 'l',
        ń: 'n',
        // 'ó': 'o', // duplicate
        ś: 's',
        ź: 'z',
        ż: 'z',
        Ą: 'A',
        Ć: 'C',
        Ę: 'E',
        Ł: 'L',
        Ń: 'N',
        Ś: 'S',
        Ź: 'Z',
        Ż: 'Z',
        // Ukranian
        Є: 'Ye',
        І: 'I',
        Ї: 'Yi',
        Ґ: 'G',
        є: 'ye',
        і: 'i',
        ї: 'yi',
        ґ: 'g',
        // Romanian
        ă: 'a',
        Ă: 'A',
        ș: 's',
        Ș: 'S',
        // 'ş': 's', // duplicate
        // 'Ş': 'S', // duplicate
        ț: 't',
        Ț: 'T',
        ţ: 't',
        Ţ: 'T',
        // Russian https://en.wikipedia.org/wiki/Romanization_of_Russian
        // ICAO
        а: 'a',
        б: 'b',
        в: 'v',
        г: 'g',
        д: 'd',
        е: 'e',
        ё: 'yo',
        ж: 'zh',
        з: 'z',
        и: 'i',
        й: 'i',
        к: 'k',
        л: 'l',
        м: 'm',
        н: 'n',
        о: 'o',
        п: 'p',
        р: 'r',
        с: 's',
        т: 't',
        у: 'u',
        ф: 'f',
        х: 'kh',
        ц: 'c',
        ч: 'ch',
        ш: 'sh',
        щ: 'sh',
        ъ: '',
        ы: 'y',
        ь: '',
        э: 'e',
        ю: 'yu',
        я: 'ya',
        А: 'A',
        Б: 'B',
        В: 'V',
        Г: 'G',
        Д: 'D',
        Е: 'E',
        Ё: 'Yo',
        Ж: 'Zh',
        З: 'Z',
        И: 'I',
        Й: 'I',
        К: 'K',
        Л: 'L',
        М: 'M',
        Н: 'N',
        О: 'O',
        П: 'P',
        Р: 'R',
        С: 'S',
        Т: 'T',
        У: 'U',
        Ф: 'F',
        Х: 'Kh',
        Ц: 'C',
        Ч: 'Ch',
        Ш: 'Sh',
        Щ: 'Sh',
        Ъ: '',
        Ы: 'Y',
        Ь: '',
        Э: 'E',
        Ю: 'Yu',
        Я: 'Ya',
        // Serbian
        ђ: 'dj',
        ј: 'j',
        // 'љ': 'lj',  // duplicate
        // 'њ': 'nj', // duplicate
        ћ: 'c',
        џ: 'dz',
        Ђ: 'Dj',
        Ј: 'j',
        // 'Љ': 'Lj', // duplicate
        // 'Њ': 'Nj', // duplicate
        Ћ: 'C',
        Џ: 'Dz',
        // Slovak
        ľ: 'l',
        ĺ: 'l',
        ŕ: 'r',
        Ľ: 'L',
        Ĺ: 'L',
        Ŕ: 'R',
        // Turkish
        ş: 's',
        Ş: 'S',
        ı: 'i',
        İ: 'I',
        // 'ç': 'c', // duplicate
        // 'Ç': 'C', // duplicate
        // 'ü': 'u', // duplicate, see langCharMap
        // 'Ü': 'U', // duplicate, see langCharMap
        // 'ö': 'o', // duplicate, see langCharMap
        // 'Ö': 'O', // duplicate, see langCharMap
        ğ: 'g',
        Ğ: 'G',
        // Vietnamese
        ả: 'a',
        Ả: 'A',
        ẳ: 'a',
        Ẳ: 'A',
        ẩ: 'a',
        Ẩ: 'A',
        đ: 'd',
        Đ: 'D',
        ẹ: 'e',
        Ẹ: 'E',
        ẽ: 'e',
        Ẽ: 'E',
        ẻ: 'e',
        Ẻ: 'E',
        ế: 'e',
        Ế: 'E',
        ề: 'e',
        Ề: 'E',
        ệ: 'e',
        Ệ: 'E',
        ễ: 'e',
        Ễ: 'E',
        ể: 'e',
        Ể: 'E',
        ỏ: 'o',
        ọ: 'o',
        Ọ: 'o',
        ố: 'o',
        Ố: 'O',
        ồ: 'o',
        Ồ: 'O',
        ổ: 'o',
        Ổ: 'O',
        ộ: 'o',
        Ộ: 'O',
        ỗ: 'o',
        Ỗ: 'O',
        ơ: 'o',
        Ơ: 'O',
        ớ: 'o',
        Ớ: 'O',
        ờ: 'o',
        Ờ: 'O',
        ợ: 'o',
        Ợ: 'O',
        ỡ: 'o',
        Ỡ: 'O',
        Ở: 'o',
        ở: 'o',
        ị: 'i',
        Ị: 'I',
        ĩ: 'i',
        Ĩ: 'I',
        ỉ: 'i',
        Ỉ: 'i',
        ủ: 'u',
        Ủ: 'U',
        ụ: 'u',
        Ụ: 'U',
        ũ: 'u',
        Ũ: 'U',
        ư: 'u',
        Ư: 'U',
        ứ: 'u',
        Ứ: 'U',
        ừ: 'u',
        Ừ: 'U',
        ự: 'u',
        Ự: 'U',
        ữ: 'u',
        Ữ: 'U',
        ử: 'u',
        Ử: 'ư',
        ỷ: 'y',
        Ỷ: 'y',
        ỳ: 'y',
        Ỳ: 'Y',
        ỵ: 'y',
        Ỵ: 'Y',
        ỹ: 'y',
        Ỹ: 'Y',
        ạ: 'a',
        Ạ: 'A',
        ấ: 'a',
        Ấ: 'A',
        ầ: 'a',
        Ầ: 'A',
        ậ: 'a',
        Ậ: 'A',
        ẫ: 'a',
        Ẫ: 'A',
        // 'ă': 'a', // duplicate
        // 'Ă': 'A', // duplicate
        ắ: 'a',
        Ắ: 'A',
        ằ: 'a',
        Ằ: 'A',
        ặ: 'a',
        Ặ: 'A',
        ẵ: 'a',
        Ẵ: 'A',
        '⓪': '0',
        '①': '1',
        '②': '2',
        '③': '3',
        '④': '4',
        '⑤': '5',
        '⑥': '6',
        '⑦': '7',
        '⑧': '8',
        '⑨': '9',
        '⑩': '10',
        '⑪': '11',
        '⑫': '12',
        '⑬': '13',
        '⑭': '14',
        '⑮': '15',
        '⑯': '16',
        '⑰': '17',
        '⑱': '18',
        '⑲': '18',
        '⑳': '18',
        '⓵': '1',
        '⓶': '2',
        '⓷': '3',
        '⓸': '4',
        '⓹': '5',
        '⓺': '6',
        '⓻': '7',
        '⓼': '8',
        '⓽': '9',
        '⓾': '10',
        '⓿': '0',
        '⓫': '11',
        '⓬': '12',
        '⓭': '13',
        '⓮': '14',
        '⓯': '15',
        '⓰': '16',
        '⓱': '17',
        '⓲': '18',
        '⓳': '19',
        '⓴': '20',
        'Ⓐ': 'A',
        'Ⓑ': 'B',
        'Ⓒ': 'C',
        'Ⓓ': 'D',
        'Ⓔ': 'E',
        'Ⓕ': 'F',
        'Ⓖ': 'G',
        'Ⓗ': 'H',
        'Ⓘ': 'I',
        'Ⓙ': 'J',
        'Ⓚ': 'K',
        'Ⓛ': 'L',
        'Ⓜ': 'M',
        'Ⓝ': 'N',
        'Ⓞ': 'O',
        'Ⓟ': 'P',
        'Ⓠ': 'Q',
        'Ⓡ': 'R',
        'Ⓢ': 'S',
        'Ⓣ': 'T',
        'Ⓤ': 'U',
        'Ⓥ': 'V',
        'Ⓦ': 'W',
        'Ⓧ': 'X',
        'Ⓨ': 'Y',
        'Ⓩ': 'Z',
        'ⓐ': 'a',
        'ⓑ': 'b',
        'ⓒ': 'c',
        'ⓓ': 'd',
        'ⓔ': 'e',
        'ⓕ': 'f',
        'ⓖ': 'g',
        'ⓗ': 'h',
        'ⓘ': 'i',
        'ⓙ': 'j',
        'ⓚ': 'k',
        'ⓛ': 'l',
        'ⓜ': 'm',
        'ⓝ': 'n',
        'ⓞ': 'o',
        'ⓟ': 'p',
        'ⓠ': 'q',
        'ⓡ': 'r',
        'ⓢ': 's',
        'ⓣ': 't',
        'ⓤ': 'u',
        'ⓦ': 'v',
        'ⓥ': 'w',
        'ⓧ': 'x',
        'ⓨ': 'y',
        'ⓩ': 'z',
        // symbols
        '“': '"',
        '”': '"',
        '‘': "'",
        '’': "'",
        '∂': 'd',
        ƒ: 'f',
        '™': '(TM)',
        '©': '(C)',
        œ: 'oe',
        Œ: 'OE',
        '®': '(R)',
        '†': '+',
        '℠': '(SM)',
        '…': '...',
        '˚': 'o',
        º: 'o',
        ª: 'a',
        '•': '*',
        '၊': ',',
        '။': '.',
        // currency
        $: 'USD',
        '€': 'EUR',
        '₢': 'BRN',
        '₣': 'FRF',
        '£': 'GBP',
        '₤': 'ITL',
        '₦': 'NGN',
        '₧': 'ESP',
        '₩': 'KRW',
        '₪': 'ILS',
        '₫': 'VND',
        '₭': 'LAK',
        '₮': 'MNT',
        '₯': 'GRD',
        '₱': 'ARS',
        '₲': 'PYG',
        '₳': 'ARA',
        '₴': 'UAH',
        '₵': 'GHS',
        '¢': 'cent',
        '¥': 'CNY',
        元: 'CNY',
        円: 'YEN',
        '﷼': 'IRR',
        '₠': 'EWE',
        '฿': 'THB',
        '₨': 'INR',
        '₹': 'INR',
        '₰': 'PF',
        '₺': 'TRY',
        '؋': 'AFN',
        '₼': 'AZN',
        лв: 'BGN',
        '៛': 'KHR',
        '₡': 'CRC',
        '₸': 'KZT',
        ден: 'MKD',
        zł: 'PLN',
        '₽': 'RUB',
        '₾': 'GEL',
      };
      var lookAheadCharArray = [
        // burmese
        '်',
        // Dhivehi
        'ް',
      ];
      var diatricMap = {
        // Burmese
        // dependent vowels
        'ာ': 'a',
        'ါ': 'a',
        'ေ': 'e',
        'ဲ': 'e',
        'ိ': 'i',
        'ီ': 'i',
        'ို': 'o',
        'ု': 'u',
        'ူ': 'u',
        'ေါင်': 'aung',
        'ော': 'aw',
        'ော်': 'aw',
        'ေါ': 'aw',
        'ေါ်': 'aw',
        '်': '်',
        // this is special case but the character will be converted to latin in the code
        က်: 'et',
        'ိုက်': 'aik',
        'ောက်': 'auk',
        င်: 'in',
        'ိုင်': 'aing',
        'ောင်': 'aung',
        စ်: 'it',
        ည်: 'i',
        တ်: 'at',
        'ိတ်': 'eik',
        'ုတ်': 'ok',
        'ွတ်': 'ut',
        'ေတ်': 'it',
        ဒ်: 'd',
        'ိုဒ်': 'ok',
        'ုဒ်': 'ait',
        န်: 'an',
        'ာန်': 'an',
        'ိန်': 'ein',
        'ုန်': 'on',
        'ွန်': 'un',
        ပ်: 'at',
        'ိပ်': 'eik',
        'ုပ်': 'ok',
        'ွပ်': 'ut',
        န်ုပ်: 'nub',
        မ်: 'an',
        'ိမ်': 'ein',
        'ုမ်': 'on',
        'ွမ်': 'un',
        ယ်: 'e',
        'ိုလ်': 'ol',
        ဉ်: 'in',
        'ံ': 'an',
        'ိံ': 'ein',
        'ုံ': 'on',
        // Dhivehi
        'ައް': 'ah',
        'ަށް': 'ah',
      };
      var langCharMap = {
        en: {},
        // default language
        az: {
          // Azerbaijani
          ç: 'c',
          ə: 'e',
          ğ: 'g',
          ı: 'i',
          ö: 'o',
          ş: 's',
          ü: 'u',
          Ç: 'C',
          Ə: 'E',
          Ğ: 'G',
          İ: 'I',
          Ö: 'O',
          Ş: 'S',
          Ü: 'U',
        },
        cs: {
          // Czech
          č: 'c',
          ď: 'd',
          ě: 'e',
          ň: 'n',
          ř: 'r',
          š: 's',
          ť: 't',
          ů: 'u',
          ž: 'z',
          Č: 'C',
          Ď: 'D',
          Ě: 'E',
          Ň: 'N',
          Ř: 'R',
          Š: 'S',
          Ť: 'T',
          Ů: 'U',
          Ž: 'Z',
        },
        fi: {
          // Finnish
          // 'å': 'a', duplicate see charMap/latin
          // 'Å': 'A', duplicate see charMap/latin
          ä: 'a',
          // ok
          Ä: 'A',
          // ok
          ö: 'o',
          // ok
          Ö: 'O',
          // ok
        },
        hu: {
          // Hungarian
          ä: 'a',
          // ok
          Ä: 'A',
          // ok
          // 'á': 'a', duplicate see charMap/latin
          // 'Á': 'A', duplicate see charMap/latin
          ö: 'o',
          // ok
          Ö: 'O',
          // ok
          // 'ő': 'o', duplicate see charMap/latin
          // 'Ő': 'O', duplicate see charMap/latin
          ü: 'u',
          Ü: 'U',
          ű: 'u',
          Ű: 'U',
        },
        lt: {
          // Lithuanian
          ą: 'a',
          č: 'c',
          ę: 'e',
          ė: 'e',
          į: 'i',
          š: 's',
          ų: 'u',
          ū: 'u',
          ž: 'z',
          Ą: 'A',
          Č: 'C',
          Ę: 'E',
          Ė: 'E',
          Į: 'I',
          Š: 'S',
          Ų: 'U',
          Ū: 'U',
        },
        lv: {
          // Latvian
          ā: 'a',
          č: 'c',
          ē: 'e',
          ģ: 'g',
          ī: 'i',
          ķ: 'k',
          ļ: 'l',
          ņ: 'n',
          š: 's',
          ū: 'u',
          ž: 'z',
          Ā: 'A',
          Č: 'C',
          Ē: 'E',
          Ģ: 'G',
          Ī: 'i',
          Ķ: 'k',
          Ļ: 'L',
          Ņ: 'N',
          Š: 'S',
          Ū: 'u',
          Ž: 'Z',
        },
        pl: {
          // Polish
          ą: 'a',
          ć: 'c',
          ę: 'e',
          ł: 'l',
          ń: 'n',
          ó: 'o',
          ś: 's',
          ź: 'z',
          ż: 'z',
          Ą: 'A',
          Ć: 'C',
          Ę: 'e',
          Ł: 'L',
          Ń: 'N',
          Ó: 'O',
          Ś: 'S',
          Ź: 'Z',
          Ż: 'Z',
        },
        sv: {
          // Swedish
          // 'å': 'a', duplicate see charMap/latin
          // 'Å': 'A', duplicate see charMap/latin
          ä: 'a',
          // ok
          Ä: 'A',
          // ok
          ö: 'o',
          // ok
          Ö: 'O',
          // ok
        },
        sk: {
          // Slovak
          ä: 'a',
          Ä: 'A',
        },
        sr: {
          // Serbian
          љ: 'lj',
          њ: 'nj',
          Љ: 'Lj',
          Њ: 'Nj',
          đ: 'dj',
          Đ: 'Dj',
        },
        tr: {
          // Turkish
          Ü: 'U',
          Ö: 'O',
          ü: 'u',
          ö: 'o',
        },
      };
      var symbolMap = {
        ar: {
          '∆': 'delta',
          '∞': 'la-nihaya',
          '♥': 'hob',
          '&': 'wa',
          '|': 'aw',
          '<': 'aqal-men',
          '>': 'akbar-men',
          '∑': 'majmou',
          '¤': 'omla',
        },
        az: {},
        ca: {
          '∆': 'delta',
          '∞': 'infinit',
          '♥': 'amor',
          '&': 'i',
          '|': 'o',
          '<': 'menys que',
          '>': 'mes que',
          '∑': 'suma dels',
          '¤': 'moneda',
        },
        cs: {
          '∆': 'delta',
          '∞': 'nekonecno',
          '♥': 'laska',
          '&': 'a',
          '|': 'nebo',
          '<': 'mensi nez',
          '>': 'vetsi nez',
          '∑': 'soucet',
          '¤': 'mena',
        },
        de: {
          '∆': 'delta',
          '∞': 'unendlich',
          '♥': 'Liebe',
          '&': 'und',
          '|': 'oder',
          '<': 'kleiner als',
          '>': 'groesser als',
          '∑': 'Summe von',
          '¤': 'Waehrung',
        },
        dv: {
          '∆': 'delta',
          '∞': 'kolunulaa',
          '♥': 'loabi',
          '&': 'aai',
          '|': 'noonee',
          '<': 'ah vure kuda',
          '>': 'ah vure bodu',
          '∑': 'jumula',
          '¤': 'faisaa',
        },
        en: {
          '∆': 'delta',
          '∞': 'infinity',
          '♥': 'love',
          '&': 'and',
          '|': 'or',
          '<': 'less than',
          '>': 'greater than',
          '∑': 'sum',
          '¤': 'currency',
        },
        es: {
          '∆': 'delta',
          '∞': 'infinito',
          '♥': 'amor',
          '&': 'y',
          '|': 'u',
          '<': 'menos que',
          '>': 'mas que',
          '∑': 'suma de los',
          '¤': 'moneda',
        },
        fa: {
          '∆': 'delta',
          '∞': 'bi-nahayat',
          '♥': 'eshgh',
          '&': 'va',
          '|': 'ya',
          '<': 'kamtar-az',
          '>': 'bishtar-az',
          '∑': 'majmooe',
          '¤': 'vahed',
        },
        fi: {
          '∆': 'delta',
          '∞': 'aarettomyys',
          '♥': 'rakkaus',
          '&': 'ja',
          '|': 'tai',
          '<': 'pienempi kuin',
          '>': 'suurempi kuin',
          '∑': 'summa',
          '¤': 'valuutta',
        },
        fr: {
          '∆': 'delta',
          '∞': 'infiniment',
          '♥': 'Amour',
          '&': 'et',
          '|': 'ou',
          '<': 'moins que',
          '>': 'superieure a',
          '∑': 'somme des',
          '¤': 'monnaie',
        },
        ge: {
          '∆': 'delta',
          '∞': 'usasruloba',
          '♥': 'siqvaruli',
          '&': 'da',
          '|': 'an',
          '<': 'naklebi',
          '>': 'meti',
          '∑': 'jami',
          '¤': 'valuta',
        },
        gr: {},
        hu: {
          '∆': 'delta',
          '∞': 'vegtelen',
          '♥': 'szerelem',
          '&': 'es',
          '|': 'vagy',
          '<': 'kisebb mint',
          '>': 'nagyobb mint',
          '∑': 'szumma',
          '¤': 'penznem',
        },
        it: {
          '∆': 'delta',
          '∞': 'infinito',
          '♥': 'amore',
          '&': 'e',
          '|': 'o',
          '<': 'minore di',
          '>': 'maggiore di',
          '∑': 'somma',
          '¤': 'moneta',
        },
        lt: {
          '∆': 'delta',
          '∞': 'begalybe',
          '♥': 'meile',
          '&': 'ir',
          '|': 'ar',
          '<': 'maziau nei',
          '>': 'daugiau nei',
          '∑': 'suma',
          '¤': 'valiuta',
        },
        lv: {
          '∆': 'delta',
          '∞': 'bezgaliba',
          '♥': 'milestiba',
          '&': 'un',
          '|': 'vai',
          '<': 'mazak neka',
          '>': 'lielaks neka',
          '∑': 'summa',
          '¤': 'valuta',
        },
        my: {
          '∆': 'kwahkhyaet',
          '∞': 'asaonasme',
          '♥': 'akhyait',
          '&': 'nhin',
          '|': 'tho',
          '<': 'ngethaw',
          '>': 'kyithaw',
          '∑': 'paungld',
          '¤': 'ngwekye',
        },
        mk: {},
        nl: {
          '∆': 'delta',
          '∞': 'oneindig',
          '♥': 'liefde',
          '&': 'en',
          '|': 'of',
          '<': 'kleiner dan',
          '>': 'groter dan',
          '∑': 'som',
          '¤': 'valuta',
        },
        pl: {
          '∆': 'delta',
          '∞': 'nieskonczonosc',
          '♥': 'milosc',
          '&': 'i',
          '|': 'lub',
          '<': 'mniejsze niz',
          '>': 'wieksze niz',
          '∑': 'suma',
          '¤': 'waluta',
        },
        pt: {
          '∆': 'delta',
          '∞': 'infinito',
          '♥': 'amor',
          '&': 'e',
          '|': 'ou',
          '<': 'menor que',
          '>': 'maior que',
          '∑': 'soma',
          '¤': 'moeda',
        },
        ro: {
          '∆': 'delta',
          '∞': 'infinit',
          '♥': 'dragoste',
          '&': 'si',
          '|': 'sau',
          '<': 'mai mic ca',
          '>': 'mai mare ca',
          '∑': 'suma',
          '¤': 'valuta',
        },
        ru: {
          '∆': 'delta',
          '∞': 'beskonechno',
          '♥': 'lubov',
          '&': 'i',
          '|': 'ili',
          '<': 'menshe',
          '>': 'bolshe',
          '∑': 'summa',
          '¤': 'valjuta',
        },
        sk: {
          '∆': 'delta',
          '∞': 'nekonecno',
          '♥': 'laska',
          '&': 'a',
          '|': 'alebo',
          '<': 'menej ako',
          '>': 'viac ako',
          '∑': 'sucet',
          '¤': 'mena',
        },
        sr: {},
        tr: {
          '∆': 'delta',
          '∞': 'sonsuzluk',
          '♥': 'ask',
          '&': 've',
          '|': 'veya',
          '<': 'kucuktur',
          '>': 'buyuktur',
          '∑': 'toplam',
          '¤': 'para birimi',
        },
        uk: {
          '∆': 'delta',
          '∞': 'bezkinechnist',
          '♥': 'lubov',
          '&': 'i',
          '|': 'abo',
          '<': 'menshe',
          '>': 'bilshe',
          '∑': 'suma',
          '¤': 'valjuta',
        },
        vn: {
          '∆': 'delta',
          '∞': 'vo cuc',
          '♥': 'yeu',
          '&': 'va',
          '|': 'hoac',
          '<': 'nho hon',
          '>': 'lon hon',
          '∑': 'tong',
          '¤': 'tien te',
        },
      };
      var uricChars = [';', '?', ':', '@', '&', '=', '+', '{{contextString}}#39;, ',', '/'].join('');
      var uricNoSlashChars = [';', '?', ':', '@', '&', '=', '+', '{{contextString}}#39;, ','].join('');
      var markChars = ['.', '!', '~', '*', "'", '(', ')'].join('');
      var getSlug = function getSlug2(input, opts) {
        var separator = '-';
        var result = '';
        var diatricString = '';
        var convertSymbols = true;
        var customReplacements = {};
        var maintainCase;
        var titleCase;
        var truncate;
        var uricFlag;
        var uricNoSlashFlag;
        var markFlag;
        var symbol;
        var langChar;
        var lucky;
        var i;
        var ch;
        var l;
        var lastCharWasSymbol;
        var lastCharWasDiatric;
        var allowedChars = '';
        if (typeof input !== 'string') {
          return '';
        }
        if (typeof opts === 'string') {
          separator = opts;
        }
        symbol = symbolMap.en;
        langChar = langCharMap.en;
        if (typeof opts === 'object') {
          maintainCase = opts.maintainCase || false;
          customReplacements =
            opts.custom && typeof opts.custom === 'object' ? opts.custom : customReplacements;
          truncate = (+opts.truncate > 1 && opts.truncate) || false;
          uricFlag = opts.uric || false;
          uricNoSlashFlag = opts.uricNoSlash || false;
          markFlag = opts.mark || false;
          convertSymbols = opts.symbols === false || opts.lang === false ? false : true;
          separator = opts.separator || separator;
          if (uricFlag) {
            allowedChars += uricChars;
          }
          if (uricNoSlashFlag) {
            allowedChars += uricNoSlashChars;
          }
          if (markFlag) {
            allowedChars += markChars;
          }
          symbol =
            opts.lang && symbolMap[opts.lang] && convertSymbols
              ? symbolMap[opts.lang]
              : convertSymbols
                ? symbolMap.en
                : {};
          langChar =
            opts.lang && langCharMap[opts.lang]
              ? langCharMap[opts.lang]
              : opts.lang === false || opts.lang === true
                ? {}
                : langCharMap.en;
          if (
            opts.titleCase &&
            typeof opts.titleCase.length === 'number' &&
            Array.prototype.toString.call(opts.titleCase)
          ) {
            opts.titleCase.forEach(function (v) {
              customReplacements[v + ''] = v + '';
            });
            titleCase = true;
          } else {
            titleCase = !!opts.titleCase;
          }
          if (
            opts.custom &&
            typeof opts.custom.length === 'number' &&
            Array.prototype.toString.call(opts.custom)
          ) {
            opts.custom.forEach(function (v) {
              customReplacements[v + ''] = v + '';
            });
          }
          Object.keys(customReplacements).forEach(function (v) {
            var r;
            if (v.length > 1) {
              r = new RegExp('\\b' + escapeChars(v) + '\\b', 'gi');
            } else {
              r = new RegExp(escapeChars(v), 'gi');
            }
            input = input.replace(r, customReplacements[v]);
          });
          for (ch in customReplacements) {
            allowedChars += ch;
          }
        }
        allowedChars += separator;
        allowedChars = escapeChars(allowedChars);
        input = input.replace(/(^\s+|\s+$)/g, '');
        lastCharWasSymbol = false;
        lastCharWasDiatric = false;
        for (i = 0, l = input.length; i < l; i++) {
          ch = input[i];
          if (isReplacedCustomChar(ch, customReplacements)) {
            lastCharWasSymbol = false;
          } else if (langChar[ch]) {
            ch =
              lastCharWasSymbol && langChar[ch].match(/[A-Za-z0-9]/)
                ? ' ' + langChar[ch]
                : langChar[ch];
            lastCharWasSymbol = false;
          } else if (ch in charMap) {
            if (i + 1 < l && lookAheadCharArray.indexOf(input[i + 1]) >= 0) {
              diatricString += ch;
              ch = '';
            } else if (lastCharWasDiatric === true) {
              ch = diatricMap[diatricString] + charMap[ch];
              diatricString = '';
            } else {
              ch =
                lastCharWasSymbol && charMap[ch].match(/[A-Za-z0-9]/)
                  ? ' ' + charMap[ch]
                  : charMap[ch];
            }
            lastCharWasSymbol = false;
            lastCharWasDiatric = false;
          } else if (ch in diatricMap) {
            diatricString += ch;
            ch = '';
            if (i === l - 1) {
              ch = diatricMap[diatricString];
            }
            lastCharWasDiatric = true;
          } else if (
            // process symbol chars
            symbol[ch] &&
            !(uricFlag && uricChars.indexOf(ch) !== -1) &&
            !(uricNoSlashFlag && uricNoSlashChars.indexOf(ch) !== -1)
          ) {
            ch =
              lastCharWasSymbol || result.substr(-1).match(/[A-Za-z0-9]/)
                ? separator + symbol[ch]
                : symbol[ch];
            ch += input[i + 1] !== void 0 && input[i + 1].match(/[A-Za-z0-9]/) ? separator : '';
            lastCharWasSymbol = true;
          } else {
            if (lastCharWasDiatric === true) {
              ch = diatricMap[diatricString] + ch;
              diatricString = '';
              lastCharWasDiatric = false;
            } else if (
              lastCharWasSymbol &&
              (/[A-Za-z0-9]/.test(ch) || result.substr(-1).match(/A-Za-z0-9]/))
            ) {
              ch = ' ' + ch;
            }
            lastCharWasSymbol = false;
          }
          result += ch.replace(new RegExp('[^\\w\\s' + allowedChars + '_-]', 'g'), separator);
        }
        if (titleCase) {
          result = result.replace(/(\w)(\S*)/g, function (_, i2, r) {
            var j = i2.toUpperCase() + (r !== null ? r : '');
            return Object.keys(customReplacements).indexOf(j.toLowerCase()) < 0
              ? j
              : j.toLowerCase();
          });
        }
        result = result
          .replace(/\s+/g, separator)
          .replace(new RegExp('\\' + separator + '+', 'g'), separator)
          .replace(new RegExp('(^\\' + separator + '+|\\' + separator + '+$)', 'g'), '');
        if (truncate && result.length > truncate) {
          lucky = result.charAt(truncate) === separator;
          result = result.slice(0, truncate);
          if (!lucky) {
            result = result.slice(0, result.lastIndexOf(separator));
          }
        }
        if (!maintainCase && !titleCase) {
          result = result.toLowerCase();
        }
        return result;
      };
      var createSlug = function createSlug2(opts) {
        return function getSlugWithConfig(input) {
          return getSlug(input, opts);
        };
      };
      var escapeChars = function escapeChars2(input) {
        return input.replace(/[-\\^$*+?.()|[\]{}\/]/g, '\\{{contextString}}amp;');
      };
      var isReplacedCustomChar = function (ch, customReplacements) {
        for (var c in customReplacements) {
          if (customReplacements[c] === ch) {
            return true;
          }
        }
      };
      if (typeof module !== 'undefined' && module.exports) {
        module.exports = getSlug;
        module.exports.createSlug = createSlug;
      } else if (typeof define !== 'undefined' && define.amd) {
        define([], function () {
          return getSlug;
        });
      } else {
        try {
          if (root.getSlug || root.createSlug) {
            throw 'speakingurl: globals exists /(getSlug|createSlug)/';
          } else {
            root.getSlug = getSlug;
            root.createSlug = createSlug;
          }
        } catch (e) {}
      }
    })(exports);
  },
});
var require_speakingurl2 = __commonJS2({
  '../../node_modules/.pnpm/speakingurl@14.0.1/node_modules/speakingurl/index.js'(exports, module) {
    'use strict';
    init_esm_shims2();
    module.exports = require_speakingurl();
  },
});
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
function getComponentTypeName(options) {
  var _a25;
  const name =
    options.name ||
    options._componentTag ||
    options.__VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__ ||
    options.__name;
  if (name === 'index' && ((_a25 = options.__file) == null ? void 0 : _a25.endsWith('index.vue'))) {
    return '';
  }
  return name;
}
function getComponentFileName(options) {
  const file = options.__file;
  if (file) return classify(basename(file, '.vue'));
}
function saveComponentGussedName(instance, name) {
  instance.type.__VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__ = name;
  return name;
}
function getAppRecord(instance) {
  if (instance.__VUE_DEVTOOLS_NEXT_APP_RECORD__) return instance.__VUE_DEVTOOLS_NEXT_APP_RECORD__;
  else if (instance.root) return instance.appContext.app.__VUE_DEVTOOLS_NEXT_APP_RECORD__;
}
function isFragment(instance) {
  var _a25, _b25;
  const subTreeType = (_a25 = instance.subTree) == null ? void 0 : _a25.type;
  const appRecord = getAppRecord(instance);
  if (appRecord) {
    return (
      ((_b25 = appRecord == null ? void 0 : appRecord.types) == null ? void 0 : _b25.Fragment) ===
      subTreeType
    );
  }
  return false;
}
function getInstanceName(instance) {
  var _a25, _b25, _c;
  const name = getComponentTypeName((instance == null ? void 0 : instance.type) || {});
  if (name) return name;
  if ((instance == null ? void 0 : instance.root) === instance) return 'Root';
  for (const key in (_b25 = (_a25 = instance.parent) == null ? void 0 : _a25.type) == null
    ? void 0
    : _b25.components) {
    if (instance.parent.type.components[key] === (instance == null ? void 0 : instance.type))
      return saveComponentGussedName(instance, key);
  }
  for (const key in (_c = instance.appContext) == null ? void 0 : _c.components) {
    if (instance.appContext.components[key] === (instance == null ? void 0 : instance.type))
      return saveComponentGussedName(instance, key);
  }
  const fileName = getComponentFileName((instance == null ? void 0 : instance.type) || {});
  if (fileName) return fileName;
  return 'Anonymous Component';
}
function getUniqueComponentId(instance) {
  var _a25, _b25, _c;
  const appId =
    (_c =
      (_b25 =
        (_a25 = instance == null ? void 0 : instance.appContext) == null ? void 0 : _a25.app) ==
      null
        ? void 0
        : _b25.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__) != null
      ? _c
      : 0;
  const instanceId =
    instance === (instance == null ? void 0 : instance.root) ? 'root' : instance.uid;
  return `${appId}:${instanceId}`;
}
function getComponentInstance(appRecord, instanceId) {
  instanceId = instanceId || `${appRecord.id}:root`;
  const instance = appRecord.instanceMap.get(instanceId);
  return instance || appRecord.instanceMap.get(':root');
}
function createRect() {
  const rect = {
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    get width() {
      return rect.right - rect.left;
    },
    get height() {
      return rect.bottom - rect.top;
    },
  };
  return rect;
}
var range;
function getTextRect(node) {
  if (!range) range = document.createRange();
  range.selectNode(node);
  return range.getBoundingClientRect();
}
function getFragmentRect(vnode) {
  const rect = createRect();
  if (!vnode.children) return rect;
  for (let i = 0, l = vnode.children.length; i < l; i++) {
    const childVnode = vnode.children[i];
    let childRect;
    if (childVnode.component) {
      childRect = getComponentBoundingRect(childVnode.component);
    } else if (childVnode.el) {
      const el = childVnode.el;
      if (el.nodeType === 1 || el.getBoundingClientRect) childRect = el.getBoundingClientRect();
      else if (el.nodeType === 3 && el.data.trim()) childRect = getTextRect(el);
    }
    if (childRect) mergeRects(rect, childRect);
  }
  return rect;
}
function mergeRects(a, b) {
  if (!a.top || b.top < a.top) a.top = b.top;
  if (!a.bottom || b.bottom > a.bottom) a.bottom = b.bottom;
  if (!a.left || b.left < a.left) a.left = b.left;
  if (!a.right || b.right > a.right) a.right = b.right;
  return a;
}
var DEFAULT_RECT = {
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  width: 0,
  height: 0,
};
function getComponentBoundingRect(instance) {
  const el = instance.subTree.el;
  if (typeof window === 'undefined') {
    return DEFAULT_RECT;
  }
  if (isFragment(instance)) return getFragmentRect(instance.subTree);
  else if ((el == null ? void 0 : el.nodeType) === 1)
    return el == null ? void 0 : el.getBoundingClientRect();
  else if (instance.subTree.component) return getComponentBoundingRect(instance.subTree.component);
  else return DEFAULT_RECT;
}
init_esm_shims2();
function getRootElementsFromComponentInstance(instance) {
  if (isFragment(instance)) return getFragmentRootElements(instance.subTree);
  if (!instance.subTree) return [];
  return [instance.subTree.el];
}
function getFragmentRootElements(vnode) {
  if (!vnode.children) return [];
  const list = [];
  vnode.children.forEach((childVnode) => {
    if (childVnode.component)
      list.push(...getRootElementsFromComponentInstance(childVnode.component));
    else if (childVnode == null ? void 0 : childVnode.el) list.push(childVnode.el);
  });
  return list;
}
var CONTAINER_ELEMENT_ID = '__vue-devtools-component-inspector__';
var CARD_ELEMENT_ID = '__vue-devtools-component-inspector__card__';
var COMPONENT_NAME_ELEMENT_ID = '__vue-devtools-component-inspector__name__';
var INDICATOR_ELEMENT_ID = '__vue-devtools-component-inspector__indicator__';
var containerStyles = {
  display: 'block',
  zIndex: 2147483640,
  position: 'fixed',
  backgroundColor: '#42b88325',
  border: '1px solid #42b88350',
  borderRadius: '5px',
  transition: 'all 0.1s ease-in',
  pointerEvents: 'none',
};
var cardStyles = {
  fontFamily: 'Arial, Helvetica, sans-serif',
  padding: '5px 8px',
  borderRadius: '4px',
  textAlign: 'left',
  position: 'absolute',
  left: 0,
  color: '#e9e9e9',
  fontSize: '14px',
  fontWeight: 600,
  lineHeight: '24px',
  backgroundColor: '#42b883',
  boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
};
var indicatorStyles = {
  display: 'inline-block',
  fontWeight: 400,
  fontStyle: 'normal',
  fontSize: '12px',
  opacity: 0.7,
};
function getContainerElement() {
  return document.getElementById(CONTAINER_ELEMENT_ID);
}
function getCardElement() {
  return document.getElementById(CARD_ELEMENT_ID);
}
function getIndicatorElement() {
  return document.getElementById(INDICATOR_ELEMENT_ID);
}
function getNameElement() {
  return document.getElementById(COMPONENT_NAME_ELEMENT_ID);
}
function getStyles(bounds) {
  return {
    left: `${Math.round(bounds.left * 100) / 100}px`,
    top: `${Math.round(bounds.top * 100) / 100}px`,
    width: `${Math.round(bounds.width * 100) / 100}px`,
    height: `${Math.round(bounds.height * 100) / 100}px`,
  };
}
function create(options) {
  var _a25;
  const containerEl = document.createElement('div');
  containerEl.id = (_a25 = options.elementId) != null ? _a25 : CONTAINER_ELEMENT_ID;
  Object.assign(containerEl.style, {
    ...containerStyles,
    ...getStyles(options.bounds),
    ...options.style,
  });
  const cardEl = document.createElement('span');
  cardEl.id = CARD_ELEMENT_ID;
  Object.assign(cardEl.style, {
    ...cardStyles,
    top: options.bounds.top < 35 ? 0 : '-35px',
  });
  const nameEl = document.createElement('span');
  nameEl.id = COMPONENT_NAME_ELEMENT_ID;
  nameEl.innerHTML = `&lt;${options.name}&gt;&nbsp;&nbsp;`;
  const indicatorEl = document.createElement('i');
  indicatorEl.id = INDICATOR_ELEMENT_ID;
  indicatorEl.innerHTML = `${Math.round(options.bounds.width * 100) / 100} x ${Math.round(options.bounds.height * 100) / 100}`;
  Object.assign(indicatorEl.style, indicatorStyles);
  cardEl.appendChild(nameEl);
  cardEl.appendChild(indicatorEl);
  containerEl.appendChild(cardEl);
  document.body.appendChild(containerEl);
  return containerEl;
}
function update(options) {
  const containerEl = getContainerElement();
  const cardEl = getCardElement();
  const nameEl = getNameElement();
  const indicatorEl = getIndicatorElement();
  if (containerEl) {
    Object.assign(containerEl.style, {
      ...containerStyles,
      ...getStyles(options.bounds),
    });
    Object.assign(cardEl.style, {
      top: options.bounds.top < 35 ? 0 : '-35px',
    });
    nameEl.innerHTML = `&lt;${options.name}&gt;&nbsp;&nbsp;`;
    indicatorEl.innerHTML = `${Math.round(options.bounds.width * 100) / 100} x ${Math.round(options.bounds.height * 100) / 100}`;
  }
}
function highlight(instance) {
  const bounds = getComponentBoundingRect(instance);
  if (!bounds.width && !bounds.height) return;
  const name = getInstanceName(instance);
  const container = getContainerElement();
  container ? update({ bounds, name }) : create({ bounds, name });
}
function unhighlight() {
  const el = getContainerElement();
  if (el) el.style.display = 'none';
}
var inspectInstance = null;
function inspectFn(e) {
  const target22 = e.target;
  if (target22) {
    const instance = target22.__vueParentComponent;
    if (instance) {
      inspectInstance = instance;
      const el = instance.vnode.el;
      if (el) {
        const bounds = getComponentBoundingRect(instance);
        const name = getInstanceName(instance);
        const container = getContainerElement();
        container ? update({ bounds, name }) : create({ bounds, name });
      }
    }
  }
}
function selectComponentFn(e, cb) {
  e.preventDefault();
  e.stopPropagation();
  if (inspectInstance) {
    const uniqueComponentId = getUniqueComponentId(inspectInstance);
    cb(uniqueComponentId);
  }
}
var inspectComponentHighLighterSelectFn = null;
function cancelInspectComponentHighLighter() {
  unhighlight();
  window.removeEventListener('mouseover', inspectFn);
  window.removeEventListener('click', inspectComponentHighLighterSelectFn, true);
  inspectComponentHighLighterSelectFn = null;
}
function inspectComponentHighLighter() {
  window.addEventListener('mouseover', inspectFn);
  return new Promise((resolve) => {
    function onSelect(e) {
      e.preventDefault();
      e.stopPropagation();
      selectComponentFn(e, (id) => {
        window.removeEventListener('click', onSelect, true);
        inspectComponentHighLighterSelectFn = null;
        window.removeEventListener('mouseover', inspectFn);
        const el = getContainerElement();
        if (el) el.style.display = 'none';
        resolve(JSON.stringify({ id }));
      });
    }
    inspectComponentHighLighterSelectFn = onSelect;
    window.addEventListener('click', onSelect, true);
  });
}
function scrollToComponent(options) {
  const instance = getComponentInstance(activeAppRecord.value, options.id);
  if (instance) {
    const [el] = getRootElementsFromComponentInstance(instance);
    if (typeof el.scrollIntoView === 'function') {
      el.scrollIntoView({
        behavior: 'smooth',
      });
    } else {
      const bounds = getComponentBoundingRect(instance);
      const scrollTarget = document.createElement('div');
      const styles = {
        ...getStyles(bounds),
        position: 'absolute',
      };
      Object.assign(scrollTarget.style, styles);
      document.body.appendChild(scrollTarget);
      scrollTarget.scrollIntoView({
        behavior: 'smooth',
      });
      setTimeout(() => {
        document.body.removeChild(scrollTarget);
      }, 2e3);
    }
    setTimeout(() => {
      const bounds = getComponentBoundingRect(instance);
      if (bounds.width || bounds.height) {
        const name = getInstanceName(instance);
        const el2 = getContainerElement();
        el2 ? update({ ...options, name, bounds }) : create({ ...options, name, bounds });
        setTimeout(() => {
          if (el2) el2.style.display = 'none';
        }, 1500);
      }
    }, 1200);
  }
}
init_esm_shims2();
var _a2;
var _b;
(_b = (_a2 = target).__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__) != null
  ? _b
  : (_a2.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ = true);
function waitForInspectorInit(cb) {
  let total = 0;
  const timer = setInterval(() => {
    if (target.__VUE_INSPECTOR__) {
      clearInterval(timer);
      total += 30;
      cb();
    }
    if (total /* 5s */ >= 5e3) clearInterval(timer);
  }, 30);
}
function setupInspector() {
  const inspector = target.__VUE_INSPECTOR__;
  const _openInEditor = inspector.openInEditor;
  inspector.openInEditor = async (...params) => {
    inspector.disable();
    _openInEditor(...params);
  };
}
function getComponentInspector() {
  return new Promise((resolve) => {
    function setup() {
      setupInspector();
      resolve(target.__VUE_INSPECTOR__);
    }
    if (!target.__VUE_INSPECTOR__) {
      waitForInspectorInit(() => {
        setup();
      });
    } else {
      setup();
    }
  });
}
init_esm_shims2();
init_esm_shims2();
function isReadonly(value) {
  return !!(
    value &&
    value[
      '__v_isReadonly'
      /* IS_READONLY */
    ]
  );
}
function isReactive(value) {
  if (isReadonly(value)) {
    return isReactive(
      value[
        '__v_raw'
        /* RAW */
      ],
    );
  }
  return !!(
    value &&
    value[
      '__v_isReactive'
      /* IS_REACTIVE */
    ]
  );
}
function isRef(r) {
  return !!(r && r.__v_isRef === true);
}
function toRaw(observed) {
  const raw =
    observed &&
    observed[
      '__v_raw'
      /* RAW */
    ];
  return raw ? toRaw(raw) : observed;
}
var Fragment = Symbol.for('v-fgt');
var StateEditor = class {
  constructor() {
    this.refEditor = new RefStateEditor();
  }
  set(object, path, value, cb) {
    const sections = Array.isArray(path) ? path : path.split('.');
    const markRef = false;
    while (sections.length > 1) {
      const section = sections.shift();
      if (object instanceof Map) object = object.get(section);
      else if (object instanceof Set) object = Array.from(object.values())[section];
      else object = object[section];
      if (this.refEditor.isRef(object)) object = this.refEditor.get(object);
    }
    const field = sections[0];
    const item = this.refEditor.get(object)[field];
    if (cb) {
      cb(object, field, value);
    } else {
      if (this.refEditor.isRef(item)) this.refEditor.set(item, value);
      else if (markRef) object[field] = value;
      else object[field] = value;
    }
  }
  get(object, path) {
    const sections = Array.isArray(path) ? path : path.split('.');
    for (let i = 0; i < sections.length; i++) {
      if (object instanceof Map) object = object.get(sections[i]);
      else object = object[sections[i]];
      if (this.refEditor.isRef(object)) object = this.refEditor.get(object);
      if (!object) return void 0;
    }
    return object;
  }
  has(object, path, parent = false) {
    if (typeof object === 'undefined') return false;
    const sections = Array.isArray(path) ? path.slice() : path.split('.');
    const size = !parent ? 1 : 2;
    while (object && sections.length > size) {
      const section = sections.shift();
      object = object[section];
      if (this.refEditor.isRef(object)) object = this.refEditor.get(object);
    }
    return object != null && Object.prototype.hasOwnProperty.call(object, sections[0]);
  }
  createDefaultSetCallback(state) {
    return (object, field, value) => {
      if (state.remove || state.newKey) {
        if (Array.isArray(object)) object.splice(field, 1);
        else if (toRaw(object) instanceof Map) object.delete(field);
        else if (toRaw(object) instanceof Set) object.delete(Array.from(object.values())[field]);
        else Reflect.deleteProperty(object, field);
      }
      if (!state.remove) {
        const target22 = object[state.newKey || field];
        if (this.refEditor.isRef(target22)) this.refEditor.set(target22, value);
        else if (toRaw(object) instanceof Map) object.set(state.newKey || field, value);
        else if (toRaw(object) instanceof Set) object.add(value);
        else object[state.newKey || field] = value;
      }
    };
  }
};
var RefStateEditor = class {
  set(ref, value) {
    if (isRef(ref)) {
      ref.value = value;
    } else {
      if (ref instanceof Set && Array.isArray(value)) {
        ref.clear();
        value.forEach((v) => ref.add(v));
        return;
      }
      const currentKeys = Object.keys(value);
      if (ref instanceof Map) {
        const previousKeysSet2 = new Set(ref.keys());
        currentKeys.forEach((key) => {
          ref.set(key, Reflect.get(value, key));
          previousKeysSet2.delete(key);
        });
        previousKeysSet2.forEach((key) => ref.delete(key));
        return;
      }
      const previousKeysSet = new Set(Object.keys(ref));
      currentKeys.forEach((key) => {
        Reflect.set(ref, key, Reflect.get(value, key));
        previousKeysSet.delete(key);
      });
      previousKeysSet.forEach((key) => Reflect.deleteProperty(ref, key));
    }
  }
  get(ref) {
    return isRef(ref) ? ref.value : ref;
  }
  isRef(ref) {
    return isRef(ref) || isReactive(ref);
  }
};
var stateEditor = new StateEditor();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
var TIMELINE_LAYERS_STATE_STORAGE_ID = '__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS_STATE__';
function getTimelineLayersStateFromStorage() {
  if (!isBrowser || typeof localStorage === 'undefined' || localStorage === null) {
    return {
      recordingState: false,
      mouseEventEnabled: false,
      keyboardEventEnabled: false,
      componentEventEnabled: false,
      performanceEventEnabled: false,
      selected: '',
    };
  }
  const state = localStorage.getItem(TIMELINE_LAYERS_STATE_STORAGE_ID);
  return state
    ? JSON.parse(state)
    : {
        recordingState: false,
        mouseEventEnabled: false,
        keyboardEventEnabled: false,
        componentEventEnabled: false,
        performanceEventEnabled: false,
        selected: '',
      };
}
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
var _a22;
var _b2;
(_b2 = (_a22 = target).__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS) != null
  ? _b2
  : (_a22.__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS = []);
var devtoolsTimelineLayers = new Proxy(target.__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS, {
  get(target22, prop, receiver) {
    return Reflect.get(target22, prop, receiver);
  },
});
function addTimelineLayer(options, descriptor) {
  devtoolsState.timelineLayersState[descriptor.id] = false;
  devtoolsTimelineLayers.push({
    ...options,
    descriptorId: descriptor.id,
    appRecord: getAppRecord(descriptor.app),
  });
}
var _a3;
var _b3;
(_b3 = (_a3 = target).__VUE_DEVTOOLS_KIT_INSPECTOR__) != null
  ? _b3
  : (_a3.__VUE_DEVTOOLS_KIT_INSPECTOR__ = []);
var devtoolsInspector = new Proxy(target.__VUE_DEVTOOLS_KIT_INSPECTOR__, {
  get(target22, prop, receiver) {
    return Reflect.get(target22, prop, receiver);
  },
});
var callInspectorUpdatedHook = debounce(() => {
  devtoolsContext.hooks.callHook('sendInspectorToClient', getActiveInspectors());
});
function addInspector(inspector, descriptor) {
  var _a25, _b25;
  devtoolsInspector.push({
    options: inspector,
    descriptor,
    treeFilterPlaceholder:
      (_a25 = inspector.treeFilterPlaceholder) != null ? _a25 : 'Search tree...',
    stateFilterPlaceholder:
      (_b25 = inspector.stateFilterPlaceholder) != null ? _b25 : 'Search state...',
    treeFilter: '',
    selectedNodeId: '',
    appRecord: getAppRecord(descriptor.app),
  });
  callInspectorUpdatedHook();
}
function getActiveInspectors() {
  return devtoolsInspector
    .filter((inspector) => inspector.descriptor.app === activeAppRecord.value.app)
    .filter((inspector) => inspector.descriptor.id !== 'components')
    .map((inspector) => {
      var _a25;
      const descriptor = inspector.descriptor;
      const options = inspector.options;
      return {
        id: options.id,
        label: options.label,
        logo: descriptor.logo,
        icon: `custom-ic-baseline-${(_a25 = options == null ? void 0 : options.icon) == null ? void 0 : _a25.replace(/_/g, '-')}`,
        packageName: descriptor.packageName,
        homepage: descriptor.homepage,
        pluginId: descriptor.id,
      };
    });
}
function getInspector(id, app) {
  return devtoolsInspector.find(
    (inspector) => inspector.options.id === id && (app ? inspector.descriptor.app === app : true),
  );
}
var DevToolsV6PluginAPIHookKeys = ((DevToolsV6PluginAPIHookKeys2) => {
  DevToolsV6PluginAPIHookKeys2['VISIT_COMPONENT_TREE'] = 'visitComponentTree';
  DevToolsV6PluginAPIHookKeys2['INSPECT_COMPONENT'] = 'inspectComponent';
  DevToolsV6PluginAPIHookKeys2['EDIT_COMPONENT_STATE'] = 'editComponentState';
  DevToolsV6PluginAPIHookKeys2['GET_INSPECTOR_TREE'] = 'getInspectorTree';
  DevToolsV6PluginAPIHookKeys2['GET_INSPECTOR_STATE'] = 'getInspectorState';
  DevToolsV6PluginAPIHookKeys2['EDIT_INSPECTOR_STATE'] = 'editInspectorState';
  DevToolsV6PluginAPIHookKeys2['INSPECT_TIMELINE_EVENT'] = 'inspectTimelineEvent';
  DevToolsV6PluginAPIHookKeys2['TIMELINE_CLEARED'] = 'timelineCleared';
  DevToolsV6PluginAPIHookKeys2['SET_PLUGIN_SETTINGS'] = 'setPluginSettings';
  return DevToolsV6PluginAPIHookKeys2;
})(DevToolsV6PluginAPIHookKeys || {});
var DevToolsContextHookKeys = ((DevToolsContextHookKeys2) => {
  DevToolsContextHookKeys2['ADD_INSPECTOR'] = 'addInspector';
  DevToolsContextHookKeys2['SEND_INSPECTOR_TREE'] = 'sendInspectorTree';
  DevToolsContextHookKeys2['SEND_INSPECTOR_STATE'] = 'sendInspectorState';
  DevToolsContextHookKeys2['CUSTOM_INSPECTOR_SELECT_NODE'] = 'customInspectorSelectNode';
  DevToolsContextHookKeys2['TIMELINE_LAYER_ADDED'] = 'timelineLayerAdded';
  DevToolsContextHookKeys2['TIMELINE_EVENT_ADDED'] = 'timelineEventAdded';
  DevToolsContextHookKeys2['GET_COMPONENT_INSTANCES'] = 'getComponentInstances';
  DevToolsContextHookKeys2['GET_COMPONENT_BOUNDS'] = 'getComponentBounds';
  DevToolsContextHookKeys2['GET_COMPONENT_NAME'] = 'getComponentName';
  DevToolsContextHookKeys2['COMPONENT_HIGHLIGHT'] = 'componentHighlight';
  DevToolsContextHookKeys2['COMPONENT_UNHIGHLIGHT'] = 'componentUnhighlight';
  return DevToolsContextHookKeys2;
})(DevToolsContextHookKeys || {});
var DevToolsMessagingHookKeys = ((DevToolsMessagingHookKeys2) => {
  DevToolsMessagingHookKeys2['SEND_INSPECTOR_TREE_TO_CLIENT'] = 'sendInspectorTreeToClient';
  DevToolsMessagingHookKeys2['SEND_INSPECTOR_STATE_TO_CLIENT'] = 'sendInspectorStateToClient';
  DevToolsMessagingHookKeys2['SEND_TIMELINE_EVENT_TO_CLIENT'] = 'sendTimelineEventToClient';
  DevToolsMessagingHookKeys2['SEND_INSPECTOR_TO_CLIENT'] = 'sendInspectorToClient';
  DevToolsMessagingHookKeys2['SEND_ACTIVE_APP_UNMOUNTED_TO_CLIENT'] =
    'sendActiveAppUpdatedToClient';
  DevToolsMessagingHookKeys2['DEVTOOLS_STATE_UPDATED'] = 'devtoolsStateUpdated';
  DevToolsMessagingHookKeys2['DEVTOOLS_CONNECTED_UPDATED'] = 'devtoolsConnectedUpdated';
  DevToolsMessagingHookKeys2['ROUTER_INFO_UPDATED'] = 'routerInfoUpdated';
  return DevToolsMessagingHookKeys2;
})(DevToolsMessagingHookKeys || {});
function createDevToolsCtxHooks() {
  const hooks2 = createHooks();
  hooks2.hook('addInspector', ({ inspector, plugin }) => {
    addInspector(inspector, plugin.descriptor);
  });
  const debounceSendInspectorTree = debounce(async ({ inspectorId, plugin }) => {
    var _a25;
    if (
      !inspectorId ||
      !((_a25 = plugin == null ? void 0 : plugin.descriptor) == null ? void 0 : _a25.app) ||
      devtoolsState.highPerfModeEnabled
    )
      return;
    const inspector = getInspector(inspectorId, plugin.descriptor.app);
    const _payload = {
      app: plugin.descriptor.app,
      inspectorId,
      filter: (inspector == null ? void 0 : inspector.treeFilter) || '',
      rootNodes: [],
    };
    await new Promise((resolve) => {
      hooks2.callHookWith(
        async (callbacks) => {
          await Promise.all(callbacks.map((cb) => cb(_payload)));
          resolve();
        },
        'getInspectorTree',
        /* GET_INSPECTOR_TREE */
      );
    });
    hooks2.callHookWith(
      async (callbacks) => {
        await Promise.all(
          callbacks.map((cb) =>
            cb({
              inspectorId,
              rootNodes: _payload.rootNodes,
            }),
          ),
        );
      },
      'sendInspectorTreeToClient',
      /* SEND_INSPECTOR_TREE_TO_CLIENT */
    );
  }, 120);
  hooks2.hook('sendInspectorTree', debounceSendInspectorTree);
  const debounceSendInspectorState = debounce(async ({ inspectorId, plugin }) => {
    var _a25;
    if (
      !inspectorId ||
      !((_a25 = plugin == null ? void 0 : plugin.descriptor) == null ? void 0 : _a25.app) ||
      devtoolsState.highPerfModeEnabled
    )
      return;
    const inspector = getInspector(inspectorId, plugin.descriptor.app);
    const _payload = {
      app: plugin.descriptor.app,
      inspectorId,
      nodeId: (inspector == null ? void 0 : inspector.selectedNodeId) || '',
      state: null,
    };
    const ctx = {
      currentTab: `custom-inspector:${inspectorId}`,
    };
    if (_payload.nodeId) {
      await new Promise((resolve) => {
        hooks2.callHookWith(
          async (callbacks) => {
            await Promise.all(callbacks.map((cb) => cb(_payload, ctx)));
            resolve();
          },
          'getInspectorState',
          /* GET_INSPECTOR_STATE */
        );
      });
    }
    hooks2.callHookWith(
      async (callbacks) => {
        await Promise.all(
          callbacks.map((cb) =>
            cb({
              inspectorId,
              nodeId: _payload.nodeId,
              state: _payload.state,
            }),
          ),
        );
      },
      'sendInspectorStateToClient',
      /* SEND_INSPECTOR_STATE_TO_CLIENT */
    );
  }, 120);
  hooks2.hook('sendInspectorState', debounceSendInspectorState);
  hooks2.hook('customInspectorSelectNode', ({ inspectorId, nodeId, plugin }) => {
    const inspector = getInspector(inspectorId, plugin.descriptor.app);
    if (!inspector) return;
    inspector.selectedNodeId = nodeId;
  });
  hooks2.hook('timelineLayerAdded', ({ options, plugin }) => {
    addTimelineLayer(options, plugin.descriptor);
  });
  hooks2.hook('timelineEventAdded', ({ options, plugin }) => {
    var _a25;
    const internalLayerIds = ['performance', 'component-event', 'keyboard', 'mouse'];
    if (
      devtoolsState.highPerfModeEnabled ||
      (!((_a25 = devtoolsState.timelineLayersState) == null
        ? void 0
        : _a25[plugin.descriptor.id]) &&
        !internalLayerIds.includes(options.layerId))
    )
      return;
    hooks2.callHookWith(
      async (callbacks) => {
        await Promise.all(callbacks.map((cb) => cb(options)));
      },
      'sendTimelineEventToClient',
      /* SEND_TIMELINE_EVENT_TO_CLIENT */
    );
  });
  hooks2.hook('getComponentInstances', async ({ app }) => {
    const appRecord = app.__VUE_DEVTOOLS_NEXT_APP_RECORD__;
    if (!appRecord) return null;
    const appId = appRecord.id.toString();
    const instances = [...appRecord.instanceMap]
      .filter(([key]) => key.split(':')[0] === appId)
      .map(([, instance]) => instance);
    return instances;
  });
  hooks2.hook('getComponentBounds', async ({ instance }) => {
    const bounds = getComponentBoundingRect(instance);
    return bounds;
  });
  hooks2.hook('getComponentName', ({ instance }) => {
    const name = getInstanceName(instance);
    return name;
  });
  hooks2.hook('componentHighlight', ({ uid }) => {
    const instance = activeAppRecord.value.instanceMap.get(uid);
    if (instance) {
      highlight(instance);
    }
  });
  hooks2.hook('componentUnhighlight', () => {
    unhighlight();
  });
  return hooks2;
}
var _a4;
var _b4;
(_b4 = (_a4 = target).__VUE_DEVTOOLS_KIT_APP_RECORDS__) != null
  ? _b4
  : (_a4.__VUE_DEVTOOLS_KIT_APP_RECORDS__ = []);
var _a5;
var _b5;
(_b5 = (_a5 = target).__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__) != null
  ? _b5
  : (_a5.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__ = {});
var _a6;
var _b6;
(_b6 = (_a6 = target).__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__) != null
  ? _b6
  : (_a6.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__ = '');
var _a7;
var _b7;
(_b7 = (_a7 = target).__VUE_DEVTOOLS_KIT_CUSTOM_TABS__) != null
  ? _b7
  : (_a7.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__ = []);
var _a8;
var _b8;
(_b8 = (_a8 = target).__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__) != null
  ? _b8
  : (_a8.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__ = []);
var STATE_KEY = '__VUE_DEVTOOLS_KIT_GLOBAL_STATE__';
function initStateFactory() {
  return {
    connected: false,
    clientConnected: false,
    vitePluginDetected: true,
    appRecords: [],
    activeAppRecordId: '',
    tabs: [],
    commands: [],
    highPerfModeEnabled: true,
    devtoolsClientDetected: {},
    perfUniqueGroupId: 0,
    timelineLayersState: getTimelineLayersStateFromStorage(),
  };
}
var _a9;
var _b9;
(_b9 = (_a9 = target)[STATE_KEY]) != null ? _b9 : (_a9[STATE_KEY] = initStateFactory());
var callStateUpdatedHook = debounce((state) => {
  devtoolsContext.hooks.callHook('devtoolsStateUpdated', { state });
});
var callConnectedUpdatedHook = debounce((state, oldState) => {
  devtoolsContext.hooks.callHook('devtoolsConnectedUpdated', {
    state,
    oldState,
  });
});
var devtoolsAppRecords = new Proxy(target.__VUE_DEVTOOLS_KIT_APP_RECORDS__, {
  get(_target, prop, receiver) {
    if (prop === 'value') return target.__VUE_DEVTOOLS_KIT_APP_RECORDS__;
    return target.__VUE_DEVTOOLS_KIT_APP_RECORDS__[prop];
  },
});
var activeAppRecord = new Proxy(target.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__, {
  get(_target, prop, receiver) {
    if (prop === 'value') return target.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__;
    else if (prop === 'id') return target.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__;
    return target.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__[prop];
  },
});
function updateAllStates() {
  callStateUpdatedHook({
    ...target[STATE_KEY],
    appRecords: devtoolsAppRecords.value,
    activeAppRecordId: activeAppRecord.id,
    tabs: target.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__,
    commands: target.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__,
  });
}
function setActiveAppRecord(app) {
  target.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__ = app;
  updateAllStates();
}
function setActiveAppRecordId(id) {
  target.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__ = id;
  updateAllStates();
}
var devtoolsState = new Proxy(target[STATE_KEY], {
  get(target22, property) {
    if (property === 'appRecords') {
      return devtoolsAppRecords;
    } else if (property === 'activeAppRecordId') {
      return activeAppRecord.id;
    } else if (property === 'tabs') {
      return target.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__;
    } else if (property === 'commands') {
      return target.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__;
    }
    return target[STATE_KEY][property];
  },
  deleteProperty(target22, property) {
    delete target22[property];
    return true;
  },
  set(target22, property, value) {
    const oldState = { ...target[STATE_KEY] };
    target22[property] = value;
    target[STATE_KEY][property] = value;
    return true;
  },
});
function onDevToolsConnected(fn) {
  return new Promise((resolve) => {
    if (devtoolsState.connected) {
      fn();
      resolve();
    }
    devtoolsContext.hooks.hook('devtoolsConnectedUpdated', ({ state }) => {
      if (state.connected) {
        fn();
        resolve();
      }
    });
  });
}
var resolveIcon = (icon) => {
  if (!icon) return;
  if (icon.startsWith('baseline-')) {
    return `custom-ic-${icon}`;
  }
  if (icon.startsWith('i-') || isUrlString(icon)) return icon;
  return `custom-ic-baseline-${icon}`;
};
function addCustomTab(tab) {
  const tabs = target.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__;
  if (tabs.some((t) => t.name === tab.name)) return;
  tabs.push({
    ...tab,
    icon: resolveIcon(tab.icon),
  });
  updateAllStates();
}
function addCustomCommand(action) {
  const commands = target.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__;
  if (commands.some((t) => t.id === action.id)) return;
  commands.push({
    ...action,
    icon: resolveIcon(action.icon),
    children: action.children
      ? action.children.map((child) => ({
          ...child,
          icon: resolveIcon(child.icon),
        }))
      : void 0,
  });
  updateAllStates();
}
function removeCustomCommand(actionId) {
  const commands = target.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__;
  const index = commands.findIndex((t) => t.id === actionId);
  if (index === -1) return;
  commands.splice(index, 1);
  updateAllStates();
}
function openInEditor(options = {}) {
  var _a25, _b25, _c;
  const { file, host, baseUrl = window.location.origin, line = 0, column = 0 } = options;
  if (file) {
    if (host === 'chrome-extension') {
      const fileName = file.replace(/\\/g, '\\\\');
      const _baseUrl =
        (_b25 = (_a25 = window.VUE_DEVTOOLS_CONFIG) == null ? void 0 : _a25.openInEditorHost) !=
        null
          ? _b25
          : '/';
      fetch(`${_baseUrl}__open-in-editor?file=${encodeURI(file)}`).then((response) => {
        if (!response.ok) {
          const msg = `Opening component ${fileName} failed`;
          console.log(`%c${msg}`, 'color:red');
        }
      });
    } else if (devtoolsState.vitePluginDetected) {
      const _baseUrl =
        (_c = target.__VUE_DEVTOOLS_OPEN_IN_EDITOR_BASE_URL__) != null ? _c : baseUrl;
      target.__VUE_INSPECTOR__.openInEditor(_baseUrl, file, line, column);
    }
  }
}
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
var _a10;
var _b10;
(_b10 = (_a10 = target).__VUE_DEVTOOLS_KIT_PLUGIN_BUFFER__) != null
  ? _b10
  : (_a10.__VUE_DEVTOOLS_KIT_PLUGIN_BUFFER__ = []);
var devtoolsPluginBuffer = new Proxy(target.__VUE_DEVTOOLS_KIT_PLUGIN_BUFFER__, {
  get(target22, prop, receiver) {
    return Reflect.get(target22, prop, receiver);
  },
});
function _getSettings(settings) {
  const _settings = {};
  Object.keys(settings).forEach((key) => {
    _settings[key] = settings[key].defaultValue;
  });
  return _settings;
}
function getPluginLocalKey(pluginId) {
  return `__VUE_DEVTOOLS_NEXT_PLUGIN_SETTINGS__${pluginId}__`;
}
function getPluginSettingsOptions(pluginId) {
  var _a25, _b25, _c;
  const item =
    (_b25 =
      (_a25 = devtoolsPluginBuffer.find((item2) => {
        var _a26;
        return item2[0].id === pluginId && !!((_a26 = item2[0]) == null ? void 0 : _a26.settings);
      })) == null
        ? void 0
        : _a25[0]) != null
      ? _b25
      : null;
  return (_c = item == null ? void 0 : item.settings) != null ? _c : null;
}
function getPluginSettings(pluginId, fallbackValue) {
  var _a25, _b25, _c;
  const localKey = getPluginLocalKey(pluginId);
  if (localKey) {
    const localSettings = localStorage.getItem(localKey);
    if (localSettings) {
      return JSON.parse(localSettings);
    }
  }
  if (pluginId) {
    const item =
      (_b25 =
        (_a25 = devtoolsPluginBuffer.find((item2) => item2[0].id === pluginId)) == null
          ? void 0
          : _a25[0]) != null
        ? _b25
        : null;
    return _getSettings((_c = item == null ? void 0 : item.settings) != null ? _c : {});
  }
  return _getSettings(fallbackValue);
}
function initPluginSettings(pluginId, settings) {
  const localKey = getPluginLocalKey(pluginId);
  const localSettings = localStorage.getItem(localKey);
  if (!localSettings) {
    localStorage.setItem(localKey, JSON.stringify(_getSettings(settings)));
  }
}
function setPluginSettings(pluginId, key, value) {
  const localKey = getPluginLocalKey(pluginId);
  const localSettings = localStorage.getItem(localKey);
  const parsedLocalSettings = JSON.parse(localSettings || '{}');
  const updated = {
    ...parsedLocalSettings,
    [key]: value,
  };
  localStorage.setItem(localKey, JSON.stringify(updated));
  devtoolsContext.hooks.callHookWith(
    (callbacks) => {
      callbacks.forEach((cb) =>
        cb({
          pluginId,
          key,
          oldValue: parsedLocalSettings[key],
          newValue: value,
          settings: updated,
        }),
      );
    },
    'setPluginSettings',
    /* SET_PLUGIN_SETTINGS */
  );
}
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
var _a11;
var _b11;
var devtoolsHooks =
  (_b11 = (_a11 = target).__VUE_DEVTOOLS_HOOK) != null
    ? _b11
    : (_a11.__VUE_DEVTOOLS_HOOK = createHooks());
var on = {
  vueAppInit(fn) {
    devtoolsHooks.hook('app:init', fn);
  },
  vueAppUnmount(fn) {
    devtoolsHooks.hook('app:unmount', fn);
  },
  vueAppConnected(fn) {
    devtoolsHooks.hook('app:connected', fn);
  },
  componentAdded(fn) {
    return devtoolsHooks.hook('component:added', fn);
  },
  componentEmit(fn) {
    return devtoolsHooks.hook('component:emit', fn);
  },
  componentUpdated(fn) {
    return devtoolsHooks.hook('component:updated', fn);
  },
  componentRemoved(fn) {
    return devtoolsHooks.hook('component:removed', fn);
  },
  setupDevtoolsPlugin(fn) {
    devtoolsHooks.hook('devtools-plugin:setup', fn);
  },
  perfStart(fn) {
    return devtoolsHooks.hook('perf:start', fn);
  },
  perfEnd(fn) {
    return devtoolsHooks.hook('perf:end', fn);
  },
};
var hook = {
  on,
  setupDevToolsPlugin(pluginDescriptor, setupFn) {
    return devtoolsHooks.callHook('devtools-plugin:setup', pluginDescriptor, setupFn);
  },
};
var DevToolsV6PluginAPI = class {
  constructor({ plugin, ctx }) {
    this.hooks = ctx.hooks;
    this.plugin = plugin;
  }
  get on() {
    return {
      // component inspector
      visitComponentTree: (handler) => {
        this.hooks.hook('visitComponentTree', handler);
      },
      inspectComponent: (handler) => {
        this.hooks.hook('inspectComponent', handler);
      },
      editComponentState: (handler) => {
        this.hooks.hook('editComponentState', handler);
      },
      // custom inspector
      getInspectorTree: (handler) => {
        this.hooks.hook('getInspectorTree', handler);
      },
      getInspectorState: (handler) => {
        this.hooks.hook('getInspectorState', handler);
      },
      editInspectorState: (handler) => {
        this.hooks.hook('editInspectorState', handler);
      },
      // timeline
      inspectTimelineEvent: (handler) => {
        this.hooks.hook('inspectTimelineEvent', handler);
      },
      timelineCleared: (handler) => {
        this.hooks.hook('timelineCleared', handler);
      },
      // settings
      setPluginSettings: (handler) => {
        this.hooks.hook('setPluginSettings', handler);
      },
    };
  }
  // component inspector
  notifyComponentUpdate(instance) {
    var _a25;
    if (devtoolsState.highPerfModeEnabled) {
      return;
    }
    const inspector = getActiveInspectors().find(
      (i) => i.packageName === this.plugin.descriptor.packageName,
    );
    if (inspector == null ? void 0 : inspector.id) {
      if (instance) {
        const args = [
          instance.appContext.app,
          instance.uid,
          (_a25 = instance.parent) == null ? void 0 : _a25.uid,
          instance,
        ];
        devtoolsHooks.callHook('component:updated', ...args);
      } else {
        devtoolsHooks.callHook(
          'component:updated',
          /* COMPONENT_UPDATED */
        );
      }
      this.hooks.callHook('sendInspectorState', {
        inspectorId: inspector.id,
        plugin: this.plugin,
      });
    }
  }
  // custom inspector
  addInspector(options) {
    this.hooks.callHook('addInspector', {
      inspector: options,
      plugin: this.plugin,
    });
    if (this.plugin.descriptor.settings) {
      initPluginSettings(options.id, this.plugin.descriptor.settings);
    }
  }
  sendInspectorTree(inspectorId) {
    if (devtoolsState.highPerfModeEnabled) {
      return;
    }
    this.hooks.callHook('sendInspectorTree', {
      inspectorId,
      plugin: this.plugin,
    });
  }
  sendInspectorState(inspectorId) {
    if (devtoolsState.highPerfModeEnabled) {
      return;
    }
    this.hooks.callHook('sendInspectorState', {
      inspectorId,
      plugin: this.plugin,
    });
  }
  selectInspectorNode(inspectorId, nodeId) {
    this.hooks.callHook('customInspectorSelectNode', {
      inspectorId,
      nodeId,
      plugin: this.plugin,
    });
  }
  visitComponentTree(payload) {
    return this.hooks.callHook('visitComponentTree', payload);
  }
  // timeline
  now() {
    if (devtoolsState.highPerfModeEnabled) {
      return 0;
    }
    return Date.now();
  }
  addTimelineLayer(options) {
    this.hooks.callHook('timelineLayerAdded', { options, plugin: this.plugin });
  }
  addTimelineEvent(options) {
    if (devtoolsState.highPerfModeEnabled) {
      return;
    }
    this.hooks.callHook('timelineEventAdded', { options, plugin: this.plugin });
  }
  // settings
  getSettings(pluginId) {
    return getPluginSettings(
      pluginId != null ? pluginId : this.plugin.descriptor.id,
      this.plugin.descriptor.settings,
    );
  }
  // utilities
  getComponentInstances(app) {
    return this.hooks.callHook('getComponentInstances', { app });
  }
  getComponentBounds(instance) {
    return this.hooks.callHook('getComponentBounds', { instance });
  }
  getComponentName(instance) {
    return this.hooks.callHook('getComponentName', { instance });
  }
  highlightElement(instance) {
    const uid = instance.__VUE_DEVTOOLS_NEXT_UID__;
    return this.hooks.callHook('componentHighlight', { uid });
  }
  unhighlightElement() {
    return this.hooks.callHook(
      'componentUnhighlight',
      /* COMPONENT_UNHIGHLIGHT */
    );
  }
};
var DevToolsPluginAPI = DevToolsV6PluginAPI;
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
var UNDEFINED = '__vue_devtool_undefined__';
var INFINITY = '__vue_devtool_infinity__';
var NEGATIVE_INFINITY = '__vue_devtool_negative_infinity__';
var NAN = '__vue_devtool_nan__';
init_esm_shims2();
init_esm_shims2();
var tokenMap = {
  [UNDEFINED]: 'undefined',
  [NAN]: 'NaN',
  [INFINITY]: 'Infinity',
  [NEGATIVE_INFINITY]: '-Infinity',
};
var reversedTokenMap = Object.entries(tokenMap).reduce((acc, [key, value]) => {
  acc[value] = key;
  return acc;
}, {});
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
var _a12;
var _b12;
(_b12 = (_a12 = target).__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__) != null
  ? _b12
  : (_a12.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__ = /* @__PURE__ */ new Set());
function setupDevToolsPlugin(pluginDescriptor, setupFn) {
  return hook.setupDevToolsPlugin(pluginDescriptor, setupFn);
}
function callDevToolsPluginSetupFn(plugin, app) {
  const [pluginDescriptor, setupFn] = plugin;
  if (pluginDescriptor.app !== app) return;
  const api = new DevToolsPluginAPI({
    plugin: {
      setupFn,
      descriptor: pluginDescriptor,
    },
    ctx: devtoolsContext,
  });
  if (pluginDescriptor.packageName === 'vuex') {
    api.on.editInspectorState((payload) => {
      api.sendInspectorState(payload.inspectorId);
    });
  }
  setupFn(api);
}
function registerDevToolsPlugin(app, options) {
  if (target.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.has(app)) {
    return;
  }
  if (
    devtoolsState.highPerfModeEnabled &&
    !(options == null ? void 0 : options.inspectingComponent)
  ) {
    return;
  }
  target.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.add(app);
  devtoolsPluginBuffer.forEach((plugin) => {
    callDevToolsPluginSetupFn(plugin, app);
  });
}
init_esm_shims2();
init_esm_shims2();
var ROUTER_KEY = '__VUE_DEVTOOLS_ROUTER__';
var ROUTER_INFO_KEY = '__VUE_DEVTOOLS_ROUTER_INFO__';
var _a13;
var _b13;
(_b13 = (_a13 = target)[ROUTER_INFO_KEY]) != null
  ? _b13
  : (_a13[ROUTER_INFO_KEY] = {
      currentRoute: null,
      routes: [],
    });
var _a14;
var _b14;
(_b14 = (_a14 = target)[ROUTER_KEY]) != null ? _b14 : (_a14[ROUTER_KEY] = {});
var devtoolsRouterInfo = new Proxy(target[ROUTER_INFO_KEY], {
  get(target22, property) {
    return target[ROUTER_INFO_KEY][property];
  },
});
var devtoolsRouter = new Proxy(target[ROUTER_KEY], {
  get(target22, property) {
    if (property === 'value') {
      return target[ROUTER_KEY];
    }
  },
});
function getRoutes(router) {
  const routesMap = /* @__PURE__ */ new Map();
  return ((router == null ? void 0 : router.getRoutes()) || []).filter(
    (i) => !routesMap.has(i.path) && routesMap.set(i.path, 1),
  );
}
function filterRoutes(routes) {
  return routes.map((item) => {
    let { path, name, children, meta } = item;
    if (children == null ? void 0 : children.length) children = filterRoutes(children);
    return {
      path,
      name,
      children,
      meta,
    };
  });
}
function filterCurrentRoute(route) {
  if (route) {
    const { fullPath, hash, href, path, name, matched, params, query } = route;
    return {
      fullPath,
      hash,
      href,
      path,
      name,
      params,
      query,
      matched: filterRoutes(matched),
    };
  }
  return route;
}
function normalizeRouterInfo(appRecord, activeAppRecord2) {
  function init() {
    var _a25;
    const router = (_a25 = appRecord.app) == null ? void 0 : _a25.config.globalProperties.$router;
    const currentRoute = filterCurrentRoute(router == null ? void 0 : router.currentRoute.value);
    const routes = filterRoutes(getRoutes(router));
    const c = console.warn;
    console.warn = () => {};
    target[ROUTER_INFO_KEY] = {
      currentRoute: currentRoute ? deepClone(currentRoute) : {},
      routes: deepClone(routes),
    };
    target[ROUTER_KEY] = router;
    console.warn = c;
  }
  init();
  hook.on.componentUpdated(
    debounce(() => {
      var _a25;
      if (((_a25 = activeAppRecord2.value) == null ? void 0 : _a25.app) !== appRecord.app) return;
      init();
      if (devtoolsState.highPerfModeEnabled) return;
      devtoolsContext.hooks.callHook('routerInfoUpdated', {
        state: target[ROUTER_INFO_KEY],
      });
    }, 200),
  );
}
function createDevToolsApi(hooks2) {
  return {
    // get inspector tree
    async getInspectorTree(payload) {
      const _payload = {
        ...payload,
        app: activeAppRecord.value.app,
        rootNodes: [],
      };
      await new Promise((resolve) => {
        hooks2.callHookWith(
          async (callbacks) => {
            await Promise.all(callbacks.map((cb) => cb(_payload)));
            resolve();
          },
          'getInspectorTree',
          /* GET_INSPECTOR_TREE */
        );
      });
      return _payload.rootNodes;
    },
    // get inspector state
    async getInspectorState(payload) {
      const _payload = {
        ...payload,
        app: activeAppRecord.value.app,
        state: null,
      };
      const ctx = {
        currentTab: `custom-inspector:${payload.inspectorId}`,
      };
      await new Promise((resolve) => {
        hooks2.callHookWith(
          async (callbacks) => {
            await Promise.all(callbacks.map((cb) => cb(_payload, ctx)));
            resolve();
          },
          'getInspectorState',
          /* GET_INSPECTOR_STATE */
        );
      });
      return _payload.state;
    },
    // edit inspector state
    editInspectorState(payload) {
      const stateEditor2 = new StateEditor();
      const _payload = {
        ...payload,
        app: activeAppRecord.value.app,
        set: (obj, path = payload.path, value = payload.state.value, cb) => {
          stateEditor2.set(
            obj,
            path,
            value,
            cb || stateEditor2.createDefaultSetCallback(payload.state),
          );
        },
      };
      hooks2.callHookWith(
        (callbacks) => {
          callbacks.forEach((cb) => cb(_payload));
        },
        'editInspectorState',
        /* EDIT_INSPECTOR_STATE */
      );
    },
    // send inspector state
    sendInspectorState(inspectorId) {
      const inspector = getInspector(inspectorId);
      hooks2.callHook('sendInspectorState', {
        inspectorId,
        plugin: {
          descriptor: inspector.descriptor,
          setupFn: () => ({}),
        },
      });
    },
    // inspect component inspector
    inspectComponentInspector() {
      return inspectComponentHighLighter();
    },
    // cancel inspect component inspector
    cancelInspectComponentInspector() {
      return cancelInspectComponentHighLighter();
    },
    // get component render code
    getComponentRenderCode(id) {
      const instance = getComponentInstance(activeAppRecord.value, id);
      if (instance)
        return !(typeof (instance == null ? void 0 : instance.type) === 'function')
          ? instance.render.toString()
          : instance.type.toString();
    },
    // scroll to component
    scrollToComponent(id) {
      return scrollToComponent({ id });
    },
    // open in editor
    openInEditor,
    // get vue inspector
    getVueInspector: getComponentInspector,
    // toggle app
    toggleApp(id, options) {
      const appRecord = devtoolsAppRecords.value.find((record) => record.id === id);
      if (appRecord) {
        setActiveAppRecordId(id);
        setActiveAppRecord(appRecord);
        normalizeRouterInfo(appRecord, activeAppRecord);
        callInspectorUpdatedHook();
        registerDevToolsPlugin(appRecord.app, options);
      }
    },
    // inspect dom
    inspectDOM(instanceId) {
      const instance = getComponentInstance(activeAppRecord.value, instanceId);
      if (instance) {
        const [el] = getRootElementsFromComponentInstance(instance);
        if (el) {
          target.__VUE_DEVTOOLS_INSPECT_DOM_TARGET__ = el;
        }
      }
    },
    updatePluginSettings(pluginId, key, value) {
      setPluginSettings(pluginId, key, value);
    },
    getPluginSettings(pluginId) {
      return {
        options: getPluginSettingsOptions(pluginId),
        values: getPluginSettings(pluginId),
      };
    },
  };
}
init_esm_shims2();
var _a15;
var _b15;
(_b15 = (_a15 = target).__VUE_DEVTOOLS_ENV__) != null
  ? _b15
  : (_a15.__VUE_DEVTOOLS_ENV__ = {
      vitePluginDetected: false,
    });
var hooks = createDevToolsCtxHooks();
var _a16;
var _b16;
(_b16 = (_a16 = target).__VUE_DEVTOOLS_KIT_CONTEXT__) != null
  ? _b16
  : (_a16.__VUE_DEVTOOLS_KIT_CONTEXT__ = {
      hooks,
      get state() {
        return {
          ...devtoolsState,
          activeAppRecordId: activeAppRecord.id,
          activeAppRecord: activeAppRecord.value,
          appRecords: devtoolsAppRecords.value,
        };
      },
      api: createDevToolsApi(hooks),
    });
var devtoolsContext = target.__VUE_DEVTOOLS_KIT_CONTEXT__;
init_esm_shims2();
var import_speakingurl = __toESM2(require_speakingurl2(), 1);
var _a17;
var _b17;
var appRecordInfo =
  (_b17 = (_a17 = target).__VUE_DEVTOOLS_NEXT_APP_RECORD_INFO__) != null
    ? _b17
    : (_a17.__VUE_DEVTOOLS_NEXT_APP_RECORD_INFO__ = {
        id: 0,
        appIds: /* @__PURE__ */ new Set(),
      });
function onDevToolsClientConnected(fn) {
  return new Promise((resolve) => {
    if (devtoolsState.connected && devtoolsState.clientConnected) {
      fn();
      resolve();
      return;
    }
    devtoolsContext.hooks.hook('devtoolsConnectedUpdated', ({ state }) => {
      if (state.connected && state.clientConnected) {
        fn();
        resolve();
      }
    });
  });
}
init_esm_shims2();
function toggleHighPerfMode(state) {
  devtoolsState.highPerfModeEnabled = state != null ? state : !devtoolsState.highPerfModeEnabled;
  if (!state && activeAppRecord.value) {
    registerDevToolsPlugin(activeAppRecord.value.app);
  }
}
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
function updateDevToolsClientDetected(params) {
  devtoolsState.devtoolsClientDetected = {
    ...devtoolsState.devtoolsClientDetected,
    ...params,
  };
  const devtoolsClientVisible = Object.values(devtoolsState.devtoolsClientDetected).some(Boolean);
  toggleHighPerfMode(!devtoolsClientVisible);
}
var _a18;
var _b18;
(_b18 = (_a18 = target).__VUE_DEVTOOLS_UPDATE_CLIENT_DETECTED__) != null
  ? _b18
  : (_a18.__VUE_DEVTOOLS_UPDATE_CLIENT_DETECTED__ = updateDevToolsClientDetected);
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
var DoubleIndexedKV = class {
  constructor() {
    this.keyToValue = /* @__PURE__ */ new Map();
    this.valueToKey = /* @__PURE__ */ new Map();
  }
  set(key, value) {
    this.keyToValue.set(key, value);
    this.valueToKey.set(value, key);
  }
  getByKey(key) {
    return this.keyToValue.get(key);
  }
  getByValue(value) {
    return this.valueToKey.get(value);
  }
  clear() {
    this.keyToValue.clear();
    this.valueToKey.clear();
  }
};
var Registry = class {
  constructor(generateIdentifier) {
    this.generateIdentifier = generateIdentifier;
    this.kv = new DoubleIndexedKV();
  }
  register(value, identifier) {
    if (this.kv.getByValue(value)) {
      return;
    }
    if (!identifier) {
      identifier = this.generateIdentifier(value);
    }
    this.kv.set(identifier, value);
  }
  clear() {
    this.kv.clear();
  }
  getIdentifier(value) {
    return this.kv.getByValue(value);
  }
  getValue(identifier) {
    return this.kv.getByKey(identifier);
  }
};
var ClassRegistry = class extends Registry {
  constructor() {
    super((c) => c.name);
    this.classToAllowedProps = /* @__PURE__ */ new Map();
  }
  register(value, options) {
    if (typeof options === 'object') {
      if (options.allowProps) {
        this.classToAllowedProps.set(value, options.allowProps);
      }
      super.register(value, options.identifier);
    } else {
      super.register(value, options);
    }
  }
  getAllowedProps(value) {
    return this.classToAllowedProps.get(value);
  }
};
init_esm_shims2();
init_esm_shims2();
function valuesOfObj(record) {
  if ('values' in Object) {
    return Object.values(record);
  }
  const values = [];
  for (const key in record) {
    if (record.hasOwnProperty(key)) {
      values.push(record[key]);
    }
  }
  return values;
}
function find(record, predicate) {
  const values = valuesOfObj(record);
  if ('find' in values) {
    return values.find(predicate);
  }
  const valuesNotNever = values;
  for (let i = 0; i < valuesNotNever.length; i++) {
    const value = valuesNotNever[i];
    if (predicate(value)) {
      return value;
    }
  }
  return void 0;
}
function forEach(record, run) {
  Object.entries(record).forEach(([key, value]) => run(value, key));
}
function includes(arr, value) {
  return arr.indexOf(value) !== -1;
}
function findArr(record, predicate) {
  for (let i = 0; i < record.length; i++) {
    const value = record[i];
    if (predicate(value)) {
      return value;
    }
  }
  return void 0;
}
var CustomTransformerRegistry = class {
  constructor() {
    this.transfomers = {};
  }
  register(transformer) {
    this.transfomers[transformer.name] = transformer;
  }
  findApplicable(v) {
    return find(this.transfomers, (transformer) => transformer.isApplicable(v));
  }
  findByName(name) {
    return this.transfomers[name];
  }
};
init_esm_shims2();
init_esm_shims2();
var getType = (payload) => Object.prototype.toString.call(payload).slice(8, -1);
var isUndefined = (payload) => typeof payload === 'undefined';
var isNull = (payload) => payload === null;
var isPlainObject2 = (payload) => {
  if (typeof payload !== 'object' || payload === null) return false;
  if (payload === Object.prototype) return false;
  if (Object.getPrototypeOf(payload) === null) return true;
  return Object.getPrototypeOf(payload) === Object.prototype;
};
var isEmptyObject = (payload) => isPlainObject2(payload) && Object.keys(payload).length === 0;
var isArray = (payload) => Array.isArray(payload);
var isString = (payload) => typeof payload === 'string';
var isNumber = (payload) => typeof payload === 'number' && !isNaN(payload);
var isBoolean = (payload) => typeof payload === 'boolean';
var isRegExp = (payload) => payload instanceof RegExp;
var isMap = (payload) => payload instanceof Map;
var isSet = (payload) => payload instanceof Set;
var isSymbol = (payload) => getType(payload) === 'Symbol';
var isDate = (payload) => payload instanceof Date && !isNaN(payload.valueOf());
var isError = (payload) => payload instanceof Error;
var isNaNValue = (payload) => typeof payload === 'number' && isNaN(payload);
var isPrimitive2 = (payload) =>
  isBoolean(payload) ||
  isNull(payload) ||
  isUndefined(payload) ||
  isNumber(payload) ||
  isString(payload) ||
  isSymbol(payload);
var isBigint = (payload) => typeof payload === 'bigint';
var isInfinite = (payload) => payload === Infinity || payload === -Infinity;
var isTypedArray = (payload) => ArrayBuffer.isView(payload) && !(payload instanceof DataView);
var isURL = (payload) => payload instanceof URL;
init_esm_shims2();
var escapeKey = (key) => key.replace(/\./g, '\\.');
var stringifyPath = (path) => path.map(String).map(escapeKey).join('.');
var parsePath = (string) => {
  const result = [];
  let segment = '';
  for (let i = 0; i < string.length; i++) {
    let char = string.charAt(i);
    const isEscapedDot = char === '\\' && string.charAt(i + 1) === '.';
    if (isEscapedDot) {
      segment += '.';
      i++;
      continue;
    }
    const isEndOfSegment = char === '.';
    if (isEndOfSegment) {
      result.push(segment);
      segment = '';
      continue;
    }
    segment += char;
  }
  const lastSegment = segment;
  result.push(lastSegment);
  return result;
};
init_esm_shims2();
function simpleTransformation(isApplicable, annotation, transform, untransform) {
  return {
    isApplicable,
    annotation,
    transform,
    untransform,
  };
}
var simpleRules = [
  simpleTransformation(
    isUndefined,
    'undefined',
    () => null,
    () => void 0,
  ),
  simpleTransformation(
    isBigint,
    'bigint',
    (v) => v.toString(),
    (v) => {
      if (typeof BigInt !== 'undefined') {
        return BigInt(v);
      }
      console.error('Please add a BigInt polyfill.');
      return v;
    },
  ),
  simpleTransformation(
    isDate,
    'Date',
    (v) => v.toISOString(),
    (v) => new Date(v),
  ),
  simpleTransformation(
    isError,
    'Error',
    (v, superJson) => {
      const baseError = {
        name: v.name,
        message: v.message,
      };
      superJson.allowedErrorProps.forEach((prop) => {
        baseError[prop] = v[prop];
      });
      return baseError;
    },
    (v, superJson) => {
      const e = new Error(v.message);
      e.name = v.name;
      e.stack = v.stack;
      superJson.allowedErrorProps.forEach((prop) => {
        e[prop] = v[prop];
      });
      return e;
    },
  ),
  simpleTransformation(
    isRegExp,
    'regexp',
    (v) => '' + v,
    (regex) => {
      const body = regex.slice(1, regex.lastIndexOf('/'));
      const flags = regex.slice(regex.lastIndexOf('/') + 1);
      return new RegExp(body, flags);
    },
  ),
  simpleTransformation(
    isSet,
    'set',
    // (sets only exist in es6+)
    // eslint-disable-next-line es5/no-es6-methods
    (v) => [...v.values()],
    (v) => new Set(v),
  ),
  simpleTransformation(
    isMap,
    'map',
    (v) => [...v.entries()],
    (v) => new Map(v),
  ),
  simpleTransformation(
    (v) => isNaNValue(v) || isInfinite(v),
    'number',
    (v) => {
      if (isNaNValue(v)) {
        return 'NaN';
      }
      if (v > 0) {
        return 'Infinity';
      } else {
        return '-Infinity';
      }
    },
    Number,
  ),
  simpleTransformation(
    (v) => v === 0 && 1 / v === -Infinity,
    'number',
    () => {
      return '-0';
    },
    Number,
  ),
  simpleTransformation(
    isURL,
    'URL',
    (v) => v.toString(),
    (v) => new URL(v),
  ),
];
function compositeTransformation(isApplicable, annotation, transform, untransform) {
  return {
    isApplicable,
    annotation,
    transform,
    untransform,
  };
}
var symbolRule = compositeTransformation(
  (s, superJson) => {
    if (isSymbol(s)) {
      const isRegistered = !!superJson.symbolRegistry.getIdentifier(s);
      return isRegistered;
    }
    return false;
  },
  (s, superJson) => {
    const identifier = superJson.symbolRegistry.getIdentifier(s);
    return ['symbol', identifier];
  },
  (v) => v.description,
  (_, a, superJson) => {
    const value = superJson.symbolRegistry.getValue(a[1]);
    if (!value) {
      throw new Error('Trying to deserialize unknown symbol');
    }
    return value;
  },
);
var constructorToName = [
  Int8Array,
  Uint8Array,
  Int16Array,
  Uint16Array,
  Int32Array,
  Uint32Array,
  Float32Array,
  Float64Array,
  Uint8ClampedArray,
].reduce((obj, ctor) => {
  obj[ctor.name] = ctor;
  return obj;
}, {});
var typedArrayRule = compositeTransformation(
  isTypedArray,
  (v) => ['typed-array', v.constructor.name],
  (v) => [...v],
  (v, a) => {
    const ctor = constructorToName[a[1]];
    if (!ctor) {
      throw new Error('Trying to deserialize unknown typed array');
    }
    return new ctor(v);
  },
);
function isInstanceOfRegisteredClass(potentialClass, superJson) {
  if (potentialClass == null ? void 0 : potentialClass.constructor) {
    const isRegistered = !!superJson.classRegistry.getIdentifier(potentialClass.constructor);
    return isRegistered;
  }
  return false;
}
var classRule = compositeTransformation(
  isInstanceOfRegisteredClass,
  (clazz, superJson) => {
    const identifier = superJson.classRegistry.getIdentifier(clazz.constructor);
    return ['class', identifier];
  },
  (clazz, superJson) => {
    const allowedProps = superJson.classRegistry.getAllowedProps(clazz.constructor);
    if (!allowedProps) {
      return { ...clazz };
    }
    const result = {};
    allowedProps.forEach((prop) => {
      result[prop] = clazz[prop];
    });
    return result;
  },
  (v, a, superJson) => {
    const clazz = superJson.classRegistry.getValue(a[1]);
    if (!clazz) {
      throw new Error(
        `Trying to deserialize unknown class '${a[1]}' - check https://github.com/blitz-js/superjson/issues/116#issuecomment-773996564`,
      );
    }
    return Object.assign(Object.create(clazz.prototype), v);
  },
);
var customRule = compositeTransformation(
  (value, superJson) => {
    return !!superJson.customTransformerRegistry.findApplicable(value);
  },
  (value, superJson) => {
    const transformer = superJson.customTransformerRegistry.findApplicable(value);
    return ['custom', transformer.name];
  },
  (value, superJson) => {
    const transformer = superJson.customTransformerRegistry.findApplicable(value);
    return transformer.serialize(value);
  },
  (v, a, superJson) => {
    const transformer = superJson.customTransformerRegistry.findByName(a[1]);
    if (!transformer) {
      throw new Error('Trying to deserialize unknown custom value');
    }
    return transformer.deserialize(v);
  },
);
var compositeRules = [classRule, symbolRule, customRule, typedArrayRule];
var transformValue = (value, superJson) => {
  const applicableCompositeRule = findArr(compositeRules, (rule) =>
    rule.isApplicable(value, superJson),
  );
  if (applicableCompositeRule) {
    return {
      value: applicableCompositeRule.transform(value, superJson),
      type: applicableCompositeRule.annotation(value, superJson),
    };
  }
  const applicableSimpleRule = findArr(simpleRules, (rule) => rule.isApplicable(value, superJson));
  if (applicableSimpleRule) {
    return {
      value: applicableSimpleRule.transform(value, superJson),
      type: applicableSimpleRule.annotation,
    };
  }
  return void 0;
};
var simpleRulesByAnnotation = {};
simpleRules.forEach((rule) => {
  simpleRulesByAnnotation[rule.annotation] = rule;
});
var untransformValue = (json, type, superJson) => {
  if (isArray(type)) {
    switch (type[0]) {
      case 'symbol':
        return symbolRule.untransform(json, type, superJson);
      case 'class':
        return classRule.untransform(json, type, superJson);
      case 'custom':
        return customRule.untransform(json, type, superJson);
      case 'typed-array':
        return typedArrayRule.untransform(json, type, superJson);
      default:
        throw new Error('Unknown transformation: ' + type);
    }
  } else {
    const transformation = simpleRulesByAnnotation[type];
    if (!transformation) {
      throw new Error('Unknown transformation: ' + type);
    }
    return transformation.untransform(json, superJson);
  }
};
init_esm_shims2();
var getNthKey = (value, n) => {
  if (n > value.size) throw new Error('index out of bounds');
  const keys = value.keys();
  while (n > 0) {
    keys.next();
    n--;
  }
  return keys.next().value;
};
function validatePath(path) {
  if (includes(path, '__proto__')) {
    throw new Error('__proto__ is not allowed as a property');
  }
  if (includes(path, 'prototype')) {
    throw new Error('prototype is not allowed as a property');
  }
  if (includes(path, 'constructor')) {
    throw new Error('constructor is not allowed as a property');
  }
}
var getDeep = (object, path) => {
  validatePath(path);
  for (let i = 0; i < path.length; i++) {
    const key = path[i];
    if (isSet(object)) {
      object = getNthKey(object, +key);
    } else if (isMap(object)) {
      const row = +key;
      const type = +path[++i] === 0 ? 'key' : 'value';
      const keyOfRow = getNthKey(object, row);
      switch (type) {
        case 'key':
          object = keyOfRow;
          break;
        case 'value':
          object = object.get(keyOfRow);
          break;
      }
    } else {
      object = object[key];
    }
  }
  return object;
};
var setDeep = (object, path, mapper) => {
  validatePath(path);
  if (path.length === 0) {
    return mapper(object);
  }
  let parent = object;
  for (let i = 0; i < path.length - 1; i++) {
    const key = path[i];
    if (isArray(parent)) {
      const index = +key;
      parent = parent[index];
    } else if (isPlainObject2(parent)) {
      parent = parent[key];
    } else if (isSet(parent)) {
      const row = +key;
      parent = getNthKey(parent, row);
    } else if (isMap(parent)) {
      const isEnd = i === path.length - 2;
      if (isEnd) {
        break;
      }
      const row = +key;
      const type = +path[++i] === 0 ? 'key' : 'value';
      const keyOfRow = getNthKey(parent, row);
      switch (type) {
        case 'key':
          parent = keyOfRow;
          break;
        case 'value':
          parent = parent.get(keyOfRow);
          break;
      }
    }
  }
  const lastKey = path[path.length - 1];
  if (isArray(parent)) {
    parent[+lastKey] = mapper(parent[+lastKey]);
  } else if (isPlainObject2(parent)) {
    parent[lastKey] = mapper(parent[lastKey]);
  }
  if (isSet(parent)) {
    const oldValue = getNthKey(parent, +lastKey);
    const newValue = mapper(oldValue);
    if (oldValue !== newValue) {
      parent.delete(oldValue);
      parent.add(newValue);
    }
  }
  if (isMap(parent)) {
    const row = +path[path.length - 2];
    const keyToRow = getNthKey(parent, row);
    const type = +lastKey === 0 ? 'key' : 'value';
    switch (type) {
      case 'key': {
        const newKey = mapper(keyToRow);
        parent.set(newKey, parent.get(keyToRow));
        if (newKey !== keyToRow) {
          parent.delete(keyToRow);
        }
        break;
      }
      case 'value': {
        parent.set(keyToRow, mapper(parent.get(keyToRow)));
        break;
      }
    }
  }
  return object;
};
function traverse(tree, walker2, origin = []) {
  if (!tree) {
    return;
  }
  if (!isArray(tree)) {
    forEach(tree, (subtree, key) => traverse(subtree, walker2, [...origin, ...parsePath(key)]));
    return;
  }
  const [nodeValue, children] = tree;
  if (children) {
    forEach(children, (child, key) => {
      traverse(child, walker2, [...origin, ...parsePath(key)]);
    });
  }
  walker2(nodeValue, origin);
}
function applyValueAnnotations(plain, annotations, superJson) {
  traverse(annotations, (type, path) => {
    plain = setDeep(plain, path, (v) => untransformValue(v, type, superJson));
  });
  return plain;
}
function applyReferentialEqualityAnnotations(plain, annotations) {
  function apply(identicalPaths, path) {
    const object = getDeep(plain, parsePath(path));
    identicalPaths.map(parsePath).forEach((identicalObjectPath) => {
      plain = setDeep(plain, identicalObjectPath, () => object);
    });
  }
  if (isArray(annotations)) {
    const [root, other] = annotations;
    root.forEach((identicalPath) => {
      plain = setDeep(plain, parsePath(identicalPath), () => plain);
    });
    if (other) {
      forEach(other, apply);
    }
  } else {
    forEach(annotations, apply);
  }
  return plain;
}
var isDeep = (object, superJson) =>
  isPlainObject2(object) ||
  isArray(object) ||
  isMap(object) ||
  isSet(object) ||
  isInstanceOfRegisteredClass(object, superJson);
function addIdentity(object, path, identities) {
  const existingSet = identities.get(object);
  if (existingSet) {
    existingSet.push(path);
  } else {
    identities.set(object, [path]);
  }
}
function generateReferentialEqualityAnnotations(identitites, dedupe) {
  const result = {};
  let rootEqualityPaths = void 0;
  identitites.forEach((paths) => {
    if (paths.length <= 1) {
      return;
    }
    if (!dedupe) {
      paths = paths.map((path) => path.map(String)).sort((a, b) => a.length - b.length);
    }
    const [representativePath, ...identicalPaths] = paths;
    if (representativePath.length === 0) {
      rootEqualityPaths = identicalPaths.map(stringifyPath);
    } else {
      result[stringifyPath(representativePath)] = identicalPaths.map(stringifyPath);
    }
  });
  if (rootEqualityPaths) {
    if (isEmptyObject(result)) {
      return [rootEqualityPaths];
    } else {
      return [rootEqualityPaths, result];
    }
  } else {
    return isEmptyObject(result) ? void 0 : result;
  }
}
var walker = (
  object,
  identities,
  superJson,
  dedupe,
  path = [],
  objectsInThisPath = [],
  seenObjects = /* @__PURE__ */ new Map(),
) => {
  var _a25;
  const primitive = isPrimitive2(object);
  if (!primitive) {
    addIdentity(object, path, identities);
    const seen = seenObjects.get(object);
    if (seen) {
      return dedupe
        ? {
            transformedValue: null,
          }
        : seen;
    }
  }
  if (!isDeep(object, superJson)) {
    const transformed2 = transformValue(object, superJson);
    const result2 = transformed2
      ? {
          transformedValue: transformed2.value,
          annotations: [transformed2.type],
        }
      : {
          transformedValue: object,
        };
    if (!primitive) {
      seenObjects.set(object, result2);
    }
    return result2;
  }
  if (includes(objectsInThisPath, object)) {
    return {
      transformedValue: null,
    };
  }
  const transformationResult = transformValue(object, superJson);
  const transformed =
    (_a25 = transformationResult == null ? void 0 : transformationResult.value) != null
      ? _a25
      : object;
  const transformedValue = isArray(transformed) ? [] : {};
  const innerAnnotations = {};
  forEach(transformed, (value, index) => {
    if (index === '__proto__' || index === 'constructor' || index === 'prototype') {
      throw new Error(
        `Detected property ${index}. This is a prototype pollution risk, please remove it from your object.`,
      );
    }
    const recursiveResult = walker(
      value,
      identities,
      superJson,
      dedupe,
      [...path, index],
      [...objectsInThisPath, object],
      seenObjects,
    );
    transformedValue[index] = recursiveResult.transformedValue;
    if (isArray(recursiveResult.annotations)) {
      innerAnnotations[index] = recursiveResult.annotations;
    } else if (isPlainObject2(recursiveResult.annotations)) {
      forEach(recursiveResult.annotations, (tree, key) => {
        innerAnnotations[escapeKey(index) + '.' + key] = tree;
      });
    }
  });
  const result = isEmptyObject(innerAnnotations)
    ? {
        transformedValue,
        annotations: !!transformationResult ? [transformationResult.type] : void 0,
      }
    : {
        transformedValue,
        annotations: !!transformationResult
          ? [transformationResult.type, innerAnnotations]
          : innerAnnotations,
      };
  if (!primitive) {
    seenObjects.set(object, result);
  }
  return result;
};
init_esm_shims2();
init_esm_shims2();
function getType2(payload) {
  return Object.prototype.toString.call(payload).slice(8, -1);
}
function isArray2(payload) {
  return getType2(payload) === 'Array';
}
function isPlainObject3(payload) {
  if (getType2(payload) !== 'Object') return false;
  const prototype = Object.getPrototypeOf(payload);
  return !!prototype && prototype.constructor === Object && prototype === Object.prototype;
}
function isNull2(payload) {
  return getType2(payload) === 'Null';
}
function isOneOf(a, b, c, d, e) {
  return (value) =>
    a(value) || b(value) || (!!c && c(value)) || (!!d && d(value)) || (!!e && e(value));
}
function isUndefined2(payload) {
  return getType2(payload) === 'Undefined';
}
var isNullOrUndefined = isOneOf(isNull2, isUndefined2);
function assignProp(carry, key, newVal, originalObject, includeNonenumerable) {
  const propType = {}.propertyIsEnumerable.call(originalObject, key)
    ? 'enumerable'
    : 'nonenumerable';
  if (propType === 'enumerable') carry[key] = newVal;
  if (includeNonenumerable && propType === 'nonenumerable') {
    Object.defineProperty(carry, key, {
      value: newVal,
      enumerable: false,
      writable: true,
      configurable: true,
    });
  }
}
function copy(target22, options = {}) {
  if (isArray2(target22)) {
    return target22.map((item) => copy(item, options));
  }
  if (!isPlainObject3(target22)) {
    return target22;
  }
  const props = Object.getOwnPropertyNames(target22);
  const symbols = Object.getOwnPropertySymbols(target22);
  return [...props, ...symbols].reduce((carry, key) => {
    if (isArray2(options.props) && !options.props.includes(key)) {
      return carry;
    }
    const val = target22[key];
    const newVal = copy(val, options);
    assignProp(carry, key, newVal, target22, options.nonenumerable);
    return carry;
  }, {});
}
var SuperJSON = class {
  /**
   * @param dedupeReferentialEqualities  If true, SuperJSON will make sure only one instance of referentially equal objects are serialized and the rest are replaced with `null`.
   */
  constructor({ dedupe = false } = {}) {
    this.classRegistry = new ClassRegistry();
    this.symbolRegistry = new Registry((s) => {
      var _a25;
      return (_a25 = s.description) != null ? _a25 : '';
    });
    this.customTransformerRegistry = new CustomTransformerRegistry();
    this.allowedErrorProps = [];
    this.dedupe = dedupe;
  }
  serialize(object) {
    const identities = /* @__PURE__ */ new Map();
    const output = walker(object, identities, this, this.dedupe);
    const res = {
      json: output.transformedValue,
    };
    if (output.annotations) {
      res.meta = {
        ...res.meta,
        values: output.annotations,
      };
    }
    const equalityAnnotations = generateReferentialEqualityAnnotations(identities, this.dedupe);
    if (equalityAnnotations) {
      res.meta = {
        ...res.meta,
        referentialEqualities: equalityAnnotations,
      };
    }
    return res;
  }
  deserialize(payload) {
    const { json, meta } = payload;
    let result = copy(json);
    if (meta == null ? void 0 : meta.values) {
      result = applyValueAnnotations(result, meta.values, this);
    }
    if (meta == null ? void 0 : meta.referentialEqualities) {
      result = applyReferentialEqualityAnnotations(result, meta.referentialEqualities);
    }
    return result;
  }
  stringify(object) {
    return JSON.stringify(this.serialize(object));
  }
  parse(string) {
    return this.deserialize(JSON.parse(string));
  }
  registerClass(v, options) {
    this.classRegistry.register(v, options);
  }
  registerSymbol(v, identifier) {
    this.symbolRegistry.register(v, identifier);
  }
  registerCustom(transformer, name) {
    this.customTransformerRegistry.register({
      name,
      ...transformer,
    });
  }
  allowErrorProps(...props) {
    this.allowedErrorProps.push(...props);
  }
};
SuperJSON.defaultInstance = new SuperJSON();
SuperJSON.serialize = SuperJSON.defaultInstance.serialize.bind(SuperJSON.defaultInstance);
SuperJSON.deserialize = SuperJSON.defaultInstance.deserialize.bind(SuperJSON.defaultInstance);
SuperJSON.stringify = SuperJSON.defaultInstance.stringify.bind(SuperJSON.defaultInstance);
SuperJSON.parse = SuperJSON.defaultInstance.parse.bind(SuperJSON.defaultInstance);
SuperJSON.registerClass = SuperJSON.defaultInstance.registerClass.bind(SuperJSON.defaultInstance);
SuperJSON.registerSymbol = SuperJSON.defaultInstance.registerSymbol.bind(SuperJSON.defaultInstance);
SuperJSON.registerCustom = SuperJSON.defaultInstance.registerCustom.bind(SuperJSON.defaultInstance);
SuperJSON.allowErrorProps = SuperJSON.defaultInstance.allowErrorProps.bind(
  SuperJSON.defaultInstance,
);
var serialize = SuperJSON.serialize;
var deserialize = SuperJSON.deserialize;
var stringify = SuperJSON.stringify;
var parse = SuperJSON.parse;
var registerClass = SuperJSON.registerClass;
var registerCustom = SuperJSON.registerCustom;
var registerSymbol = SuperJSON.registerSymbol;
var allowErrorProps = SuperJSON.allowErrorProps;
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
var _a19;
var _b19;
(_b19 = (_a19 = target).__VUE_DEVTOOLS_KIT_MESSAGE_CHANNELS__) != null
  ? _b19
  : (_a19.__VUE_DEVTOOLS_KIT_MESSAGE_CHANNELS__ = []);
var _a20;
var _b20;
(_b20 = (_a20 = target).__VUE_DEVTOOLS_KIT_RPC_CLIENT__) != null
  ? _b20
  : (_a20.__VUE_DEVTOOLS_KIT_RPC_CLIENT__ = null);
var _a21;
var _b21;
(_b21 = (_a21 = target).__VUE_DEVTOOLS_KIT_RPC_SERVER__) != null
  ? _b21
  : (_a21.__VUE_DEVTOOLS_KIT_RPC_SERVER__ = null);
var _a222;
var _b22;
(_b22 = (_a222 = target).__VUE_DEVTOOLS_KIT_VITE_RPC_CLIENT__) != null
  ? _b22
  : (_a222.__VUE_DEVTOOLS_KIT_VITE_RPC_CLIENT__ = null);
var _a23;
var _b23;
(_b23 = (_a23 = target).__VUE_DEVTOOLS_KIT_VITE_RPC_SERVER__) != null
  ? _b23
  : (_a23.__VUE_DEVTOOLS_KIT_VITE_RPC_SERVER__ = null);
var _a24;
var _b24;
(_b24 = (_a24 = target).__VUE_DEVTOOLS_KIT_BROADCAST_RPC_SERVER__) != null
  ? _b24
  : (_a24.__VUE_DEVTOOLS_KIT_BROADCAST_RPC_SERVER__ = null);
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
init_esm_shims2();
var MAX_SERIALIZED_SIZE = 2 * 1024 * 1024;
export {
  addCustomCommand,
  addCustomTab,
  onDevToolsClientConnected,
  onDevToolsConnected,
  removeCustomCommand,
  setupDevToolsPlugin,
  setupDevToolsPlugin as setupDevtoolsPlugin,
};
//# sourceMappingURL=vitepress___@vue_devtools-api.js.map

```

## /docs/.vitepress/cache/deps/vitepress___@vueuse_core.js

```js path="/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js" 
import {
  DefaultMagicKeysAliasMap,
  StorageSerializers,
  TransitionPresets,
  assert,
  breakpointsAntDesign,
  breakpointsBootstrapV5,
  breakpointsElement,
  breakpointsMasterCss,
  breakpointsPrimeFlex,
  breakpointsQuasar,
  breakpointsSematic,
  breakpointsTailwind,
  breakpointsVuetify,
  breakpointsVuetifyV2,
  breakpointsVuetifyV3,
  bypassFilter,
  camelize,
  clamp,
  cloneFnJSON,
  computedAsync,
  computedEager,
  computedInject,
  computedWithControl,
  containsProp,
  controlledRef,
  createEventHook,
  createFetch,
  createFilterWrapper,
  createGlobalState,
  createInjectionState,
  createRef,
  createReusableTemplate,
  createSharedComposable,
  createSingletonPromise,
  createTemplatePromise,
  createUnrefFn,
  customStorageEventName,
  debounceFilter,
  defaultDocument,
  defaultLocation,
  defaultNavigator,
  defaultWindow,
  executeTransition,
  extendRef,
  formatDate,
  formatTimeAgo,
  get,
  getLifeCycleTarget,
  getSSRHandler,
  hasOwn,
  hyphenate,
  identity,
  increaseWithUnit,
  injectLocal,
  invoke,
  isClient,
  isDef,
  isDefined,
  isIOS,
  isObject,
  isWorker,
  makeDestructurable,
  mapGamepadToXbox360Controller,
  noop,
  normalizeDate,
  notNullish,
  now,
  objectEntries,
  objectOmit,
  objectPick,
  onClickOutside,
  onElementRemoval,
  onKeyDown,
  onKeyPressed,
  onKeyStroke,
  onKeyUp,
  onLongPress,
  onStartTyping,
  pausableFilter,
  promiseTimeout,
  provideLocal,
  provideSSRWidth,
  pxValue,
  rand,
  reactify,
  reactifyObject,
  reactiveComputed,
  reactiveOmit,
  reactivePick,
  refAutoReset,
  refDebounced,
  refDefault,
  refThrottled,
  refWithControl,
  resolveRef,
  resolveUnref,
  set,
  setSSRHandler,
  syncRef,
  syncRefs,
  templateRef,
  throttleFilter,
  timestamp,
  toArray,
  toReactive,
  toRef,
  toRefs,
  toValue,
  tryOnBeforeMount,
  tryOnBeforeUnmount,
  tryOnMounted,
  tryOnScopeDispose,
  tryOnUnmounted,
  unrefElement,
  until,
  useActiveElement,
  useAnimate,
  useArrayDifference,
  useArrayEvery,
  useArrayFilter,
  useArrayFind,
  useArrayFindIndex,
  useArrayFindLast,
  useArrayIncludes,
  useArrayJoin,
  useArrayMap,
  useArrayReduce,
  useArraySome,
  useArrayUnique,
  useAsyncQueue,
  useAsyncState,
  useBase64,
  useBattery,
  useBluetooth,
  useBreakpoints,
  useBroadcastChannel,
  useBrowserLocation,
  useCached,
  useClipboard,
  useClipboardItems,
  useCloned,
  useColorMode,
  useConfirmDialog,
  useCountdown,
  useCounter,
  useCssVar,
  useCurrentElement,
  useCycleList,
  useDark,
  useDateFormat,
  useDebounceFn,
  useDebouncedRefHistory,
  useDeviceMotion,
  useDeviceOrientation,
  useDevicePixelRatio,
  useDevicesList,
  useDisplayMedia,
  useDocumentVisibility,
  useDraggable,
  useDropZone,
  useElementBounding,
  useElementByPoint,
  useElementHover,
  useElementSize,
  useElementVisibility,
  useEventBus,
  useEventListener,
  useEventSource,
  useEyeDropper,
  useFavicon,
  useFetch,
  useFileDialog,
  useFileSystemAccess,
  useFocus,
  useFocusWithin,
  useFps,
  useFullscreen,
  useGamepad,
  useGeolocation,
  useIdle,
  useImage,
  useInfiniteScroll,
  useIntersectionObserver,
  useInterval,
  useIntervalFn,
  useKeyModifier,
  useLastChanged,
  useLocalStorage,
  useMagicKeys,
  useManualRefHistory,
  useMediaControls,
  useMediaQuery,
  useMemoize,
  useMemory,
  useMounted,
  useMouse,
  useMouseInElement,
  useMousePressed,
  useMutationObserver,
  useNavigatorLanguage,
  useNetwork,
  useNow,
  useObjectUrl,
  useOffsetPagination,
  useOnline,
  usePageLeave,
  useParallax,
  useParentElement,
  usePerformanceObserver,
  usePermission,
  usePointer,
  usePointerLock,
  usePointerSwipe,
  usePreferredColorScheme,
  usePreferredContrast,
  usePreferredDark,
  usePreferredLanguages,
  usePreferredReducedMotion,
  usePreferredReducedTransparency,
  usePrevious,
  useRafFn,
  useRefHistory,
  useResizeObserver,
  useSSRWidth,
  useScreenOrientation,
  useScreenSafeArea,
  useScriptTag,
  useScroll,
  useScrollLock,
  useSessionStorage,
  useShare,
  useSorted,
  useSpeechRecognition,
  useSpeechSynthesis,
  useStepper,
  useStorage,
  useStorageAsync,
  useStyleTag,
  useSupported,
  useSwipe,
  useTemplateRefsList,
  useTextDirection,
  useTextSelection,
  useTextareaAutosize,
  useThrottleFn,
  useThrottledRefHistory,
  useTimeAgo,
  useTimeout,
  useTimeoutFn,
  useTimeoutPoll,
  useTimestamp,
  useTitle,
  useToNumber,
  useToString,
  useToggle,
  useTransition,
  useUrlSearchParams,
  useUserMedia,
  useVModel,
  useVModels,
  useVibrate,
  useVirtualList,
  useWakeLock,
  useWebNotification,
  useWebSocket,
  useWebWorker,
  useWebWorkerFn,
  useWindowFocus,
  useWindowScroll,
  useWindowSize,
  watchArray,
  watchAtMost,
  watchDebounced,
  watchDeep,
  watchIgnorable,
  watchImmediate,
  watchOnce,
  watchPausable,
  watchThrottled,
  watchTriggerable,
  watchWithFilter,
  whenever,
} from './chunk-5SIPG2HA.js';
import './chunk-O3I43HSE.js';
export {
  DefaultMagicKeysAliasMap,
  StorageSerializers,
  TransitionPresets,
  assert,
  computedAsync as asyncComputed,
  refAutoReset as autoResetRef,
  breakpointsAntDesign,
  breakpointsBootstrapV5,
  breakpointsElement,
  breakpointsMasterCss,
  breakpointsPrimeFlex,
  breakpointsQuasar,
  breakpointsSematic,
  breakpointsTailwind,
  breakpointsVuetify,
  breakpointsVuetifyV2,
  breakpointsVuetifyV3,
  bypassFilter,
  camelize,
  clamp,
  cloneFnJSON,
  computedAsync,
  computedEager,
  computedInject,
  computedWithControl,
  containsProp,
  computedWithControl as controlledComputed,
  controlledRef,
  createEventHook,
  createFetch,
  createFilterWrapper,
  createGlobalState,
  createInjectionState,
  reactify as createReactiveFn,
  createRef,
  createReusableTemplate,
  createSharedComposable,
  createSingletonPromise,
  createTemplatePromise,
  createUnrefFn,
  customStorageEventName,
  debounceFilter,
  refDebounced as debouncedRef,
  watchDebounced as debouncedWatch,
  defaultDocument,
  defaultLocation,
  defaultNavigator,
  defaultWindow,
  computedEager as eagerComputed,
  executeTransition,
  extendRef,
  formatDate,
  formatTimeAgo,
  get,
  getLifeCycleTarget,
  getSSRHandler,
  hasOwn,
  hyphenate,
  identity,
  watchIgnorable as ignorableWatch,
  increaseWithUnit,
  injectLocal,
  invoke,
  isClient,
  isDef,
  isDefined,
  isIOS,
  isObject,
  isWorker,
  makeDestructurable,
  mapGamepadToXbox360Controller,
  noop,
  normalizeDate,
  notNullish,
  now,
  objectEntries,
  objectOmit,
  objectPick,
  onClickOutside,
  onElementRemoval,
  onKeyDown,
  onKeyPressed,
  onKeyStroke,
  onKeyUp,
  onLongPress,
  onStartTyping,
  pausableFilter,
  watchPausable as pausableWatch,
  promiseTimeout,
  provideLocal,
  provideSSRWidth,
  pxValue,
  rand,
  reactify,
  reactifyObject,
  reactiveComputed,
  reactiveOmit,
  reactivePick,
  refAutoReset,
  refDebounced,
  refDefault,
  refThrottled,
  refWithControl,
  resolveRef,
  resolveUnref,
  set,
  setSSRHandler,
  syncRef,
  syncRefs,
  templateRef,
  throttleFilter,
  refThrottled as throttledRef,
  watchThrottled as throttledWatch,
  timestamp,
  toArray,
  toReactive,
  toRef,
  toRefs,
  toValue,
  tryOnBeforeMount,
  tryOnBeforeUnmount,
  tryOnMounted,
  tryOnScopeDispose,
  tryOnUnmounted,
  unrefElement,
  until,
  useActiveElement,
  useAnimate,
  useArrayDifference,
  useArrayEvery,
  useArrayFilter,
  useArrayFind,
  useArrayFindIndex,
  useArrayFindLast,
  useArrayIncludes,
  useArrayJoin,
  useArrayMap,
  useArrayReduce,
  useArraySome,
  useArrayUnique,
  useAsyncQueue,
  useAsyncState,
  useBase64,
  useBattery,
  useBluetooth,
  useBreakpoints,
  useBroadcastChannel,
  useBrowserLocation,
  useCached,
  useClipboard,
  useClipboardItems,
  useCloned,
  useColorMode,
  useConfirmDialog,
  useCountdown,
  useCounter,
  useCssVar,
  useCurrentElement,
  useCycleList,
  useDark,
  useDateFormat,
  refDebounced as useDebounce,
  useDebounceFn,
  useDebouncedRefHistory,
  useDeviceMotion,
  useDeviceOrientation,
  useDevicePixelRatio,
  useDevicesList,
  useDisplayMedia,
  useDocumentVisibility,
  useDraggable,
  useDropZone,
  useElementBounding,
  useElementByPoint,
  useElementHover,
  useElementSize,
  useElementVisibility,
  useEventBus,
  useEventListener,
  useEventSource,
  useEyeDropper,
  useFavicon,
  useFetch,
  useFileDialog,
  useFileSystemAccess,
  useFocus,
  useFocusWithin,
  useFps,
  useFullscreen,
  useGamepad,
  useGeolocation,
  useIdle,
  useImage,
  useInfiniteScroll,
  useIntersectionObserver,
  useInterval,
  useIntervalFn,
  useKeyModifier,
  useLastChanged,
  useLocalStorage,
  useMagicKeys,
  useManualRefHistory,
  useMediaControls,
  useMediaQuery,
  useMemoize,
  useMemory,
  useMounted,
  useMouse,
  useMouseInElement,
  useMousePressed,
  useMutationObserver,
  useNavigatorLanguage,
  useNetwork,
  useNow,
  useObjectUrl,
  useOffsetPagination,
  useOnline,
  usePageLeave,
  useParallax,
  useParentElement,
  usePerformanceObserver,
  usePermission,
  usePointer,
  usePointerLock,
  usePointerSwipe,
  usePreferredColorScheme,
  usePreferredContrast,
  usePreferredDark,
  usePreferredLanguages,
  usePreferredReducedMotion,
  usePreferredReducedTransparency,
  usePrevious,
  useRafFn,
  useRefHistory,
  useResizeObserver,
  useSSRWidth,
  useScreenOrientation,
  useScreenSafeArea,
  useScriptTag,
  useScroll,
  useScrollLock,
  useSessionStorage,
  useShare,
  useSorted,
  useSpeechRecognition,
  useSpeechSynthesis,
  useStepper,
  useStorage,
  useStorageAsync,
  useStyleTag,
  useSupported,
  useSwipe,
  useTemplateRefsList,
  useTextDirection,
  useTextSelection,
  useTextareaAutosize,
  refThrottled as useThrottle,
  useThrottleFn,
  useThrottledRefHistory,
  useTimeAgo,
  useTimeout,
  useTimeoutFn,
  useTimeoutPoll,
  useTimestamp,
  useTitle,
  useToNumber,
  useToString,
  useToggle,
  useTransition,
  useUrlSearchParams,
  useUserMedia,
  useVModel,
  useVModels,
  useVibrate,
  useVirtualList,
  useWakeLock,
  useWebNotification,
  useWebSocket,
  useWebWorker,
  useWebWorkerFn,
  useWindowFocus,
  useWindowScroll,
  useWindowSize,
  watchArray,
  watchAtMost,
  watchDebounced,
  watchDeep,
  watchIgnorable,
  watchImmediate,
  watchOnce,
  watchPausable,
  watchThrottled,
  watchTriggerable,
  watchWithFilter,
  whenever,
};
//# sourceMappingURL=vitepress___@vueuse_core.js.map

```

## /docs/.vitepress/cache/deps/vue.js

```js path="/docs/.vitepress/cache/deps/vue.js" 
import {
  BaseTransition,
  BaseTransitionPropsValidators,
  Comment,
  DeprecationTypes,
  EffectScope,
  ErrorCodes,
  ErrorTypeStrings,
  Fragment,
  KeepAlive,
  ReactiveEffect,
  Static,
  Suspense,
  Teleport,
  Text,
  TrackOpTypes,
  Transition,
  TransitionGroup,
  TriggerOpTypes,
  VueElement,
  assertNumber,
  callWithAsyncErrorHandling,
  callWithErrorHandling,
  camelize,
  capitalize,
  cloneVNode,
  compatUtils,
  compile,
  computed,
  createApp,
  createBaseVNode,
  createBlock,
  createCommentVNode,
  createElementBlock,
  createHydrationRenderer,
  createPropsRestProxy,
  createRenderer,
  createSSRApp,
  createSlots,
  createStaticVNode,
  createTextVNode,
  createVNode,
  customRef,
  defineAsyncComponent,
  defineComponent,
  defineCustomElement,
  defineEmits,
  defineExpose,
  defineModel,
  defineOptions,
  defineProps,
  defineSSRCustomElement,
  defineSlots,
  devtools,
  effect,
  effectScope,
  getCurrentInstance,
  getCurrentScope,
  getCurrentWatcher,
  getTransitionRawChildren,
  guardReactiveProps,
  h,
  handleError,
  hasInjectionContext,
  hydrate,
  hydrateOnIdle,
  hydrateOnInteraction,
  hydrateOnMediaQuery,
  hydrateOnVisible,
  initCustomFormatter,
  initDirectivesForSSR,
  inject,
  isMemoSame,
  isProxy,
  isReactive,
  isReadonly,
  isRef,
  isRuntimeOnly,
  isShallow,
  isVNode,
  markRaw,
  mergeDefaults,
  mergeModels,
  mergeProps,
  nextTick,
  normalizeClass,
  normalizeProps,
  normalizeStyle,
  onActivated,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onDeactivated,
  onErrorCaptured,
  onMounted,
  onRenderTracked,
  onRenderTriggered,
  onScopeDispose,
  onServerPrefetch,
  onUnmounted,
  onUpdated,
  onWatcherCleanup,
  openBlock,
  popScopeId,
  provide,
  proxyRefs,
  pushScopeId,
  queuePostFlushCb,
  reactive,
  readonly,
  ref,
  registerRuntimeCompiler,
  render,
  renderList,
  renderSlot,
  resolveComponent,
  resolveDirective,
  resolveDynamicComponent,
  resolveFilter,
  resolveTransitionHooks,
  setBlockTracking,
  setDevtoolsHook,
  setTransitionHooks,
  shallowReactive,
  shallowReadonly,
  shallowRef,
  ssrContextKey,
  ssrUtils,
  stop,
  toDisplayString,
  toHandlerKey,
  toHandlers,
  toRaw,
  toRef,
  toRefs,
  toValue,
  transformVNodeArgs,
  triggerRef,
  unref,
  useAttrs,
  useCssModule,
  useCssVars,
  useHost,
  useId,
  useModel,
  useSSRContext,
  useShadowRoot,
  useSlots,
  useTemplateRef,
  useTransitionState,
  vModelCheckbox,
  vModelDynamic,
  vModelRadio,
  vModelSelect,
  vModelText,
  vShow,
  version,
  warn,
  watch,
  watchEffect,
  watchPostEffect,
  watchSyncEffect,
  withAsyncContext,
  withCtx,
  withDefaults,
  withDirectives,
  withKeys,
  withMemo,
  withModifiers,
  withScopeId,
} from './chunk-O3I43HSE.js';
export {
  BaseTransition,
  BaseTransitionPropsValidators,
  Comment,
  DeprecationTypes,
  EffectScope,
  ErrorCodes,
  ErrorTypeStrings,
  Fragment,
  KeepAlive,
  ReactiveEffect,
  Static,
  Suspense,
  Teleport,
  Text,
  TrackOpTypes,
  Transition,
  TransitionGroup,
  TriggerOpTypes,
  VueElement,
  assertNumber,
  callWithAsyncErrorHandling,
  callWithErrorHandling,
  camelize,
  capitalize,
  cloneVNode,
  compatUtils,
  compile,
  computed,
  createApp,
  createBlock,
  createCommentVNode,
  createElementBlock,
  createBaseVNode as createElementVNode,
  createHydrationRenderer,
  createPropsRestProxy,
  createRenderer,
  createSSRApp,
  createSlots,
  createStaticVNode,
  createTextVNode,
  createVNode,
  customRef,
  defineAsyncComponent,
  defineComponent,
  defineCustomElement,
  defineEmits,
  defineExpose,
  defineModel,
  defineOptions,
  defineProps,
  defineSSRCustomElement,
  defineSlots,
  devtools,
  effect,
  effectScope,
  getCurrentInstance,
  getCurrentScope,
  getCurrentWatcher,
  getTransitionRawChildren,
  guardReactiveProps,
  h,
  handleError,
  hasInjectionContext,
  hydrate,
  hydrateOnIdle,
  hydrateOnInteraction,
  hydrateOnMediaQuery,
  hydrateOnVisible,
  initCustomFormatter,
  initDirectivesForSSR,
  inject,
  isMemoSame,
  isProxy,
  isReactive,
  isReadonly,
  isRef,
  isRuntimeOnly,
  isShallow,
  isVNode,
  markRaw,
  mergeDefaults,
  mergeModels,
  mergeProps,
  nextTick,
  normalizeClass,
  normalizeProps,
  normalizeStyle,
  onActivated,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onDeactivated,
  onErrorCaptured,
  onMounted,
  onRenderTracked,
  onRenderTriggered,
  onScopeDispose,
  onServerPrefetch,
  onUnmounted,
  onUpdated,
  onWatcherCleanup,
  openBlock,
  popScopeId,
  provide,
  proxyRefs,
  pushScopeId,
  queuePostFlushCb,
  reactive,
  readonly,
  ref,
  registerRuntimeCompiler,
  render,
  renderList,
  renderSlot,
  resolveComponent,
  resolveDirective,
  resolveDynamicComponent,
  resolveFilter,
  resolveTransitionHooks,
  setBlockTracking,
  setDevtoolsHook,
  setTransitionHooks,
  shallowReactive,
  shallowReadonly,
  shallowRef,
  ssrContextKey,
  ssrUtils,
  stop,
  toDisplayString,
  toHandlerKey,
  toHandlers,
  toRaw,
  toRef,
  toRefs,
  toValue,
  transformVNodeArgs,
  triggerRef,
  unref,
  useAttrs,
  useCssModule,
  useCssVars,
  useHost,
  useId,
  useModel,
  useSSRContext,
  useShadowRoot,
  useSlots,
  useTemplateRef,
  useTransitionState,
  vModelCheckbox,
  vModelDynamic,
  vModelRadio,
  vModelSelect,
  vModelText,
  vShow,
  version,
  warn,
  watch,
  watchEffect,
  watchPostEffect,
  watchSyncEffect,
  withAsyncContext,
  withCtx,
  withDefaults,
  withDirectives,
  withKeys,
  withMemo,
  withModifiers,
  withScopeId,
};
//# sourceMappingURL=vue.js.map

```

## /docs/README.md

# MCP-UI Documentation

This directory contains the enhanced documentation for MCP UI, built with VitePress and featuring a professional, modern design.

## 🎨 Design Enhancements

The documentation has been significantly improved with:

### Visual Design
- **Modern Color Scheme**: Blue to green gradient branding with excellent contrast
- **Professional Typography**: Inter font family with proper font weights and spacing
- **Enhanced Shadows**: Subtle depth and visual hierarchy
- **Smooth Animations**: Fade-in effects and hover transitions
- **Responsive Design**: Mobile-first approach with breakpoint optimizations

### Content Improvements
- **Video Integration**: Demo video from README prominently featured on landing page
- **Rich Feature Cards**: Six detailed feature cards with icons and descriptions
- **Code Examples**: Syntax-highlighted examples with proper formatting
- **Call-to-Action Buttons**: Professional buttons with hover effects
- **Better Navigation**: Improved sidebar with collapsible sections

### Technical Features
- **Local Search**: Built-in search functionality
- **Dark Mode**: Full dark mode support with proper color schemes
- **SEO Optimization**: Meta tags, OpenGraph, and Twitter cards
- **Performance**: Optimized loading and rendering
- **Accessibility**: Proper ARIA labels and keyboard navigation

## 🚀 Getting Started

To run the documentation locally:

```bash
cd docs
npm install
npm run dev
```

To build for production:

```bash
npm run build
```

## 📁 Structure

```
docs/
├── src/
│   ├── .vitepress/
│   │   ├── config.ts          # VitePress configuration
│   │   └── theme/
│   │       ├── index.ts       # Custom theme setup
│   │       └── custom.css     # Enhanced styling
│   ├── guide/                 # Documentation pages
│   ├── public/                # Static assets
│   │   ├── logo.svg          # Brand logo
│   │   └── favicon.png       # Site favicon
│   └── index.md              # Enhanced landing page
└── README.md                 # This file
```

## 🎯 Key Features

### Landing Page
- Hero section with gradient text and compelling tagline
- Demo video integration from the main README
- Six feature cards highlighting key capabilities
- Code examples showing quick usage
- Call-to-action buttons linking to guides and demos

### Navigation
- Clean, organized sidebar with collapsible sections
- Breadcrumb navigation
- "Edit on GitHub" links
- Social media links (GitHub, npm)

### Content
- Professional typography with proper hierarchy
- Enhanced code blocks with syntax highlighting
- Improved tables with hover effects
- Styled blockquotes and badges
- Responsive images and media

### Performance
- Optimized bundle size
- Fast loading times
- Efficient caching
- Mobile-optimized assets

## 🔧 Customization

The documentation uses CSS custom properties for easy theming:

```css
:root {
  --vp-c-brand-1: #3c82f6;      /* Primary brand color */
  --vp-c-brand-2: #2563eb;      /* Secondary brand color */
  --vp-c-accent-1: #10b981;     /* Accent color */
  /* ... more variables */
}
```

## 📝 Content Guidelines

When adding new content:

1. Use proper markdown headers (##, ###) for structure
2. Include code examples with language tags
3. Add screenshots or diagrams where helpful
4. Keep paragraphs concise and scannable
5. Use callouts for important information

## 🤝 Contributing

To contribute to the documentation:

1. Edit files in the `src/` directory
2. Test locally with `npm run dev`
3. Build with `npm run build` to verify
4. Submit a pull request

The documentation automatically rebuilds on changes to the main branch. 

## /docs/package.json

```json path="/docs/package.json" 
{
  "name": "@mcp-ui/docs",
  "version": "0.1.0",
  "private": false,
  "type": "module",
  "scripts": {
    "dev": "vitepress dev src",
    "build": "vitepress build src",
    "preview": "vitepress preview src"
  },
  "devDependencies": {
    "mermaid": "^11.9.0",
    "vitepress": "^1.0.0-rc.44",
    "vitepress-plugin-mermaid": "^2.0.17",
    "vue": "^3.3.0"
  }
}

```

## /docs/src/.vitepress/config.ts

```ts path="/docs/src/.vitepress/config.ts" 
import { defineConfig } from 'vitepress';
import { withMermaid } from 'vitepress-plugin-mermaid';

export default withMermaid(
  defineConfig({
    lang: 'en-US',
    title: 'MCP-UI',
    description: 'Interactive UI for MCP - Build rich, dynamic interfaces with MCP-UI',
    base: '/',
    cleanUrls: true,

    head: [
      ['meta', { name: 'theme-color', content: '#3c82f6' }],
      ['meta', { name: 'og:type', content: 'website' }],
      ['meta', { name: 'og:locale', content: 'en' }],
      [
        'meta',
        {
          name: 'og:title',
          content: 'MCP-UI | Interactive UI for MCP',
        },
      ],
      ['meta', { name: 'og:site_name', content: 'MCP-UI' }],
      ['meta', { name: 'og:image', content: 'https://mcpui.dev/og-image.png' }],
      ['meta', { name: 'og:url', content: 'https://mcpui.dev/' }],
      ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
      ['meta', { name: 'twitter:site', content: '@idosal1' }],
      ['meta', { name: 'twitter:url', content: 'https://mcpui.dev/' }],
      ['meta', { name: 'twitter:domain', content: 'mcpui.dev' }],
      ['meta', { name: 'twitter:image', content: 'https://mcpui.dev/og-image.png' }],
      [
        'meta',
        {
          name: 'twitter:description',
          content: 'Interactive UI for MCP - Build rich, dynamic interfaces with MCP-UI',
        },
      ],
      ['link', { rel: 'icon', type: 'image/png', href: '/logo.png' }],
      ['link', { rel: 'icon', type: 'image/png', href: '/favicon.png' }],
      [
        'style',
        {},
        `.VPNavBar .VPNavBarSocialLinks a[href*="npmjs.com/package/@mcp-ui/server"] { border-left: 1px solid var(--vp-c-divider); margin-left: 8px; padding-left: 12px; }`,
      ],
    ],

    vite: {
      plugins: [],
      optimizeDeps: {
        include: ['vue', '@vue/shared', 'dayjs', 'mermaid'],
      },
    },

    themeConfig: {
      logo: {
        light: '/logo-black.png',
        dark: '/logo.png',
        alt: 'MCP-UI Logo',
      },

      nav: [
        { text: 'Home', link: '/' },
        { text: 'Guide', link: '/guide/introduction' },
        { text: 'Team', link: '/team' },
        {
          text: 'Examples',
          items: [
            {
              text: 'UI Inspector',
              link: 'https://github.com/idosal/ui-inspector',
            },
            {
              text: 'Server Examples',
              items: [
                {
                  text: 'TypeScript',
                  link: '/guide/server/typescript/usage-examples',
                },
                { text: 'Ruby', link: '/guide/server/ruby/usage-examples' },
                { text: 'Python', link: '/guide/server/python/usage-examples' },
              ],
            },
            {
              text: 'Client Examples',
              items: [
                { text: 'React', link: '/guide/client/react-usage-examples' },
                {
                  text: 'Web Components',
                  link: '/guide/client/wc-usage-examples',
                },
              ],
            },
          ],
        },
        {
          text: 'Packages',
          items: [
            {
              text: '@mcp-ui/client',
              link: 'https://www.npmjs.com/package/@mcp-ui/client',
            },
            {
              text: '@mcp-ui/server',
              link: 'https://www.npmjs.com/package/@mcp-ui/server',
            },
            {
              text: 'mcp_ui_server Gem',
              link: 'https://rubygems.org/gems/mcp_ui_server',
            },
            {
              text: 'mcp-ui-server (PyPI)',
              link: 'https://pypi.org/project/mcp-ui-server/',
            },
          ],
        },
      ],

      sidebar: {
        '/guide/': [
          {
            text: 'Getting Started',
            items: [
              { text: 'Introduction', link: '/guide/introduction' },
              { text: 'Installation', link: '/guide/getting-started' },
              { text: 'Core Concepts', link: '/guide/protocol-details' },
              { text: 'Embeddable UI', link: '/guide/embeddable-ui' },
              { text: 'Supported Hosts', link: '/guide/supported-hosts' },
            ],
          },
          {
            text: 'Protocol Integrations',
            collapsed: false,
            items: [
              { text: 'MCP Apps', link: '/guide/mcp-apps' },
              { text: 'Apps SDK (ChatGPT)', link: '/guide/apps-sdk' },
            ],
          },
          {
            text: 'Server SDKs',
            collapsed: false,
            items: [
              {
                text: 'TypeScript',
                collapsed: false,
                items: [
                  {
                    text: 'Overview',
                    link: '/guide/server/typescript/overview',
                  },
                  {
                    text: 'Walkthrough',
                    link: '/guide/server/typescript/walkthrough',
                  },
                  {
                    text: 'Usage & Examples',
                    link: '/guide/server/typescript/usage-examples',
                  },
                ],
              },
              {
                text: 'Ruby',
                collapsed: false,
                items: [
                  { text: 'Overview', link: '/guide/server/ruby/overview' },
                  {
                    text: 'Walkthrough',
                    link: '/guide/server/ruby/walkthrough',
                  },
                  {
                    text: 'Usage & Examples',
                    link: '/guide/server/ruby/usage-examples',
                  },
                ],
              },
              {
                text: 'Python',
                collapsed: false,
                items: [
                  { text: 'Overview', link: '/guide/server/python/overview' },
                  { text: 'Walkthrough', link: '/guide/server/python/walkthrough' },
                  { text: 'Usage & Examples', link: '/guide/server/python/usage-examples' },
                ],
              },
            ],
          },
          {
            text: 'Client SDK',
            collapsed: false,
            items: [
              { text: 'Overview', link: '/guide/client/overview' },
              { text: 'Walkthrough', link: '/guide/client/walkthrough' },
              {
                text: 'AppRenderer',
                link: '/guide/client/app-renderer',
              },
              {
                text: 'UIResourceRenderer (Legacy)',
                collapsed: true,
                items: [
                  {
                    text: 'Overview',
                    link: '/guide/client/resource-renderer',
                  },
                  {
                    text: 'React Usage & Examples',
                    link: '/guide/client/react-usage-examples',
                  },
                  {
                    text: 'Web Component Usage & Examples',
                    link: '/guide/client/wc-usage-examples',
                  },
                ],
              },
              {
                text: 'Custom Component Libraries',
                link: '/guide/client/custom-component-libraries',
              },
              {
                text: 'Using a Proxy',
                link: '/guide/client/using-a-proxy',
              },
            ],
          },
        ],
      },

      editLink: {
        pattern: 'https://github.com/idosal/mcp-ui/edit/main/docs/src/:path',
        text: 'Edit this page on GitHub',
      },

      search: {
        provider: 'local',
        options: {
          locales: {
            root: {
              translations: {
                button: {
                  buttonText: 'Search',
                  buttonAriaLabel: 'Search',
                },
                modal: {
                  displayDetails: 'Display detailed list',
                  resetButtonTitle: 'Reset search',
                  backButtonTitle: 'Close search',
                  noResultsText: 'No results for',
                  footer: {
                    selectText: 'to select',
                    navigateText: 'to navigate',
                    closeText: 'to close',
                  },
                },
              },
            },
          },
        },
      },

      socialLinks: [
        { icon: 'github', link: 'https://github.com/idosal/mcp-ui' },
        { icon: 'discord', link: 'https://discord.gg/CEAG4KW7ZH' },
        {
          icon: 'npm',
          link: 'https://www.npmjs.com/package/@mcp-ui/server',
        },
        {
          icon: {
            svg: '<svg viewBox="0 0 256 293" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><g fill="currentColor"><path d="M76.748 97.434l-.163-.163-36.11 36.11 87.674 87.512 36.11-35.948 51.564-51.563-36.11-36.11v-.164H76.584l.163.326z"/><path d="M127.823.976L.135 74.173v146.395l127.688 73.197 127.689-73.197V74.173L127.823.976zm103.29 205.603l-103.29 59.534-103.29-59.534V87.837l103.29-59.534 103.29 59.534v118.742z"/></g></svg>',
          },
          link: 'https://rubygems.org/gems/mcp_ui_server',
        },
        {
          icon: 'pypi',
          link: 'https://pypi.org/project/mcp-ui-server/',
        },
      ],

      footer: {
        message:
          'Released under the <a href="https://github.com/idosal/mcp-ui/blob/main/LICENSE">Apache 2.0 License</a>.',
        copyright: 'Copyright © 2025-present <a href="https://github.com/idosal">Ido Salomon</a>',
      },

      lastUpdated: {
        text: 'Last updated',
        formatOptions: {
          dateStyle: 'short',
          timeStyle: 'medium',
        },
      },

      outline: {
        level: [2, 3],
        label: 'On this page',
      },

      docFooter: {
        prev: 'Previous page',
        next: 'Next page',
      },

      darkModeSwitchLabel: 'Appearance',
      lightModeSwitchTitle: 'Switch to light theme',
      darkModeSwitchTitle: 'Switch to dark theme',
      sidebarMenuLabel: 'Menu',
      returnToTopLabel: 'Return to top',
      langMenuLabel: 'Change language',

      externalLinkIcon: true,
    },

    markdown: {
      theme: {
        light: 'github-light',
        dark: 'github-dark',
      },
      lineNumbers: true,
      config: (md) => {
        // Add any markdown-it plugins here
      },
    },

    sitemap: {
      hostname: 'https://mcpui.dev',
    },

    // Mermaid configuration
    mermaid: {
      // Refer to https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults for options
      theme: 'default',
    },
    // Optional plugin configuration
    mermaidPlugin: {
      class: 'mermaid', // Set additional CSS classes for parent container
    },
  }),
);

```

## /docs/src/.vitepress/theme/index.ts

```ts path="/docs/src/.vitepress/theme/index.ts" 
import DefaultTheme from 'vitepress/theme';
import { h } from 'vue';
import type { Theme } from 'vitepress';
import './custom.css';

export default {
  extends: DefaultTheme,
  Layout() {
    return h(DefaultTheme.Layout, null, {
      'home-hero-before': () =>
        h('div', { class: 'announcement-banner' }, [
          h('span', '🎉 '),
          h('span', { style: 'font-weight: bold;' }, 'MCP-UI is now standardized into MCP Apps!'),
          h('span', ' '),
          h(
            'a',
            {
              href: 'https://github.com/modelcontextprotocol/modelcontextprotocol/pull/1865',
              style: 'text-decoration: underline; color: inherit;',
            },
            'Learn more →',
          ),
        ]),
    });
  },
  enhanceApp({ app, router, siteData }) {
    // Custom app enhancements can go here
  },
} satisfies Theme;

```

## /docs/src/about.md

# About

## About

`mcp-ui` pioneered the concept of interactive UI over the [Model Context Protocol](https://modelcontextprotocol.io/introduction) (MCP). When MCP was first introduced, tools could only return plain text responses. MCP-UI took the opportunity to transform how users interact with AI tools by enabling rich, dynamic interfaces delivered seamlessly through the protocol.

What started as an experimental project to bring web UIs to MCP tools has helped shape the ecosystem. The patterns we developed - embedding HTML resources in tool responses, secure sandboxed rendering, and bidirectional communication between UIs and hosts - directly influenced the creation of the [MCP Apps specification](https://github.com/modelcontextprotocol/ext-apps).

Today, `mcp-ui` implements the MCP Apps standard while continuing to push the boundaries of what's possible with UI over MCP. The `@mcp-ui/*` packages provide production-ready SDKs for both servers and clients, making it easy for developers to build interactive experiences for their MCP tools.

## What's Included

- **Client SDK** with React components for rendering tool UIs securely
- **Server SDKs** for TypeScript, Python, and Ruby to create UI resources
- **Documentation and examples** to help you get started quickly
- **Active community** pushing the MCP Apps standard forward

## Team

`mcp-ui` is a project by [Ido Salomon](https://x.com/idosal1), in collaboration with [Liad Yosef](https://x.com/liadyosef).

## Get Involved

- [GitHub Repository](https://github.com/idosal/mcp-ui)
- [Discord Community](https://discord.gg/CEAG4KW7ZH)


## /docs/src/guide/server/python/overview.md

# mcp-ui-server Overview

The `mcp-ui-server` package provides utilities to generate UI resources (`UIResource`) on your MCP server. It allows you to define UI snippets on the server-side, which can then be seamlessly and securely rendered on the client.

::: tip MCP Apps Compatibility
The `create_ui_resource` function creates UIResource objects that work with both MCP Apps hosts (via `_meta.ui.resourceUri`) and legacy MCP-UI hosts.

For the recommended MCP Apps pattern with TypeScript, see [Getting Started](../../getting-started).
:::

For a complete example, see the [`python-server-demo`](https://github.com/idosal/mcp-ui/tree/main/examples/python-server-demo).

## Key Exports

- **`create_ui_resource(options_dict: dict[str, Any]) -> UIResource`**:
  The primary function for creating UI snippets. It takes a dictionary of options to define the URI, content (direct HTML or external URL), and encoding method (text or blob).

## Purpose

- **Ease of Use**: Simplifies the creation of valid `UIResource` objects.
- **Validation**: Includes basic validation (e.g., URI prefixes matching content type).
- **Encoding**: Handles Base64 encoding when `encoding: 'blob'` is specified.
- **MCP Integration**: Proper integration with the MCP Python SDK using `EmbeddedResource`.

## Installation

Install the package using pip or your preferred package manager:

```bash
pip install mcp-ui-server
```

Or with uv:

```bash
uv add mcp-ui-server
```

## Building

This package is built using Python's standard build tools and distributed via PyPI. It includes full type annotations and is compatible with Python 3.10+.

To build the package from source:

```bash
uv build
```

See the [Server SDK Usage & Examples](./usage-examples.md) page for practical examples.

## /docs/src/public/favicon.png

Binary file available at https://raw.githubusercontent.com/idosal/mcp-ui/refs/heads/main/docs/src/public/favicon.png

## /docs/src/public/logo-black.png

Binary file available at https://raw.githubusercontent.com/idosal/mcp-ui/refs/heads/main/docs/src/public/logo-black.png

## /docs/src/public/logo-lg-black.png

Binary file available at https://raw.githubusercontent.com/idosal/mcp-ui/refs/heads/main/docs/src/public/logo-lg-black.png

## /docs/src/public/logo-lg.png

Binary file available at https://raw.githubusercontent.com/idosal/mcp-ui/refs/heads/main/docs/src/public/logo-lg.png

## /docs/src/public/logo.png

Binary file available at https://raw.githubusercontent.com/idosal/mcp-ui/refs/heads/main/docs/src/public/logo.png

## /docs/src/public/og-image.png

Binary file available at https://raw.githubusercontent.com/idosal/mcp-ui/refs/heads/main/docs/src/public/og-image.png

## /docs/src/team.md

# Team

`mcp-ui` is a project by [Ido Salomon](https://x.com/idosal1), in collaboration with [Liad Yosef](https://x.com/liadyosef). 

## /examples/server/pnpm-workspace.yaml

```yaml path="/examples/server/pnpm-workspace.yaml" 
packages: []

```


The content has been capped at 50000 tokens. The user could consider applying other filters to refine the result. The better and more specific the context, the better the LLM can follow instructions. If the context seems verbose, the user can refine the filter using uithub. Thank you for using https://uithub.com - Perfect LLM context for any GitHub repo.
Copied!