Proofread and correct documentation

.gitignore

@@ -1,4 +1,15 @@
 node_modules
 .DS_Store
 dist
-*.local
+*.local
+
+# Test coverage
+coverage/
+.nyc_output/
+
+# Playwright
+playwright-report/
+test-results/
+
+# Build artifacts
+*.tsbuildinfo

CONTRIBUTING.md

@@ -10,4 +10,4 @@ Project maintainers have the right and responsibility to remove, edit, or reject
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
 
-This Code of Conduct is adapted from the [Contributor Covenant](http:contributor-covenant.org), version 1.0.0, available at https://www.contributor-covenant.org/version/1/0/0/code-of-conduct.html
+This Code of Conduct is adapted from the [Contributor Covenant](https://contributor-covenant.org), version 1.0.0, available at https://www.contributor-covenant.org/version/1/0/0/code-of-conduct.html

README.md

@@ -26,7 +26,7 @@
 - 🌳 **Nested Menus** - Support for complex menu hierarchies
 - ⌨️ **Keyboard Accessible** - Full keyboard navigation support
 - 📱 **Touch Optimized** - Enhanced mobile experience ([Touch Guide](./TOUCH_FEATURES.md))
-- ⚡ **Performance** - Optimized bundle size ([Bundle Guide](./BUNDLE_OPTIMIZATION.md))
+- ⚡ **Performance** - Optimized bundle size with tree-shaking support
 - 🎨 **Customizable** - Extensive theming options
 - 🛠 **TypeScript** - Built with type safety
 - 🎭 **Vue 3** - Leverages the latest Vue.js features
@@ -106,7 +106,7 @@ const handleSelection = (selectedItem) => {
 | `fixed`          | `boolean` | `false`                       | Disable dragging and fix position                                         |
 | `menu-dimension` | `object`  | `{ width: 200, height: 300 }` | Menu dimensions                                                           |
 | `menu-data`      | `array`   | `[]`                          | Menu structure data                                                       |
-| `menu-style`     | `string`  | `'slide-out'`                 | Menu style (`slide-out' or `accordion`)                                   |
+| `menu-style`     | `string`  | `'slide-out'`                 | Menu style (`'slide-out'` or `'accordion'`)                               |
 | `flip-on-edges`  | `boolean` | `false`                       | Auto-flip menu on screen edges                                            |
 | `theme`          | `object`  | `{}`                          | Custom theme configuration                                                |
 
@@ -173,7 +173,7 @@ pnpm run dev
 pnpm run lint:all
 
 # Build package
-pnpm run rollup
+pnpm run build
 ```
 
 ## 🤝 Contributing

TYPESCRIPT.md

@@ -46,16 +46,16 @@ pnpm type-check          # Check types without emitting files
 pnpm type-check:watch    # Watch mode type checking
 
 # Building
-pnpm build:lib          # Build library with type checking
-pnpm build              # Standard Vite build
+pnpm build              # Build library with type checking
+pnpm build:types        # Build type declarations only
 
 # Linting (includes type checking)
 pnpm lint:all           # Run all lints including type check
 ```
 
 ## Compatibility
 
-- **Vue**: 3.0.4+
-- **TypeScript**: 5.8+
-- **Node.js**: 16+
+- **Vue**: 3.3.0+
+- **TypeScript**: 5.9+
+- **Node.js**: 18.18.0+
 - **Bundlers**: Vite, Rollup, Webpack 5+

docs/.vitepress/config.ts

@@ -0,0 +1,110 @@
+import { defineConfig } from 'vitepress';
+
+export default defineConfig({
+  title: 'Vue Float Menu',
+  description: 'A modern, draggable floating menu component for Vue 3 applications',
+  base: '/vue-float-menu/',
+
+  themeConfig: {
+    logo: '/logo.svg',
+
+    nav: [
+      { text: 'Guide', link: '/guide/getting-started' },
+      { text: 'Examples', link: '/examples/basic' },
+      { text: 'API', link: '/api/props' },
+      { text: 'GitHub', link: 'https://github.com/prabhuignoto/vue-float-menu' },
+    ],
+
+    sidebar: {
+      '/guide/': [
+        {
+          text: 'Introduction',
+          items: [
+            { text: 'What is Vue Float Menu?', link: '/guide/introduction' },
+            { text: 'Getting Started', link: '/guide/getting-started' },
+            { text: 'Installation', link: '/guide/installation' },
+          ],
+        },
+        {
+          text: 'Core Concepts',
+          items: [
+            { text: 'Basic Usage', link: '/guide/basic-usage' },
+            { text: 'Menu Structure', link: '/guide/menu-structure' },
+            { text: 'Positioning', link: '/guide/positioning' },
+            { text: 'Theming', link: '/guide/theming' },
+          ],
+        },
+        {
+          text: 'Advanced',
+          items: [
+            { text: 'Nested Menus', link: '/guide/nested-menus' },
+            { text: 'Keyboard Navigation', link: '/guide/keyboard-navigation' },
+            { text: 'Touch Optimizations', link: '/guide/touch-optimizations' },
+            { text: 'Accessibility', link: '/guide/accessibility' },
+            { text: 'TypeScript', link: '/guide/typescript' },
+          ],
+        },
+      ],
+      '/examples/': [
+        {
+          text: 'Examples',
+          items: [
+            { text: 'Basic Menu', link: '/examples/basic' },
+            { text: 'Nested Menus', link: '/examples/nested' },
+            { text: 'Custom Icons', link: '/examples/custom-icons' },
+            { text: 'Custom Themes', link: '/examples/custom-themes' },
+            { text: 'Menu Styles', link: '/examples/menu-styles' },
+            { text: 'Disabled Items', link: '/examples/disabled-items' },
+            { text: 'Dividers', link: '/examples/dividers' },
+            { text: 'Edge Flipping', link: '/examples/edge-flipping' },
+          ],
+        },
+      ],
+      '/api/': [
+        {
+          text: 'API Reference',
+          items: [
+            { text: 'Component Props', link: '/api/props' },
+            { text: 'Events', link: '/api/events' },
+            { text: 'Slots', link: '/api/slots' },
+            { text: 'Types', link: '/api/types' },
+          ],
+        },
+      ],
+    },
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/prabhuignoto/vue-float-menu' },
+    ],
+
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2023-present Prabhu Murthy',
+    },
+
+    search: {
+      provider: 'local',
+    },
+
+    editLink: {
+      pattern: 'https://github.com/prabhuignoto/vue-float-menu/edit/master/docs/:path',
+      text: 'Edit this page on GitHub',
+    },
+  },
+
+  head: [
+    ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }],
+    ['meta', { name: 'theme-color', content: '#667eea' }],
+    ['meta', { name: 'og:type', content: 'website' }],
+    ['meta', { name: 'og:title', content: 'Vue Float Menu' }],
+    ['meta', { name: 'og:description', content: 'A modern, draggable floating menu component for Vue 3' }],
+  ],
+
+  markdown: {
+    lineNumbers: true,
+    theme: {
+      light: 'github-light',
+      dark: 'github-dark',
+    },
+  },
+});

docs/api/events.md

@@ -0,0 +1,132 @@
+# Events
+
+Vue Float Menu emits events for menu interactions.
+
+## @select
+
+Fired when a menu item is selected.
+
+**Type:** `(itemName: string) => void`
+
+```vue
+<script setup>
+const handleSelection = (itemName: string) => {
+  console.log('User selected:', itemName);
+  // Perform action based on selection
+};
+</script>
+
+<template>
+  <float-menu
+    :menu-data="items"
+    @select="handleSelection"
+  />
+</template>
+```
+
+### Parameters
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `itemName` | `string` | Name of the selected menu item |
+
+### Example
+
+```ts
+const handleSelection = (itemName: string) => {
+  switch(itemName) {
+    case 'Save':
+      saveDocument();
+      break;
+    case 'Exit':
+      closeApplication();
+      break;
+  }
+};
+```
+
+## Custom Event Handling
+
+### Multiple Actions
+
+```ts
+const actions = {
+  'New File': () => createNewFile(),
+  'Open': () => openFile(),
+  'Save': () => saveFile(),
+  'Exit': () => exit()
+};
+
+const handleSelection = (itemName: string) => {
+  const action = actions[itemName];
+  if (action) {
+    action();
+  }
+};
+```
+
+### With Metadata
+
+```vue
+<script setup>
+interface MenuAction {
+  name: string;
+  handler: () => void;
+}
+
+const menuActions: MenuAction[] = [
+  { name: 'Save', handler: () => save() },
+  { name: 'Exit', handler: () => exit() }
+];
+
+const menuItems = menuActions.map(a => ({ name: a.name }));
+
+const handleSelection = (itemName: string) => {
+  const action = menuActions.find(a => a.name === itemName);
+  action?.handler();
+};
+</script>
+```
+
+### Async Handlers
+
+```ts
+const handleSelection = async (itemName: string) => {
+  try {
+    switch(itemName) {
+      case 'Save':
+        await saveToServer();
+        showSuccess('Saved!');
+        break;
+      case 'Load':
+        await loadFromServer();
+        showSuccess('Loaded!');
+        break;
+    }
+  } catch (error) {
+    showError('Operation failed');
+  }
+};
+```
+
+## Event Flow
+
+1. User clicks/taps menu item
+2. `@select` event is emitted
+3. Event handler receives item name
+4. Handler performs action
+5. Menu closes automatically (if not a submenu parent)
+
+## Best Practices
+
+1. **Type your handlers** - Use TypeScript for safety
+2. **Handle errors** - Wrap in try/catch for async operations
+3. **Provide feedback** - Show success/error messages
+4. **Keep handlers focused** - One responsibility per handler
+5. **Avoid side effects** - Keep event handlers pure when possible
+
+## See Also
+
+- [Component Props](/api/props)
+- [Slots](/api/slots)
+- [Basic Usage](/guide/basic-usage)