vue3-router-tab 1.3.5 → 1.3.6

package/README.md

@@ -1,36 +1,46 @@
-# vue3-router-tab
+# Vue3 Router Tab
 
-A Vue 3 tab-bar plugin that keeps multiple routes alive with transition support, context menus, and optional cookie-based persistence.
+[![npm version](https://badge.fury.io/js/vue3-router-tab.svg)](https://badge.fury.io/js/vue3-router-tab)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue.svg)](https://www.typescriptlang.org/)
 
-## ✨ Features
+A powerful, feature-rich Vue 3 tab-bar plugin that keeps multiple routes alive with smooth transitions, context menus, drag-and-drop reordering, and optional cookie-based persistence. Built for modern Vue 3 applications with full TypeScript support.
 
-- 🎯 **Multi-tab Navigation** - Keep multiple routes alive simultaneously
+## ✨ Key Features
+
+- 🎯 **Multi-tab Navigation** - Keep multiple routes alive simultaneously with intelligent caching
 - 🔄 **7 Built-in Transitions** - Smooth page transitions (swap, slide, fade, scale, flip, rotate, bounce)
 - 🎨 **Reactive Tab Titles** - Automatically update tab titles, icons, and closability from component state
 - 🖱️ **Context Menu** - Right-click tabs for refresh, close, and navigation options
-- 🔀 **Drag & Drop** - Reorder tabs with drag-and-drop
-- 💾 **Cookie Persistence** - Restore tabs on page refresh
+- 🔀 **Drag & Drop** - Reorder tabs with drag-and-drop (sortable)
+- 💾 **Cookie Persistence** - Restore tabs on page refresh with customizable options
 - 🎭 **Theme Support** - Light, dark, and system themes with customizable colors
-- ⚡ **KeepAlive Support** - Preserve component state when switching tabs
-- 🎛️ **Highly Configurable** - Extensive props and events for customization
-- 📱 **TypeScript Support** - Full TypeScript definitions included
+- ⚡ **KeepAlive Support** - Preserve component state when switching tabs with smart cache management
+- ♿ **Accessibility** - Full WCAG compliance with ARIA labels, keyboard navigation, and screen reader support
+- 🚀 **Performance Optimized** - Intelligent caching, memoization, and memory management
+- 🎛️ **Highly Configurable** - Extensive props, events, and customization options
+- 📱 **TypeScript Support** - Full TypeScript definitions with excellent developer experience
+- 🔧 **Error Recovery** - Automatic error handling with graceful degradation and recovery mechanisms
 
-## Installation
+## 📦 Installation
 
 ```bash
 npm install vue3-router-tab
 # or
 pnpm add vue3-router-tab
+# or
+yarn add vue3-router-tab
 ```
 
-## Register the plugin
+## 🚀 Quick Start
+
+### 1. Register the Plugin
 
 ```ts
 // main.ts
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-
 import RouterTab from 'vue3-router-tab'
 
 const app = createApp(App)
@@ -39,80 +49,552 @@ app.use(RouterTab)
 app.mount('#app')
 ```
 
-The plugin registers the `<router-tab>` component globally. It also exposes an optional `<router-tabs>` helper for advanced cookie options, but you rarely need it now that persistence can be enabled directly on the tab component.
-
-## Basic Usage
+### 2. Basic Usage
 
 ```vue
 <template>
-  <router-tab cookie-key="app-tabs" />
+  <router-tab />
 </template>
 ```
 
-> Hint: `cookie-key` is optional. Omit it to fall back to the default `router-tabs:snapshot` cookie, or set your own as shown above.
+That's it! You now have a fully functional tabbed router interface.
 
-### Enhanced Usage
+### 3. Enhanced Usage with Persistence
 
 ```vue
 <template>
-  <router-tab 
-    cookie-key="app-tabs"
+  <router-tab
+    cookie-key="my-app-tabs"
     :sortable="true"
-    @tab-sort="onTabSort"
-    @tab-sorted="onTabSorted"
+    :keep-alive="true"
   />
 </template>
-
-<script setup>
-function onTabSort({ tab, index }) {
-  console.log('Tab drag started:', tab.title, 'at index', index)
-}
-
-function onTabSorted({ tab, fromIndex, toIndex }) {
-  console.log('Tab moved:', tab.title, 'from', fromIndex, 'to', toIndex)
-}
-</script>
 ```
 
-Need to customise the rendered output? Provide a slot and use the routed component directly—see [`example-app/src/App.vue`](example-app/src/App.vue) for a working sample:
+## 📖 Usage Guide
+
+### Basic Configuration
 
 ```vue
-<router-tab cookie-key="app-tabs">
-  <template #default="{ Component, route }">
-    <Suspense>
-      <component :is="Component" :key="route.fullPath" />
-    </Suspense>
-  </template>
-</router-tab>
+<template>
+  <router-tab
+    cookie-key="app-tabs"
+    :keep-alive="true"
+    :max-alive="10"
+    :keep-last-tab="true"
+    :sortable="true"
+    page-transition="router-tab-fade"
+    tab-transition="router-tab-zoom"
+  />
+</template>
 ```
 
-Configure route metadata to control tab labels, icons, and lifecycle behaviour:
+### Route Configuration
+
+Configure your routes with tab metadata:
 
 ```ts
+// router/index.ts
 const routes = [
   {
     path: '/',
     component: Home,
     meta: {
       title: 'Home',
-      icon: 'fa fa-home',
-      key: 'fullPath',
+      icon: 'mdi-home',
+      closable: true,
+      keepAlive: true,
+    },
+  },
+  {
+    path: '/users',
+    component: Users,
+    meta: {
+      title: 'Users',
+      icon: 'mdi-account-group',
       closable: true,
       keepAlive: true,
     },
   },
   {
-    path: '/about',
-    component: About,
+    path: '/settings',
+    component: Settings,
     meta: {
-      title: 'About',
-      icon: 'fa fa-info-circle',
+      title: 'Settings',
+      icon: 'mdi-cog',
+      closable: false, // Can't be closed
       keepAlive: false,
     },
   },
 ]
 ```
 
+### Reactive Tab Properties
+
+Make your tabs dynamic by exposing reactive properties in your components:
+
+```vue
+<template>
+  <div>
+    <h1>{{ pageTitle }}</h1>
+    <button @click="updateTitle">Update Title</button>
+    <div v-if="loading">Loading...</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// These reactive properties automatically update the tab
+const pageTitle = ref('Dashboard')
+const loading = ref(false)
+const notificationCount = ref(0)
+
+// Tab title updates automatically
+const routeTabTitle = computed(() => {
+  if (loading.value) return 'Loading...'
+  if (notificationCount.value > 0) return `Dashboard (${notificationCount.value})`
+  return pageTitle.value
+})
+
+// Tab icon changes based on state
+const routeTabIcon = computed(() =>
+  loading.value ? 'mdi-loading mdi-spin' : 'mdi-view-dashboard'
+)
+
+// Prevent closing while loading
+const routeTabClosable = computed(() => !loading.value)
+
+function updateTitle() {
+  pageTitle.value = 'Updated Dashboard'
+}
+</script>
+```
+
+## 🎨 Transitions
+
+Choose from 7 built-in transition effects:
+
+```vue
+<!-- Default transition -->
+<router-tab />
+
+<!-- Custom transition -->
+<router-tab page-transition="router-tab-scale" />
+
+<!-- Advanced configuration -->
+<router-tab :page-transition="{ name: 'router-tab-flip', mode: 'out-in' }" />
+```
+
+### Available Transitions
+
+| Transition | Description | Best For |
+|------------|-------------|----------|
+| `router-tab-swap` | Smooth up/down slide with fade | General purpose (default) |
+| `router-tab-slide` | Horizontal sliding | Dashboard navigation |
+| `router-tab-fade` | Simple opacity fade | Minimal, subtle |
+| `router-tab-scale` | Zoom in/out effect | Dramatic transitions |
+| `router-tab-flip` | 3D flip animation | Modern, creative |
+| `router-tab-rotate` | Rotation with scale | Playful, dynamic |
+| `router-tab-bounce` | Elastic bounce | Fun, energetic |
+
+## 🎭 Theming
+
+### Built-in Themes
+
+```ts
+import { setRouterTabsTheme } from 'vue3-router-tab'
+
+// Switch themes at runtime
+setRouterTabsTheme('dark')
+setRouterTabsTheme('light')
+setRouterTabsTheme('system') // Follows OS preference
+```
+
+### Custom Colors
+
+```ts
+import { setRouterTabsPrimary } from 'vue3-router-tab'
+
+setRouterTabsPrimary({
+  primary: '#3b82f6',
+  background: '#ffffff',
+  text: '#1f2937',
+  activeBackground: '#3b82f6',
+  activeText: '#ffffff',
+  border: '#e5e7eb'
+})
+```
+
+### CSS Customization
+
+```css
+:root {
+  /* Layout */
+  --router-tab-header-height: 48px;
+  --router-tab-padding: 16px;
+
+  /* Colors */
+  --router-tab-primary: #3b82f6;
+  --router-tab-background: #ffffff;
+  --router-tab-active-background: #3b82f6;
+}
+```
+
+## ♿ Accessibility
+
+Vue3 Router Tab is fully accessible with:
+
+- **ARIA Labels**: Proper labeling for screen readers
+- **Keyboard Navigation**: Arrow keys, Enter, Delete, Home, End
+- **Focus Management**: Logical tab order and focus indicators
+- **Semantic HTML**: Proper roles and structure
+
+```vue
+<!-- Accessible by default -->
+<router-tab />
+
+<!-- Custom ARIA labels -->
+<router-tab aria-label="Main navigation tabs" />
+```
+
+### Keyboard Shortcuts
+
+- **Arrow Keys**: Navigate between tabs
+- **Enter/Space**: Activate selected tab
+- **Delete/Backspace**: Close current tab (if closable)
+- **Home/End**: Jump to first/last tab
+
+## 🔧 API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tabs` | `TabInput[]` | `[]` | Initial tabs to display |
+| `keepAlive` | `boolean` | `true` | Enable KeepAlive for tab components |
+| `maxAlive` | `number` | `0` | Maximum cached components (0 = unlimited) |
+| `keepLastTab` | `boolean` | `true` | Prevent closing the last tab |
+| `append` | `'last' \| 'next'` | `'last'` | Position for new tabs |
+| `defaultPage` | `RouteLocationRaw` | `'/'` | Default route |
+| `tabTransition` | `TransitionLike` | `'router-tab-zoom'` | Tab list transitions |
+| `pageTransition` | `TransitionLike` | `{ name: 'router-tab-swap', mode: 'out-in' }` | Page transitions |
+| `contextmenu` | `boolean \| RouterTabsMenuConfig[]` | `true` | Context menu configuration |
+| `cookieKey` | `string` | `'router-tabs:snapshot'` | Persistence cookie key |
+| `persistence` | `RouterTabsPersistenceOptions \| null` | `null` | Advanced persistence options |
+| `sortable` | `boolean` | `true` | Enable drag-and-drop sorting |
+
+### Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `tab-sort` | `{ tab: TabRecord, index: number }` | Tab drag started |
+| `tab-sorted` | `{ tab: TabRecord, fromIndex: number, toIndex: number }` | Tab reordered |
+
+### Slots
+
+| Slot | Props | Description |
+|------|-------|-------------|
+| `start` | - | Content before tab list |
+| `end` | - | Content after tab list |
+| `default` | `{ Component, route }` | Custom page rendering |
+
+## 🎛️ Programmatic API
+
+### Using the Composable
+
+```vue
+<script setup lang="ts">
+import { useRouterTabs } from 'vue3-router-tab'
+
+const tabs = useRouterTabs()
+
+// Open a new tab
+await tabs.openTab('/users')
+
+// Close current tab
+await tabs.closeTab()
+
+// Refresh all tabs
+await tabs.refreshAll()
+
+// Get current tab info
+console.log(tabs.activeId.value) // Current active tab ID
+console.log(tabs.tabs) // All tabs array
+</script>
+```
+
+### Controller Methods
+
+```ts
+interface RouterTabsContext {
+  // Navigation
+  openTab(to: RouteLocationRaw, replace?: boolean, refresh?: boolean | 'sameTab'): Promise<void>
+  closeTab(id?: string, options?: CloseTabOptions): Promise<void>
+
+  // Management
+  refreshTab(id?: string, force?: boolean): Promise<void>
+  refreshAll(force?: boolean): Promise<void>
+  removeTab(id: string, opts?: RemoveTabOptions): Promise<void>
+
+  // Cache Control
+  setTabAlive(id: string, alive: boolean): void
+  evictCache(id: string): void
+  clearCache(): void
+  getCacheKeys(): string[]
+
+  // State
+  reset(route?: RouteLocationRaw): Promise<void>
+  reload(): Promise<void>
+
+  // Utilities
+  getRouteKey(route: RouteLocationNormalizedLoaded | RouteLocationRaw): string
+  matchRoute(route: RouteLocationNormalizedLoaded | RouteLocationRaw): RouteMatchResult
+
+  // Persistence
+  snapshot(): RouterTabsSnapshot
+  hydrate(snapshot: RouterTabsSnapshot): Promise<void>
+}
+```
+
+## 🔄 Advanced Usage
+
+### Custom Context Menu
+
+```vue
+<router-tab
+  :contextmenu="[
+    'refresh',
+    'close',
+    { id: 'duplicate', label: 'Duplicate Tab', handler: ({ target }) => openTab(target.to) },
+    { id: 'closeOthers', label: 'Close All Others' },
+    {
+      id: 'openExternal',
+      label: 'Open in New Window',
+      handler: ({ target }) => window.open(target.to, '_blank')
+    }
+  ]"
+/>
+```
+
+### Custom Rendering
+
+```vue
+<router-tab>
+  <template #default="{ Component, route }">
+    <Suspense>
+      <ErrorBoundary>
+        <component :is="Component" :key="route.fullPath" />
+      </ErrorBoundary>
+    </Suspense>
+  </template>
+</router-tab>
+```
+
+### Advanced Persistence
+
+```vue
+<router-tab
+  :persistence="{
+    cookieKey: 'my-app-tabs',
+    expiresInDays: 30,
+    path: '/',
+    secure: true,
+    sameSite: 'strict',
+    serialize: (snapshot) => encrypt(JSON.stringify(snapshot)),
+    deserialize: (data) => JSON.parse(decrypt(data))
+  }"
+/>
+```
+
+## 🧩 Composables
+
+### useReactiveTab
+
+```vue
+<script setup lang="ts">
+import { useReactiveTab } from 'vue3-router-tab'
+
+const { routeTabTitle, routeTabIcon, routeTabClosable } = useReactiveTab({
+  title: 'Dashboard',
+  icon: 'mdi-view-dashboard',
+  closable: true
+})
+</script>
+```
+
+### useLoadingTab
+
+```vue
+<script setup lang="ts">
+import { useLoadingTab } from 'vue3-router-tab'
+
+const isLoading = ref(false)
+const { routeTabTitle, routeTabIcon, routeTabClosable } = useLoadingTab(isLoading, 'Dashboard')
+</script>
+```
+
+### useNotificationTab
+
+```vue
+<script setup lang="ts">
+import { useNotificationTab } from 'vue3-router-tab'
+
+const notificationCount = ref(0)
+const { routeTabTitle, routeTabIcon } = useNotificationTab(notificationCount, 'Messages')
+</script>
+```
+
+## 🎯 Examples
+
+### Complete App Example
+
+```vue
+<template>
+  <div id="app">
+    <nav>
+      <router-link to="/">Home</router-link>
+      <router-link to="/users">Users</router-link>
+      <router-link to="/settings">Settings</router-link>
+    </nav>
+
+    <router-tab
+      cookie-key="my-app"
+      :sortable="true"
+      page-transition="router-tab-fade"
+      @tab-sorted="onTabSorted"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouterTabs } from 'vue3-router-tab'
+
+const tabs = useRouterTabs()
+
+function onTabSorted({ tab, fromIndex, toIndex }) {
+  console.log(`Tab "${tab.title}" moved from ${fromIndex} to ${toIndex}`)
+  // Save order to backend
+  saveTabOrder(tab.id, toIndex)
+}
+</script>
+```
+
+### Real-time Updates
+
+```vue
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRouterTabs } from 'vue3-router-tab'
+
+const tabs = useRouterTabs()
+const messageCount = ref(0)
+const isOnline = ref(true)
+
+// Reactive tab title
+const routeTabTitle = computed(() =>
+  messageCount.value > 0 ? `Messages (${messageCount.value})` : 'Messages'
+)
+
+// Reactive tab icon
+const routeTabIcon = computed(() =>
+  isOnline.value ? 'mdi-message' : 'mdi-message-offline'
+)
+
+// Simulate real-time updates
+onMounted(() => {
+  // Connect to WebSocket or polling service
+  connectToRealtimeUpdates((update) => {
+    if (update.type === 'message') {
+      messageCount.value++
+    } else if (update.type === 'status') {
+      isOnline.value = update.online
+    }
+  })
+})
+</script>
+```
+
+## 🔍 Troubleshooting
+
+### Common Issues
+
+**Tabs not updating titles**
+- Ensure you're using `ref()` or `computed()` for reactive properties
+- Check that properties are properly exposed in `<script setup>`
+
+**Transitions not working**
+- Don't use custom `#default` slot without transitions
+- Ensure transition names match available transitions
+
+**Persistence not working**
+- Check that cookies are enabled
+- Verify `cookie-key` prop is set
+- Check browser console for cookie errors
+
+**KeepAlive not preserving state**
+- Ensure routes have `keepAlive: true` in meta
+- Check that components have unique keys
+
+**TypeScript errors**
+```ts
+import type { TabRecord, RouterTabsOptions } from 'vue3-router-tab'
+```
+
+### Performance Tips
+
+- Use `maxAlive` to limit cached components
+- Avoid deep watchers in tab components
+- Use `evictCache()` to manually clear cache when needed
+- Consider using `keepAlive: false` for memory-intensive components
+
+## 🌟 Migration Guide
+
+### From v1.x to v2.x
+
+```ts
+// Before
+import RouterTab from 'vue3-router-tab'
+
+// After (same)
+import RouterTab from 'vue3-router-tab'
+```
+
+The API is backward compatible. New features are additive.
+
+## 📱 Browser Support
+
+- **Chrome**: 90+
+- **Firefox**: 88+
+- **Safari**: 14+
+- **Edge**: 90+
+- **Mobile**: iOS Safari 14+, Chrome Mobile 90+
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feature/amazing-feature`
+3. Make your changes
+4. Add tests if applicable
+5. Run the build: `npm run build`
+6. Commit your changes: `git commit -m 'Add amazing feature'`
+7. Push to the branch: `git push origin feature/amazing-feature`
+8. Open a Pull Request
+
+## 📄 License
+
+MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🙏 Acknowledgments
+
+Built with ❤️ by the Vue.js community. Special thanks to all contributors and users.
+
+---
+
+**Made with ❤️ for the Vue.js ecosystem**
+
 `meta.key` accepts the shortcuts `fullPath`, `path`, or `name`, or you can supply your own function.
 
 ## Configuration

package/dist/vue3-router-tab.css

@@ -1 +1 @@
-:root{--router-tab-header-height: 42px;--router-tab-padding: 12px;--router-tab-font-size: 14px;--router-tab-transition: all .3s ease;--router-tab-primary: #3b82f6;--router-tab-background: #ffffff;--router-tab-text: #0f172a;--router-tab-border: #e2e8f0;--router-tab-header-bg: #ffffff;--router-tab-active-background: #3b82f6;--router-tab-active-text: #ffffff;--router-tab-active-border: #3b82f6;--router-tab-icon-color: #475569;--router-tab-button-background: #f8fafc;--router-tab-button-color: #0f172a;--router-tab-active-button-background: #3b82f6;--router-tab-active-button-color: #ffffff}:root[data-theme=dark]{--router-tab-background: #1e293b;--router-tab-text: #f1f5f9;--router-tab-border: #334155;--router-tab-header-bg: #1e293b;--router-tab-icon-color: #cbd5e1;--router-tab-button-background: #1f2937;--router-tab-button-color: #f8fafc;--router-tab-active-button-background: #38bdf8;--router-tab-active-button-color: #0f172a}.router-tab{display:flex;flex-direction:column;min-height:300px;background-color:var(--router-tab-background);color:var(--router-tab-text)}.router-tab__header{position:relative;z-index:10;display:flex;flex:none;align-items:center;box-sizing:border-box;height:var(--router-tab-header-height);background-color:var(--router-tab-header-bg);border-bottom:1px solid var(--router-tab-border);transition:all .2s ease}.router-tab__scroll{position:relative;flex:1 1 0px;height:100%;overflow:hidden}.router-tab__scroll-container{width:100%;height:100%;overflow:hidden}.router-tab__scroll-container.is-mobile{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.router-tab__scroll-container.is-mobile::-webkit-scrollbar{display:none}.router-tab__nav{position:relative;display:inline-flex;flex-wrap:nowrap;height:100%;margin:0;padding:0;list-style:none}.router-tab__item{position:relative;display:flex;flex:none;align-items:center;gap:.5rem;padding:0 var(--router-tab-padding);color:var(--router-tab-text);font-size:var(--router-tab-font-size);background-color:transparent;border:none;border-right:1px solid var(--router-tab-border);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--router-tab-transition);will-change:background-color,color}.router-tab__item:first-child{border-left:1px solid var(--router-tab-border)}.router-tab__item:hover{background-color:color-mix(in srgb,var(--router-tab-primary) 4%,transparent);color:var(--router-tab-primary)}.router-tab__item.is-active{background-color:var(--router-tab-active-background);color:var(--router-tab-active-text);font-weight:510}.router-tab__item.is-active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--router-tab-active-border)}.router-tab__item.is-active+.router-tab__item{border-left-color:transparent}.router-tab__item-icon{flex-shrink:0;font-size:14px;color:var(--router-tab-icon-color)}.router-tab__item.is-active .router-tab__item-icon{color:var(--router-tab-active-text)}.router-tab__item:hover .router-tab__item-icon{color:currentColor}.router-tab__item-title{min-width:auto;max-width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.router-tab__item-close{position:relative;display:block;width:0;height:12px;flex-shrink:0;overflow:hidden;border:none;border-radius:50%;background:var(--router-tab-button-background);color:var(--router-tab-button-color);cursor:pointer;transition:var(--router-tab-transition)}.router-tab__item-close:before,.router-tab__item-close:after{position:absolute;top:50%;left:50%;display:block;width:8px;height:1px;margin-left:-4px;background-color:currentColor;transition:background-color .2s ease-in-out;content:""}.router-tab__item-close:before{transform:translateY(-50%) rotate(-45deg)}.router-tab__item-close:after{transform:translateY(-50%) rotate(45deg)}.router-tab__item-close:hover{background:var(--router-tab-active-button-background);color:var(--router-tab-active-button-color)}.router-tab__item:hover .router-tab__item-close,.router-tab__item.is-active .router-tab__item-close{width:12px;margin-left:4px}.router-tab__item.is-dragging{opacity:.6;cursor:grabbing}.router-tab__item.is-drag-over{background-color:color-mix(in srgb,var(--router-tab-primary) 12%,transparent)}.router-tab__container{position:relative;flex:1 1 auto;background-color:var(--router-tab-background);overflow:hidden}.router-tab__container{padding:10px;border:1px solid var(--router-tab-border);transition:var(--router-tab-transition);will-change:background-color,border-color}.router-tab__slot-start,.router-tab__slot-end{display:none;align-items:center;gap:.25rem;padding:0 .5rem;height:100%}.router-tab__slot-start.has-content{display:flex;border-right:1px solid var(--router-tab-border)}.router-tab__slot-end.has-content{display:flex;border-left:1px solid var(--router-tab-border)}.router-tab__contextmenu{position:fixed;z-index:1000;min-width:160px;padding:6px 0;font-size:var(--router-tab-font-size);background:var(--router-tab-background);border:1px solid var(--router-tab-border);border-radius:8px;box-shadow:0 2px 8px #0000001a}.router-tab__contextmenu-item{display:block;width:100%;padding:5px 12px;line-height:32px;text-align:left;text-decoration:none;background:var(--router-tab-button-background);border:none;color:var(--router-tab-button-color);cursor:pointer;font:inherit;border-radius:4px;transition:all .2s ease-in-out;outline:none}.router-tab__contextmenu-item[aria-disabled=true]{color:color-mix(in srgb,var(--router-tab-text) 40%);pointer-events:none;cursor:not-allowed}.router-tab__contextmenu-item:focus,.router-tab__contextmenu-item:focus-visible{outline:none}.router-tab__contextmenu-item:hover:not([aria-disabled=true]),.router-tab__contextmenu-item:focus-visible,.router-tab__contextmenu-item.is-focused{background:var(--router-tab-active-button-background);color:var(--router-tab-active-button-color)}.router-tab-zoom-enter-active,.router-tab-zoom-leave-active{transition:transform all .2s ease,opacity all .2s ease}.router-tab-zoom-enter-from,.router-tab-zoom-leave-to{transform:scale(.9);opacity:0}.router-tab-zoom-enter-to,.router-tab-zoom-leave-from{transform:scale(1);opacity:1}.router-tab-zoom-move{transition:transform all .2s ease}.router-tab-swap-enter-active,.router-tab-swap-leave-active{position:relative;transition:opacity .3s ease,transform .3s ease;will-change:opacity,transform}.router-tab-swap-enter-from{opacity:0;transform:translateY(20px)}.router-tab-swap-enter-to,.router-tab-swap-leave-from{opacity:1;transform:translateY(0)}.router-tab-swap-leave-to{opacity:0;transform:translateY(-15px)}.router-tab-slide-enter-active,.router-tab-slide-leave-active{position:relative;transition:opacity .3s ease,transform .3s ease;will-change:opacity,transform}.router-tab-slide-enter-from{opacity:0;transform:translate(80px)}.router-tab-slide-enter-to,.router-tab-slide-leave-from{opacity:1;transform:translate(0)}.router-tab-slide-leave-to{opacity:0;transform:translate(-80px)}.router-tab-fade-enter-active{transition:opacity .4s ease-in;will-change:opacity}.router-tab-fade-leave-active{transition:opacity .3s ease-out;will-change:opacity}.router-tab-fade-enter-from{opacity:0}.router-tab-fade-enter-to,.router-tab-fade-leave-from{opacity:1}.router-tab-fade-leave-to{opacity:0}.router-tab-scale-enter-active,.router-tab-scale-leave-active{position:relative;transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1);will-change:opacity,transform}.router-tab-scale-enter-from{opacity:0;transform:scale(.7)}.router-tab-scale-enter-to,.router-tab-scale-leave-from{opacity:1;transform:scale(1)}.router-tab-scale-leave-to{opacity:0;transform:scale(1.2)}.router-tab-flip-enter-active,.router-tab-flip-leave-active{position:relative;transition:opacity .35s ease,transform .35s ease;transform-style:preserve-3d;will-change:opacity,transform}.router-tab-flip-enter-from{opacity:0;transform:rotateX(-90deg)}.router-tab-flip-enter-to,.router-tab-flip-leave-from{opacity:1;transform:rotateX(0)}.router-tab-flip-leave-to{opacity:0;transform:rotateX(90deg)}.router-tab-rotate-enter-active,.router-tab-rotate-leave-active{position:relative;transition:opacity .2s ease,transform .2s ease;will-change:opacity,transform}.router-tab-rotate-enter-from{opacity:0;transform:rotate(-8deg) scale(.85)}.router-tab-rotate-enter-to,.router-tab-rotate-leave-from{opacity:1;transform:rotate(0) scale(1)}.router-tab-rotate-leave-to{opacity:0;transform:rotate(8deg) scale(.85)}.router-tab-bounce-enter-active{animation:router-tab-bounce-in .5s cubic-bezier(.68,-.55,.265,1.55)}.router-tab-bounce-leave-active{animation:router-tab-bounce-out .3s ease-in}@keyframes router-tab-bounce-in{0%{opacity:0;transform:scale(.3) translateY(-80px)}50%{opacity:1;transform:scale(1.1)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes router-tab-bounce-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.7) translateY(30px)}}
+:root{--router-tab-header-height: 42px;--router-tab-padding: 12px;--router-tab-font-size: 14px;--router-tab-transition: all .3s ease;--router-tab-primary: #3b82f6;--router-tab-background: #ffffff;--router-tab-text: #0f172a;--router-tab-border: #e2e8f0;--router-tab-header-bg: #ffffff;--router-tab-active-background: #3b82f6;--router-tab-active-text: #ffffff;--router-tab-active-border: #3b82f6;--router-tab-icon-color: #475569;--router-tab-button-background: #f8fafc;--router-tab-button-color: #0f172a;--router-tab-active-button-background: #3b82f6;--router-tab-active-button-color: #ffffff}:root[data-theme=dark]{--router-tab-background: #1e293b;--router-tab-text: #f1f5f9;--router-tab-border: #334155;--router-tab-header-bg: #1e293b;--router-tab-icon-color: #cbd5e1;--router-tab-button-background: #1f2937;--router-tab-button-color: #f8fafc;--router-tab-active-button-background: #38bdf8;--router-tab-active-button-color: #0f172a}.router-tab{display:flex;flex-direction:column;min-height:300px;background-color:var(--router-tab-background);color:var(--router-tab-text)}.router-tab__header{position:relative;z-index:10;display:flex;flex:none;align-items:center;box-sizing:border-box;height:var(--router-tab-header-height);background-color:var(--router-tab-header-bg);border-bottom:1px solid var(--router-tab-border);transition:all .2s ease}.router-tab__scroll{position:relative;flex:1 1 0px;height:100%;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--router-tab-border) transparent}.router-tab__scroll::-webkit-scrollbar{height:4px}.router-tab__scroll::-webkit-scrollbar-track{background:transparent}.router-tab__scroll::-webkit-scrollbar-thumb{background:var(--router-tab-border);border-radius:2px}.router-tab__scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--router-tab-primary) 50%,transparent)}.router-tab__scroll-container{width:100%;height:100%;overflow:hidden}.router-tab__scroll-container.is-mobile{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.router-tab__scroll-container.is-mobile::-webkit-scrollbar{display:none}.router-tab__nav{position:relative;display:inline-flex;flex-wrap:nowrap;height:100%;margin:0;padding:0;list-style:none}.router-tab__item{position:relative;display:flex;flex:none;align-items:center;gap:.5rem;padding:0 var(--router-tab-padding);color:var(--router-tab-text);font-size:var(--router-tab-font-size);background-color:transparent;border:none;border-right:1px solid var(--router-tab-border);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--router-tab-transition);will-change:background-color,color}.router-tab__item:first-child{border-left:1px solid var(--router-tab-border)}.router-tab__item:hover{background-color:color-mix(in srgb,var(--router-tab-primary) 4%,transparent);color:var(--router-tab-primary)}.router-tab__item.is-active{background-color:var(--router-tab-active-background);color:var(--router-tab-active-text);font-weight:510}.router-tab__item.is-active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:var(--router-tab-active-border)}.router-tab__item.is-active+.router-tab__item{border-left-color:transparent}.router-tab__item-icon{flex-shrink:0;font-size:14px;color:var(--router-tab-icon-color)}.router-tab__item.is-active .router-tab__item-icon{color:var(--router-tab-active-text)}.router-tab__item:hover .router-tab__item-icon{color:currentColor}.router-tab__item-title{min-width:auto;max-width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.router-tab__item-close{position:relative;display:block;width:0;height:12px;flex-shrink:0;overflow:hidden;border:none;border-radius:50%;background:var(--router-tab-button-background);color:var(--router-tab-button-color);cursor:pointer;transition:var(--router-tab-transition)}.router-tab__item-close:before,.router-tab__item-close:after{position:absolute;top:50%;left:50%;display:block;width:8px;height:1px;margin-left:-4px;background-color:currentColor;transition:background-color .2s ease-in-out;content:""}.router-tab__item-close:before{transform:translateY(-50%) rotate(-45deg)}.router-tab__item-close:after{transform:translateY(-50%) rotate(45deg)}.router-tab__item-close:hover{background:var(--router-tab-active-button-background);color:var(--router-tab-active-button-color)}.router-tab__item:hover .router-tab__item-close,.router-tab__item.is-active .router-tab__item-close{width:12px;margin-left:4px}.router-tab__item.is-dragging{opacity:.6;cursor:grabbing}.router-tab__item.is-drag-over{background-color:color-mix(in srgb,var(--router-tab-primary) 12%,transparent)}.router-tab__container{position:relative;flex:1 1 auto;background-color:var(--router-tab-background);overflow:hidden}.router-tab__container{padding:10px;border:1px solid var(--router-tab-border);transition:var(--router-tab-transition);will-change:background-color,border-color}.router-tab__slot-start,.router-tab__slot-end{display:none;align-items:center;gap:.25rem;padding:0 .5rem;height:100%}.router-tab__slot-start.has-content{display:flex;border-right:1px solid var(--router-tab-border)}.router-tab__slot-end.has-content{display:flex;border-left:1px solid var(--router-tab-border)}.router-tab__contextmenu{position:fixed;z-index:1000;min-width:160px;padding:6px 0;font-size:var(--router-tab-font-size);background:var(--router-tab-background);border:1px solid var(--router-tab-border);border-radius:8px;box-shadow:0 2px 8px #0000001a}.router-tab__contextmenu-item{display:block;width:100%;padding:5px 12px;line-height:32px;text-align:left;text-decoration:none;background:var(--router-tab-button-background);border:none;color:var(--router-tab-button-color);cursor:pointer;font:inherit;border-radius:4px;transition:all .2s ease-in-out;outline:none}.router-tab__contextmenu-item[aria-disabled=true]{color:color-mix(in srgb,var(--router-tab-text) 40%);pointer-events:none;cursor:not-allowed}.router-tab__contextmenu-item:focus,.router-tab__contextmenu-item:focus-visible{outline:none}.router-tab__contextmenu-item:hover:not([aria-disabled=true]),.router-tab__contextmenu-item:focus-visible,.router-tab__contextmenu-item.is-focused{background:var(--router-tab-active-button-background);color:var(--router-tab-active-button-color)}.router-tab-zoom-enter-active,.router-tab-zoom-leave-active{transition:transform all .2s ease,opacity all .2s ease}.router-tab-zoom-enter-from,.router-tab-zoom-leave-to{transform:scale(.9);opacity:0}.router-tab-zoom-enter-to,.router-tab-zoom-leave-from{transform:scale(1);opacity:1}.router-tab-zoom-move{transition:transform all .2s ease}.router-tab-swap-enter-active,.router-tab-swap-leave-active{position:relative;transition:opacity .3s ease,transform .3s ease;will-change:opacity,transform}.router-tab-swap-enter-from{opacity:0;transform:translateY(20px)}.router-tab-swap-enter-to,.router-tab-swap-leave-from{opacity:1;transform:translateY(0)}.router-tab-swap-leave-to{opacity:0;transform:translateY(-15px)}.router-tab-slide-enter-active,.router-tab-slide-leave-active{position:relative;transition:opacity .3s ease,transform .3s ease;will-change:opacity,transform}.router-tab-slide-enter-from{opacity:0;transform:translate(80px)}.router-tab-slide-enter-to,.router-tab-slide-leave-from{opacity:1;transform:translate(0)}.router-tab-slide-leave-to{opacity:0;transform:translate(-80px)}.router-tab-fade-enter-active{transition:opacity .4s ease-in;will-change:opacity}.router-tab-fade-leave-active{transition:opacity .3s ease-out;will-change:opacity}.router-tab-fade-enter-from{opacity:0}.router-tab-fade-enter-to,.router-tab-fade-leave-from{opacity:1}.router-tab-fade-leave-to{opacity:0}.router-tab-scale-enter-active,.router-tab-scale-leave-active{position:relative;transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1);will-change:opacity,transform}.router-tab-scale-enter-from{opacity:0;transform:scale(.7)}.router-tab-scale-enter-to,.router-tab-scale-leave-from{opacity:1;transform:scale(1)}.router-tab-scale-leave-to{opacity:0;transform:scale(1.2)}.router-tab-flip-enter-active,.router-tab-flip-leave-active{position:relative;transition:opacity .35s ease,transform .35s ease;transform-style:preserve-3d;will-change:opacity,transform}.router-tab-flip-enter-from{opacity:0;transform:rotateX(-90deg)}.router-tab-flip-enter-to,.router-tab-flip-leave-from{opacity:1;transform:rotateX(0)}.router-tab-flip-leave-to{opacity:0;transform:rotateX(90deg)}.router-tab-rotate-enter-active,.router-tab-rotate-leave-active{position:relative;transition:opacity .2s ease,transform .2s ease;will-change:opacity,transform}.router-tab-rotate-enter-from{opacity:0;transform:rotate(-8deg) scale(.85)}.router-tab-rotate-enter-to,.router-tab-rotate-leave-from{opacity:1;transform:rotate(0) scale(1)}.router-tab-rotate-leave-to{opacity:0;transform:rotate(8deg) scale(.85)}.router-tab-bounce-enter-active{animation:router-tab-bounce-in .5s cubic-bezier(.68,-.55,.265,1.55)}.router-tab-bounce-leave-active{animation:router-tab-bounce-out .3s ease-in}@keyframes router-tab-bounce-in{0%{opacity:0;transform:scale(.3) translateY(-80px)}50%{opacity:1;transform:scale(1.1)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes router-tab-bounce-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.7) translateY(30px)}}