commit cf21a84263e1f73952643d7bee351f82d24bf720
Author: Matthieu MALVACHE <matthieu@root.cloud>
Date:   Wed Dec 10 17:54:22 2025 +0100

    Initial release: JMAP Webmail Client
    
    A modern, privacy-focused webmail client built with Next.js and the JMAP protocol.
    Designed for Stalwart Mail Server.
    
    Features:
    - Full email operations (compose, reply, forward, threading)
    - Real-time push notifications
    - Dark/light theme support
    - Mobile responsive design
    - Keyboard shortcuts
    - Drag-and-drop organization
    - i18n (English/French)
    - Security-first (external content blocked, HTML sanitization)

diff --git a/.env.example b/.env.example
new file mode 100644
index 00000000..5b695bed
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,9 @@
+# JMAP Webmail Configuration
+# Copy this file to .env.local and fill in your values
+
+# App name displayed in the UI
+NEXT_PUBLIC_APP_NAME=JMAP Webmail
+
+# JMAP server URL (required)
+# This is the URL of your JMAP-compatible mail server
+NEXT_PUBLIC_JMAP_SERVER_URL=https://your-jmap-server.com
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..5dd01922
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env*
+!.env.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# claude code
+.claude/
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100644
index 00000000..58f8aa20
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+npx tsc --noEmit && npx eslint . --ext .ts,.tsx
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 00000000..d430667c
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,190 @@
+# Contributing to JMAP Webmail
+
+Thank you for your interest in contributing to JMAP Webmail! This document provides guidelines and information for contributors.
+
+## Getting Started
+
+### Development Setup
+
+1. **Fork and clone** the repository:
+   ```bash
+   git clone https://github.com/root-fr/jmap-webmail.git
+   cd jmap-webmail
+   ```
+
+2. **Install dependencies**:
+   ```bash
+   npm install
+   ```
+
+3. **Set up environment**:
+   ```bash
+   cp .env.example .env.local
+   # Edit .env.local with your JMAP server URL
+   ```
+
+4. **Start development server**:
+   ```bash
+   npm run dev
+   ```
+
+### Code Quality
+
+Before submitting a pull request, ensure your code passes all checks:
+
+```bash
+# Type checking
+npm run typecheck
+
+# Linting
+npm run lint
+
+# Fix lint issues automatically
+npm run lint:fix
+```
+
+These checks run automatically on commit via Husky pre-commit hooks.
+
+## Code Style Guidelines
+
+### TypeScript
+
+- Use TypeScript for all new code
+- Define proper types and interfaces
+- Avoid `any` types when possible
+- Use meaningful variable and function names
+
+### React Components
+
+- Use functional components with hooks
+- Keep components focused and single-purpose
+- Extract reusable logic into custom hooks
+- Place components in appropriate directories under `/components`
+
+### Styling
+
+- Use Tailwind CSS utility classes
+- Follow the existing design system
+- Support both dark and light themes
+- Use CSS variables for theme colors
+
+## Internationalization (i18n)
+
+This project uses **next-intl** for internationalization. Please follow these guidelines:
+
+### Key Rules
+
+1. **Never hardcode user-facing text** - Always use translations:
+   ```tsx
+   const t = useTranslations('namespace');
+   return <div>{t('key')}</div>;
+   ```
+
+2. **Translation file locations**:
+   - English: `/locales/en/common.json`
+   - French: `/locales/fr/common.json`
+
+3. **Namespace organization**:
+   - `login.*` - Login page strings
+   - `sidebar.*` - Sidebar navigation
+   - `email_list.*` - Email list component
+   - `email_viewer.*` - Email viewer component
+   - `email_composer.*` - Email composer
+   - `common.*` - Shared strings
+   - `notifications.*` - Toast/alert messages
+   - `settings.*` - Settings page
+
+4. **Adding new strings**:
+   - Add to **both** English and French translation files
+   - Use descriptive, hierarchical keys
+   - Keep translations consistent in tone
+
+5. **Locale-aware navigation**:
+   ```tsx
+   router.push(`/${params.locale}/settings`);
+   ```
+
+## Pull Request Process
+
+### Before Submitting
+
+1. **Create a feature branch**:
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+
+2. **Make your changes** following the code style guidelines
+
+3. **Test your changes** thoroughly
+
+4. **Update translations** if you added user-facing text
+
+5. **Run all checks**:
+   ```bash
+   npm run typecheck && npm run lint
+   ```
+
+### Submitting
+
+1. **Push your branch** to your fork
+
+2. **Open a Pull Request** with:
+   - Clear title describing the change
+   - Description of what was changed and why
+   - Screenshots for UI changes
+   - Reference to any related issues
+
+### Commit Message Convention
+
+Follow the conventional commits format:
+
+- `feat:` - New features
+- `fix:` - Bug fixes
+- `docs:` - Documentation changes
+- `style:` - Code style changes (formatting, etc.)
+- `refactor:` - Code refactoring
+- `test:` - Adding or updating tests
+- `chore:` - Maintenance tasks
+
+Examples:
+```
+feat: add email threading support
+fix: resolve attachment download issue
+docs: update README with keyboard shortcuts
+```
+
+## Project Structure
+
+```
+jmap-webmail/
+├── app/                    # Next.js App Router pages
+│   └── [locale]/          # Locale-aware routing
+├── components/            # React components
+│   ├── email/            # Email-related components
+│   ├── layout/           # Layout components
+│   ├── settings/         # Settings components
+│   └── ui/               # Reusable UI components
+├── contexts/             # React contexts
+├── hooks/                # Custom React hooks
+├── lib/                  # Utilities and libraries
+│   └── jmap/            # JMAP client implementation
+├── locales/              # Translation files
+│   ├── en/              # English translations
+│   └── fr/              # French translations
+└── stores/               # Zustand state stores
+```
+
+## Security
+
+- **Never commit sensitive data** (API keys, passwords, etc.)
+- **Sanitize user input** and email content
+- **Block external content** by default for privacy
+- Report security vulnerabilities privately
+
+## Questions?
+
+If you have questions about contributing, feel free to:
+- Open an issue for discussion
+- Check existing issues and pull requests
+
+Thank you for helping improve JMAP Webmail!
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 00000000..783256c1
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Matthieu MALVACHE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 00000000..1c4a650b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,163 @@
+# JMAP Webmail
+
+A modern, privacy-focused webmail client built with Next.js and the JMAP protocol.
+
+## Built for Stalwart
+
+This webmail client is designed to work seamlessly with [**Stalwart Mail Server**](https://stalw.art/) - a modern, secure, and blazingly fast mail server written in Rust.
+
+**Why Stalwart?**
+- **Modern Architecture**: Built from the ground up with Rust for performance and safety
+- **JMAP-Native**: First-class support for the JMAP protocol (not just IMAP/SMTP bolted on)
+- **Privacy-Focused**: Self-hosted, no third-party dependencies, full control over your data
+- **Feature-Rich**: Supports JMAP, IMAP, SMTP, ManageSieve, and more
+
+[Stalwart GitHub](https://github.com/stalwartlabs/mail-server) | [Documentation](https://stalw.art/docs/)
+
+## Features
+
+### Core Email Operations
+- Read, compose, reply, reply-all, and forward emails
+- Full HTML email rendering with security sanitization
+- Attachment upload and download
+- Draft auto-save with discard confirmation
+- Email threading with Gmail-style inline expansion
+- Mark as read/unread, star/unstar
+- Archive and delete with configurable behavior
+- Color tags/labels for email organization
+- Full-text search
+
+### User Interface
+- Clean, minimalist three-pane layout
+- Dark and light theme support
+- Responsive design for mobile and desktop
+- Keyboard shortcuts for power users
+- Drag-and-drop email organization
+- Right-click context menus
+- Smooth animations and transitions
+- Infinite scroll pagination
+
+### Real-time Updates
+- Push notifications via JMAP EventSource
+- Real-time unread counts
+- Live email arrival notifications
+- Connection status indicator
+
+### Security & Privacy
+- External content blocked by default
+- HTML sanitization with DOMPurify
+- SPF/DKIM/DMARC status indicators
+- No password storage (session-based auth)
+- Shared folder support with proper permissions
+
+### Internationalization
+- English and French language support
+- Automatic browser language detection
+- Persistent language preference
+
+## Tech Stack
+
+- **Framework**: [Next.js 16](https://nextjs.org/) with App Router
+- **Language**: TypeScript
+- **Styling**: [Tailwind CSS v4](https://tailwindcss.com/)
+- **State Management**: [Zustand](https://zustand-demo.pmnd.rs/)
+- **JMAP Client**: [jmap-jam](https://www.npmjs.com/package/jmap-jam)
+- **i18n**: [next-intl](https://next-intl-docs.vercel.app/)
+- **Icons**: [Lucide React](https://lucide.dev/)
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+
+- A JMAP-compatible mail server (we recommend [Stalwart](https://stalw.art/))
+
+### Installation
+
+```bash
+# Clone the repository
+git clone https://github.com/root-fr/jmap-webmail.git
+cd jmap-webmail
+
+# Install dependencies
+npm install
+
+# Copy environment configuration
+cp .env.example .env.local
+```
+
+### Configuration
+
+Edit `.env.local` with your settings:
+
+```env
+# App name displayed in the UI
+NEXT_PUBLIC_APP_NAME=My Webmail
+
+# Your JMAP server URL
+NEXT_PUBLIC_JMAP_SERVER_URL=https://mail.example.com
+```
+
+### Development
+
+```bash
+# Start development server
+npm run dev
+
+# Type checking
+npm run typecheck
+
+# Linting
+npm run lint
+```
+
+### Production Build
+
+```bash
+# Build for production
+npm run build
+
+# Start production server
+npm start
+```
+
+## Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `j` / `k` | Navigate between emails |
+| `Enter` / `o` | Open selected email |
+| `Esc` | Close viewer / deselect |
+| `c` | Compose new email |
+| `r` | Reply |
+| `R` / `a` | Reply all |
+| `f` | Forward |
+| `s` | Toggle star |
+| `e` | Archive |
+| `#` / `Delete` | Delete |
+| `u` | Mark as unread |
+| `/` | Focus search |
+| `x` | Expand/collapse thread |
+| `?` | Show shortcuts help |
+
+## Screenshots
+
+*Coming soon*
+
+## Contributing
+
+We welcome contributions! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
+
+## Roadmap
+
+See [ROADMAP.md](ROADMAP.md) for planned features and development status.
+
+## Acknowledgments
+
+- [Stalwart Labs](https://stalw.art/) for creating an excellent JMAP mail server
+- The [JMAP](https://jmap.io/) working group for the protocol specification
+- All contributors and users of this project
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
diff --git a/ROADMAP.md b/ROADMAP.md
new file mode 100644
index 00000000..49e098f9
--- /dev/null
+++ b/ROADMAP.md
@@ -0,0 +1,133 @@
+# JMAP Webmail - Roadmap
+
+This document tracks the development status and planned features for JMAP Webmail.
+
+## Completed Features
+
+### Core Infrastructure
+- [x] Next.js 16 with TypeScript and App Router
+- [x] Tailwind CSS v4 with Oxide engine
+- [x] Zustand state management
+- [x] JMAP client implementation (jmap-jam)
+
+### Authentication
+- [x] Login with JMAP server authentication
+- [x] Session management (no password storage for security)
+- [x] Username autocomplete with history
+- [x] Logout functionality
+- [x] Authentication error handling
+
+### JMAP Server Connection
+- [x] Session establishment and keep-alive
+- [x] Connection error handling and retries
+- [x] Storage quota display
+- [x] Server capability detection
+- [x] Shared folders support (multi-account access)
+
+### Email Operations
+- [x] Email fetching and display
+- [x] Full HTML email rendering
+- [x] Compose, reply, reply-all, forward
+- [x] Draft auto-save with discard confirmation
+- [x] Mark as read/unread
+- [x] Star/unstar emails
+- [x] Delete and archive
+- [x] Color tags/labels
+- [x] Full-text search
+- [x] Attachment upload and download
+- [x] Batch operations (multi-select)
+- [x] Quick reply form
+- [x] Email threading (Gmail-style inline expansion)
+
+### Real-time Updates
+- [x] EventSource for JMAP push notifications
+- [x] State synchronization
+- [x] Email arrival notifications
+- [x] Real-time unread counts
+- [x] Mailbox change handling
+
+### User Interface
+- [x] Three-pane layout (sidebar, list, viewer)
+- [x] Minimalist design system
+- [x] Dark and light theme support
+- [x] Custom scrollbars
+- [x] Mobile responsive design
+- [x] Keyboard shortcuts
+- [x] Drag-and-drop email organization
+- [x] Right-click context menus
+- [x] Hierarchical mailbox display
+- [x] Email list with avatars and visual hierarchy
+- [x] Expandable email headers
+- [x] External content warning banner
+- [x] SPF/DKIM/DMARC status indicators
+- [x] Loading states and skeletons
+- [x] Smooth transitions and animations
+- [x] Infinite scroll pagination
+- [x] Error boundaries
+- [x] Settings page with preferences
+
+### Internationalization
+- [x] English language support
+- [x] French language support
+- [x] Automatic browser language detection
+- [x] Language preference persistence
+
+### Security
+- [x] External content blocked by default
+- [x] HTML sanitization with DOMPurify
+- [x] User control for loading external content
+
+## Planned Features
+
+### Address Book & Contacts
+- [ ] Contact store with CRUD operations
+- [ ] Contacts list view with search/filter
+- [ ] Contact details view/edit form
+- [ ] Contact groups management
+- [ ] vCard import/export
+- [ ] JMAP contacts sync (if server supports)
+- [ ] Email autocomplete from contacts
+- [ ] Contacts integration in composer
+
+### Advanced Features
+- [ ] Email filters and rules
+- [ ] Calendar integration (JMAP Calendars)
+- [ ] Email templates
+- [ ] Signature management
+- [ ] Vacation responder settings
+- [ ] Email aliases support
+- [ ] Advanced search with filters
+- [ ] Email encryption (PGP/GPG)
+
+### Performance Optimizations
+- [ ] Virtual scrolling for large lists
+- [ ] Email content caching
+- [ ] Bundle size optimization
+- [ ] Service worker for offline support
+- [ ] Lazy loading for attachments
+
+### Testing
+- [ ] Unit tests for utilities
+- [ ] Component tests
+- [ ] E2E tests with Playwright
+- [ ] Accessibility testing
+- [ ] Performance testing
+
+### Deployment
+- [ ] Health check endpoint
+- [ ] Production build optimizations
+- [ ] Monitoring and logging
+
+### Security Enhancements
+- [ ] CSP headers configuration
+- [ ] Additional XSS protection layers
+- [ ] Rate limiting
+- [ ] CORS configuration
+
+## Known Issues
+
+- [ ] Next.js workspace root warning (cosmetic)
+
+## Contributing
+
+Want to help implement a feature? Check out our [CONTRIBUTING.md](CONTRIBUTING.md) guide!
diff --git a/app/[locale]/error.tsx b/app/[locale]/error.tsx
new file mode 100644
index 00000000..b5c7ae6b
--- /dev/null
+++ b/app/[locale]/error.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect } from "react";
+import { useTranslations } from "next-intl";
+import { AlertCircle, RefreshCw, Home } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useParams, useRouter } from "next/navigation";
+
+/**
+ * Route-level error boundary for locale pages.
+ * Catches errors in the locale layout and its children.
+ */
+export default function LocaleError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const t = useTranslations("errors");
+  const params = useParams();
+  const router = useRouter();
+
+  useEffect(() => {
+    console.error("Route error:", error);
+  }, [error]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background">
+      <div className="text-center max-w-md px-4">
+        <div className="w-16 h-16 mx-auto mb-6 rounded-full bg-red-100 dark:bg-red-900/20 flex items-center justify-center">
+          <AlertCircle className="w-8 h-8 text-red-600 dark:text-red-400" />
+        </div>
+        <h2 className="text-xl font-semibold text-foreground mb-2">
+          {t("page_error_title")}
+        </h2>
+        <p className="text-muted-foreground mb-6">
+          {t("page_error_description")}
+        </p>
+        <div className="flex gap-3 justify-center">
+          <Button variant="outline" onClick={() => router.push(`/${params.locale}`)}>
+            <Home className="w-4 h-4 mr-2" />
+            {t("go_home")}
+          </Button>
+          <Button onClick={reset}>
+            <RefreshCw className="w-4 h-4 mr-2" />
+            {t("try_again")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
new file mode 100644
index 00000000..8ee5d7ea
--- /dev/null
+++ b/app/[locale]/layout.tsx
@@ -0,0 +1,77 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { notFound } from "next/navigation";
+import { NextIntlClientProvider } from "next-intl";
+import { ThemeProvider } from "@/components/providers/theme-provider";
+import { locales } from "@/i18n/request";
+import "../globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "JMAP Webmail",
+  description: "Minimalist webmail client using JMAP protocol",
+};
+
+export default async function LocaleLayout({
+  children,
+  params
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+
+  // Validate that the incoming `locale` parameter is valid
+  if (!(locales as readonly string[]).includes(locale)) notFound();
+
+  // Load messages for the current locale
+  let messages;
+  try {
+    messages = (await import(`@/locales/${locale}/common.json`)).default;
+  } catch {
+    notFound();
+  }
+
+  return (
+    <html lang={locale} suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  const stored = localStorage.getItem('theme-storage');
+                  const theme = stored ? JSON.parse(stored).state.theme : 'system';
+                  const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                  const resolved = theme === 'system' ? systemTheme : theme;
+                  document.documentElement.classList.remove('light', 'dark');
+                  document.documentElement.classList.add(resolved);
+                } catch (e) {
+                  document.documentElement.classList.add('light');
+                }
+              })();
+            `,
+          }}
+        />
+      </head>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <NextIntlClientProvider locale={locale} messages={messages}>
+          <ThemeProvider>
+            {children}
+          </ThemeProvider>
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/app/[locale]/login/page.tsx b/app/[locale]/login/page.tsx
new file mode 100644
index 00000000..baa5b812
--- /dev/null
+++ b/app/[locale]/login/page.tsx
@@ -0,0 +1,311 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { useRouter, useParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useAuthStore } from "@/stores/auth-store";
+import { Mail, AlertCircle, Loader2, X } from "lucide-react";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const params = useParams();
+  const t = useTranslations("login");
+  const { login, isLoading, error, clearError, isAuthenticated } = useAuthStore();
+
+  const serverUrl = process.env.NEXT_PUBLIC_JMAP_SERVER_URL;
+  const appName = process.env.NEXT_PUBLIC_APP_NAME || 'Webmail';
+
+  // All hooks must be called unconditionally at the top
+  const [formData, setFormData] = useState({
+    username: "",
+    password: "",
+  });
+
+  const [savedUsernames, setSavedUsernames] = useState<string[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [filteredSuggestions, setFilteredSuggestions] = useState<string[]>([]);
+  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
+  const suggestionsRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const justSelectedSuggestion = useRef(false);
+
+  // Set page title
+  useEffect(() => {
+    if (serverUrl) {
+      document.title = appName;
+    }
+  }, [appName, serverUrl]);
+
+  // Load saved usernames from localStorage on mount
+  useEffect(() => {
+    if (!serverUrl) return;
+    const saved = localStorage.getItem("webmail_usernames");
+    if (saved) {
+      try {
+        const usernames = JSON.parse(saved);
+        setSavedUsernames(usernames);
+      } catch {
+        console.error("Failed to parse saved usernames");
+      }
+    }
+  }, [serverUrl]);
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.push(`/${params.locale}`);
+    }
+  }, [isAuthenticated, router, params.locale]);
+
+  useEffect(() => {
+    clearError();
+  }, [formData, clearError]);
+
+  // Filter suggestions based on input
+  useEffect(() => {
+    if (!serverUrl) return;
+    // Skip showing suggestions if we just selected one
+    if (justSelectedSuggestion.current) {
+      justSelectedSuggestion.current = false;
+      return;
+    }
+
+    if (formData.username && savedUsernames.length > 0) {
+      const filtered = savedUsernames.filter(username =>
+        username.toLowerCase().includes(formData.username.toLowerCase())
+      );
+      setFilteredSuggestions(filtered);
+      setShowSuggestions(filtered.length > 0);
+    } else if (formData.username === "" && savedUsernames.length > 0) {
+      setFilteredSuggestions(savedUsernames);
+      setShowSuggestions(false); // Don't show on empty input
+    } else {
+      setShowSuggestions(false);
+    }
+    setSelectedSuggestionIndex(-1);
+  }, [formData.username, savedUsernames, serverUrl]);
+
+  // Close suggestions when clicking outside
+  useEffect(() => {
+    if (!serverUrl) return;
+    const handleClickOutside = (event: MouseEvent) => {
+      if (suggestionsRef.current && !suggestionsRef.current.contains(event.target as Node) &&
+          inputRef.current && !inputRef.current.contains(event.target as Node)) {
+        setShowSuggestions(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [serverUrl]);
+
+  // Show error if JMAP server URL is not configured
+  if (!serverUrl) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
+        <div className="w-full max-w-sm mx-auto px-4 text-center">
+          <div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-red-500/10 mb-6">
+            <AlertCircle className="w-10 h-10 text-red-500" />
+          </div>
+          <h1 className="text-xl font-medium text-foreground mb-2">Configuration Error</h1>
+          <p className="text-muted-foreground text-sm">
+            NEXT_PUBLIC_JMAP_SERVER_URL environment variable is not set.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Save username on successful login
+  const saveUsername = (username: string) => {
+    const saved = localStorage.getItem("webmail_usernames");
+    let usernames: string[] = [];
+
+    if (saved) {
+      try {
+        usernames = JSON.parse(saved);
+      } catch {
+        console.error("Failed to parse saved usernames");
+      }
+    }
+
+    // Add username if not already present, keep max 5 recent usernames
+    if (!usernames.includes(username)) {
+      usernames = [username, ...usernames].slice(0, 5);
+      localStorage.setItem("webmail_usernames", JSON.stringify(usernames));
+      setSavedUsernames(usernames);
+    }
+  };
+
+  // Remove a username from saved list
+  const removeUsername = (username: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    const updated = savedUsernames.filter(u => u !== username);
+    localStorage.setItem("webmail_usernames", JSON.stringify(updated));
+    setSavedUsernames(updated);
+    setFilteredSuggestions(updated.filter(u =>
+      u.toLowerCase().includes(formData.username.toLowerCase())
+    ));
+  };
+
+  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({ ...formData, username: e.target.value });
+  };
+
+  const handleUsernameFocus = () => {
+    if (savedUsernames.length > 0 && formData.username === "") {
+      setFilteredSuggestions(savedUsernames);
+      setShowSuggestions(true);
+    } else if (filteredSuggestions.length > 0) {
+      setShowSuggestions(true);
+    }
+  };
+
+  const selectSuggestion = (username: string) => {
+    justSelectedSuggestion.current = true;
+    setFormData({ ...formData, username });
+    setShowSuggestions(false);
+    // Focus password field
+    document.getElementById("password")?.focus();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!showSuggestions || filteredSuggestions.length === 0) return;
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedSuggestionIndex(prev =>
+        prev < filteredSuggestions.length - 1 ? prev + 1 : prev
+      );
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedSuggestionIndex(prev => prev > 0 ? prev - 1 : -1);
+    } else if (e.key === "Enter" && selectedSuggestionIndex >= 0) {
+      e.preventDefault();
+      selectSuggestion(filteredSuggestions[selectedSuggestionIndex]);
+    } else if (e.key === "Escape") {
+      setShowSuggestions(false);
+      setSelectedSuggestionIndex(-1);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const success = await login(
+      serverUrl,
+      formData.username,
+      formData.password
+    );
+
+    if (success) {
+      saveUsername(formData.username);
+      router.push(`/${params.locale}`);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
+      <div className="w-full max-w-sm mx-auto px-4">
+        {/* Logo */}
+        <div className="text-center mb-12">
+          <div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-gradient-to-br from-primary/10 to-primary/5 mb-6 shadow-lg shadow-primary/5">
+            <Mail className="w-10 h-10 text-primary" />
+          </div>
+          <h1 className="text-3xl font-light text-foreground tracking-tight">
+            {appName}
+          </h1>
+        </div>
+
+        {/* Error Message */}
+        {error && (
+          <div className="mb-6 p-4 bg-red-500/10 border border-red-500/20 rounded-lg flex items-start gap-3">
+            <AlertCircle className="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" />
+            <p className="text-sm text-red-600 dark:text-red-400">
+              {t(`error.${error}`) || t("error.generic")}
+            </p>
+          </div>
+        )}
+
+        {/* Login Form */}
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-4">
+            <div className="relative">
+              <Input
+                ref={inputRef}
+                id="username"
+                type="text"
+                value={formData.username}
+                onChange={handleUsernameChange}
+                onFocus={handleUsernameFocus}
+                onKeyDown={handleKeyDown}
+                className="h-12 px-4 bg-secondary/50 border-border/50 focus:bg-secondary focus:border-primary/50 transition-colors"
+                placeholder={t("username_placeholder")}
+                required
+                autoComplete="off"
+                data-form-type="other"
+                data-lpignore="true"
+                autoFocus
+              />
+
+              {/* Custom autocomplete dropdown */}
+              {showSuggestions && filteredSuggestions.length > 0 && (
+                <div
+                  ref={suggestionsRef}
+                  className="absolute top-full mt-1 w-full bg-secondary border border-border rounded-md shadow-lg z-50 overflow-hidden"
+                >
+                  {filteredSuggestions.map((username, index) => (
+                    <div
+                      key={username}
+                      className={`px-4 py-2.5 flex items-center justify-between hover:bg-muted cursor-pointer transition-colors ${
+                        index === selectedSuggestionIndex ? "bg-muted" : ""
+                      }`}
+                      onClick={() => selectSuggestion(username)}
+                    >
+                      <span className="text-sm text-foreground">{username}</span>
+                      <button
+                        type="button"
+                        onClick={(e) => removeUsername(username, e)}
+                        className="p-1 hover:bg-background rounded transition-colors"
+                        title="Remove from history"
+                      >
+                        <X className="w-3 h-3 text-muted-foreground" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <Input
+              id="password"
+              type="password"
+              value={formData.password}
+              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+              className="h-12 px-4 bg-secondary/50 border-border/50 focus:bg-secondary focus:border-primary/50 transition-colors"
+              placeholder={t("password_placeholder")}
+              required
+              autoComplete="current-password"
+            />
+          </div>
+
+          <Button
+            type="submit"
+            className="w-full h-12 font-medium text-base bg-primary hover:bg-primary/90 transition-all duration-200 shadow-lg shadow-primary/20"
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <div className="flex items-center gap-2">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                {t("signing_in")}
+              </div>
+            ) : (
+              t("sign_in")
+            )}
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
new file mode 100644
index 00000000..17a8437d
--- /dev/null
+++ b/app/[locale]/page.tsx
@@ -0,0 +1,837 @@
+"use client";
+
+import { useEffect, useState, useRef, useMemo } from "react";
+import { useRouter, useParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Sidebar } from "@/components/layout/sidebar";
+import { EmailList } from "@/components/email/email-list";
+import { EmailViewer } from "@/components/email/email-viewer";
+import { EmailComposer } from "@/components/email/email-composer";
+import { ThreadConversationView } from "@/components/email/thread-conversation-view";
+import { MobileHeader, MobileViewerHeader } from "@/components/layout/mobile-header";
+import { ThreadGroup, Email } from "@/lib/jmap/types";
+import { KeyboardShortcutsModal } from "@/components/keyboard-shortcuts-modal";
+import { useEmailStore } from "@/stores/email-store";
+import { useAuthStore } from "@/stores/auth-store";
+import { useSettingsStore } from "@/stores/settings-store";
+import { useUIStore } from "@/stores/ui-store";
+import { useDeviceDetection } from "@/hooks/use-media-query";
+import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
+import { debug } from "@/lib/debug";
+import { cn } from "@/lib/utils";
+import {
+  ErrorBoundary,
+  SidebarErrorFallback,
+  EmailListErrorFallback,
+  EmailViewerErrorFallback,
+  ComposerErrorFallback,
+} from "@/components/error";
+import { DragDropProvider } from "@/contexts/drag-drop-context";
+
+export default function Home() {
+  const router = useRouter();
+  const params = useParams();
+  const t = useTranslations();
+  const [showComposer, setShowComposer] = useState(false);
+  const [composerMode, setComposerMode] = useState<'compose' | 'reply' | 'replyAll' | 'forward'>('compose');
+  const [initialCheckDone, setInitialCheckDone] = useState(false);
+  const [showShortcutsModal, setShowShortcutsModal] = useState(false);
+  // Mobile conversation view state
+  const [conversationThread, setConversationThread] = useState<ThreadGroup | null>(null);
+  const [conversationEmails, setConversationEmails] = useState<Email[]>([]);
+  const [isLoadingConversation, setIsLoadingConversation] = useState(false);
+  const markAsReadTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const { isAuthenticated, client, logout, checkAuth, isLoading: authLoading } = useAuthStore();
+
+  // Mobile responsive hooks
+  const { isMobile } = useDeviceDetection();
+  const { activeView, sidebarOpen, setSidebarOpen, setActiveView } = useUIStore();
+  const {
+    emails,
+    mailboxes,
+    selectedEmail,
+    selectedMailbox,
+    quota,
+    isPushConnected,
+    newEmailNotification,
+    selectEmail,
+    selectMailbox,
+    selectAllEmails,
+    clearSelection,
+    fetchMailboxes,
+    fetchEmails,
+    fetchQuota,
+    sendEmail,
+    deleteEmail,
+    markAsRead,
+    toggleStar,
+    moveToMailbox,
+    searchEmails,
+    isLoading,
+    isLoadingEmail,
+    setLoadingEmail,
+    setPushConnected,
+    handleStateChange,
+    clearNewEmailNotification,
+  } = useEmailStore();
+
+  // Play notification sound for new emails
+  const playNotificationSound = () => {
+    try {
+      // Use Web Audio API for a simple notification beep
+      const audioContext = new (window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)();
+      const oscillator = audioContext.createOscillator();
+      const gainNode = audioContext.createGain();
+
+      oscillator.connect(gainNode);
+      gainNode.connect(audioContext.destination);
+
+      oscillator.frequency.value = 800; // Hz
+      oscillator.type = 'sine';
+      gainNode.gain.value = 0.1; // Low volume
+
+      oscillator.start();
+      oscillator.stop(audioContext.currentTime + 0.15); // Short beep
+    } catch (e) {
+      debug.log('Could not play notification sound:', e);
+    }
+  };
+
+  // Keyboard shortcuts handlers
+  const keyboardHandlers = useMemo(() => ({
+    onNextEmail: () => {
+      if (emails.length === 0) return;
+      const currentIndex = selectedEmail ? emails.findIndex(e => e.id === selectedEmail.id) : -1;
+      const nextIndex = currentIndex < emails.length - 1 ? currentIndex + 1 : currentIndex;
+      if (nextIndex >= 0 && nextIndex < emails.length) {
+        handleEmailSelect(emails[nextIndex]);
+      }
+    },
+    onPreviousEmail: () => {
+      if (emails.length === 0) return;
+      const currentIndex = selectedEmail ? emails.findIndex(e => e.id === selectedEmail.id) : emails.length;
+      const prevIndex = currentIndex > 0 ? currentIndex - 1 : 0;
+      if (prevIndex >= 0 && prevIndex < emails.length) {
+        handleEmailSelect(emails[prevIndex]);
+      }
+    },
+    onOpenEmail: () => {
+      // Email is already opened when selected
+    },
+    onCloseEmail: () => {
+      selectEmail(null);
+      if (isMobile) {
+        setActiveView("list");
+      }
+    },
+    onReply: () => {
+      if (selectedEmail) handleReply();
+    },
+    onReplyAll: () => {
+      if (selectedEmail) handleReplyAll();
+    },
+    onForward: () => {
+      if (selectedEmail) handleForward();
+    },
+    onToggleStar: () => {
+      if (selectedEmail) handleToggleStar();
+    },
+    onArchive: () => {
+      if (selectedEmail) handleArchive();
+    },
+    onDelete: () => {
+      if (selectedEmail) handleDelete();
+    },
+    onMarkAsUnread: async () => {
+      if (selectedEmail && client) {
+        await markAsRead(client, selectedEmail.id, false);
+      }
+    },
+    onMarkAsRead: async () => {
+      if (selectedEmail && client) {
+        await markAsRead(client, selectedEmail.id, true);
+      }
+    },
+    onCompose: () => {
+      setComposerMode('compose');
+      setShowComposer(true);
+    },
+    onFocusSearch: () => {
+      const searchInput = document.querySelector('[data-search-input]') as HTMLInputElement;
+      if (searchInput) {
+        searchInput.focus();
+        searchInput.select();
+      }
+    },
+    onShowHelp: () => {
+      setShowShortcutsModal(true);
+    },
+    onRefresh: async () => {
+      if (client && selectedMailbox) {
+        await fetchEmails(client, selectedMailbox);
+      }
+    },
+    onSelectAll: () => {
+      selectAllEmails();
+    },
+    onDeselectAll: () => {
+      clearSelection();
+    },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [emails, selectedEmail, client, selectedMailbox, isMobile]);
+
+  // Initialize keyboard shortcuts
+  useKeyboardShortcuts({
+    enabled: isAuthenticated && !showComposer,
+    emails,
+    selectedEmailId: selectedEmail?.id,
+    handlers: keyboardHandlers,
+  });
+
+  // Update page title based on context
+  useEffect(() => {
+    let title = "Webmail";
+
+    if (showComposer) {
+      // Composing email
+      const modeText = {
+        compose: t('email_composer.new_message'),
+        reply: t('email_composer.reply'),
+        replyAll: t('email_composer.reply_all'),
+        forward: t('email_composer.forward'),
+      }[composerMode] || t('email_composer.new_message');
+      title = `${modeText} - Webmail`;
+    } else if (selectedEmail) {
+      // Reading email
+      const subject = selectedEmail.subject || t('email_viewer.no_subject');
+      title = `${subject} - Webmail`;
+    } else if (selectedMailbox && mailboxes.length > 0) {
+      // Mailbox view
+      const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
+      if (mailbox) {
+        const mailboxName = mailbox.name;
+        const unreadCount = mailbox.unreadEmails || 0;
+        title = unreadCount > 0
+          ? `${mailboxName} (${unreadCount}) - Webmail`
+          : `${mailboxName} - Webmail`;
+      }
+    }
+
+    document.title = title;
+  }, [showComposer, composerMode, selectedEmail, selectedMailbox, mailboxes, t]);
+
+  // Check auth on mount
+  useEffect(() => {
+    checkAuth().finally(() => {
+      setInitialCheckDone(true);
+    });
+  }, [checkAuth]);
+
+  // Redirect to login if not authenticated
+  useEffect(() => {
+    if (initialCheckDone && !isAuthenticated && !authLoading) {
+      router.push(`/${params.locale}/login`);
+    }
+  }, [initialCheckDone, isAuthenticated, authLoading, router, params.locale]);
+
+  // Load mailboxes and emails when authenticated (only if not already loaded)
+  useEffect(() => {
+    if (isAuthenticated && client && mailboxes.length === 0) {
+      const loadData = async () => {
+        try {
+          // First fetch mailboxes and quota (inbox will be auto-selected in fetchMailboxes)
+          await Promise.all([
+            fetchMailboxes(client),
+            fetchQuota(client)
+          ]);
+
+          // Get the selected mailbox (should be inbox by default)
+          const state = useEmailStore.getState();
+          const selectedMailboxId = state.selectedMailbox;
+
+          // Fetch emails for the selected mailbox
+          if (selectedMailboxId) {
+            await fetchEmails(client, selectedMailboxId);
+          } else {
+            await fetchEmails(client);
+          }
+
+          // Setup push notifications after successful data load
+          try {
+            // Register state change callback
+            client.onStateChange((change) => handleStateChange(change, client));
+
+            // Start receiving push notifications
+            const pushEnabled = client.setupPushNotifications();
+
+            if (pushEnabled) {
+              setPushConnected(true);
+              debug.log('[Push] Push notifications successfully enabled');
+            } else {
+              debug.log('[Push] Push notifications not available on this server');
+            }
+          } catch (error) {
+            // Push notifications are optional - don't break the app if they fail
+            debug.log('[Push] Failed to setup push notifications:', error);
+          }
+        } catch (error) {
+          console.error('Error loading email data:', error);
+        }
+      };
+      loadData();
+    }
+
+    // Cleanup push notifications on unmount
+    return () => {
+      if (client) {
+        client.closePushNotifications();
+      }
+    };
+  }, [isAuthenticated, client, mailboxes.length, fetchMailboxes, fetchEmails, fetchQuota, handleStateChange, setPushConnected]);
+
+  // Handle mark-as-read with delay based on settings
+  useEffect(() => {
+    // Clear any existing timeout when email changes
+    if (markAsReadTimeoutRef.current) {
+      debug.log('[Mark as Read] Clearing previous timeout');
+      clearTimeout(markAsReadTimeoutRef.current);
+      markAsReadTimeoutRef.current = null;
+    }
+
+    // Only set timeout if there's a selected email, it's unread, and we have a client
+    if (!selectedEmail || !client || selectedEmail.keywords?.$seen) {
+      return;
+    }
+
+    // Get current setting value
+    const markAsReadDelay = useSettingsStore.getState().markAsReadDelay;
+    debug.log('[Mark as Read] Delay setting:', markAsReadDelay, 'ms for email:', selectedEmail.id);
+
+    if (markAsReadDelay === -1) {
+      // Never mark as read automatically
+      debug.log('[Mark as Read] Never mode - email will stay unread');
+    } else if (markAsReadDelay === 0) {
+      // Mark as read instantly
+      debug.log('[Mark as Read] Instant mode - marking as read now');
+      markAsRead(client, selectedEmail.id, true);
+    } else {
+      // Mark as read after delay
+      debug.log('[Mark as Read] Delayed mode - will mark as read in', markAsReadDelay, 'ms');
+      markAsReadTimeoutRef.current = setTimeout(() => {
+        debug.log('[Mark as Read] Timeout fired - marking as read now');
+        markAsRead(client, selectedEmail.id, true);
+        markAsReadTimeoutRef.current = null;
+      }, markAsReadDelay);
+    }
+
+    // Cleanup on unmount or when dependencies change
+    return () => {
+      if (markAsReadTimeoutRef.current) {
+        debug.log('[Mark as Read] Cleanup - clearing timeout');
+        clearTimeout(markAsReadTimeoutRef.current);
+        markAsReadTimeoutRef.current = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedEmail?.id]);
+
+  // Handle new email notifications - play sound
+  useEffect(() => {
+    if (newEmailNotification) {
+      playNotificationSound();
+      debug.log('New email received:', newEmailNotification.subject);
+      clearNewEmailNotification();
+    }
+  }, [newEmailNotification, clearNewEmailNotification]);
+
+  const handleEmailSend = async (data: {
+    to: string[];
+    cc: string[];
+    bcc: string[];
+    subject: string;
+    body: string;
+    draftId?: string;
+  }) => {
+    if (!client) return;
+
+    try {
+      await sendEmail(client, data.to, data.subject, data.body, data.cc, data.bcc, data.draftId);
+      setShowComposer(false);
+    } catch (error) {
+      console.error("Failed to send email:", error);
+    }
+  };
+
+  const handleDiscardDraft = async (draftId: string) => {
+    if (!client) return;
+
+    try {
+      await client.deleteEmail(draftId);
+    } catch (error) {
+      console.error("Failed to discard draft:", error);
+    }
+  };
+
+  const handleReply = () => {
+    setComposerMode('reply');
+    setShowComposer(true);
+  };
+
+  const handleReplyAll = () => {
+    setComposerMode('replyAll');
+    setShowComposer(true);
+  };
+
+  const handleForward = () => {
+    setComposerMode('forward');
+    setShowComposer(true);
+  };
+
+  const handleDelete = async () => {
+    if (!client || !selectedEmail) return;
+
+    try {
+      await deleteEmail(client, selectedEmail.id);
+      selectEmail(null);
+    } catch (error) {
+      console.error("Failed to delete email:", error);
+    }
+  };
+
+  const handleArchive = async () => {
+    if (!client || !selectedEmail) return;
+
+    // Find archive mailbox
+    const archiveMailbox = mailboxes.find(m => m.role === "archive" || m.name.toLowerCase() === "archive");
+    if (archiveMailbox) {
+      try {
+        await moveToMailbox(client, selectedEmail.id, archiveMailbox.id);
+        selectEmail(null);
+      } catch (error) {
+        console.error("Failed to archive email:", error);
+      }
+    }
+  };
+
+  const handleToggleStar = async () => {
+    if (!client || !selectedEmail) return;
+
+    try {
+      await toggleStar(client, selectedEmail.id);
+    } catch (error) {
+      console.error("Failed to toggle star:", error);
+    }
+  };
+
+  const handleSetColorTag = async (emailId: string, color: string | null) => {
+    if (!client) return;
+
+    try {
+      // Remove any existing color tags
+      const email = emails.find(e => e.id === emailId);
+      if (!email) return;
+
+      const keywords = { ...email.keywords };
+
+      // Remove old color tags - set to false for JMAP to remove them
+      Object.keys(keywords).forEach(key => {
+        if (key.startsWith("$color:")) {
+          keywords[key] = false;
+        }
+      });
+
+      // Add new color tag if specified
+      if (color) {
+        keywords[`$color:${color}`] = true;
+      }
+
+      // Update email keywords via JMAP
+      await client.updateEmailKeywords(emailId, keywords);
+
+      // Update local state
+      selectEmail(email.id === selectedEmail?.id ? { ...email, keywords } : selectedEmail);
+
+      // Refresh emails list to show color in list
+      await fetchEmails(client, selectedMailbox);
+    } catch (error) {
+      console.error("Failed to set color tag:", error);
+    }
+  };
+
+  const handleMailboxSelect = async (mailboxId: string) => {
+    selectMailbox(mailboxId);
+    selectEmail(null); // Clear selected email when switching mailboxes
+
+    // On mobile, close sidebar and go to list view
+    if (isMobile) {
+      setSidebarOpen(false);
+      setActiveView("list");
+    }
+
+    if (client) {
+      await fetchEmails(client, mailboxId);
+    }
+  };
+
+  const handleLogout = () => {
+    logout();
+    router.push(`/${params.locale}/login`);
+  };
+
+  const handleSearch = async (query: string) => {
+    if (!client) return;
+    await searchEmails(client, query);
+  };
+
+  const handleDownloadAttachment = async (blobId: string, name: string, type?: string) => {
+    if (!client) return;
+
+    try {
+      await client.downloadBlob(blobId, name, type);
+    } catch (error) {
+      console.error("Failed to download attachment:", error);
+    }
+  };
+
+  const handleQuickReply = async (body: string) => {
+    if (!client || !selectedEmail) return;
+
+    const sender = selectedEmail.from?.[0];
+    if (!sender?.email) {
+      throw new Error("No sender email found");
+    }
+
+    // Send reply with just the body text
+    await sendEmail(
+      client,
+      [sender.email],
+      `Re: ${selectedEmail.subject || "(no subject)"}`,
+      body
+    );
+
+    // Refresh emails to show the sent reply
+    await fetchEmails(client, selectedMailbox);
+  };
+
+  // Show loading state while checking auth
+  if (!initialCheckDone || authLoading || (!isAuthenticated || !client)) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-background">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-foreground mx-auto"></div>
+          <p className="mt-4 text-sm text-muted-foreground">{t("common.loading")}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Get current mailbox name for mobile header
+  const currentMailboxName = mailboxes.find(m => m.id === selectedMailbox)?.name || "Inbox";
+
+  // Handle email selection with mobile view switching
+  const handleEmailSelect = async (email: { id: string }) => {
+    if (!client || !email) return;
+
+    // Set loading state immediately (keep current email visible)
+    setLoadingEmail(true);
+
+    // On mobile, switch to viewer
+    if (isMobile) {
+      setActiveView("viewer");
+    }
+
+    // Fetch the full content
+    try {
+      // Find selected mailbox to determine accountId (for shared folders)
+      const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
+      // Only pass accountId for shared mailboxes
+      const accountId = mailbox?.isShared ? mailbox.accountId : undefined;
+
+      const fullEmail = await client.getEmail(email.id, accountId);
+      if (fullEmail) {
+        selectEmail(fullEmail);
+        // Mark-as-read logic is now handled by useEffect
+      }
+    } catch (error) {
+      console.error('Failed to fetch email content:', error);
+    } finally {
+      setLoadingEmail(false);
+    }
+  };
+
+  // Handle back navigation from viewer on mobile
+  const handleMobileBack = () => {
+    // If in conversation view, clear it
+    if (conversationThread) {
+      setConversationThread(null);
+      setConversationEmails([]);
+    }
+    selectEmail(null);
+    setActiveView("list");
+  };
+
+  // Handle opening conversation view on mobile
+  const handleOpenConversation = async (thread: ThreadGroup) => {
+    if (!client) return;
+
+    setConversationThread(thread);
+    setIsLoadingConversation(true);
+    setActiveView("viewer");
+
+    try {
+      // Fetch complete thread emails
+      const emails = await client.getThreadEmails(thread.threadId);
+      setConversationEmails(emails);
+    } catch (error) {
+      console.error('Failed to fetch thread emails:', error);
+      // Fall back to thread.emails
+      setConversationEmails(thread.emails);
+    } finally {
+      setIsLoadingConversation(false);
+    }
+  };
+
+  // Handle reply from conversation view
+  const handleConversationReply = (email: Email) => {
+    selectEmail(email);
+    setComposerMode('reply');
+    setShowComposer(true);
+  };
+
+  const handleConversationReplyAll = (email: Email) => {
+    selectEmail(email);
+    setComposerMode('replyAll');
+    setShowComposer(true);
+  };
+
+  const handleConversationForward = (email: Email) => {
+    selectEmail(email);
+    setComposerMode('forward');
+    setShowComposer(true);
+  };
+
+  return (
+    <DragDropProvider>
+      <div className="flex h-screen bg-background overflow-hidden">
+        {/* Mobile Sidebar Overlay Backdrop */}
+        {isMobile && sidebarOpen && (
+          <div
+            className="fixed inset-0 bg-black/50 z-40 md:hidden"
+            onClick={() => setSidebarOpen(false)}
+          />
+        )}
+
+        {/* Sidebar - overlay on mobile, fixed on desktop */}
+        <div
+          className={cn(
+            "flex-shrink-0 h-full z-50",
+            // Mobile: fixed overlay
+            "max-md:fixed max-md:inset-y-0 max-md:left-0 max-md:w-72",
+            "max-md:transform max-md:transition-transform max-md:duration-300 max-md:ease-in-out",
+            isMobile && !sidebarOpen && "max-md:-translate-x-full",
+            // Desktop: normal flow
+            "md:relative md:translate-x-0"
+          )}
+        >
+          <ErrorBoundary fallback={SidebarErrorFallback}>
+            <Sidebar
+              mailboxes={mailboxes}
+              selectedMailbox={selectedMailbox}
+              onMailboxSelect={handleMailboxSelect}
+              onCompose={() => {
+                setComposerMode('compose');
+                setShowComposer(true);
+                if (isMobile) setSidebarOpen(false);
+              }}
+              onLogout={handleLogout}
+              onSearch={handleSearch}
+              quota={quota}
+              isPushConnected={isPushConnected}
+            />
+          </ErrorBoundary>
+        </div>
+
+        {/* Main Content Area */}
+        <div className="flex flex-1 min-w-0 h-full">
+          {/* Email List - full width on mobile, fixed width on desktop */}
+          <div
+            className={cn(
+              "flex flex-col h-full bg-background border-r border-border",
+              // Mobile: full width, hidden when viewing email
+              "max-md:flex-1 max-md:border-r-0",
+              isMobile && activeView !== "list" && "max-md:hidden",
+              // Desktop: fixed width
+              "md:w-80 lg:w-96 md:flex-shrink-0 md:shadow-sm"
+            )}
+          >
+            {/* Mobile Header for List View */}
+            <MobileHeader
+              title={currentMailboxName}
+              onCompose={() => {
+                setComposerMode('compose');
+                setShowComposer(true);
+              }}
+            />
+
+            <ErrorBoundary fallback={EmailListErrorFallback}>
+              <EmailList
+                emails={emails}
+                selectedEmailId={selectedEmail?.id}
+                isLoading={isLoading}
+                onEmailSelect={handleEmailSelect}
+                onOpenConversation={handleOpenConversation}
+                // Context menu handlers
+                onReply={(email) => {
+                  selectEmail(email);
+                  handleReply();
+                }}
+                onReplyAll={(email) => {
+                  selectEmail(email);
+                  handleReplyAll();
+                }}
+                onForward={(email) => {
+                  selectEmail(email);
+                  handleForward();
+                }}
+                onMarkAsRead={async (email, read) => {
+                  if (client) {
+                    await markAsRead(client, email.id, read);
+                  }
+                }}
+                onToggleStar={async (email) => {
+                  if (client) {
+                    await toggleStar(client, email.id);
+                  }
+                }}
+                onDelete={async (email) => {
+                  selectEmail(email);
+                  await handleDelete();
+                }}
+                onArchive={async (email) => {
+                  selectEmail(email);
+                  await handleArchive();
+                }}
+                onSetColorTag={(emailId, color) => {
+                  handleSetColorTag(emailId, color);
+                }}
+                onMoveToMailbox={async (emailId, mailboxId) => {
+                  if (client) {
+                    await moveToMailbox(client, emailId, mailboxId);
+                  }
+                }}
+                className="flex-1"
+              />
+            </ErrorBoundary>
+          </div>
+
+          {/* Email Viewer - full screen on mobile, flex on desktop */}
+          <div
+            className={cn(
+              "flex flex-col h-full bg-background",
+              // Mobile: full screen overlay when active
+              "max-md:fixed max-md:inset-0 max-md:z-30",
+              isMobile && activeView !== "viewer" && "max-md:hidden",
+              // Desktop: flex grow
+              "md:flex-1 md:relative"
+            )}
+          >
+            {/* Mobile Conversation View - shown when thread is selected on mobile */}
+            {isMobile && conversationThread ? (
+              <ThreadConversationView
+                thread={conversationThread}
+                emails={conversationEmails}
+                isLoading={isLoadingConversation}
+                onBack={handleMobileBack}
+                onReply={handleConversationReply}
+                onReplyAll={handleConversationReplyAll}
+                onForward={handleConversationForward}
+                onDownloadAttachment={handleDownloadAttachment}
+                onMarkAsRead={async (emailId, read) => {
+                  if (client) {
+                    await markAsRead(client, emailId, read);
+                  }
+                }}
+              />
+            ) : (
+              <>
+                {/* Mobile Header for Viewer */}
+                {isMobile && activeView === "viewer" && (
+                  <MobileViewerHeader
+                    subject={selectedEmail?.subject}
+                    onBack={handleMobileBack}
+                  />
+                )}
+
+                <ErrorBoundary fallback={EmailViewerErrorFallback}>
+                  <EmailViewer
+                    email={selectedEmail}
+                    isLoading={isLoadingEmail}
+                    onReply={handleReply}
+                    onReplyAll={handleReplyAll}
+                    onForward={handleForward}
+                    onDelete={handleDelete}
+                    onArchive={handleArchive}
+                    onToggleStar={handleToggleStar}
+                    onSetColorTag={handleSetColorTag}
+                    onMarkAsRead={async (emailId, read) => {
+                      if (client) {
+                        await markAsRead(client, emailId, read);
+                      }
+                    }}
+                    onDownloadAttachment={handleDownloadAttachment}
+                    onQuickReply={handleQuickReply}
+                    currentUserEmail={client?.["username"]}
+                    currentUserName={client?.["username"]?.split("@")[0]}
+                    className={isMobile ? "flex-1" : undefined}
+                  />
+                </ErrorBoundary>
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* Email Composer Modal */}
+        {showComposer && (
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 md:p-0">
+            <div className={cn(
+              "w-full h-full md:h-auto md:max-w-3xl md:max-h-[600px]",
+              "max-md:flex max-md:flex-col"
+            )}>
+              <ErrorBoundary
+                fallback={ComposerErrorFallback}
+                onReset={() => {
+                  setShowComposer(false);
+                  setComposerMode('compose');
+                }}
+              >
+                <EmailComposer
+                  mode={composerMode}
+                  replyTo={selectedEmail ? {
+                    from: selectedEmail.from,
+                    to: selectedEmail.to,
+                    cc: selectedEmail.cc,
+                    subject: selectedEmail.subject,
+                    body: selectedEmail.bodyValues?.[selectedEmail.textBody?.[0]?.partId || '']?.value || selectedEmail.preview || '',
+                    receivedAt: selectedEmail.receivedAt
+                  } : undefined}
+                  onSend={handleEmailSend}
+                  onClose={() => {
+                    setShowComposer(false);
+                    setComposerMode('compose');
+                  }}
+                  onDiscardDraft={handleDiscardDraft}
+                />
+              </ErrorBoundary>
+            </div>
+          </div>
+        )}
+
+        {/* Keyboard Shortcuts Modal */}
+        <KeyboardShortcutsModal
+          isOpen={showShortcutsModal}
+          onClose={() => setShowShortcutsModal(false)}
+        />
+      </div>
+    </DragDropProvider>
+  );
+}
diff --git a/app/[locale]/settings/page.tsx b/app/[locale]/settings/page.tsx
new file mode 100644
index 00000000..c089f8af
--- /dev/null
+++ b/app/[locale]/settings/page.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { ArrowLeft, Settings as SettingsIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { AppearanceSettings } from '@/components/settings/appearance-settings';
+import { EmailSettings } from '@/components/settings/email-settings';
+import { AccountSettings } from '@/components/settings/account-settings';
+import { AdvancedSettings } from '@/components/settings/advanced-settings';
+import { cn } from '@/lib/utils';
+
+type Tab = 'appearance' | 'email' | 'account' | 'advanced';
+
+export default function SettingsPage() {
+  const router = useRouter();
+  const params = useParams();
+  const t = useTranslations('settings');
+  const [activeTab, setActiveTab] = useState<Tab>('appearance');
+
+  const tabs: { id: Tab; label: string }[] = [
+    { id: 'appearance', label: t('tabs.appearance') },
+    { id: 'email', label: t('tabs.email') },
+    { id: 'account', label: t('tabs.account') },
+    { id: 'advanced', label: t('tabs.advanced') },
+  ];
+
+  return (
+    <div className="flex h-screen bg-background">
+      {/* Settings Sidebar */}
+      <div className="w-64 border-r border-border bg-secondary flex flex-col">
+        {/* Header */}
+        <div className="p-4 border-b border-border">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => router.push(`/${params.locale}`)}
+            className="w-full justify-start"
+          >
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            {t('back_to_mail')}
+          </Button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex-1 overflow-y-auto py-2">
+          <div className="px-2 space-y-1">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={cn(
+                  'w-full text-left px-3 py-2 rounded text-sm transition-colors',
+                  activeTab === tab.id
+                    ? 'bg-accent text-accent-foreground'
+                    : 'hover:bg-muted text-foreground'
+                )}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Settings Content */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="max-w-3xl mx-auto p-8">
+          {/* Page Header */}
+          <div className="mb-8">
+            <div className="flex items-center gap-3 mb-2">
+              <SettingsIcon className="w-8 h-8 text-foreground" />
+              <h1 className="text-3xl font-semibold text-foreground">{t('title')}</h1>
+            </div>
+          </div>
+
+          {/* Active Tab Content */}
+          <div className="bg-card border border-border rounded-lg p-6">
+            {activeTab === 'appearance' && <AppearanceSettings />}
+            {activeTab === 'email' && <EmailSettings />}
+            {activeTab === 'account' && <AccountSettings />}
+            {activeTab === 'advanced' && <AdvancedSettings />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/favicon.ico b/app/favicon.ico
new file mode 100644
index 00000000..718d6fea
Binary files /dev/null and b/app/favicon.ico differ
diff --git a/app/global-error.tsx b/app/global-error.tsx
new file mode 100644
index 00000000..6353f695
--- /dev/null
+++ b/app/global-error.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect } from "react";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+
+/**
+ * Global error boundary for the root layout.
+ * Note: This component cannot use translations since it's outside providers.
+ * It must render its own <html> and <body> tags as it replaces the root layout.
+ */
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("Global error:", error);
+  }, [error]);
+
+  return (
+    <html lang="en">
+      <body className="bg-gray-50 dark:bg-gray-900">
+        <div className="min-h-screen flex items-center justify-center">
+          <div className="text-center max-w-md px-4">
+            <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
+              <AlertTriangle className="w-10 h-10 text-red-600 dark:text-red-400" />
+            </div>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+              Something went wrong
+            </h1>
+            <p className="text-gray-600 dark:text-gray-400 mb-6">
+              An unexpected error occurred. Please try again.
+            </p>
+            <button
+              onClick={reset}
+              className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+            >
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Try again
+            </button>
+          </div>
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 00000000..a9cd7a75
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,380 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  --color-border: #e2e8f0;
+  --color-input: #e2e8f0;
+  --color-ring: #94a3b8;
+  --color-background: #ffffff;
+  --color-foreground: #0f172a;
+  --color-primary: #3b82f6;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #f8fafc;
+  --color-secondary-foreground: #0f172a;
+  --color-muted: #f1f5f9;
+  --color-muted-foreground: #64748b;
+  --color-accent: #dbeafe;
+  --color-accent-foreground: #1e40af;
+
+  /* Settings variables */
+  --font-size-base: 16px;
+  --list-item-height: 48px;
+  --transition-duration: 0.2s;
+}
+
+.dark {
+  --color-border: #262626;
+  --color-input: #262626;
+  --color-ring: #d4d4d4;
+  --color-background: #0a0a0a;
+  --color-foreground: #fafafa;
+  --color-primary: #fafafa;
+  --color-primary-foreground: #171717;
+  --color-secondary: #262626;
+  --color-secondary-foreground: #fafafa;
+  --color-muted: #262626;
+  --color-muted-foreground: #a3a3a3;
+  --color-accent: #1e3a8a;
+  --color-accent-foreground: #dbeafe;
+}
+
+@theme inline {
+  --color-border: var(--color-border);
+  --color-input: var(--color-input);
+  --color-ring: var(--color-ring);
+  --color-background: var(--color-background);
+  --color-foreground: var(--color-foreground);
+  --color-primary: var(--color-primary);
+  --color-primary-foreground: var(--color-primary-foreground);
+  --color-secondary: var(--color-secondary);
+  --color-secondary-foreground: var(--color-secondary-foreground);
+  --color-muted: var(--color-muted);
+  --color-muted-foreground: var(--color-muted-foreground);
+  --color-accent: var(--color-accent);
+  --color-accent-foreground: var(--color-accent-foreground);
+}
+
+* {
+  border-color: var(--color-border);
+}
+
+body {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: var(--font-size-base);
+  font-feature-settings: "rlig" 1, "calt" 1;
+}
+
+/* Minimalist scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--color-border);
+  border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-muted-foreground);
+}
+
+/* Enhanced Email Content Styling */
+.email-content {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  color: var(--color-foreground);
+  max-width: none;
+}
+
+.email-content p {
+  margin: 0.75rem 0;
+}
+
+.email-content a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.email-content a:hover {
+  text-decoration: underline;
+  color: var(--color-accent-foreground);
+}
+
+.email-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.375rem;
+  margin: 1rem 0;
+  display: block;
+}
+
+.email-content blockquote {
+  border-left: 3px solid #d1d5db;
+  padding-left: 1rem;
+  margin: 1rem 0;
+  color: #6b7280;
+  font-style: italic;
+}
+
+.dark .email-content blockquote {
+  border-left-color: #4b5563;
+  color: #9ca3af;
+}
+
+.email-content pre {
+  background-color: #f5f5f7;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  padding: 1rem;
+  font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace;
+  font-size: 0.875rem;
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.dark .email-content pre {
+  background-color: #1f2937;
+  border-color: #374151;
+}
+
+.email-content code {
+  background-color: #f3f4f6;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace;
+  font-size: 0.875rem;
+  color: #dc2626;
+}
+
+.dark .email-content code {
+  background-color: #374151;
+  color: #f87171;
+}
+
+.email-content h1,
+.email-content h2,
+.email-content h3,
+.email-content h4 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  font-weight: 600;
+  line-height: 1.25;
+  color: var(--color-foreground);
+}
+
+.email-content h1 { font-size: 1.5rem; }
+.email-content h2 { font-size: 1.25rem; }
+.email-content h3 { font-size: 1.125rem; }
+.email-content h4 { font-size: 1rem; }
+
+.email-content ul,
+.email-content ol {
+  margin: 1rem 0;
+  padding-left: 1.75rem;
+}
+
+.email-content li {
+  margin: 0.375rem 0;
+  line-height: 1.6;
+}
+
+.email-content ul li {
+  list-style-type: disc;
+}
+
+.email-content ol li {
+  list-style-type: decimal;
+}
+
+/* Only style tables that are actual data tables, not layout tables */
+.email-content table.data-table,
+.email-content table[border="1"] {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1rem 0;
+  font-size: 0.875rem;
+}
+
+.email-content table.data-table th,
+.email-content table.data-table td,
+.email-content table[border="1"] th,
+.email-content table[border="1"] td {
+  padding: 0.625rem;
+  border: 1px solid #e5e7eb;
+  text-align: left;
+}
+
+.email-content table.data-table th,
+.email-content table[border="1"] th {
+  background-color: #f9fafb;
+  font-weight: 600;
+  color: #374151;
+}
+
+.dark .email-content table.data-table th,
+.dark .email-content table[border="1"] th {
+  background-color: #1f2937;
+  color: #d1d5db;
+}
+
+.dark .email-content table.data-table td,
+.dark .email-content table[border="1"] td {
+  border-color: #374151;
+}
+
+/* Reset styles for layout tables (commonly used in HTML emails) */
+.email-content table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Let HTML email's own styles take precedence */
+.email-content table:not(.data-table):not([border="1"]) {
+  border: initial;
+}
+
+.email-content table:not(.data-table):not([border="1"]) td,
+.email-content table:not(.data-table):not([border="1"]) th {
+  border: initial;
+  padding: initial;
+}
+
+.email-content hr {
+  border: none;
+  border-top: 1px solid #e5e7eb;
+  margin: 1.5rem 0;
+}
+
+.dark .email-content hr {
+  border-top-color: #374151;
+}
+
+/* Email thread quoted text */
+.email-content .quoted-text {
+  border-left: 3px solid #d1d5db;
+  padding-left: 1rem;
+  margin: 1rem 0;
+  color: #6b7280;
+  opacity: 0.8;
+}
+
+.dark .email-content .quoted-text {
+  border-left-color: #4b5563;
+  color: #9ca3af;
+}
+
+/* Toast animations */
+@keyframes slide-in {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.animate-slide-in {
+  animation: slide-in 0.3s ease-out;
+}
+
+/* Mobile Responsive Utilities */
+
+/* Safe area insets for notched devices (iPhone X+, etc.) */
+.safe-area-inset-top {
+  padding-top: env(safe-area-inset-top);
+}
+
+.safe-area-inset-bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.safe-area-inset-left {
+  padding-left: env(safe-area-inset-left);
+}
+
+.safe-area-inset-right {
+  padding-right: env(safe-area-inset-right);
+}
+
+/* Minimum touch targets (44x44px recommended by Apple HIG) */
+.touch-target {
+  min-height: 44px;
+  min-width: 44px;
+}
+
+/* Prevent text selection on mobile for UI elements */
+.no-select {
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+}
+
+/* Smooth transitions for view switching */
+.view-transition {
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+/* Hide scrollbar on mobile while keeping functionality */
+@media (max-width: 767px) {
+  .mobile-scroll-hidden::-webkit-scrollbar {
+    display: none;
+  }
+
+  .mobile-scroll-hidden {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+/* Mobile backdrop blur support */
+@supports (backdrop-filter: blur(8px)) {
+  .mobile-backdrop {
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+  }
+}
+
+/* Prevent overscroll bounce on iOS */
+.no-overscroll {
+  overscroll-behavior: none;
+}
+
+/* Slide in from right animation (for mobile views) */
+@keyframes slide-in-from-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in-from-right {
+  animation: slide-in-from-right 0.3s ease-out;
+}
+
+/* Slide in from left animation (for sidebar) */
+@keyframes slide-in-from-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in-from-left {
+  animation: slide-in-from-left 0.3s ease-out;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 00000000..ec7324f9
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+type Props = {
+  children: ReactNode;
+};
+
+// This is the root layout that wraps all pages
+// The actual layout with providers and styles is in [locale]/layout.tsx
+export default function RootLayout({ children }: Props) {
+  return children;
+}
\ No newline at end of file
diff --git a/components/email/email-composer.tsx b/components/email/email-composer.tsx
new file mode 100644
index 00000000..aaf4baa0
--- /dev/null
+++ b/components/email/email-composer.tsx
@@ -0,0 +1,469 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { X, Paperclip, Send, Save, Check, Loader2, AlertCircle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useAuthStore } from "@/stores/auth-store";
+
+interface EmailComposerProps {
+  onSend?: (data: {
+    to: string[];
+    cc: string[];
+    bcc: string[];
+    subject: string;
+    body: string;
+    draftId?: string;
+  }) => void;
+  onClose?: () => void;
+  onDiscardDraft?: (draftId: string) => void;
+  className?: string;
+  mode?: 'compose' | 'reply' | 'replyAll' | 'forward';
+  replyTo?: {
+    from?: { email?: string; name?: string }[];
+    to?: { email?: string; name?: string }[];
+    cc?: { email?: string; name?: string }[];
+    subject?: string;
+    body?: string;
+    receivedAt?: string;
+  };
+}
+
+export function EmailComposer({
+  onSend,
+  onClose,
+  onDiscardDraft,
+  className,
+  mode = 'compose',
+  replyTo
+}: EmailComposerProps) {
+  const t = useTranslations('email_composer');
+
+  // Initialize with reply/forward data if provided
+  const getInitialTo = () => {
+    if (!replyTo) return "";
+    if (mode === 'reply') {
+      return replyTo.from?.[0]?.email || "";
+    } else if (mode === 'replyAll') {
+      const from = replyTo.from?.[0]?.email || "";
+      const originalTo = replyTo.to?.filter(r => r.email).map(r => r.email).join(", ") || "";
+      return [from, originalTo].filter(Boolean).join(", ");
+    }
+    return "";
+  };
+
+  const getInitialCc = () => {
+    if (!replyTo || mode !== 'replyAll') return "";
+    return replyTo.cc?.map(r => r.email).join(", ") || "";
+  };
+
+  const getInitialSubject = () => {
+    if (!replyTo?.subject) return "";
+    if (mode === 'forward') {
+      return `Fwd: ${replyTo.subject.replace(/^(Fwd:\s*)+/i, '')}`;
+    } else if (mode === 'reply' || mode === 'replyAll') {
+      return `Re: ${replyTo.subject.replace(/^(Re:\s*)+/i, '')}`;
+    }
+    return "";
+  };
+
+  const getInitialBody = () => {
+    if (!replyTo?.body) return "";
+
+    const date = replyTo.receivedAt ? new Date(replyTo.receivedAt).toLocaleString() : "";
+    const from = replyTo.from?.[0];
+    const fromStr = from ? `${from.name || from.email}` : "Unknown";
+
+    if (mode === 'forward') {
+      return `\n\n---------- Forwarded message ----------\nFrom: ${fromStr}\nDate: ${date}\nSubject: ${replyTo.subject || ""}\n\n${replyTo.body}`;
+    } else if (mode === 'reply' || mode === 'replyAll') {
+      return `\n\nOn ${date}, ${fromStr} wrote:\n> ${replyTo.body.split('\n').join('\n> ')}`;
+    }
+    return "";
+  };
+
+  const [to, setTo] = useState(getInitialTo());
+  const [cc, setCc] = useState(getInitialCc());
+  const [bcc, setBcc] = useState("");
+  const [subject, setSubject] = useState(getInitialSubject());
+  const [body, setBody] = useState(getInitialBody());
+  const [showCc, setShowCc] = useState(!!getInitialCc());
+  const [showBcc, setShowBcc] = useState(false);
+  const [draftId, setDraftId] = useState<string | null>(null);
+  const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
+  const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const lastSavedDataRef = useRef<string>("");
+  const [attachments, setAttachments] = useState<Array<{ file: File; blobId?: string; uploading?: boolean; error?: boolean }>>([]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const { client } = useAuthStore();
+
+  // Handle file selection
+  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!client || !event.target.files) return;
+
+    const files = Array.from(event.target.files);
+
+    // Add files to attachments list with uploading state
+    const newAttachments = files.map(file => ({ file, uploading: true }));
+    setAttachments(prev => [...prev, ...newAttachments]);
+
+    // Upload each file
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      try {
+        const { blobId } = await client.uploadBlob(file);
+
+        // Update attachment with blobId
+        setAttachments(prev =>
+          prev.map(att =>
+            att.file === file
+              ? { ...att, blobId, uploading: false }
+              : att
+          )
+        );
+      } catch (error) {
+        console.error(`Failed to upload ${file.name}:`, error);
+
+        // Mark attachment as failed
+        setAttachments(prev =>
+          prev.map(att =>
+            att.file === file
+              ? { ...att, uploading: false, error: true }
+              : att
+          )
+        );
+      }
+    }
+
+    // Clear the input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  // Remove attachment
+  const removeAttachment = (index: number) => {
+    setAttachments(prev => prev.filter((_, i) => i !== index));
+  };
+
+  // Auto-save draft functionality
+  const saveDraft = async (): Promise<string | null> => {
+    if (!client) return null;
+
+    const toAddresses = to.split(",").map(e => e.trim()).filter(Boolean);
+    const ccAddresses = cc.split(",").map(e => e.trim()).filter(Boolean);
+    const bccAddresses = bcc.split(",").map(e => e.trim()).filter(Boolean);
+
+    // Only save if there's some content
+    if (!toAddresses.length && !subject && !body) {
+      return null;
+    }
+
+    // Prepare attachments for draft
+    const uploadedAttachments = attachments
+      .filter(att => att.blobId && !att.uploading)
+      .map(att => ({
+        blobId: att.blobId!,
+        name: att.file.name,
+        type: att.file.type,
+        size: att.file.size,
+      }));
+
+    // Create a hash of current data to compare with last saved
+    const currentData = JSON.stringify({ to: toAddresses, cc: ccAddresses, bcc: bccAddresses, subject, body, attachments: uploadedAttachments });
+
+    // Only save if data has changed
+    if (currentData === lastSavedDataRef.current) {
+      return draftId;
+    }
+
+    setSaveStatus('saving');
+
+    try {
+      const savedDraftId = await client.createDraft(
+        toAddresses,
+        subject || "(No subject)",
+        body,
+        ccAddresses,
+        bccAddresses,
+        draftId || undefined,
+        uploadedAttachments
+      );
+
+      setDraftId(savedDraftId);
+      lastSavedDataRef.current = currentData;
+      setSaveStatus('saved');
+
+      // Reset status after 2 seconds
+      setTimeout(() => setSaveStatus('idle'), 2000);
+
+      return savedDraftId;
+    } catch (error) {
+      console.error('Failed to save draft:', error);
+      setSaveStatus('error');
+      setTimeout(() => setSaveStatus('idle'), 3000);
+      return null;
+    }
+  };
+
+  // Trigger auto-save when content changes
+  useEffect(() => {
+    // Clear existing timeout
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current);
+    }
+
+    // Don't auto-save if there's no content
+    if (!to && !subject && !body) {
+      return;
+    }
+
+    // Set new timeout for auto-save (2 seconds after last change)
+    saveTimeoutRef.current = setTimeout(() => {
+      saveDraft();
+    }, 2000);
+
+    // Cleanup on unmount
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- saveDraft reads current state when called, not when effect is set up
+  }, [to, cc, bcc, subject, body, attachments]);
+
+  const handleSend = async () => {
+    const toAddresses = to.split(",").map(e => e.trim()).filter(Boolean);
+    const ccAddresses = cc.split(",").map(e => e.trim()).filter(Boolean);
+    const bccAddresses = bcc.split(",").map(e => e.trim()).filter(Boolean);
+
+    // Allow sending if we have recipient, subject, and either body text or attachments
+    const hasContent = body || attachments.some(att => att.blobId && !att.uploading);
+
+    if (toAddresses.length > 0 && subject && hasContent) {
+      // Wait for any pending auto-save to complete and get the latest draft ID
+      let finalDraftId = draftId;
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+        // saveDraft returns the new draft ID after destroy+create
+        const savedId = await saveDraft();
+        if (savedId) {
+          finalDraftId = savedId;
+        }
+      }
+
+      onSend?.({
+        to: toAddresses,
+        cc: ccAddresses,
+        bcc: bccAddresses,
+        subject,
+        body,
+        draftId: finalDraftId || undefined,
+      });
+
+      // Reset form
+      setTo("");
+      setCc("");
+      setBcc("");
+      setSubject("");
+      setBody("");
+      setDraftId(null);
+    }
+  };
+
+  const handleClose = () => {
+    // If there's a draft with content, ask user if they want to discard
+    if (draftId && (to || subject || body)) {
+      const confirmDiscard = window.confirm(t('discard_draft_confirm'));
+
+      if (confirmDiscard) {
+        // Clear any pending auto-save
+        if (saveTimeoutRef.current) {
+          clearTimeout(saveTimeoutRef.current);
+        }
+
+        // Delete the draft if callback is provided
+        if (onDiscardDraft) {
+          onDiscardDraft(draftId);
+        }
+
+        onClose?.();
+      }
+    } else {
+      onClose?.();
+    }
+  };
+
+  return (
+    <div className={cn("flex flex-col h-full bg-background border rounded-lg", className)}>
+      <div className="flex items-center justify-between px-4 py-3 border-b">
+        <div className="flex items-center gap-2">
+          <h3 className="font-semibold">New Message</h3>
+          {saveStatus === 'saving' && (
+            <div className="flex items-center gap-1 text-xs text-muted-foreground">
+              <Save className="w-3 h-3 animate-pulse" />
+              <span>Saving...</span>
+            </div>
+          )}
+          {saveStatus === 'saved' && (
+            <div className="flex items-center gap-1 text-xs text-green-600">
+              <Check className="w-3 h-3" />
+              <span>Draft saved</span>
+            </div>
+          )}
+          {saveStatus === 'error' && (
+            <div className="flex items-center gap-1 text-xs text-red-600">
+              <X className="w-3 h-3" />
+              <span>Failed to save</span>
+            </div>
+          )}
+        </div>
+        <Button variant="ghost" size="icon" onClick={handleClose}>
+          <X className="w-4 h-4" />
+        </Button>
+      </div>
+
+      <div className="flex-1 flex flex-col">
+        <div className="space-y-2 px-4 py-3 border-b">
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground w-16">To:</span>
+            <Input
+              type="email"
+              placeholder="Recipient email addresses (comma separated)"
+              value={to}
+              onChange={(e) => setTo(e.target.value)}
+              className="flex-1 border-0 focus-visible:ring-0"
+            />
+            <div className="flex gap-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowCc(!showCc)}
+                className="text-xs"
+              >
+                Cc
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowBcc(!showBcc)}
+                className="text-xs"
+              >
+                Bcc
+              </Button>
+            </div>
+          </div>
+
+          {showCc && (
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-muted-foreground w-16">Cc:</span>
+              <Input
+                type="email"
+                placeholder="Cc recipients (comma separated)"
+                value={cc}
+                onChange={(e) => setCc(e.target.value)}
+                className="flex-1 border-0 focus-visible:ring-0"
+              />
+            </div>
+          )}
+
+          {showBcc && (
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-muted-foreground w-16">Bcc:</span>
+              <Input
+                type="email"
+                placeholder="Bcc recipients (comma separated)"
+                value={bcc}
+                onChange={(e) => setBcc(e.target.value)}
+                className="flex-1 border-0 focus-visible:ring-0"
+              />
+            </div>
+          )}
+
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground w-16">Subject:</span>
+            <Input
+              type="text"
+              placeholder="Subject"
+              value={subject}
+              onChange={(e) => setSubject(e.target.value)}
+              className="flex-1 border-0 focus-visible:ring-0"
+            />
+          </div>
+        </div>
+
+        <div className="flex-1 px-4 py-3">
+          <textarea
+            className="w-full h-full resize-none outline-none text-sm"
+            placeholder="Compose email..."
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+          />
+        </div>
+
+        {/* Attachments display */}
+        {attachments.length > 0 && (
+          <div className="px-4 py-2 border-t">
+            <div className="flex flex-wrap gap-2">
+              {attachments.map((att, index) => (
+                <div
+                  key={index}
+                  className={cn(
+                    "flex items-center gap-2 px-3 py-1 rounded-md text-sm",
+                    att.error ? "bg-red-50 text-red-700" : "bg-gray-100 text-gray-700"
+                  )}
+                >
+                  {att.uploading ? (
+                    <Loader2 className="w-3 h-3 animate-spin" />
+                  ) : att.error ? (
+                    <AlertCircle className="w-3 h-3" />
+                  ) : (
+                    <Paperclip className="w-3 h-3" />
+                  )}
+                  <span className="max-w-[200px] truncate">{att.file.name}</span>
+                  <span className="text-xs text-gray-500">
+                    ({(att.file.size / 1024).toFixed(1)} KB)
+                  </span>
+                  <button
+                    onClick={() => removeAttachment(index)}
+                    className="ml-1 hover:text-red-600"
+                  >
+                    <X className="w-3 h-3" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div className="flex items-center justify-between px-4 py-3 border-t">
+          <div>
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              onChange={handleFileSelect}
+              className="hidden"
+              accept="*/*"
+            />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => fileInputRef.current?.click()}
+            >
+              <Paperclip className="w-4 h-4 mr-2" />
+              Attach
+            </Button>
+          </div>
+          <Button onClick={handleSend}>
+            <Send className="w-4 h-4 mr-2" />
+            Send
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/email/email-context-menu.tsx b/components/email/email-context-menu.tsx
new file mode 100644
index 00000000..595da578
--- /dev/null
+++ b/components/email/email-context-menu.tsx
@@ -0,0 +1,289 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Email, Mailbox } from "@/lib/jmap/types";
+import {
+  ContextMenu,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuSubMenu,
+  ContextMenuHeader,
+} from "@/components/ui/context-menu";
+import {
+  Reply,
+  ReplyAll,
+  Forward,
+  Mail,
+  MailOpen,
+  Star,
+  Trash2,
+  Archive,
+  FolderInput,
+  Palette,
+  X,
+  Inbox,
+  Send,
+  File,
+  Folder,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+interface EmailContextMenuProps {
+  email: Email;
+  position: Position;
+  isOpen: boolean;
+  onClose: () => void;
+  menuRef: React.RefObject<HTMLDivElement | null>;
+  mailboxes: Mailbox[];
+  selectedMailbox: string;
+  isMultiSelect?: boolean;
+  selectedCount?: number;
+  // Single email actions
+  onReply?: () => void;
+  onReplyAll?: () => void;
+  onForward?: () => void;
+  onMarkAsRead?: (read: boolean) => void;
+  onToggleStar?: () => void;
+  onDelete?: () => void;
+  onArchive?: () => void;
+  onSetColorTag?: (color: string | null) => void;
+  onMoveToMailbox?: (mailboxId: string) => void;
+  // Batch actions
+  onBatchMarkAsRead?: (read: boolean) => void;
+  onBatchDelete?: () => void;
+  onBatchMoveToMailbox?: (mailboxId: string) => void;
+}
+
+// Color options for email tags
+const colorOptions = [
+  { name: "Red", value: "red", color: "bg-red-500" },
+  { name: "Orange", value: "orange", color: "bg-orange-500" },
+  { name: "Yellow", value: "yellow", color: "bg-yellow-500" },
+  { name: "Green", value: "green", color: "bg-green-500" },
+  { name: "Blue", value: "blue", color: "bg-blue-500" },
+  { name: "Purple", value: "purple", color: "bg-purple-500" },
+  { name: "Pink", value: "pink", color: "bg-pink-500" },
+];
+
+// Get mailbox icon based on role
+const getMailboxIcon = (role?: string) => {
+  switch (role) {
+    case "inbox":
+      return Inbox;
+    case "sent":
+      return Send;
+    case "drafts":
+      return File;
+    case "trash":
+      return Trash2;
+    case "archive":
+      return Archive;
+    default:
+      return Folder;
+  }
+};
+
+// Get current color from email keywords
+const getCurrentColor = (keywords: Record<string, boolean> | undefined) => {
+  if (!keywords) return null;
+  for (const key of Object.keys(keywords)) {
+    if (key.startsWith("$color:") && keywords[key] === true) {
+      return key.replace("$color:", "");
+    }
+  }
+  return null;
+};
+
+export function EmailContextMenu({
+  email,
+  position,
+  isOpen,
+  onClose,
+  menuRef,
+  mailboxes,
+  selectedMailbox,
+  isMultiSelect = false,
+  selectedCount = 1,
+  onReply,
+  onReplyAll,
+  onForward,
+  onMarkAsRead,
+  onToggleStar,
+  onDelete,
+  onArchive,
+  onSetColorTag,
+  onMoveToMailbox,
+  onBatchMarkAsRead,
+  onBatchDelete,
+  onBatchMoveToMailbox,
+}: EmailContextMenuProps) {
+  const t = useTranslations("context_menu");
+  const isUnread = !email.keywords?.$seen;
+  const isStarred = email.keywords?.$flagged;
+  const currentColor = getCurrentColor(email.keywords);
+  const showBatchActions = isMultiSelect && selectedCount > 1;
+
+  // Filter mailboxes for move-to submenu (exclude current, drafts, virtual nodes)
+  const moveTargets = mailboxes.filter(
+    (m) =>
+      m.id !== selectedMailbox &&
+      m.role !== "drafts" &&
+      !m.id.startsWith("shared-") &&
+      m.myRights?.mayAddItems
+  );
+
+  const handleAction = (action: () => void) => {
+    action();
+    onClose();
+  };
+
+  return (
+    <ContextMenu
+      ref={menuRef}
+      isOpen={isOpen}
+      position={position}
+      onClose={onClose}
+    >
+      {/* Batch header */}
+      {showBatchActions && (
+        <ContextMenuHeader>
+          {t("items_selected", { count: selectedCount })}
+        </ContextMenuHeader>
+      )}
+
+      {/* Single email actions - Reply, Reply All, Forward */}
+      {!showBatchActions && (
+        <>
+          <ContextMenuItem
+            icon={Reply}
+            label={t("reply")}
+            onClick={() => handleAction(onReply!)}
+            disabled={!onReply}
+          />
+          <ContextMenuItem
+            icon={ReplyAll}
+            label={t("reply_all")}
+            onClick={() => handleAction(onReplyAll!)}
+            disabled={!onReplyAll}
+          />
+          <ContextMenuItem
+            icon={Forward}
+            label={t("forward")}
+            onClick={() => handleAction(onForward!)}
+            disabled={!onForward}
+          />
+          <ContextMenuSeparator />
+        </>
+      )}
+
+      {/* Mark as read/unread */}
+      <ContextMenuItem
+        icon={isUnread ? MailOpen : Mail}
+        label={isUnread ? t("mark_read") : t("mark_unread")}
+        onClick={() =>
+          handleAction(() =>
+            showBatchActions
+              ? onBatchMarkAsRead?.(isUnread)
+              : onMarkAsRead?.(isUnread)
+          )
+        }
+      />
+
+      {/* Star/Unstar - only for single email */}
+      {!showBatchActions && (
+        <ContextMenuItem
+          icon={Star}
+          label={isStarred ? t("unstar") : t("star")}
+          onClick={() => handleAction(onToggleStar!)}
+          disabled={!onToggleStar}
+        />
+      )}
+
+      <ContextMenuSeparator />
+
+      {/* Move to submenu */}
+      {moveTargets.length > 0 && (
+        <ContextMenuSubMenu icon={FolderInput} label={t("move_to")}>
+          {moveTargets.map((mailbox) => {
+            const Icon = getMailboxIcon(mailbox.role);
+            return (
+              <ContextMenuItem
+                key={mailbox.id}
+                icon={Icon}
+                label={mailbox.name}
+                onClick={() =>
+                  handleAction(() =>
+                    showBatchActions
+                      ? onBatchMoveToMailbox?.(mailbox.id)
+                      : onMoveToMailbox?.(mailbox.id)
+                  )
+                }
+              />
+            );
+          })}
+        </ContextMenuSubMenu>
+      )}
+
+      {/* Archive */}
+      <ContextMenuItem
+        icon={Archive}
+        label={t("archive")}
+        onClick={() => handleAction(onArchive!)}
+        disabled={!onArchive}
+      />
+
+      <ContextMenuSeparator />
+
+      {/* Set color submenu - only for single email */}
+      {!showBatchActions && (
+        <ContextMenuSubMenu icon={Palette} label={t("color_tag")}>
+          <div className="px-3 py-2 flex flex-wrap gap-1.5">
+            {colorOptions.map((option) => (
+              <button
+                key={option.value}
+                onClick={() =>
+                  handleAction(() => onSetColorTag?.(option.value))
+                }
+                className={cn(
+                  "w-6 h-6 rounded-full hover:scale-110 transition-transform",
+                  option.color,
+                  currentColor === option.value &&
+                    "ring-2 ring-offset-2 ring-offset-background ring-foreground"
+                )}
+                title={option.name}
+              />
+            ))}
+          </div>
+          {currentColor && (
+            <>
+              <ContextMenuSeparator />
+              <ContextMenuItem
+                icon={X}
+                label={t("remove_color")}
+                onClick={() => handleAction(() => onSetColorTag?.(null))}
+              />
+            </>
+          )}
+        </ContextMenuSubMenu>
+      )}
+
+      <ContextMenuSeparator />
+
+      {/* Delete */}
+      <ContextMenuItem
+        icon={Trash2}
+        label={t("delete")}
+        onClick={() =>
+          handleAction(showBatchActions ? onBatchDelete! : onDelete!)
+        }
+        disabled={showBatchActions ? !onBatchDelete : !onDelete}
+        destructive
+      />
+    </ContextMenu>
+  );
+}
diff --git a/components/email/email-list-item.tsx b/components/email/email-list-item.tsx
new file mode 100644
index 00000000..5d31f31d
--- /dev/null
+++ b/components/email/email-list-item.tsx
@@ -0,0 +1,188 @@
+"use client";
+
+import { formatDate } from "@/lib/utils";
+import { Email } from "@/lib/jmap/types";
+import { cn } from "@/lib/utils";
+import { Avatar } from "@/components/ui/avatar";
+import { Paperclip, Star, Circle, CheckSquare, Square } from "lucide-react";
+import { useEmailStore } from "@/stores/email-store";
+import { useSettingsStore } from "@/stores/settings-store";
+import { useEmailDrag } from "@/hooks/use-email-drag";
+
+interface EmailListItemProps {
+  email: Email;
+  selected?: boolean;
+  onClick?: () => void;
+  onContextMenu?: (e: React.MouseEvent, email: Email) => void;
+}
+
+// Color tag mapping - using lighter backgrounds for better readability
+const colorTags = {
+  red: "bg-red-50 dark:bg-red-950/30",
+  orange: "bg-orange-50 dark:bg-orange-950/30",
+  yellow: "bg-yellow-50 dark:bg-yellow-950/30",
+  green: "bg-green-50 dark:bg-green-950/30",
+  blue: "bg-blue-50 dark:bg-blue-950/30",
+  purple: "bg-purple-50 dark:bg-purple-950/30",
+  pink: "bg-pink-50 dark:bg-pink-950/30",
+} as const;
+
+const getEmailColor = (keywords: Record<string, boolean> | undefined) => {
+  if (!keywords) return null;
+  for (const key of Object.keys(keywords)) {
+    if (key.startsWith("$color:") && keywords[key] === true) {
+      const color = key.replace("$color:", "");
+      return colorTags[color as keyof typeof colorTags] || null;
+    }
+  }
+  return null;
+};
+
+export function EmailListItem({ email, selected, onClick, onContextMenu }: EmailListItemProps) {
+  const { selectedEmailIds, toggleEmailSelection, selectedMailbox } = useEmailStore();
+  const showPreview = useSettingsStore((state) => state.showPreview);
+  const isChecked = selectedEmailIds.has(email.id);
+  const isUnread = !email.keywords?.$seen;
+  const isStarred = email.keywords?.$flagged;
+  const isImportant = email.keywords?.["$important"];
+  const sender = email.from?.[0];
+  const colorTag = getEmailColor(email.keywords);
+
+  // Drag and drop functionality
+  const { dragHandlers, isDragging } = useEmailDrag({
+    email,
+    sourceMailboxId: selectedMailbox,
+  });
+
+  const handleCheckboxClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    toggleEmailSelection(email.id);
+  };
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    onContextMenu?.(e, email);
+  };
+
+  return (
+    <div
+      {...dragHandlers}
+      className={cn(
+        "relative group cursor-pointer transition-all duration-200 border-b border-border",
+        // Apply color tag as background, with selected and unread states
+        colorTag ? colorTag : (
+          selected
+            ? "bg-accent"
+            : "bg-background"
+        ),
+        selected && !colorTag && "shadow-sm",
+        !colorTag && !selected && "hover:bg-muted hover:shadow-sm",
+        colorTag && "hover:brightness-95 dark:hover:brightness-110",
+        isUnread && !colorTag && "bg-accent/30",
+        // Add visual feedback for checked state
+        isChecked && "ring-2 ring-primary/20 bg-accent/40",
+        // Drag state visual feedback
+        isDragging && "opacity-50 scale-[0.98] ring-2 ring-primary/30"
+      )}
+      onClick={onClick}
+      onContextMenu={handleContextMenu}
+      style={{ minHeight: 'var(--list-item-height)' }}
+    >
+      <div className="flex items-start gap-3 px-4" style={{
+        paddingTop: 'calc((var(--list-item-height) - 40px) / 2)',
+        paddingBottom: 'calc((var(--list-item-height) - 40px) / 2)'
+      }}>
+        {/* Checkbox with smooth animation */}
+        <button
+          onClick={handleCheckboxClick}
+          className={cn(
+            "p-1 rounded mt-2 flex-shrink-0 transition-all duration-200",
+            "hover:bg-muted/50 hover:scale-110",
+            "active:scale-95",
+            isChecked && "text-primary"
+          )}
+        >
+          {isChecked ? (
+            <CheckSquare className="w-4 h-4 animate-in zoom-in-50 duration-200" />
+          ) : (
+            <Square className="w-4 h-4 text-muted-foreground opacity-60 hover:opacity-100 transition-opacity" />
+          )}
+        </button>
+
+        {/* Unread indicator */}
+        {isUnread && (
+          <div className="absolute left-1 top-1/2 -translate-y-1/2">
+            <Circle className="w-2 h-2 fill-blue-600 text-blue-600 dark:fill-blue-400 dark:text-blue-400" />
+          </div>
+        )}
+
+        {/* Avatar */}
+        <Avatar
+          name={sender?.name}
+          email={sender?.email}
+          size="md"
+          className="flex-shrink-0 shadow-sm"
+        />
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          {/* First Line: Sender and Date */}
+          <div className="flex items-center justify-between gap-2 mb-1">
+            <div className="flex items-center gap-2 min-w-0 flex-1">
+              <span className={cn(
+                "truncate text-sm",
+                isUnread
+                  ? "font-bold text-foreground"
+                  : "font-medium text-muted-foreground"
+              )}>
+                {sender?.name || sender?.email || "Unknown"}
+              </span>
+              <div className="flex items-center gap-1.5">
+                {isStarred && (
+                  <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
+                )}
+                {isImportant && (
+                  <span className="px-1.5 py-0.5 text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded font-medium">
+                    Important
+                  </span>
+                )}
+                {email.hasAttachment && (
+                  <Paperclip className="w-3.5 h-3.5 text-muted-foreground" />
+                )}
+              </div>
+            </div>
+            <span className={cn(
+              "text-xs flex-shrink-0 tabular-nums",
+              isUnread
+                ? "text-foreground font-semibold"
+                : "text-muted-foreground"
+            )}>
+              {formatDate(email.receivedAt)}
+            </span>
+          </div>
+
+          {/* Second Line: Subject */}
+          <div className={cn(
+            "mb-1 line-clamp-1 text-sm",
+            isUnread
+              ? "font-semibold text-foreground"
+              : "font-normal text-foreground/90"
+          )}>
+            {email.subject || "(no subject)"}
+          </div>
+
+          {/* Third Line: Preview (controlled by showPreview setting) */}
+          {showPreview && (
+            <p className={cn(
+              "text-sm leading-relaxed line-clamp-2",
+              isUnread
+                ? "text-muted-foreground"
+                : "text-muted-foreground/80"
+            )}>
+              {email.preview || "No preview available"}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/email/email-list.tsx b/components/email/email-list.tsx
new file mode 100644
index 00000000..cfbc8dbf
--- /dev/null
+++ b/components/email/email-list.tsx
@@ -0,0 +1,354 @@
+"use client";
+
+import { Email, ThreadGroup } from "@/lib/jmap/types";
+import { ThreadListItem } from "./thread-list-item";
+import { EmailContextMenu } from "./email-context-menu";
+import { cn } from "@/lib/utils";
+import { Inbox, CheckSquare, Square, Trash2, Mail, MailOpen, Loader2 } from "lucide-react";
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { useEmailStore } from "@/stores/email-store";
+import { useAuthStore } from "@/stores/auth-store";
+import { groupEmailsByThread, sortThreadGroups } from "@/lib/thread-utils";
+import { useContextMenu } from "@/hooks/use-context-menu";
+
+interface EmailListProps {
+  emails: Email[];
+  selectedEmailId?: string;
+  onEmailSelect?: (email: Email) => void;
+  className?: string;
+  isLoading?: boolean;
+  // Mobile conversation view handler
+  onOpenConversation?: (thread: ThreadGroup) => void;
+  // Context menu actions
+  onReply?: (email: Email) => void;
+  onReplyAll?: (email: Email) => void;
+  onForward?: (email: Email) => void;
+  onMarkAsRead?: (email: Email, read: boolean) => void;
+  onToggleStar?: (email: Email) => void;
+  onDelete?: (email: Email) => void;
+  onArchive?: (email: Email) => void;
+  onSetColorTag?: (emailId: string, color: string | null) => void;
+  onMoveToMailbox?: (emailId: string, mailboxId: string) => void;
+}
+
+export function EmailList({
+  emails,
+  selectedEmailId,
+  onEmailSelect,
+  className,
+  isLoading = false,
+  onOpenConversation,
+  onReply,
+  onReplyAll,
+  onForward,
+  onMarkAsRead,
+  onToggleStar,
+  onDelete,
+  onArchive,
+  onSetColorTag,
+  onMoveToMailbox,
+}: EmailListProps) {
+  const { client } = useAuthStore();
+  const {
+    selectedEmailIds,
+    selectAllEmails,
+    clearSelection,
+    batchMarkAsRead,
+    batchDelete,
+    batchMoveToMailbox,
+    loadMoreEmails,
+    hasMoreEmails,
+    isLoadingMore,
+    mailboxes,
+    selectedMailbox,
+    expandedThreadIds,
+    threadEmailsCache,
+    isLoadingThread,
+    toggleThreadExpansion,
+    fetchThreadEmails,
+  } = useEmailStore();
+
+  // Group emails by thread
+  const threadGroups = useMemo(() => {
+    const groups = groupEmailsByThread(emails);
+    return sortThreadGroups(groups);
+  }, [emails]);
+
+  // Context menu state
+  const { contextMenu, openContextMenu, closeContextMenu, menuRef } = useContextMenu<Email>();
+
+  const [isProcessing, setIsProcessing] = useState(false);
+  const observerTarget = useRef<HTMLDivElement>(null);
+  // Loading skeleton component - gentler, no pulsing
+  const LoadingSkeleton = () => (
+    <div className="animate-in fade-in duration-200">
+      {[...Array(8)].map((_, i) => (
+        <div key={i} className="border-b border-border px-4 py-4">
+          <div className="flex items-start gap-3">
+            <div className="w-10 h-10 bg-muted/50 rounded-full" />
+            <div className="flex-1">
+              <div className="flex items-center justify-between mb-2">
+                <div className="h-4 bg-muted/50 rounded w-32" />
+                <div className="h-3 bg-muted/50 rounded w-16" />
+              </div>
+              <div className="h-4 bg-muted/50 rounded w-3/4 mb-2" />
+              <div className="h-3 bg-muted/50 rounded w-full" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+
+  const hasSelection = selectedEmailIds.size > 0;
+  const allSelected = emails.length > 0 && emails.every(e => selectedEmailIds.has(e.id));
+
+  const handleBatchMarkAsRead = async (read: boolean) => {
+    if (!client || isProcessing) return;
+    setIsProcessing(true);
+    try {
+      await batchMarkAsRead(client, read);
+    } finally {
+      setTimeout(() => setIsProcessing(false), 500); // Small delay for visual feedback
+    }
+  };
+
+  const handleBatchDelete = async () => {
+    if (!client || isProcessing || !confirm(`Delete ${selectedEmailIds.size} emails?`)) return;
+    setIsProcessing(true);
+    try {
+      await batchDelete(client);
+    } finally {
+      setTimeout(() => setIsProcessing(false), 500);
+    }
+  };
+
+  // Intersection observer for infinite scroll
+  const handleLoadMore = useCallback(() => {
+    if (client && hasMoreEmails && !isLoadingMore && !isLoading) {
+      loadMoreEmails(client);
+    }
+  }, [client, hasMoreEmails, isLoadingMore, isLoading, loadMoreEmails]);
+
+  // Handle thread expansion and fetch complete thread
+  const handleToggleThreadExpansion = useCallback(async (threadId: string) => {
+    const isExpanded = expandedThreadIds.has(threadId);
+
+    if (!isExpanded && client) {
+      // Expanding - fetch complete thread emails
+      toggleThreadExpansion(threadId);
+      await fetchThreadEmails(client, threadId);
+    } else {
+      // Collapsing - just toggle
+      toggleThreadExpansion(threadId);
+    }
+  }, [client, expandedThreadIds, toggleThreadExpansion, fetchThreadEmails]);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          handleLoadMore();
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    const currentTarget = observerTarget.current;
+    if (currentTarget) {
+      observer.observe(currentTarget);
+    }
+
+    return () => {
+      if (currentTarget) {
+        observer.unobserve(currentTarget);
+      }
+    };
+  }, [handleLoadMore]);
+
+  return (
+    <div className={cn("flex flex-col h-full", className)}>
+      {/* Batch Actions Toolbar with smooth transition */}
+      <div
+        className={cn(
+          "transition-all duration-300 ease-in-out overflow-hidden",
+          hasSelection ? "max-h-16 opacity-100" : "max-h-0 opacity-0"
+        )}
+      >
+        <div className="px-4 py-2 border-b bg-accent/30 border-border flex items-center justify-between">
+          <div className="flex items-center gap-2 animate-in fade-in slide-in-from-left-3 duration-300">
+            <span className="text-sm font-medium text-foreground">
+              {selectedEmailIds.size} {selectedEmailIds.size === 1 ? 'email' : 'emails'} selected
+            </span>
+          </div>
+          <div className="flex items-center gap-1 animate-in fade-in slide-in-from-right-3 duration-300">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => handleBatchMarkAsRead(true)}
+              title="Mark as read"
+              disabled={isProcessing}
+              className="hover:bg-accent transition-colors disabled:opacity-50"
+            >
+              {isProcessing ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <MailOpen className="w-4 h-4" />
+              )}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => handleBatchMarkAsRead(false)}
+              title="Mark as unread"
+              disabled={isProcessing}
+              className="hover:bg-accent transition-colors disabled:opacity-50"
+            >
+              {isProcessing ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <Mail className="w-4 h-4" />
+              )}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleBatchDelete}
+              title="Delete"
+              disabled={isProcessing}
+              className="text-red-600 dark:text-red-400 hover:bg-red-100/50 dark:hover:bg-red-950/30 transition-colors disabled:opacity-50"
+            >
+              {isProcessing ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <Trash2 className="w-4 h-4" />
+              )}
+            </Button>
+            <div className="w-px h-6 bg-border mx-1" />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={clearSelection}
+              title="Clear selection"
+              disabled={isProcessing}
+              className="text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* List Header */}
+      <div className="px-4 py-3 border-b bg-muted/50 border-border flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => allSelected ? clearSelection() : selectAllEmails()}
+            className={cn(
+              "p-1 rounded transition-all duration-200",
+              "hover:bg-muted hover:scale-110",
+              "active:scale-95",
+              allSelected && "text-primary"
+            )}
+            title={allSelected ? "Deselect all" : "Select all"}
+          >
+            {allSelected ? (
+              <CheckSquare className="w-4 h-4 animate-in zoom-in-50 duration-200" />
+            ) : (
+              <Square className="w-4 h-4" />
+            )}
+          </button>
+          <h2 className="text-sm font-medium text-foreground">
+            {isLoading ? 'Loading...' : threadGroups.length > 0 ? `${threadGroups.length} conversations` : 'No conversations'}
+          </h2>
+        </div>
+      </div>
+
+      {/* Email List */}
+      <div className="flex-1 overflow-y-auto bg-background relative">
+        {/* Loading overlay - shows on top of existing emails */}
+        {isLoading && emails.length > 0 && (
+          <div className="absolute inset-0 bg-background/50 z-10 flex items-center justify-center animate-in fade-in duration-150">
+            <div className="flex items-center gap-2 text-sm text-muted-foreground bg-background/90 px-4 py-2 rounded-full shadow-sm border border-border">
+              <Loader2 className="w-4 h-4 animate-spin" />
+              <span>Loading...</span>
+            </div>
+          </div>
+        )}
+
+        {/* Show skeleton only on initial load (no emails yet) */}
+        {isLoading && emails.length === 0 ? (
+          <LoadingSkeleton />
+        ) : emails.length === 0 && !isLoading ? (
+          <div className="flex flex-col items-center justify-center h-full py-12">
+            <Inbox className="w-16 h-16 mb-4 text-muted-foreground/50" />
+            <p className="text-base font-medium text-foreground">No emails in this mailbox</p>
+            <p className="text-sm mt-1 text-muted-foreground">New messages will appear here</p>
+          </div>
+        ) : (
+          <div className={cn("transition-opacity duration-200", isLoading && "opacity-50")}>
+            {threadGroups.map((thread) => (
+              <ThreadListItem
+                key={thread.threadId}
+                thread={thread}
+                isExpanded={expandedThreadIds.has(thread.threadId)}
+                selectedEmailId={selectedEmailId}
+                isLoading={isLoadingThread === thread.threadId}
+                expandedEmails={threadEmailsCache.get(thread.threadId)}
+                onToggleExpand={() => handleToggleThreadExpansion(thread.threadId)}
+                onEmailSelect={(email) => onEmailSelect?.(email)}
+                onContextMenu={openContextMenu}
+                onOpenConversation={onOpenConversation}
+              />
+            ))}
+
+            {/* Intersection observer target for infinite scroll - always present */}
+            <div ref={observerTarget} className="py-4 flex justify-center">
+              {isLoadingMore && hasMoreEmails && (
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                  <span>Loading more emails...</span>
+                </div>
+              )}
+              {!hasMoreEmails && emails.length > 0 && (
+                <div className="text-sm text-muted-foreground border-t border-border pt-6">
+                  No more emails to load
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Context Menu */}
+      {contextMenu.data && (
+        <EmailContextMenu
+          email={contextMenu.data}
+          position={contextMenu.position}
+          isOpen={contextMenu.isOpen}
+          onClose={closeContextMenu}
+          menuRef={menuRef}
+          mailboxes={mailboxes}
+          selectedMailbox={selectedMailbox}
+          isMultiSelect={selectedEmailIds.has(contextMenu.data.id)}
+          selectedCount={selectedEmailIds.size}
+          // Single email actions
+          onReply={() => onReply?.(contextMenu.data!)}
+          onReplyAll={() => onReplyAll?.(contextMenu.data!)}
+          onForward={() => onForward?.(contextMenu.data!)}
+          onMarkAsRead={(read) => onMarkAsRead?.(contextMenu.data!, read)}
+          onToggleStar={() => onToggleStar?.(contextMenu.data!)}
+          onDelete={() => onDelete?.(contextMenu.data!)}
+          onArchive={() => onArchive?.(contextMenu.data!)}
+          onSetColorTag={(color) => onSetColorTag?.(contextMenu.data!.id, color)}
+          onMoveToMailbox={(mailboxId) => onMoveToMailbox?.(contextMenu.data!.id, mailboxId)}
+          // Batch actions
+          onBatchMarkAsRead={(read) => client && batchMarkAsRead(client, read)}
+          onBatchDelete={() => client && batchDelete(client)}
+          onBatchMoveToMailbox={(mailboxId) => client && batchMoveToMailbox(client, mailboxId)}
+        />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
new file mode 100644
index 00000000..5f5aa25c
--- /dev/null
+++ b/components/email/email-viewer.tsx
@@ -0,0 +1,1368 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import DOMPurify from "dompurify";
+import { Email } from "@/lib/jmap/types";
+import { Button } from "@/components/ui/button";
+import { Avatar } from "@/components/ui/avatar";
+import { formatFileSize, cn } from "@/lib/utils";
+import { getSecurityStatus } from "@/lib/email-headers";
+import {
+  Reply,
+  ReplyAll,
+  Forward,
+  Trash2,
+  Archive,
+  Star,
+  MoreVertical,
+  ChevronDown,
+  ChevronUp,
+  Download,
+  Paperclip,
+  Mail,
+  Clock,
+  Loader2,
+  Printer,
+  FileText,
+  FileImage,
+  FileVideo,
+  FileAudio,
+  FileArchive,
+  File,
+  Shield,
+  Image,
+  Circle,
+  X,
+  Check,
+  AlertTriangle,
+  Minus,
+  ShieldCheck,
+  ShieldAlert,
+  Network,
+  Hash,
+  List,
+  Code,
+  Copy,
+  Brain,
+  Sparkles,
+} from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useSettingsStore } from "@/stores/settings-store";
+
+interface EmailViewerProps {
+  email: Email | null;
+  isLoading?: boolean;
+  onReply?: () => void;
+  onReplyAll?: () => void;
+  onForward?: () => void;
+  onDelete?: () => void;
+  onArchive?: () => void;
+  onToggleStar?: () => void;
+  onMarkAsRead?: (emailId: string, read: boolean) => void;
+  onSetColorTag?: (emailId: string, color: string | null) => void;
+  onDownloadAttachment?: (blobId: string, name: string, type?: string) => void;
+  onQuickReply?: (body: string) => Promise<void>;
+  currentUserEmail?: string;
+  currentUserName?: string;
+  className?: string;
+}
+
+// Helper function to get file icon based on mime type or extension
+const getFileIcon = (name?: string, type?: string) => {
+  const ext = name?.split('.').pop()?.toLowerCase();
+  const mimeType = type?.toLowerCase();
+
+  if (mimeType?.startsWith('image/') || ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(ext || '')) {
+    return FileImage;
+  }
+  if (mimeType?.startsWith('video/') || ['mp4', 'avi', 'mov', 'wmv'].includes(ext || '')) {
+    return FileVideo;
+  }
+  if (mimeType?.startsWith('audio/') || ['mp3', 'wav', 'ogg', 'flac'].includes(ext || '')) {
+    return FileAudio;
+  }
+  if (mimeType === 'application/pdf' || ext === 'pdf') {
+    return FileText;
+  }
+  if (['zip', 'rar', '7z', 'tar', 'gz'].includes(ext || '')) {
+    return FileArchive;
+  }
+  if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext || '')) {
+    return FileText;
+  }
+  return File;
+};
+
+// Color options for email tags
+const colorOptions = [
+  { name: "Red", value: "red", color: "bg-red-500" },
+  { name: "Orange", value: "orange", color: "bg-orange-500" },
+  { name: "Yellow", value: "yellow", color: "bg-yellow-500" },
+  { name: "Green", value: "green", color: "bg-green-500" },
+  { name: "Blue", value: "blue", color: "bg-blue-500" },
+  { name: "Purple", value: "purple", color: "bg-purple-500" },
+  { name: "Pink", value: "pink", color: "bg-pink-500" },
+];
+
+const getCurrentColor = (keywords: Record<string, boolean> | undefined) => {
+  if (!keywords) return null;
+  for (const key of Object.keys(keywords)) {
+    if (key.startsWith("$color:") && keywords[key] === true) {
+      return key.replace("$color:", "");
+    }
+  }
+  return null;
+};
+
+export function EmailViewer({
+  email,
+  isLoading = false,
+  onReply,
+  onReplyAll,
+  onForward,
+  onDelete,
+  onArchive,
+  onToggleStar,
+  onMarkAsRead,
+  onSetColorTag,
+  onDownloadAttachment,
+  onQuickReply,
+  currentUserEmail,
+  currentUserName,
+  className,
+}: EmailViewerProps) {
+  const t = useTranslations('email_viewer');
+  const tNotifications = useTranslations('notifications');
+  const externalContentPolicy = useSettingsStore((state) => state.externalContentPolicy);
+  const [showFullHeaders, setShowFullHeaders] = useState(false);
+  const [allowExternalContent, setAllowExternalContent] = useState(false);
+  const [hasBlockedContent, setHasBlockedContent] = useState(false);
+  const [quickReplyText, setQuickReplyText] = useState("");
+  const [isQuickReplyFocused, setIsQuickReplyFocused] = useState(false);
+  const [isSendingQuickReply, setIsSendingQuickReply] = useState(false);
+  const [showSourceModal, setShowSourceModal] = useState(false);
+  const currentColor = getCurrentColor(email?.keywords);
+
+  useEffect(() => {
+    // Mark as read when email is viewed
+    if (email && !email.keywords?.$seen && onMarkAsRead) {
+      onMarkAsRead(email.id, true);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- email?.id changes when email changes, which is the intended trigger
+  }, [email?.id, email?.keywords?.$seen, onMarkAsRead]);
+
+  // Reset external content permission and quick reply when email changes
+  // Initialize allowExternalContent based on externalContentPolicy setting
+  useEffect(() => {
+    // 'allow' = always allow, 'block' = always block, 'ask' = user decides per email
+    setAllowExternalContent(externalContentPolicy === 'allow');
+    setHasBlockedContent(false);
+    setQuickReplyText("");
+    setIsQuickReplyFocused(false);
+    setShowSourceModal(false);
+  }, [email?.id, externalContentPolicy]);
+
+  // Generate email source for viewing
+  const generateEmailSource = (email: Email): string => {
+    let source = '';
+
+    // Headers
+    source += '=== EMAIL HEADERS ===\n\n';
+    if (email.messageId) source += `Message-ID: ${email.messageId}\n`;
+    if (email.from) source += `From: ${email.from.map(a => a.name ? `${a.name} <${a.email}>` : a.email).join(', ')}\n`;
+    if (email.to) source += `To: ${email.to.map(a => a.name ? `${a.name} <${a.email}>` : a.email).join(', ')}\n`;
+    if (email.cc) source += `Cc: ${email.cc.map(a => a.name ? `${a.name} <${a.email}>` : a.email).join(', ')}\n`;
+    if (email.bcc) source += `Bcc: ${email.bcc.map(a => a.name ? `${a.name} <${a.email}>` : a.email).join(', ')}\n`;
+    if (email.replyTo) source += `Reply-To: ${email.replyTo.map(a => a.name ? `${a.name} <${a.email}>` : a.email).join(', ')}\n`;
+    if (email.subject) source += `Subject: ${email.subject}\n`;
+    if (email.sentAt) source += `Date: ${new Date(email.sentAt).toUTCString()}\n`;
+    if (email.receivedAt) source += `Received-At: ${new Date(email.receivedAt).toUTCString()}\n`;
+    if (email.inReplyTo) source += `In-Reply-To: ${email.inReplyTo.join(', ')}\n`;
+    if (email.references) source += `References: ${email.references.join(', ')}\n`;
+
+    // Additional headers
+    if (email.headers) {
+      source += '\n--- Additional Headers ---\n';
+      // Headers should now always be a Record after client processing
+      Object.entries(email.headers).forEach(([key, value]) => {
+        const val = Array.isArray(value) ? value.join('\n    ') : String(value);
+        source += `${key}: ${val}\n`;
+      });
+    }
+
+    // Authentication results
+    if (email.authenticationResults) {
+      source += '\n--- Authentication Results ---\n';
+      if (email.authenticationResults.spf) {
+        source += `SPF: ${email.authenticationResults.spf.result}`;
+        if (email.authenticationResults.spf.domain) source += ` (${email.authenticationResults.spf.domain})`;
+        source += '\n';
+      }
+      if (email.authenticationResults.dkim) {
+        source += `DKIM: ${email.authenticationResults.dkim.result}`;
+        if (email.authenticationResults.dkim.domain) source += ` (${email.authenticationResults.dkim.domain})`;
+        source += '\n';
+      }
+      if (email.authenticationResults.dmarc) {
+        source += `DMARC: ${email.authenticationResults.dmarc.result}`;
+        if (email.authenticationResults.dmarc.policy) source += ` policy=${email.authenticationResults.dmarc.policy}`;
+        source += '\n';
+      }
+    }
+
+    if (email.spamScore !== undefined) {
+      source += `Spam Score: ${email.spamScore}`;
+      if (email.spamStatus) source += ` (${email.spamStatus})`;
+      source += '\n';
+    }
+
+    // Metadata
+    source += '\n=== EMAIL METADATA ===\n\n';
+    source += `Email ID: ${email.id}\n`;
+    source += `Thread ID: ${email.threadId}\n`;
+    source += `Size: ${formatFileSize(email.size)}\n`;
+    source += `Has Attachment: ${email.hasAttachment ? 'Yes' : 'No'}\n`;
+    if (email.keywords) {
+      const keywords = Object.entries(email.keywords)
+        .filter(([_, v]) => v)
+        .map(([k]) => k)
+        .join(', ');
+      if (keywords) source += `Keywords: ${keywords}\n`;
+    }
+
+    // Attachments
+    if (email.attachments && email.attachments.length > 0) {
+      source += '\n=== ATTACHMENTS ===\n\n';
+      email.attachments.forEach((att, i) => {
+        source += `[${i + 1}] ${att.name || 'Unnamed'}\n`;
+        source += `    Type: ${att.type}\n`;
+        source += `    Size: ${formatFileSize(att.size)}\n`;
+        source += `    Blob ID: ${att.blobId}\n`;
+        if (att.cid) source += `    Content-ID: ${att.cid}\n`;
+        source += '\n';
+      });
+    }
+
+    // Body content
+    source += '\n=== EMAIL BODY ===\n\n';
+
+    let hasBodyContent = false;
+
+    // Text version
+    if (email.textBody?.[0]?.partId && email.bodyValues?.[email.textBody[0].partId]) {
+      const textValue = email.bodyValues[email.textBody[0].partId].value;
+      if (textValue && textValue.trim()) {
+        source += '--- Plain Text Version ---\n\n';
+        source += textValue;
+        source += '\n\n';
+        hasBodyContent = true;
+      }
+    }
+
+    // HTML version
+    if (email.htmlBody?.[0]?.partId && email.bodyValues?.[email.htmlBody[0].partId]) {
+      const htmlValue = email.bodyValues[email.htmlBody[0].partId].value;
+      if (htmlValue && htmlValue.trim()) {
+        source += '--- HTML Version ---\n\n';
+        source += htmlValue;
+        source += '\n\n';
+        hasBodyContent = true;
+      }
+    }
+
+    // All body values if we haven't found content yet
+    if (!hasBodyContent && email.bodyValues) {
+      const bodyKeys = Object.keys(email.bodyValues);
+      if (bodyKeys.length > 0) {
+        source += '--- Body Parts ---\n\n';
+        bodyKeys.forEach((key, index) => {
+          const bodyValue = email.bodyValues![key].value;
+          if (bodyValue && bodyValue.trim()) {
+            source += `Part ${index + 1} (${key}):\n`;
+            source += bodyValue;
+            source += '\n\n';
+            hasBodyContent = true;
+          }
+        });
+      }
+    }
+
+    // Preview if no body
+    if (!hasBodyContent && email.preview) {
+      source += '--- Preview Only ---\n\n';
+      source += email.preview;
+      source += '\n';
+    }
+
+    if (!hasBodyContent && !email.preview) {
+      source += '(No body content available)\n';
+    }
+
+    return source;
+  };
+
+  const copySourceToClipboard = async () => {
+    if (!email) return;
+
+    try {
+      const source = generateEmailSource(email);
+      await navigator.clipboard.writeText(source);
+      // Could add a toast notification here
+      console.log(tNotifications('source_copied'));
+    } catch (err) {
+      console.error('Failed to copy source:', err);
+    }
+  };
+
+  // Sanitize and prepare email HTML content
+  const emailContent = useMemo(() => {
+    if (!email) return { html: "", isHtml: false };
+
+    // Check if we have body values
+    if (email.bodyValues) {
+      // Check if HTML content exists and if it's actually rich HTML or just plain text wrapper
+      let useHtmlVersion = false;
+      let htmlContent = '';
+
+      if (email.htmlBody?.[0]?.partId && email.bodyValues[email.htmlBody[0].partId]) {
+        htmlContent = email.bodyValues[email.htmlBody[0].partId].value;
+
+        // Check if HTML is just a minimal wrapper around plain text
+        // by checking if it lacks common HTML formatting elements
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = htmlContent;
+        const hasRichFormatting = tempDiv.querySelector('table, img, style, b, strong, i, em, u, font, div[style], span[style], p[style], h1, h2, h3, h4, h5, h6, ul, ol, blockquote');
+        const hasMultipleParagraphs = tempDiv.querySelectorAll('p').length > 2;
+        const hasBrTags = tempDiv.querySelectorAll('br').length > 0;
+
+        // Use HTML if it has rich formatting, multiple paragraphs, or explicit line breaks
+        useHtmlVersion = !!(hasRichFormatting || hasMultipleParagraphs || hasBrTags);
+      }
+
+      // If we should use HTML version and it exists
+      if (useHtmlVersion && htmlContent) {
+        // Create a custom DOMPurify hook to handle external content
+        let blockedExternalContent = false;
+
+        const sanitizeConfig = {
+          ADD_TAGS: ['style'],
+          ADD_ATTR: ['target', 'style', 'class', 'width', 'height', 'align', 'valign', 'bgcolor', 'color'],
+          ALLOW_DATA_ATTR: false,
+          FORCE_BODY: true,
+          FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'button'],
+          FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur'],
+        };
+
+        // Block external content based on policy:
+        // 'allow' = never block, 'block' = always block, 'ask' = block until user allows
+        const shouldBlockExternal = externalContentPolicy === 'block' ||
+          (externalContentPolicy === 'ask' && !allowExternalContent);
+
+        if (shouldBlockExternal) {
+          sanitizeConfig.FORBID_TAGS.push('link');
+          sanitizeConfig.FORBID_ATTR.push('background');
+
+          // Hook to modify src attributes
+          DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+            const htmlNode = node as HTMLElement;
+            // Block external images
+            if (node.tagName === 'IMG') {
+              const src = node.getAttribute('src');
+              if (src && (src.startsWith('http://') || src.startsWith('https://') || src.startsWith('//'))) {
+                node.setAttribute('data-blocked-src', src);
+                // Use a subtle transparent placeholder
+                node.setAttribute('src', 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB2aWV3Qm94PSIwIDAgMSAxIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8L3N2Zz4=');
+                node.setAttribute('alt', '');
+                htmlNode.style.display = 'none'; // Hide blocked images completely for cleaner look
+                blockedExternalContent = true;
+              }
+            }
+
+            // Block external stylesheets and resources in style attributes
+            if (htmlNode.style) {
+              const style = htmlNode.style.cssText;
+              if (style && style.includes('url(')) {
+                const urlMatch = style.match(/url\(['"]?(https?:\/\/[^'")\s]+)['"]?\)/gi);
+                if (urlMatch) {
+                  htmlNode.style.cssText = style.replace(/url\(['"]?https?:\/\/[^'")\s]+['"]?\)/gi, 'url()');
+                  blockedExternalContent = true;
+                }
+              }
+            }
+          });
+        }
+
+        // Sanitize HTML to prevent XSS
+        const cleanHtml = DOMPurify.sanitize(htmlContent, sanitizeConfig);
+
+        // Remove the hook after sanitization
+        DOMPurify.removeAllHooks();
+
+        // Update blocked content state
+        if (blockedExternalContent && !hasBlockedContent) {
+          setHasBlockedContent(true);
+        }
+
+        return {
+          html: cleanHtml,
+          isHtml: true
+        };
+      }
+
+      // Use text content if available (either as fallback or when HTML is minimal)
+      if (email.textBody?.[0]?.partId && email.bodyValues[email.textBody[0].partId]) {
+        const textContent = email.bodyValues[email.textBody[0].partId].value;
+
+        // Convert plain text to HTML with proper formatting
+        const htmlFromText = textContent
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/\r\n/g, '<br>')  // Windows line endings
+          .replace(/\r/g, '<br>')    // Old Mac line endings
+          .replace(/\n/g, '<br>')    // Unix line endings
+          .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;')  // Convert tabs to spaces
+          .replace(/(https?:\/\/[^\s<]+)/g, '<a href="$1" target="_blank" rel="noopener">$1</a>'); // Don't match across tags
+
+        return {
+          html: htmlFromText,
+          isHtml: false
+        };
+      }
+    }
+
+    // If no body content is available, show the preview or a message
+    if (email.preview) {
+      const previewHtml = email.preview
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/\r\n/g, '<br>')
+        .replace(/\r/g, '<br>')
+        .replace(/\n/g, '<br>');
+
+      return {
+        html: `<div style="color: #666; font-style: italic;">${previewHtml}</div>`,
+        isHtml: false
+      };
+    }
+
+    return {
+      html: '<p style="color: #999;">No content available</p>',
+      isHtml: false
+    };
+  }, [email, allowExternalContent, hasBlockedContent, externalContentPolicy]);
+
+  // Show loading skeleton while email is being fetched
+  if (isLoading && !email) {
+    return (
+      <div className={cn("flex-1 flex flex-col h-full bg-background overflow-hidden animate-in fade-in duration-200", className)}>
+        {/* Loading Header Skeleton - gentler animation */}
+        <div className="bg-background border-b border-border">
+          <div className="px-4 md:px-6 py-3 md:py-4">
+            <div className="flex items-start justify-between gap-2 md:gap-4">
+              <div className="flex-1 min-w-0 space-y-2 md:space-y-3">
+                <div className="h-6 md:h-8 bg-muted/60 rounded-md w-3/4"></div>
+                <div className="flex items-center gap-2 md:gap-3">
+                  <div className="h-3 md:h-4 bg-muted/60 rounded w-24 md:w-32"></div>
+                  <div className="h-3 md:h-4 bg-muted/60 rounded w-16 md:w-24"></div>
+                </div>
+              </div>
+              <div className="flex items-center gap-1 md:gap-2">
+                <div className="h-8 w-8 md:w-20 bg-muted/60 rounded"></div>
+                <div className="h-8 w-8 bg-muted/60 rounded hidden md:block"></div>
+              </div>
+            </div>
+          </div>
+
+          {/* Loading Sender Info Skeleton */}
+          <div className="px-4 md:px-6 pb-3 md:pb-4">
+            <div className="flex items-start gap-3 md:gap-4">
+              <div className="w-10 h-10 md:w-12 md:h-12 bg-muted/60 rounded-full"></div>
+              <div className="flex-1 space-y-2">
+                <div className="h-4 bg-muted/60 rounded w-48"></div>
+                <div className="h-3 bg-muted/60 rounded w-64"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Loading Content Skeleton */}
+        <div className="flex-1 overflow-auto bg-muted/20">
+          <div className="max-w-4xl mx-auto p-6">
+            <div className="bg-background rounded-lg shadow-sm border border-border overflow-hidden p-6 space-y-3">
+              <div className="h-4 bg-muted/60 rounded w-full"></div>
+              <div className="h-4 bg-muted/60 rounded w-5/6"></div>
+              <div className="h-4 bg-muted/60 rounded w-4/6"></div>
+              <div className="h-4 bg-muted/60 rounded w-full"></div>
+              <div className="h-4 bg-muted/60 rounded w-3/4"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!email) {
+    return (
+      <div className={cn("flex-1 flex flex-col items-center justify-center bg-gradient-to-br from-muted/30 to-muted/50", className)}>
+        <div className="text-center p-8">
+          <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-background shadow-lg flex items-center justify-center">
+            <Mail className="w-10 h-10 text-muted-foreground" />
+          </div>
+          <h3 className="text-xl font-semibold text-foreground mb-2">No conversation selected</h3>
+          <p className="text-muted-foreground">Choose a conversation from the list to read it here</p>
+        </div>
+      </div>
+    );
+  }
+
+  const sender = email.from?.[0];
+  const isStarred = email.keywords?.$flagged;
+  const isImportant = email.keywords?.["$important"];
+
+  return (
+    <div
+      key={email.id}
+      className={cn("flex-1 flex flex-col h-full bg-background overflow-hidden animate-in fade-in duration-300 relative", className)}
+    >
+      {/* Loading overlay when fetching new email */}
+      {isLoading && (
+        <div className="absolute inset-0 bg-background/60 backdrop-blur-[2px] z-50 flex items-center justify-center animate-in fade-in duration-200">
+          <div className="bg-background rounded-lg shadow-lg border border-border p-4 flex items-center gap-3">
+            <Loader2 className="w-5 h-5 animate-spin text-primary" />
+            <span className="text-sm font-medium text-foreground">Loading email...</span>
+          </div>
+        </div>
+      )}
+      {/* Modern Header Section */}
+      <div className="bg-background border-b border-border">
+        {/* Subject Bar */}
+        <div className="px-4 md:px-6 py-3 md:py-4">
+          <div className="flex items-start justify-between gap-2 md:gap-4">
+            <div className="flex-1 min-w-0">
+              <h1 className="text-lg md:text-2xl font-bold text-foreground tracking-tight truncate pr-2">
+                {email.subject || "(no subject)"}
+              </h1>
+              <div className="flex items-center gap-2 md:gap-3 mt-1.5 md:mt-2 text-xs md:text-sm text-muted-foreground flex-wrap md:flex-nowrap">
+                <span className="flex items-center gap-1 md:gap-1.5 whitespace-nowrap">
+                  <Clock className="w-3.5 h-3.5 md:w-4 md:h-4" />
+                  {new Date(email.receivedAt).toLocaleString('en-US', {
+                    weekday: 'short',
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                  })}
+                </span>
+                {email.hasAttachment && (
+                  <span className="flex items-center gap-1 md:gap-1.5 whitespace-nowrap">
+                    <Paperclip className="w-3.5 h-3.5 md:w-4 md:h-4" />
+                    <span className="hidden md:inline">Attachments</span>
+                  </span>
+                )}
+                {isImportant && (
+                  <span className="px-1.5 md:px-2 py-0.5 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-xs font-medium whitespace-nowrap">
+                    Important
+                  </span>
+                )}
+              </div>
+            </div>
+
+            {/* Quick Actions */}
+            <div className="flex items-center gap-0.5 flex-shrink-0">
+              {/* Loading indicator */}
+              {isLoading && (
+                <div className="mr-2 flex items-center gap-1.5 text-muted-foreground hidden md:flex">
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                  <span className="text-xs">Loading...</span>
+                </div>
+              )}
+              {/* Primary Reply Button */}
+              <Button
+                onClick={onReply}
+                size="sm"
+                className="mr-1 h-8 md:h-9"
+                title="Reply"
+              >
+                <Reply className="w-4 h-4" />
+                <span className="ml-1.5 hidden md:inline">Reply</span>
+              </Button>
+
+              {/* Reply Options Dropdown - hidden on mobile */}
+              <div className="relative group mr-3 hidden md:block">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 hover:bg-muted"
+                  title="More reply options"
+                >
+                  <ChevronDown className="w-4 h-4 text-muted-foreground" />
+                </Button>
+                <div className="absolute right-0 top-full mt-1 w-40 bg-background rounded-md shadow-lg border border-border opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
+                  <button
+                    onClick={onReplyAll}
+                    className="w-full px-3 py-2 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2"
+                  >
+                    <ReplyAll className="w-4 h-4" />
+                    Reply all
+                  </button>
+                  <button
+                    onClick={onForward}
+                    className="w-full px-3 py-2 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2"
+                  >
+                    <Forward className="w-4 h-4" />
+                    Forward
+                  </button>
+                </div>
+              </div>
+
+              <div className="w-px h-5 bg-border hidden md:block" />
+
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onArchive}
+                className="h-8 w-8 hover:bg-muted hidden md:flex"
+                title="Archive"
+              >
+                <Archive className="w-4 h-4 text-muted-foreground" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onDelete}
+                className="h-8 w-8 hover:bg-muted"
+                title="Delete"
+              >
+                <Trash2 className="w-4 h-4 text-muted-foreground" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onToggleStar}
+                className="h-8 w-8 hover:bg-muted hidden md:flex"
+                title={isStarred ? "Unstar" : "Star"}
+              >
+                <Star className={cn(
+                  "w-4 h-4 transition-colors",
+                  isStarred ? "fill-yellow-400 text-yellow-400" : "text-muted-foreground"
+                )} />
+              </Button>
+
+              <div className="w-px h-5 bg-border mx-1 hidden md:block" />
+
+              {/* Compact Dynamic Color Picker - hidden on mobile */}
+              <div className="relative group hidden md:block">
+                <button
+                  className="h-8 w-8 rounded hover:bg-muted flex items-center justify-center"
+                  title="Set color"
+                >
+                  <Circle className={cn(
+                    "w-4 h-4",
+                    currentColor === 'red' && "fill-red-500 text-red-500",
+                    currentColor === 'orange' && "fill-orange-500 text-orange-500",
+                    currentColor === 'yellow' && "fill-yellow-500 text-yellow-500",
+                    currentColor === 'green' && "fill-green-500 text-green-500",
+                    currentColor === 'blue' && "fill-blue-500 text-blue-500",
+                    currentColor === 'purple' && "fill-purple-500 text-purple-500",
+                    currentColor === 'pink' && "fill-pink-500 text-pink-500",
+                    !currentColor && "text-gray-400"
+                  )} />
+                </button>
+
+                {/* Colors appear on hover */}
+                <div className="absolute right-0 top-full mt-1 p-1.5 bg-background rounded-lg shadow-lg border border-border opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-10">
+                  <div className="flex gap-1">
+                    {colorOptions.map((option) => (
+                      <button
+                        key={option.value}
+                        onClick={() => {
+                          if (email) {
+                            onSetColorTag?.(email.id, option.value);
+                          }
+                        }}
+                        className={cn(
+                          "w-6 h-6 rounded-full hover:scale-110 transition-transform",
+                          option.color,
+                          currentColor === option.value && "ring-2 ring-offset-1 ring-gray-400"
+                        )}
+                        title={option.name}
+                      />
+                    ))}
+                    {currentColor && (
+                      <div className="w-px bg-gray-200 dark:bg-gray-700 mx-0.5" />
+                    )}
+                    {currentColor && (
+                      <button
+                        onClick={() => {
+                          if (email) {
+                            onSetColorTag?.(email.id, null);
+                          }
+                        }}
+                        className="w-6 h-6 rounded-full border border-gray-300 dark:border-gray-600 hover:bg-gray-100 hover:bg-muted flex items-center justify-center"
+                        title="Remove color"
+                      >
+                        <X className="w-3 h-3 text-muted-foreground" />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* More Actions Dropdown */}
+              <div className="relative group">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 hover:bg-muted"
+                  title="More actions"
+                >
+                  <MoreVertical className="w-4 h-4 text-muted-foreground" />
+                </Button>
+                <div className="absolute right-0 top-full mt-1 w-44 bg-background rounded-md shadow-lg border border-border opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
+                  <button
+                    onClick={() => setShowSourceModal(true)}
+                    className="w-full px-3 py-2 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2"
+                  >
+                    <Code className="w-4 h-4" />
+                    {t('view_source')}
+                  </button>
+                  <button
+                    onClick={() => window.print()}
+                    className="w-full px-3 py-2 text-sm text-left hover:bg-muted text-foreground flex items-center gap-2"
+                  >
+                    <Printer className="w-4 h-4" />
+                    {t('print')}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Sender Info */}
+        <div className="px-4 md:px-6 pb-3 md:pb-4">
+          <div className="flex items-start gap-3 md:gap-4">
+            <Avatar
+              name={sender?.name}
+              email={sender?.email}
+              size="lg"
+              className="shadow-sm w-10 h-10 md:w-12 md:h-12"
+            />
+
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2 flex-wrap">
+                <span className="font-semibold text-foreground">
+                  {sender?.name || sender?.email || "Unknown"}
+                </span>
+                {sender?.email && sender?.name && (
+                  <span className="text-sm text-muted-foreground">
+                    &lt;{sender.email}&gt;
+                  </span>
+                )}
+              </div>
+
+              <div className="mt-2 space-y-1">
+                {email.to && email.to.length > 0 && (
+                  <div className="flex flex-wrap items-center gap-1 text-sm">
+                    <span className="text-muted-foreground">To:</span>
+                    <span className="text-foreground">
+                      {email.to.slice(0, 2).map(r => r.name || r.email).join(", ")}
+                      {email.to.length > 2 && (
+                        <button
+                          onClick={() => setShowFullHeaders(!showFullHeaders)}
+                          className="ml-1 text-blue-600 dark:text-blue-400 hover:underline"
+                        >
+                          +{email.to.length - 2} more
+                        </button>
+                      )}
+                    </span>
+                  </div>
+                )}
+
+                {(email.cc && email.cc.length > 0) && (
+                  <div className="flex flex-wrap items-center gap-1 text-sm">
+                    <span className="text-muted-foreground">CC:</span>
+                    <span className="text-foreground">
+                      {email.cc.map(r => r.name || r.email).join(", ")}
+                    </span>
+                  </div>
+                )}
+              </div>
+
+              {/* Modern Expandable Details */}
+              {showFullHeaders && (
+                <div className="mt-4 space-y-3">
+                  {/* Security & Authentication Section */}
+                  {(email.authenticationResults || email.spamScore !== undefined) && (
+                    <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+                      <div className="bg-gray-50 dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-700">
+                        <h3 className="text-xs font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-wider flex items-center gap-2">
+                          <ShieldCheck className="w-3.5 h-3.5" />
+                          Security & Authentication
+                        </h3>
+                      </div>
+                      <div className="bg-background p-4 space-y-3">
+                        {/* Authentication Results */}
+                        {email.authenticationResults && (
+                          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+                            {/* SPF Check */}
+                            {email.authenticationResults.spf && (
+                              <div className={cn(
+                                "px-3 py-2 rounded-md",
+                                getSecurityStatus(email.authenticationResults.spf.result).bgColor,
+                                getSecurityStatus(email.authenticationResults.spf.result).borderColor
+                              )}>
+                                <div className="flex items-center gap-2">
+                                  {getSecurityStatus(email.authenticationResults.spf.result).icon === 'check' &&
+                                    <Check className={cn("w-4 h-4", getSecurityStatus(email.authenticationResults.spf.result).color)} />}
+                                  {getSecurityStatus(email.authenticationResults.spf.result).icon === 'x' &&
+                                    <X className={cn("w-4 h-4", getSecurityStatus(email.authenticationResults.spf.result).color)} />}
+                                  {getSecurityStatus(email.authenticationResults.spf.result).icon === 'alert' &&
+                                    <AlertTriangle className={cn("w-4 h-4", getSecurityStatus(email.authenticationResults.spf.result).color)} />}
+                                  {getSecurityStatus(email.authenticationResults.spf.result).icon === 'minus' &&
+                                    <Minus className={cn("w-4 h-4", getSecurityStatus(email.authenticationResults.spf.result).color)} />}
+                                  <div>
+                                    <div className="text-xs font-medium text-gray-900 dark:text-gray-100">SPF</div>
+                                    <div className={cn("text-xs capitalize", getSecurityStatus(email.authenticationResults.spf.result).color)}>
+                                      {email.authenticationResults.spf.result}
+                                    </div>
+                                  </div>
+                                </div>
+                                {email.authenticationResults.spf.domain && (
+                                  <div className="text-xs text-gray-600 dark:text-gray-400 mt-1 truncate" title={email.authenticationResults.spf.domain}>
+                                    {email.authenticationResults.spf.domain}
+                                  </div>
+                                )}
+                              </div>
+                            )}
+
+                            {/* DKIM Check */}
+                            {email.authenticationResults.dkim && (
+                              <div className={cn(
+                                "px-3 py-2 rounded-md",
+                                getSecurityStatus(email.authenticationResults.dkim.result).bgColor,
+                                getSecurityStatus(email.authenticationResults.dkim.result).borderColor
+                              )}>
+                                <div className="flex items-center gap-2">
+                                  {getSecurityStatus(email.authenticationResults.dkim.result).icon === 'check' &&
+                                    <Check className={cn("w-4 h-4", getSecurityStatus(email.authenticationResults.dkim.result).color)} />}
+                                  {getSecurityStatus(email.authenticationResults.dkim.result).icon === 'x' &&
+                                    <X className={cn("w-4 h-4", getSecurityStatus(email.authenticationResults.dkim.result).color)} />}
+                                  {getSecurityStatus(email.authenticationResults.dkim.result).icon === 'alert' &&
+                                    <AlertTriangle className={cn("w-4 h-4", getSecurityStatus(email.authenticationResults.dkim.result).color)} />}
+                                  {getSecurityStatus(email.authenticationResults.dkim.result).icon === 'minus' &&
+                                    <Minus className={cn("w-4 h-4", getSecurityStatus(email.authenticationResults.dkim.result).color)} />}
+                                  <div>
+                                    <div className="text-xs font-medium text-gray-900 dark:text-gray-100">DKIM</div>
+                                    <div className={cn("text-xs capitalize", getSecurityStatus(email.authenticationResults.dkim.result).color)}>
+                                      {email.authenticationResults.dkim.result}
+                                    </div>
+                                  </div>
+                                </div>
+                                {email.authenticationResults.dkim.domain && (
+                                  <div className="text-xs text-gray-600 dark:text-gray-400 mt-1 truncate" title={email.authenticationResults.dkim.domain}>
+                                    {email.authenticationResults.dkim.domain}
+                                  </div>
+                                )}
+                              </div>
+                            )}
+
+                            {/* DMARC Check */}
+                            {email.authenticationResults.dmarc && (
+                              <div className={cn(
+                                "px-3 py-2 rounded-md",
+                                getSecurityStatus(email.authenticationResults.dmarc.result).bgColor,
+                                getSecurityStatus(email.authenticationResults.dmarc.result).borderColor
+                              )}>
+                                <div className="flex items-center gap-2">
+                                  {getSecurityStatus(email.authenticationResults.dmarc.result).icon === 'check' &&
+                                    <Check className={cn("w-4 h-4", getSecurityStatus(email.authenticationResults.dmarc.result).color)} />}
+                                  {getSecurityStatus(email.authenticationResults.dmarc.result).icon === 'x' &&
+                                    <X className={cn("w-4 h-4", getSecurityStatus(email.authenticationResults.dmarc.result).color)} />}
+                                  {getSecurityStatus(email.authenticationResults.dmarc.result).icon === 'alert' &&
+                                    <AlertTriangle className={cn("w-4 h-4", getSecurityStatus(email.authenticationResults.dmarc.result).color)} />}
+                                  {getSecurityStatus(email.authenticationResults.dmarc.result).icon === 'minus' &&
+                                    <Minus className={cn("w-4 h-4", getSecurityStatus(email.authenticationResults.dmarc.result).color)} />}
+                                  <div>
+                                    <div className="text-xs font-medium text-gray-900 dark:text-gray-100">DMARC</div>
+                                    <div className={cn("text-xs capitalize", getSecurityStatus(email.authenticationResults.dmarc.result).color)}>
+                                      {email.authenticationResults.dmarc.result}
+                                    </div>
+                                  </div>
+                                </div>
+                                {email.authenticationResults.dmarc.policy && (
+                                  <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                                    Policy: {email.authenticationResults.dmarc.policy}
+                                  </div>
+                                )}
+                              </div>
+                            )}
+
+                            {/* Spam Score */}
+                            {email.spamScore !== undefined && (
+                              <div className={cn(
+                                "px-3 py-2 rounded-md",
+                                email.spamScore > 5 ? "bg-gray-50 dark:bg-gray-800 border-l-4 border-red-600 dark:border-red-500" :
+                                email.spamScore > 2 ? "bg-gray-50 dark:bg-gray-800 border-l-4 border-amber-600 dark:border-amber-500" :
+                                "bg-gray-50 dark:bg-gray-800 border-l-4 border-green-600 dark:border-green-500"
+                              )}>
+                                <div className="flex items-center gap-2">
+                                  <Shield className={cn(
+                                    "w-4 h-4",
+                                    email.spamScore > 5 ? "text-red-700 dark:text-red-400" :
+                                    email.spamScore > 2 ? "text-amber-700 dark:text-amber-400" :
+                                    "text-green-700 dark:text-green-400"
+                                  )} />
+                                  <div>
+                                    <div className="text-xs font-medium text-gray-900 dark:text-gray-100">Spam Score</div>
+                                    <div className={cn(
+                                      "text-xs",
+                                      email.spamScore > 5 ? "text-red-700 dark:text-red-400" :
+                                      email.spamScore > 2 ? "text-amber-700 dark:text-amber-400" :
+                                      "text-green-700 dark:text-green-400"
+                                    )}>
+                                      {email.spamScore.toFixed(1)}
+                                    </div>
+                                  </div>
+                                </div>
+                                {email.spamStatus && (
+                                  <div className="text-xs text-gray-600 dark:text-gray-400 mt-1 capitalize">
+                                    {email.spamStatus}
+                                  </div>
+                                )}
+                              </div>
+                            )}
+                          </div>
+                        )}
+
+                        {/* AI Analysis (X-Spam-LLM) - Full width card */}
+                        {email.spamLLM && (
+                          <div className={cn(
+                            "mt-3 px-4 py-3 rounded-lg",
+                            email.spamLLM.verdict === 'LEGITIMATE'
+                              ? "bg-gray-50 dark:bg-gray-800 border-l-4 border-green-600 dark:border-green-500"
+                              : email.spamLLM.verdict === 'SPAM'
+                              ? "bg-gray-50 dark:bg-gray-800 border-l-4 border-red-600 dark:border-red-500"
+                              : "bg-gray-50 dark:bg-gray-800 border-l-4 border-amber-600 dark:border-amber-500"
+                          )}>
+                            <div className="flex items-start gap-3">
+                              <div className="flex-shrink-0 mt-0.5">
+                                {email.spamLLM.verdict === 'LEGITIMATE' ? (
+                                  <div className="flex items-center gap-1.5">
+                                    <Brain className="w-4 h-4 text-green-700 dark:text-green-400" />
+                                    <Sparkles className="w-3 h-3 text-green-700 dark:text-green-400" />
+                                  </div>
+                                ) : email.spamLLM.verdict === 'SPAM' ? (
+                                  <ShieldAlert className="w-4 h-4 text-red-700 dark:text-red-400" />
+                                ) : (
+                                  <AlertTriangle className="w-4 h-4 text-amber-700 dark:text-amber-400" />
+                                )}
+                              </div>
+                              <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2 mb-1">
+                                  <span className={cn(
+                                    "text-xs font-semibold uppercase tracking-wide",
+                                    email.spamLLM.verdict === 'LEGITIMATE'
+                                      ? "text-green-700 dark:text-green-400"
+                                      : email.spamLLM.verdict === 'SPAM'
+                                      ? "text-red-700 dark:text-red-400"
+                                      : "text-amber-700 dark:text-amber-400"
+                                  )}>
+                                    AI Analysis: {email.spamLLM.verdict}
+                                  </span>
+                                </div>
+                                <p className="text-xs text-gray-700 dark:text-gray-300 leading-relaxed">
+                                  {email.spamLLM.explanation}
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Technical Details Section - Only show if we have useful technical info */}
+                  {(email.messageId || email.replyTo?.length || (email.sentAt && email.receivedAt &&
+                    Math.abs(new Date(email.sentAt).getTime() - new Date(email.receivedAt).getTime()) > 60000)) && (
+                    <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+                      <div className="bg-gray-50 dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-700">
+                        <h3 className="text-xs font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-wider flex items-center gap-2">
+                          <Network className="w-3.5 h-3.5" />
+                          Technical Details
+                        </h3>
+                      </div>
+                      <div className="bg-background p-4">
+                        <div className="space-y-3 text-xs">
+                          {/* Message ID */}
+                          {email.messageId && (
+                            <div className="flex items-start gap-2">
+                              <Hash className="w-3.5 h-3.5 text-muted-foreground mt-0.5" />
+                              <div className="flex-1 min-w-0">
+                                <span className="font-medium text-muted-foreground">Message-ID:</span>
+                                <div className="text-foreground break-all font-mono text-xs mt-0.5">
+                                  {email.messageId}
+                                </div>
+                              </div>
+                            </div>
+                          )}
+
+                          {/* Reply-To if different from sender */}
+                          {email.replyTo && email.replyTo.length > 0 &&
+                           (!email.from || email.replyTo[0].email !== email.from[0]?.email) && (
+                            <div className="flex items-start gap-2">
+                              <Mail className="w-3.5 h-3.5 text-muted-foreground mt-0.5" />
+                              <div className="flex-1">
+                                <span className="font-medium text-muted-foreground">Reply-To:</span>
+                                <div className="flex flex-wrap gap-2 mt-1">
+                                  {email.replyTo.map((recipient, i) => (
+                                    <span key={i} className="inline-flex items-center px-2 py-1 bg-accent/50 border border-accent rounded text-xs">
+                                      {recipient.name && <span className="font-medium mr-1 text-accent-foreground">{recipient.name}</span>}
+                                      <span className="text-accent-foreground/90">{recipient.email}</span>
+                                    </span>
+                                  ))}
+                                </div>
+                              </div>
+                            </div>
+                          )}
+
+                          {/* Time delay if significant (>1 minute difference) */}
+                          {email.sentAt && email.receivedAt &&
+                           Math.abs(new Date(email.sentAt).getTime() - new Date(email.receivedAt).getTime()) > 60000 && (
+                            <div className="flex items-start gap-2">
+                              <Clock className="w-3.5 h-3.5 text-muted-foreground mt-0.5" />
+                              <div className="flex-1">
+                                <span className="font-medium text-muted-foreground">Delivery time:</span>
+                                <div className="text-foreground">
+                                  {(() => {
+                                    const diff = Math.abs(new Date(email.receivedAt).getTime() - new Date(email.sentAt).getTime());
+                                    const minutes = Math.floor(diff / 60000);
+                                    const hours = Math.floor(minutes / 60);
+                                    const days = Math.floor(hours / 24);
+                                    if (days > 0) return `${days} day${days > 1 ? 's' : ''} ${hours % 24} hour${hours % 24 !== 1 ? 's' : ''}`;
+                                    if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ${minutes % 60} minute${minutes % 60 !== 1 ? 's' : ''}`;
+                                    return `${minutes} minute${minutes > 1 ? 's' : ''}`;
+                                  })()}
+                                </div>
+                              </div>
+                            </div>
+                          )}
+
+                          {/* Part of conversation */}
+                          {email.references && email.references.length > 0 && (
+                            <div className="flex items-start gap-2">
+                              <List className="w-3.5 h-3.5 text-muted-foreground mt-0.5" />
+                              <div className="flex-1 min-w-0">
+                                <span className="font-medium text-muted-foreground">Part of conversation:</span>
+                                <div className="text-foreground text-xs mt-0.5">
+                                  {email.references.length} previous message{email.references.length > 1 ? 's' : ''} in this thread
+                                </div>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              <button
+                onClick={() => setShowFullHeaders(!showFullHeaders)}
+                className="mt-3 text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
+              >
+                {showFullHeaders ? (
+                  <>
+                    <ChevronUp className="w-3 h-3" />
+                    Hide details
+                  </>
+                ) : (
+                  <>
+                    <ChevronDown className="w-3 h-3" />
+                    Show details
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      {/* Email Content Area */}
+      <div className="flex-1 overflow-auto bg-muted/30">
+        {/* Ultra Minimalist External Content Banner - only show in 'ask' mode */}
+        {hasBlockedContent && !allowExternalContent && externalContentPolicy === 'ask' && (
+          <div className="border-b border-border">
+            <div className="max-w-4xl mx-auto px-6 py-2">
+              <button
+                onClick={() => setAllowExternalContent(true)}
+                className="mx-auto flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <Image className="w-3.5 h-3.5" />
+                Show images
+              </button>
+            </div>
+          </div>
+        )}
+
+        <div className="max-w-4xl mx-auto p-6">
+
+          {/* Inline Attachments */}
+          {email.attachments && email.attachments.length > 0 && (
+            <div className="mb-4">
+              {/* Image attachments as thumbnails */}
+              {email.attachments.filter(a =>
+                a.type?.startsWith('image/') ||
+                ['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(a.name?.split('.').pop()?.toLowerCase() || '')
+              ).length > 0 && (
+                <div className="mb-3">
+                  <div className="flex flex-wrap gap-2">
+                    {email.attachments
+                      .filter(a =>
+                        a.type?.startsWith('image/') ||
+                        ['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(a.name?.split('.').pop()?.toLowerCase() || '')
+                      )
+                      .map((attachment, i) => (
+                        <div
+                          key={i}
+                          className="relative group cursor-pointer"
+                          title={attachment.name}
+                          onClick={() => {
+                            if (attachment.blobId && onDownloadAttachment) {
+                              onDownloadAttachment(attachment.blobId, attachment.name || 'download', attachment.type);
+                            }
+                          }}
+                        >
+                          <div className="w-32 h-32 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-colors">
+                            <div className="w-full h-full flex items-center justify-center">
+                              <FileImage className="w-12 h-12 text-gray-400 dark:text-gray-500" />
+                            </div>
+                          </div>
+                          <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-40 transition-all rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100">
+                            <Download className="w-6 h-6 text-white" />
+                          </div>
+                          <div className="mt-1 text-xs text-gray-600 dark:text-gray-400 truncate max-w-[128px]">
+                            {attachment.name}
+                          </div>
+                        </div>
+                      ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Non-image attachments in a compact list */}
+              {email.attachments.filter(a =>
+                !a.type?.startsWith('image/') &&
+                !['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(a.name?.split('.').pop()?.toLowerCase() || '')
+              ).length > 0 && (
+                <div className="flex items-center gap-2 flex-wrap">
+                  <Paperclip className="w-4 h-4 text-muted-foreground" />
+                  {email.attachments
+                    .filter(a =>
+                      !a.type?.startsWith('image/') &&
+                      !['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(a.name?.split('.').pop()?.toLowerCase() || '')
+                    )
+                    .map((attachment, i) => {
+                      const FileIcon = getFileIcon(attachment.name, attachment.type);
+                      return (
+                        <button
+                          key={i}
+                          className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-muted hover:bg-accent rounded-md transition-colors group"
+                          title={`Download ${attachment.name} (${formatFileSize(attachment.size)})`}
+                          onClick={() => {
+                            if (attachment.blobId && onDownloadAttachment) {
+                              onDownloadAttachment(attachment.blobId, attachment.name || 'download', attachment.type);
+                            }
+                          }}
+                        >
+                          <FileIcon className="w-3.5 h-3.5 text-muted-foreground" />
+                          <span className="text-sm text-foreground">
+                            {attachment.name || "Unnamed"}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            ({formatFileSize(attachment.size)})
+                          </span>
+                        </button>
+                      );
+                    })}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Email Body */}
+          <div className="bg-background rounded-lg shadow-sm border border-border overflow-hidden">
+            <div className="email-content-wrapper p-6">
+              {emailContent.isHtml ? (
+                <div
+                  className="email-content prose dark:prose-invert max-w-none"
+                  dangerouslySetInnerHTML={{ __html: emailContent.html }}
+                  style={{
+                    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                    fontSize: '14px',
+                    lineHeight: '1.6',
+                  }}
+                />
+              ) : (
+                <div
+                  className="email-content-text text-foreground"
+                  dangerouslySetInnerHTML={{ __html: emailContent.html }}
+                  style={{
+                    fontFamily: 'ui-monospace, "SF Mono", Consolas, monospace',
+                    fontSize: '14px',
+                    lineHeight: '1.6',
+                    wordBreak: 'break-word',
+                  }}
+                />
+              )}
+            </div>
+          </div>
+
+          {/* Quick Reply Section */}
+          <div className={cn(
+            "mt-6 bg-background rounded-lg shadow-sm border transition-all",
+            isQuickReplyFocused || quickReplyText ? "border-primary" : "border-border"
+          )}>
+            <div className="p-4">
+              <div className="flex items-start gap-3">
+                <Avatar
+                  name={currentUserName || "You"}
+                  email={currentUserEmail || ""}
+                  size="sm"
+                />
+                <div className="flex-1 space-y-3">
+                  <textarea
+                    value={quickReplyText}
+                    onChange={(e) => setQuickReplyText(e.target.value)}
+                    onFocus={() => setIsQuickReplyFocused(true)}
+                    placeholder="Write a quick reply..."
+                    className={cn(
+                      "w-full px-3 py-2 text-sm border border-border bg-background text-foreground rounded-lg",
+                      "hover:border-accent focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary transition-all",
+                      "resize-none"
+                    )}
+                    rows={isQuickReplyFocused || quickReplyText ? 3 : 1}
+                    disabled={isSendingQuickReply}
+                  />
+
+                  {/* Action buttons - show when focused or has text */}
+                  {(isQuickReplyFocused || quickReplyText) && (
+                    <div className="flex items-center justify-between gap-2 animate-in fade-in slide-in-from-top-1 duration-200">
+                      <div className="text-xs text-muted-foreground">
+                        {quickReplyText.length > 0 && `${quickReplyText.length} characters`}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => {
+                            setQuickReplyText("");
+                            setIsQuickReplyFocused(false);
+                          }}
+                          disabled={isSendingQuickReply}
+                        >
+                          Cancel
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={onReply}
+                          disabled={isSendingQuickReply}
+                          className="text-muted-foreground"
+                        >
+                          <MoreVertical className="w-4 h-4 mr-1" />
+                          More options
+                        </Button>
+                        <Button
+                          size="sm"
+                          onClick={async () => {
+                            if (!quickReplyText.trim() || !onQuickReply) return;
+
+                            setIsSendingQuickReply(true);
+                            try {
+                              await onQuickReply(quickReplyText);
+                              setQuickReplyText("");
+                              setIsQuickReplyFocused(false);
+                            } catch (error) {
+                              console.error("Failed to send quick reply:", error);
+                            } finally {
+                              setIsSendingQuickReply(false);
+                            }
+                          }}
+                          disabled={!quickReplyText.trim() || isSendingQuickReply}
+                        >
+                          {isSendingQuickReply ? (
+                            <>
+                              <Loader2 className="w-4 h-4 mr-1 animate-spin" />
+                              Sending...
+                            </>
+                          ) : (
+                            <>
+                              <Reply className="w-4 h-4 mr-1" />
+                              Send
+                            </>
+                          )}
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Email Source Modal */}
+      {showSourceModal && email && (
+        <div
+          className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+          onClick={() => setShowSourceModal(false)}
+        >
+          <div
+            className="bg-background rounded-lg shadow-2xl border border-border w-full max-w-4xl max-h-[90vh] flex flex-col"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Modal Header */}
+            <div className="flex items-center justify-between p-4 border-b border-border">
+              <div className="flex items-center gap-2">
+                <Code className="w-5 h-5 text-primary" />
+                <h2 className="text-lg font-semibold text-foreground">{t('email_source')}</h2>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={copySourceToClipboard}
+                  className="flex items-center gap-1.5"
+                >
+                  <Copy className="w-4 h-4" />
+                  {t('copy_source')}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setShowSourceModal(false)}
+                  className="h-8 w-8"
+                >
+                  <X className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
+
+            {/* Modal Content */}
+            <div className="flex-1 overflow-auto p-4 bg-muted/30">
+              <pre className="text-xs font-mono text-foreground whitespace-pre-wrap break-words bg-background border border-border rounded-lg p-4">
+                {generateEmailSource(email)}
+              </pre>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/email/thread-conversation-view.tsx b/components/email/thread-conversation-view.tsx
new file mode 100644
index 00000000..a62cc632
--- /dev/null
+++ b/components/email/thread-conversation-view.tsx
@@ -0,0 +1,489 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import DOMPurify from "dompurify";
+import { Email, ThreadGroup } from "@/lib/jmap/types";
+import { Avatar } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { formatDate, formatFileSize, cn } from "@/lib/utils";
+import {
+  ArrowLeft,
+  ChevronDown,
+  ChevronUp,
+  Reply,
+  ReplyAll,
+  Forward,
+  Paperclip,
+  Star,
+  Download,
+  Loader2,
+  FileText,
+  FileImage,
+  FileVideo,
+  FileAudio,
+  FileArchive,
+  File,
+} from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useSettingsStore } from "@/stores/settings-store";
+
+interface ThreadConversationViewProps {
+  thread: ThreadGroup;
+  emails: Email[];
+  isLoading?: boolean;
+  onBack: () => void;
+  onReply?: (email: Email) => void;
+  onReplyAll?: (email: Email) => void;
+  onForward?: (email: Email) => void;
+  onDownloadAttachment?: (blobId: string, name: string, type?: string) => void;
+  onMarkAsRead?: (emailId: string, read: boolean) => void;
+}
+
+// Helper function to get file icon based on mime type or extension
+const getFileIcon = (name?: string, type?: string) => {
+  const ext = name?.split('.').pop()?.toLowerCase();
+  const mimeType = type?.toLowerCase();
+
+  if (mimeType?.startsWith('image/') || ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(ext || '')) {
+    return FileImage;
+  }
+  if (mimeType?.startsWith('video/') || ['mp4', 'avi', 'mov', 'wmv'].includes(ext || '')) {
+    return FileVideo;
+  }
+  if (mimeType?.startsWith('audio/') || ['mp3', 'wav', 'ogg', 'flac'].includes(ext || '')) {
+    return FileAudio;
+  }
+  if (mimeType === 'application/pdf' || ext === 'pdf') {
+    return FileText;
+  }
+  if (['zip', 'rar', '7z', 'tar', 'gz'].includes(ext || '')) {
+    return FileArchive;
+  }
+  return File;
+};
+
+export function ThreadConversationView({
+  thread,
+  emails,
+  isLoading = false,
+  onBack,
+  onReply,
+  onReplyAll,
+  onForward,
+  onDownloadAttachment,
+  onMarkAsRead,
+}: ThreadConversationViewProps) {
+  const t = useTranslations();
+  const externalContentPolicy = useSettingsStore((state) => state.externalContentPolicy);
+
+  // Track which emails are expanded (most recent by default)
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [allowExternalContent, setAllowExternalContent] = useState<Set<string>>(new Set());
+
+  // Auto-expand most recent email AND all unread emails when thread opens
+  useEffect(() => {
+    if (emails.length > 0) {
+      const idsToExpand = new Set<string>();
+
+      // Always expand most recent
+      idsToExpand.add(emails[0].id);
+
+      // Also expand all unread emails
+      emails.forEach(email => {
+        if (!email.keywords?.$seen) {
+          idsToExpand.add(email.id);
+        }
+      });
+
+      setExpandedIds(idsToExpand);
+    }
+  }, [emails]);
+
+  const toggleExpanded = (emailId: string) => {
+    setExpandedIds(prev => {
+      const next = new Set(prev);
+      if (next.has(emailId)) {
+        next.delete(emailId);
+      } else {
+        next.add(emailId);
+      }
+      return next;
+    });
+  };
+
+  const toggleAllowExternal = (emailId: string) => {
+    setAllowExternalContent(prev => {
+      const next = new Set(prev);
+      next.add(emailId);
+      return next;
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center bg-background">
+        <div className="flex flex-col items-center gap-3">
+          <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
+          <p className="text-sm text-muted-foreground">{t("threads.loading")}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 sticky top-0 z-10">
+        <button
+          onClick={onBack}
+          className="p-2 -ml-2 rounded-full hover:bg-muted transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5" />
+        </button>
+        <div className="flex-1 min-w-0">
+          <h1 className="font-semibold text-foreground truncate">
+            {thread.latestEmail.subject || t("email_viewer.no_subject")}
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            {t("threads.messages_other", { count: emails.length })}
+          </p>
+        </div>
+      </div>
+
+      {/* Email Cards */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="p-4 space-y-3">
+          {emails.map((email, index) => (
+            <EmailCard
+              key={email.id}
+              email={email}
+              isExpanded={expandedIds.has(email.id)}
+              isLatest={index === 0}
+              allowExternal={externalContentPolicy === 'allow' || allowExternalContent.has(email.id)}
+              onToggleExpanded={() => toggleExpanded(email.id)}
+              onAllowExternal={() => toggleAllowExternal(email.id)}
+              onReply={onReply ? () => onReply(email) : undefined}
+              onReplyAll={onReplyAll ? () => onReplyAll(email) : undefined}
+              onForward={onForward ? () => onForward(email) : undefined}
+              onDownloadAttachment={onDownloadAttachment}
+              onMarkAsRead={onMarkAsRead}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Individual email card component
+interface EmailCardProps {
+  email: Email;
+  isExpanded: boolean;
+  isLatest: boolean;
+  allowExternal: boolean;
+  onToggleExpanded: () => void;
+  onAllowExternal: () => void;
+  onReply?: () => void;
+  onReplyAll?: () => void;
+  onForward?: () => void;
+  onDownloadAttachment?: (blobId: string, name: string, type?: string) => void;
+  onMarkAsRead?: (emailId: string, read: boolean) => void;
+}
+
+function EmailCard({
+  email,
+  isExpanded,
+  isLatest: _isLatest,
+  allowExternal,
+  onToggleExpanded,
+  onAllowExternal,
+  onReply,
+  onReplyAll,
+  onForward,
+  onDownloadAttachment,
+  onMarkAsRead,
+}: EmailCardProps) {
+  const t = useTranslations();
+  const sender = email.from?.[0];
+  const isUnread = !email.keywords?.$seen;
+  const isStarred = email.keywords?.$flagged;
+  const [hasBlockedContent, setHasBlockedContent] = useState(false);
+
+  // Mark as read when email is expanded
+  useEffect(() => {
+    // Only trigger if expanded, email is unread, and we have a handler
+    if (!isExpanded || !onMarkAsRead || email.keywords?.$seen) {
+      return;
+    }
+
+    const markAsReadDelay = useSettingsStore.getState().markAsReadDelay;
+
+    // Never auto-mark
+    if (markAsReadDelay === -1) {
+      return;
+    }
+
+    // Instant mark
+    if (markAsReadDelay === 0) {
+      onMarkAsRead(email.id, true);
+      return;
+    }
+
+    // Delayed mark
+    const timeout = setTimeout(() => {
+      onMarkAsRead(email.id, true);
+    }, markAsReadDelay);
+
+    return () => clearTimeout(timeout);
+  }, [isExpanded, email.id, email.keywords?.$seen, onMarkAsRead]);
+
+  // Sanitize and prepare email HTML content
+  const emailContent = useMemo(() => {
+    if (!email) return { html: "", isHtml: false };
+
+    if (email.bodyValues) {
+      let useHtmlVersion = false;
+      let htmlContent = '';
+
+      if (email.htmlBody?.[0]?.partId && email.bodyValues[email.htmlBody[0].partId]) {
+        htmlContent = email.bodyValues[email.htmlBody[0].partId].value;
+
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = htmlContent;
+        const hasRichFormatting = tempDiv.querySelector('table, img, style, b, strong, i, em, u, font, div[style], span[style], p[style], h1, h2, h3, h4, h5, h6, ul, ol, blockquote');
+        const hasMultipleParagraphs = tempDiv.querySelectorAll('p').length > 2;
+        const hasBrTags = tempDiv.querySelectorAll('br').length > 0;
+
+        useHtmlVersion = !!(hasRichFormatting || hasMultipleParagraphs || hasBrTags);
+      }
+
+      if (useHtmlVersion && htmlContent) {
+        let blockedExternalContent = false;
+
+        const sanitizeConfig = {
+          ADD_TAGS: ['style'],
+          ADD_ATTR: ['target', 'style', 'class', 'width', 'height', 'align', 'valign', 'bgcolor', 'color'],
+          FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'button', 'meta', 'link', 'base'],
+          FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'onchange', 'onsubmit'],
+        };
+
+        if (!allowExternal) {
+          DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+            if (node.tagName === 'IMG') {
+              const src = node.getAttribute('src');
+              if (src && (src.startsWith('http://') || src.startsWith('https://') || src.startsWith('//'))) {
+                node.setAttribute('data-blocked-src', src);
+                node.removeAttribute('src');
+                node.setAttribute('alt', '[Image blocked]');
+                blockedExternalContent = true;
+              }
+            }
+            if (node.hasAttribute('style')) {
+              const style = node.getAttribute('style');
+              if (style && /url\s*\(/i.test(style)) {
+                const cleanStyle = style.replace(/url\s*\([^)]*\)/gi, 'none');
+                node.setAttribute('style', cleanStyle);
+                blockedExternalContent = true;
+              }
+            }
+          });
+        }
+
+        const sanitized = DOMPurify.sanitize(htmlContent, sanitizeConfig);
+        DOMPurify.removeHook('afterSanitizeAttributes');
+
+        if (blockedExternalContent) {
+          setHasBlockedContent(true);
+        }
+
+        return { html: sanitized, isHtml: true };
+      }
+
+      // Plain text fallback
+      if (email.textBody?.[0]?.partId && email.bodyValues[email.textBody[0].partId]) {
+        const text = email.bodyValues[email.textBody[0].partId].value;
+        const htmlEscaped = text
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/\n/g, '<br>')
+          .replace(/(https?:\/\/[^\s<]+)/g, '<a href="$1" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">$1</a>');
+        return { html: htmlEscaped, isHtml: false };
+      }
+    }
+
+    // Fallback to preview
+    if (email.preview) {
+      return { html: email.preview.replace(/\n/g, '<br>'), isHtml: false };
+    }
+
+    return { html: "", isHtml: false };
+  }, [email, allowExternal]);
+
+  return (
+    <div className={cn(
+      "rounded-lg border border-border overflow-hidden transition-all duration-200",
+      isExpanded ? "bg-background shadow-sm" : "bg-muted/30",
+      isUnread && !isExpanded && "border-l-2 border-l-primary"
+    )}>
+      {/* Card Header - Always visible */}
+      <button
+        onClick={onToggleExpanded}
+        className={cn(
+          "w-full flex items-start gap-3 p-4 text-left transition-colors",
+          !isExpanded && "hover:bg-muted/50"
+        )}
+      >
+        <Avatar
+          name={sender?.name}
+          email={sender?.email}
+          size="md"
+          className="flex-shrink-0"
+        />
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-0.5">
+            <span className={cn(
+              "font-medium truncate",
+              isUnread ? "text-foreground" : "text-muted-foreground"
+            )}>
+              {sender?.name || sender?.email || "Unknown"}
+            </span>
+            {isStarred && (
+              <Star className="w-4 h-4 fill-amber-400 text-amber-400 flex-shrink-0" />
+            )}
+            {email.hasAttachment && (
+              <Paperclip className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+            )}
+          </div>
+          <div className="text-sm text-muted-foreground">
+            {formatDate(email.receivedAt)}
+          </div>
+          {!isExpanded && (
+            <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+              {email.preview || "No preview available"}
+            </p>
+          )}
+        </div>
+        <div className="flex-shrink-0 p-1">
+          {isExpanded ? (
+            <ChevronUp className="w-5 h-5 text-muted-foreground" />
+          ) : (
+            <ChevronDown className="w-5 h-5 text-muted-foreground" />
+          )}
+        </div>
+      </button>
+
+      {/* Expanded Content */}
+      {isExpanded && (
+        <div className="border-t border-border animate-in slide-in-from-top-2 duration-200">
+          {/* External content warning */}
+          {hasBlockedContent && !allowExternal && (
+            <div className="px-4 py-2 bg-muted/50 flex items-center justify-between text-sm">
+              <span className="text-muted-foreground">
+                {t("email_viewer.external_content_warning")}
+              </span>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onAllowExternal();
+                }}
+              >
+                {t("email_viewer.load_external_content")}
+              </Button>
+            </div>
+          )}
+
+          {/* Email Body */}
+          <div className="px-4 py-4">
+            <div
+              className={cn(
+                "prose prose-sm max-w-none dark:prose-invert",
+                "prose-p:my-2 prose-headings:my-3",
+                "prose-a:text-primary prose-a:no-underline hover:prose-a:underline",
+                "[&_table]:border-collapse [&_td]:p-2 [&_th]:p-2",
+                "[&_img]:max-w-full [&_img]:h-auto"
+              )}
+              dangerouslySetInnerHTML={{ __html: emailContent.html }}
+            />
+          </div>
+
+          {/* Attachments */}
+          {email.attachments && email.attachments.length > 0 && (
+            <div className="px-4 pb-4">
+              <div className="flex flex-wrap gap-2">
+                {email.attachments.map((attachment, idx) => {
+                  const Icon = getFileIcon(attachment.name, attachment.type);
+                  return (
+                    <button
+                      key={idx}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDownloadAttachment?.(attachment.blobId, attachment.name || 'attachment', attachment.type);
+                      }}
+                      className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted hover:bg-muted/80 transition-colors text-sm"
+                    >
+                      <Icon className="w-4 h-4 text-muted-foreground" />
+                      <span className="truncate max-w-[150px]">{attachment.name || 'Attachment'}</span>
+                      <span className="text-muted-foreground text-xs">
+                        {formatFileSize(attachment.size)}
+                      </span>
+                      <Download className="w-4 h-4 text-muted-foreground" />
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Action Buttons */}
+          <div className="px-4 pb-4 flex gap-2">
+            {onReply && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onReply();
+                }}
+                className="flex-1"
+              >
+                <Reply className="w-4 h-4 mr-2" />
+                {t("email_viewer.reply")}
+              </Button>
+            )}
+            {onReplyAll && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onReplyAll();
+                }}
+                className="flex-1"
+              >
+                <ReplyAll className="w-4 h-4 mr-2" />
+                {t("email_viewer.reply_all")}
+              </Button>
+            )}
+            {onForward && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onForward();
+                }}
+                className="flex-1"
+              >
+                <Forward className="w-4 h-4 mr-2" />
+                {t("email_viewer.forward")}
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/email/thread-email-item.tsx b/components/email/thread-email-item.tsx
new file mode 100644
index 00000000..ffe8b343
--- /dev/null
+++ b/components/email/thread-email-item.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { formatDate } from "@/lib/utils";
+import { Email } from "@/lib/jmap/types";
+import { cn } from "@/lib/utils";
+import { Avatar } from "@/components/ui/avatar";
+import { Paperclip, Star, Circle } from "lucide-react";
+
+interface ThreadEmailItemProps {
+  email: Email;
+  selected?: boolean;
+  isLast?: boolean;
+  onClick?: () => void;
+  onContextMenu?: (e: React.MouseEvent, email: Email) => void;
+}
+
+export function ThreadEmailItem({
+  email,
+  selected,
+  isLast = false,
+  onClick,
+  onContextMenu,
+}: ThreadEmailItemProps) {
+  const isUnread = !email.keywords?.$seen;
+  const isStarred = email.keywords?.$flagged;
+  const sender = email.from?.[0];
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    onContextMenu?.(e, email);
+  };
+
+  return (
+    <div
+      className={cn(
+        "relative cursor-pointer transition-all duration-150",
+        "pl-12 pr-4 py-2.5", // Indented for thread hierarchy
+        "border-l-2 border-l-transparent",
+        selected
+          ? "bg-accent border-l-primary"
+          : "hover:bg-muted/50",
+        isUnread && !selected && "bg-accent/20",
+        !isLast && "border-b border-border/30"
+      )}
+      onClick={onClick}
+      onContextMenu={handleContextMenu}
+    >
+      <div className="flex items-start gap-3">
+        {/* Unread indicator */}
+        {isUnread && (
+          <div className="absolute left-7 top-1/2 -translate-y-1/2">
+            <Circle className="w-1.5 h-1.5 fill-blue-600 text-blue-600 dark:fill-blue-400 dark:text-blue-400" />
+          </div>
+        )}
+
+        {/* Small Avatar */}
+        <Avatar
+          name={sender?.name}
+          email={sender?.email}
+          size="sm"
+          className="flex-shrink-0"
+        />
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          {/* Single line: Sender, indicators, preview, date */}
+          <div className="flex items-center gap-2">
+            <span className={cn(
+              "truncate text-sm flex-shrink-0 max-w-[150px]",
+              isUnread
+                ? "font-semibold text-foreground"
+                : "font-medium text-muted-foreground"
+            )}>
+              {sender?.name || sender?.email?.split('@')[0] || "Unknown"}
+            </span>
+
+            {/* Indicators */}
+            <div className="flex items-center gap-1 flex-shrink-0">
+              {isStarred && (
+                <Star className="w-3 h-3 fill-amber-400 text-amber-400" />
+              )}
+              {email.hasAttachment && (
+                <Paperclip className="w-3 h-3 text-muted-foreground" />
+              )}
+            </div>
+
+            {/* Preview snippet */}
+            <span className={cn(
+              "text-sm truncate flex-1 min-w-0",
+              isUnread
+                ? "text-muted-foreground"
+                : "text-muted-foreground/70"
+            )}>
+              {email.preview || "No preview"}
+            </span>
+
+            {/* Date */}
+            <span className={cn(
+              "text-xs flex-shrink-0 tabular-nums",
+              isUnread
+                ? "text-foreground font-medium"
+                : "text-muted-foreground"
+            )}>
+              {formatDate(email.receivedAt)}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/email/thread-list-item.tsx b/components/email/thread-list-item.tsx
new file mode 100644
index 00000000..fbdcc622
--- /dev/null
+++ b/components/email/thread-list-item.tsx
@@ -0,0 +1,379 @@
+"use client";
+
+import { formatDate } from "@/lib/utils";
+import { Email, ThreadGroup } from "@/lib/jmap/types";
+import { cn } from "@/lib/utils";
+import { Avatar } from "@/components/ui/avatar";
+import { Paperclip, Star, Circle, ChevronRight, ChevronDown, Loader2 } from "lucide-react";
+import { useSettingsStore } from "@/stores/settings-store";
+import { useUIStore } from "@/stores/ui-store";
+import { getThreadColorTag } from "@/lib/thread-utils";
+import { ThreadEmailItem } from "./thread-email-item";
+
+interface ThreadListItemProps {
+  thread: ThreadGroup;
+  isExpanded: boolean;
+  selectedEmailId?: string;
+  isLoading?: boolean;
+  expandedEmails?: Email[]; // Full thread emails when expanded
+  onToggleExpand: () => void;
+  onEmailSelect: (email: Email) => void;
+  onContextMenu?: (e: React.MouseEvent, email: Email) => void;
+  onOpenConversation?: (thread: ThreadGroup) => void; // Mobile: open full conversation view
+}
+
+// Color tag mapping
+const colorTags = {
+  red: "bg-red-50 dark:bg-red-950/30",
+  orange: "bg-orange-50 dark:bg-orange-950/30",
+  yellow: "bg-yellow-50 dark:bg-yellow-950/30",
+  green: "bg-green-50 dark:bg-green-950/30",
+  blue: "bg-blue-50 dark:bg-blue-950/30",
+  purple: "bg-purple-50 dark:bg-purple-950/30",
+  pink: "bg-pink-50 dark:bg-pink-950/30",
+} as const;
+
+export function ThreadListItem({
+  thread,
+  isExpanded,
+  selectedEmailId,
+  isLoading = false,
+  expandedEmails,
+  onToggleExpand,
+  onEmailSelect,
+  onContextMenu,
+  onOpenConversation,
+}: ThreadListItemProps) {
+  const showPreview = useSettingsStore((state) => state.showPreview);
+  const isMobile = useUIStore((state) => state.isMobile);
+  const { latestEmail, participantNames, hasUnread, hasStarred, hasAttachment, emailCount } = thread;
+
+  // Get color tag from thread
+  const threadColor = getThreadColorTag(thread.emails);
+  const colorTag = threadColor ? colorTags[threadColor as keyof typeof colorTags] : null;
+
+  // Check if latest email is selected
+  const isSelected = selectedEmailId === latestEmail.id ||
+    thread.emails.some(e => e.id === selectedEmailId);
+
+  // Single email thread - render as regular email, no expand
+  if (emailCount === 1) {
+    return (
+      <SingleEmailItem
+        email={latestEmail}
+        selected={selectedEmailId === latestEmail.id}
+        onClick={() => onEmailSelect(latestEmail)}
+        onContextMenu={onContextMenu}
+        showPreview={showPreview}
+        colorTag={colorTag}
+      />
+    );
+  }
+
+  // Get emails to display when expanded
+  const emailsToShow = expandedEmails || thread.emails;
+
+  const handleHeaderClick = (e: React.MouseEvent) => {
+    // Mobile: open conversation view instead of inline expansion
+    if (isMobile && onOpenConversation) {
+      onOpenConversation(thread);
+      return;
+    }
+
+    // Desktop: If clicking directly on the expand icon area, toggle expansion
+    // Otherwise, select the latest email
+    const target = e.target as HTMLElement;
+    if (target.closest('[data-expand-toggle]')) {
+      onToggleExpand();
+    } else {
+      // Clicking on the row selects the latest email but also expands
+      if (!isExpanded) {
+        onToggleExpand();
+      }
+      onEmailSelect(latestEmail);
+    }
+  };
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    onContextMenu?.(e, latestEmail);
+  };
+
+  return (
+    <div className="border-b border-border">
+      {/* Thread Header (collapsed view) */}
+      <div
+        className={cn(
+          "relative group cursor-pointer transition-all duration-200",
+          colorTag ? colorTag : (
+            isSelected
+              ? "bg-accent"
+              : "bg-background"
+          ),
+          isSelected && !colorTag && "shadow-sm",
+          !colorTag && !isSelected && "hover:bg-muted hover:shadow-sm",
+          colorTag && "hover:brightness-95 dark:hover:brightness-110",
+          hasUnread && !colorTag && !isSelected && "bg-accent/30",
+          isExpanded && "border-b border-border/50"
+        )}
+        onClick={handleHeaderClick}
+        onContextMenu={handleContextMenu}
+        style={{ minHeight: 'var(--list-item-height)' }}
+      >
+        <div className="flex items-start gap-3 px-4" style={{
+          paddingTop: 'calc((var(--list-item-height) - 40px) / 2)',
+          paddingBottom: 'calc((var(--list-item-height) - 40px) / 2)'
+        }}>
+          {/* Expand/Collapse Button - Hidden on mobile */}
+          {!isMobile && (
+            <button
+              data-expand-toggle
+              onClick={(e) => {
+                e.stopPropagation();
+                onToggleExpand();
+              }}
+              className={cn(
+                "p-1 rounded mt-2 flex-shrink-0 transition-all duration-200",
+                "hover:bg-muted/50 hover:scale-110",
+                "active:scale-95",
+                "text-muted-foreground hover:text-foreground"
+              )}
+            >
+              {isLoading ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : isExpanded ? (
+                <ChevronDown className="w-4 h-4" />
+              ) : (
+                <ChevronRight className="w-4 h-4" />
+              )}
+            </button>
+          )}
+
+          {/* Unread indicator */}
+          {hasUnread && (
+            <div className="absolute left-1 top-1/2 -translate-y-1/2">
+              <Circle className="w-2 h-2 fill-blue-600 text-blue-600 dark:fill-blue-400 dark:text-blue-400" />
+            </div>
+          )}
+
+          {/* Avatar */}
+          <Avatar
+            name={latestEmail.from?.[0]?.name}
+            email={latestEmail.from?.[0]?.email}
+            size="md"
+            className="flex-shrink-0 shadow-sm"
+          />
+
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            {/* First Line: Participants and Date */}
+            <div className="flex items-center justify-between gap-2 mb-1">
+              <div className="flex items-center gap-2 min-w-0 flex-1">
+                <span className={cn(
+                  "truncate text-sm",
+                  hasUnread
+                    ? "font-bold text-foreground"
+                    : "font-medium text-muted-foreground"
+                )}>
+                  {participantNames.join(", ")}
+                </span>
+                {/* Email count badge */}
+                <span className={cn(
+                  "flex-shrink-0 px-1.5 py-0.5 text-xs rounded-full font-medium",
+                  hasUnread
+                    ? "bg-primary text-primary-foreground"
+                    : "bg-muted text-muted-foreground"
+                )}>
+                  {emailCount}
+                </span>
+                <div className="flex items-center gap-1.5">
+                  {hasStarred && (
+                    <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
+                  )}
+                  {hasAttachment && (
+                    <Paperclip className="w-3.5 h-3.5 text-muted-foreground" />
+                  )}
+                </div>
+              </div>
+              <span className={cn(
+                "text-xs flex-shrink-0 tabular-nums",
+                hasUnread
+                  ? "text-foreground font-semibold"
+                  : "text-muted-foreground"
+              )}>
+                {formatDate(latestEmail.receivedAt)}
+              </span>
+            </div>
+
+            {/* Second Line: Subject */}
+            <div className={cn(
+              "mb-1 line-clamp-1 text-sm",
+              hasUnread
+                ? "font-semibold text-foreground"
+                : "font-normal text-foreground/90"
+            )}>
+              {latestEmail.subject || "(no subject)"}
+            </div>
+
+            {/* Third Line: Preview */}
+            {showPreview && (
+              <p className={cn(
+                "text-sm leading-relaxed line-clamp-2",
+                hasUnread
+                  ? "text-muted-foreground"
+                  : "text-muted-foreground/80"
+              )}>
+                {latestEmail.preview || "No preview available"}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Expanded Thread Emails - Desktop only */}
+      {isExpanded && !isMobile && (
+        <div className="bg-muted/20 animate-in slide-in-from-top-2 duration-200">
+          {isLoading ? (
+            <div className="py-4 flex items-center justify-center text-sm text-muted-foreground">
+              <Loader2 className="w-4 h-4 animate-spin mr-2" />
+              Loading conversation...
+            </div>
+          ) : (
+            emailsToShow.map((email, index) => (
+              <ThreadEmailItem
+                key={email.id}
+                email={email}
+                selected={email.id === selectedEmailId}
+                isLast={index === emailsToShow.length - 1}
+                onClick={() => onEmailSelect(email)}
+                onContextMenu={onContextMenu}
+              />
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Single email item (for threads with only 1 email)
+function SingleEmailItem({
+  email,
+  selected,
+  onClick,
+  onContextMenu,
+  showPreview,
+  colorTag,
+}: {
+  email: Email;
+  selected: boolean;
+  onClick: () => void;
+  onContextMenu?: (e: React.MouseEvent, email: Email) => void;
+  showPreview: boolean;
+  colorTag: string | null;
+}) {
+  const isUnread = !email.keywords?.$seen;
+  const isStarred = email.keywords?.$flagged;
+  const sender = email.from?.[0];
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    onContextMenu?.(e, email);
+  };
+
+  return (
+    <div
+      className={cn(
+        "relative group cursor-pointer transition-all duration-200 border-b border-border",
+        colorTag ? colorTag : (
+          selected
+            ? "bg-accent"
+            : "bg-background"
+        ),
+        selected && !colorTag && "shadow-sm",
+        !colorTag && !selected && "hover:bg-muted hover:shadow-sm",
+        colorTag && "hover:brightness-95 dark:hover:brightness-110",
+        isUnread && !colorTag && "bg-accent/30"
+      )}
+      onClick={onClick}
+      onContextMenu={handleContextMenu}
+      style={{ minHeight: 'var(--list-item-height)' }}
+    >
+      <div className="flex items-start gap-3 px-4" style={{
+        paddingTop: 'calc((var(--list-item-height) - 40px) / 2)',
+        paddingBottom: 'calc((var(--list-item-height) - 40px) / 2)'
+      }}>
+        {/* Spacer for alignment with thread items */}
+        <div className="w-6 flex-shrink-0" />
+
+        {/* Unread indicator */}
+        {isUnread && (
+          <div className="absolute left-1 top-1/2 -translate-y-1/2">
+            <Circle className="w-2 h-2 fill-blue-600 text-blue-600 dark:fill-blue-400 dark:text-blue-400" />
+          </div>
+        )}
+
+        {/* Avatar */}
+        <Avatar
+          name={sender?.name}
+          email={sender?.email}
+          size="md"
+          className="flex-shrink-0 shadow-sm"
+        />
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          {/* First Line: Sender and Date */}
+          <div className="flex items-center justify-between gap-2 mb-1">
+            <div className="flex items-center gap-2 min-w-0 flex-1">
+              <span className={cn(
+                "truncate text-sm",
+                isUnread
+                  ? "font-bold text-foreground"
+                  : "font-medium text-muted-foreground"
+              )}>
+                {sender?.name || sender?.email || "Unknown"}
+              </span>
+              <div className="flex items-center gap-1.5">
+                {isStarred && (
+                  <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
+                )}
+                {email.hasAttachment && (
+                  <Paperclip className="w-3.5 h-3.5 text-muted-foreground" />
+                )}
+              </div>
+            </div>
+            <span className={cn(
+              "text-xs flex-shrink-0 tabular-nums",
+              isUnread
+                ? "text-foreground font-semibold"
+                : "text-muted-foreground"
+            )}>
+              {formatDate(email.receivedAt)}
+            </span>
+          </div>
+
+          {/* Second Line: Subject */}
+          <div className={cn(
+            "mb-1 line-clamp-1 text-sm",
+            isUnread
+              ? "font-semibold text-foreground"
+              : "font-normal text-foreground/90"
+          )}>
+            {email.subject || "(no subject)"}
+          </div>
+
+          {/* Third Line: Preview */}
+          {showPreview && (
+            <p className={cn(
+              "text-sm leading-relaxed line-clamp-2",
+              isUnread
+                ? "text-muted-foreground"
+                : "text-muted-foreground/80"
+            )}>
+              {email.preview || "No preview available"}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/error/error-boundary.tsx b/components/error/error-boundary.tsx
new file mode 100644
index 00000000..cd088d3b
--- /dev/null
+++ b/components/error/error-boundary.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import React, { Component, ReactNode } from "react";
+import { useTranslations } from "next-intl";
+import { debug } from "@/lib/debug";
+
+export interface FallbackProps {
+  error: Error;
+  resetError: () => void;
+  t: (key: string) => string;
+}
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback: (props: FallbackProps) => ReactNode;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+  onReset?: () => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * Core error boundary class component (React requirement).
+ * Receives translation function as prop from the functional wrapper.
+ */
+class ErrorBoundaryCore extends Component<
+  ErrorBoundaryProps & { t: (key: string) => string },
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { hasError: false, error: null };
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    // Always log errors
+    debug.error("[ErrorBoundary]", error.message, {
+      stack: error.stack,
+      componentStack: errorInfo.componentStack,
+    });
+
+    // Call optional error handler
+    this.props.onError?.(error, errorInfo);
+  }
+
+  resetError = (): void => {
+    this.props.onReset?.();
+    this.setState({ hasError: false, error: null });
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError && this.state.error) {
+      return this.props.fallback({
+        error: this.state.error,
+        resetError: this.resetError,
+        t: this.props.t,
+      });
+    }
+    return this.props.children;
+  }
+}
+
+/**
+ * Functional wrapper that injects translations into the error boundary.
+ * Use this component to wrap any part of your UI that might throw errors.
+ *
+ * @example
+ * <ErrorBoundary fallback={SidebarErrorFallback}>
+ *   <Sidebar />
+ * </ErrorBoundary>
+ */
+export function ErrorBoundary({
+  children,
+  fallback,
+  onError,
+  onReset,
+}: ErrorBoundaryProps) {
+  const t = useTranslations("errors");
+
+  return (
+    <ErrorBoundaryCore
+      fallback={fallback}
+      onError={onError}
+      onReset={onReset}
+      t={t}
+    >
+      {children}
+    </ErrorBoundaryCore>
+  );
+}
diff --git a/components/error/error-fallbacks.tsx b/components/error/error-fallbacks.tsx
new file mode 100644
index 00000000..045fb9b7
--- /dev/null
+++ b/components/error/error-fallbacks.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { AlertCircle, RefreshCw, Inbox, Mail, Settings, FolderOpen } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { FallbackProps } from "./error-boundary";
+
+/**
+ * Full-page error fallback for route-level errors.
+ */
+export function PageErrorFallback({ error: _error, resetError, t }: FallbackProps) {
+  return (
+    <div className="flex h-screen items-center justify-center bg-background">
+      <div className="text-center max-w-md px-4">
+        <div className="w-16 h-16 mx-auto mb-6 rounded-full bg-red-100 dark:bg-red-900/20 flex items-center justify-center">
+          <AlertCircle className="w-8 h-8 text-red-600 dark:text-red-400" />
+        </div>
+        <h2 className="text-xl font-semibold text-foreground mb-2">
+          {t("page_error_title")}
+        </h2>
+        <p className="text-muted-foreground mb-6">
+          {t("page_error_description")}
+        </p>
+        <Button onClick={resetError}>
+          <RefreshCw className="w-4 h-4 mr-2" />
+          {t("try_again")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Sidebar error fallback - matches sidebar width (256px).
+ */
+export function SidebarErrorFallback({ resetError, t }: FallbackProps) {
+  return (
+    <div className="w-64 h-full border-r border-border bg-secondary flex flex-col items-center justify-center p-4">
+      <FolderOpen className="w-10 h-10 text-muted-foreground mb-3" />
+      <p className="text-sm text-muted-foreground text-center mb-4">
+        {t("sidebar_error")}
+      </p>
+      <Button variant="outline" size="sm" onClick={resetError}>
+        <RefreshCw className="w-3 h-3 mr-1" />
+        {t("reload")}
+      </Button>
+    </div>
+  );
+}
+
+/**
+ * Email list error fallback - matches email list panel width (384px).
+ */
+export function EmailListErrorFallback({ resetError, t }: FallbackProps) {
+  return (
+    <div className="w-full h-full bg-background flex flex-col items-center justify-center p-4">
+      <Inbox className="w-12 h-12 text-muted-foreground mb-3" />
+      <p className="text-sm text-muted-foreground text-center mb-4">
+        {t("email_list_error")}
+      </p>
+      <Button variant="outline" size="sm" onClick={resetError}>
+        <RefreshCw className="w-4 h-4 mr-2" />
+        {t("reload_emails")}
+      </Button>
+    </div>
+  );
+}
+
+/**
+ * Email viewer error fallback - fills remaining space (flex-1).
+ */
+export function EmailViewerErrorFallback({ resetError, t }: FallbackProps) {
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center bg-muted/30 p-8">
+      <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-red-50 dark:bg-red-900/20 flex items-center justify-center">
+        <Mail className="w-8 h-8 text-red-500" />
+      </div>
+      <h3 className="text-lg font-medium text-foreground mb-2">
+        {t("viewer_error_title")}
+      </h3>
+      <p className="text-sm text-muted-foreground text-center mb-6 max-w-md">
+        {t("viewer_error_description")}
+      </p>
+      <Button onClick={resetError}>
+        <RefreshCw className="w-4 h-4 mr-2" />
+        {t("try_again")}
+      </Button>
+    </div>
+  );
+}
+
+/**
+ * Email composer modal error fallback.
+ */
+export function ComposerErrorFallback({ resetError, t }: FallbackProps) {
+  return (
+    <div className="flex flex-col h-full bg-background border rounded-lg items-center justify-center p-8">
+      <AlertCircle className="w-10 h-10 text-amber-500 mb-3" />
+      <p className="text-sm text-muted-foreground text-center mb-4">
+        {t("composer_error")}
+      </p>
+      <Button variant="outline" size="sm" onClick={resetError}>
+        {t("retry")}
+      </Button>
+    </div>
+  );
+}
+
+/**
+ * Settings page error fallback.
+ */
+export function SettingsErrorFallback({ resetError, t }: FallbackProps) {
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center p-8">
+      <Settings className="w-12 h-12 text-muted-foreground mb-4" />
+      <h3 className="text-lg font-medium text-foreground mb-2">
+        {t("settings_error_title")}
+      </h3>
+      <p className="text-sm text-muted-foreground text-center mb-6">
+        {t("settings_error_description")}
+      </p>
+      <Button onClick={resetError}>
+        <RefreshCw className="w-4 h-4 mr-2" />
+        {t("reload_settings")}
+      </Button>
+    </div>
+  );
+}
diff --git a/components/error/index.ts b/components/error/index.ts
new file mode 100644
index 00000000..2b70083b
--- /dev/null
+++ b/components/error/index.ts
@@ -0,0 +1,10 @@
+export { ErrorBoundary } from "./error-boundary";
+export type { FallbackProps } from "./error-boundary";
+export {
+  PageErrorFallback,
+  SidebarErrorFallback,
+  EmailListErrorFallback,
+  EmailViewerErrorFallback,
+  ComposerErrorFallback,
+  SettingsErrorFallback,
+} from "./error-fallbacks";
diff --git a/components/keyboard-shortcuts-modal.tsx b/components/keyboard-shortcuts-modal.tsx
new file mode 100644
index 00000000..fabd287d
--- /dev/null
+++ b/components/keyboard-shortcuts-modal.tsx
@@ -0,0 +1,185 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useTranslations } from "next-intl";
+import { X, Keyboard } from "lucide-react";
+import { KEYBOARD_SHORTCUTS } from "@/hooks/use-keyboard-shortcuts";
+import { cn } from "@/lib/utils";
+
+interface KeyboardShortcutsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function KeyboardShortcutsModal({ isOpen, onClose }: KeyboardShortcutsModalProps) {
+  const t = useTranslations();
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  // Close on any key press
+  useEffect(() => {
+    const handleKeyDown = () => {
+      onClose();
+    };
+
+    if (isOpen) {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [isOpen, onClose]);
+
+  // Close on click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 animate-in fade-in duration-150">
+      <div
+        ref={modalRef}
+        className={cn(
+          "bg-background border border-border rounded-lg shadow-xl",
+          "w-full max-w-2xl max-h-[80vh] overflow-hidden",
+          "animate-in zoom-in-95 duration-200"
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+          <div className="flex items-center gap-3">
+            <Keyboard className="w-5 h-5 text-muted-foreground" />
+            <h2 className="text-lg font-semibold text-foreground">
+              {t("shortcuts.title")}
+            </h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 rounded-md hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 overflow-y-auto max-h-[calc(80vh-80px)]">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {/* Navigation Section */}
+            <section>
+              <h3 className="text-sm font-semibold text-foreground mb-3 uppercase tracking-wider">
+                {t("shortcuts.sections.navigation")}
+              </h3>
+              <div className="space-y-2">
+                {KEYBOARD_SHORTCUTS.navigation.map((shortcut) => (
+                  <ShortcutRow
+                    key={shortcut.key}
+                    shortcutKey={shortcut.key}
+                    description={t(shortcut.description)}
+                  />
+                ))}
+              </div>
+            </section>
+
+            {/* Actions Section */}
+            <section>
+              <h3 className="text-sm font-semibold text-foreground mb-3 uppercase tracking-wider">
+                {t("shortcuts.sections.actions")}
+              </h3>
+              <div className="space-y-2">
+                {KEYBOARD_SHORTCUTS.actions.map((shortcut) => (
+                  <ShortcutRow
+                    key={shortcut.key}
+                    shortcutKey={shortcut.key}
+                    description={t(shortcut.description)}
+                  />
+                ))}
+              </div>
+            </section>
+
+            {/* Global Section */}
+            <section className="md:col-span-2">
+              <h3 className="text-sm font-semibold text-foreground mb-3 uppercase tracking-wider">
+                {t("shortcuts.sections.global")}
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                {KEYBOARD_SHORTCUTS.global.map((shortcut) => (
+                  <ShortcutRow
+                    key={shortcut.key}
+                    shortcutKey={shortcut.key}
+                    description={t(shortcut.description)}
+                  />
+                ))}
+              </div>
+            </section>
+
+            {/* Threads Section */}
+            <section className="md:col-span-2">
+              <h3 className="text-sm font-semibold text-foreground mb-3 uppercase tracking-wider">
+                {t("shortcuts.sections.threads")}
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                {KEYBOARD_SHORTCUTS.threads.map((shortcut) => (
+                  <ShortcutRow
+                    key={shortcut.key}
+                    shortcutKey={shortcut.key}
+                    description={t(shortcut.description)}
+                  />
+                ))}
+              </div>
+            </section>
+          </div>
+
+          {/* Footer tip */}
+          <div className="mt-6 pt-4 border-t border-border">
+            <p className="text-sm text-muted-foreground text-center">
+              {t("shortcuts.tip")}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ShortcutRow({
+  shortcutKey,
+  description,
+}: {
+  shortcutKey: string;
+  description: string;
+}) {
+  // Split keys by " / " to render multiple key badges
+  const keys = shortcutKey.split(" / ");
+
+  return (
+    <div className="flex items-center justify-between py-1.5">
+      <span className="text-sm text-muted-foreground">{description}</span>
+      <div className="flex items-center gap-1.5 ml-4">
+        {keys.map((key, index) => (
+          <span key={index}>
+            {index > 0 && <span className="text-muted-foreground/50 mx-1 text-xs">or</span>}
+            <kbd
+              className={cn(
+                "inline-flex items-center justify-center",
+                "px-2 py-0.5 text-xs font-mono font-medium",
+                "bg-muted border border-border rounded",
+                "text-foreground shadow-sm",
+                "min-w-[24px]"
+              )}
+            >
+              {key}
+            </kbd>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/layout/mobile-header.tsx b/components/layout/mobile-header.tsx
new file mode 100644
index 00000000..e0d72e81
--- /dev/null
+++ b/components/layout/mobile-header.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import { Menu, ArrowLeft, Plus, Search, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useUIStore } from "@/stores/ui-store";
+import { cn } from "@/lib/utils";
+
+interface MobileHeaderProps {
+  title: string;
+  showBack?: boolean;
+  onBack?: () => void;
+  onCompose?: () => void;
+  onSearch?: () => void;
+  className?: string;
+}
+
+export function MobileHeader({
+  title,
+  showBack = false,
+  onBack,
+  onCompose,
+  onSearch,
+  className,
+}: MobileHeaderProps) {
+  const { toggleSidebar, goBack, sidebarOpen } = useUIStore();
+
+  const handleLeftAction = () => {
+    if (showBack && onBack) {
+      onBack();
+    } else if (showBack) {
+      goBack();
+    } else {
+      toggleSidebar();
+    }
+  };
+
+  return (
+    <header
+      className={cn(
+        "flex items-center justify-between px-4 h-14 border-b border-border bg-background shrink-0",
+        "md:hidden", // Only visible on mobile
+        className
+      )}
+    >
+      {/* Left action: Menu or Back button */}
+      <div className="flex items-center gap-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleLeftAction}
+          className="h-10 w-10"
+          aria-label={showBack ? "Go back" : "Toggle menu"}
+        >
+          {showBack ? (
+            <ArrowLeft className="h-5 w-5" />
+          ) : sidebarOpen ? (
+            <X className="h-5 w-5" />
+          ) : (
+            <Menu className="h-5 w-5" />
+          )}
+        </Button>
+
+        {/* Title */}
+        <h1 className="font-semibold text-lg truncate">{title}</h1>
+      </div>
+
+      {/* Right actions */}
+      <div className="flex items-center gap-1">
+        {onSearch && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onSearch}
+            className="h-10 w-10"
+            aria-label="Search"
+          >
+            <Search className="h-5 w-5" />
+          </Button>
+        )}
+        {onCompose && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onCompose}
+            className="h-10 w-10 text-primary"
+            aria-label="Compose"
+          >
+            <Plus className="h-5 w-5" />
+          </Button>
+        )}
+      </div>
+    </header>
+  );
+}
+
+/**
+ * Viewer header for mobile - shows when viewing an email
+ */
+interface MobileViewerHeaderProps {
+  subject?: string;
+  onBack: () => void;
+  onDelete?: () => void;
+  onArchive?: () => void;
+  className?: string;
+}
+
+export function MobileViewerHeader({
+  subject,
+  onBack,
+  onDelete: _onDelete,
+  onArchive: _onArchive,
+  className,
+}: MobileViewerHeaderProps) {
+  return (
+    <header
+      className={cn(
+        "flex items-center justify-between px-2 h-14 border-b border-border bg-background shrink-0",
+        "md:hidden",
+        className
+      )}
+    >
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={onBack}
+        className="h-10 w-10"
+        aria-label="Go back"
+      >
+        <ArrowLeft className="h-5 w-5" />
+      </Button>
+
+      <h1 className="flex-1 font-medium text-sm truncate px-2 text-center">
+        {subject || "(No Subject)"}
+      </h1>
+
+      <div className="flex items-center">
+        {/* Placeholder for additional actions - kept minimal */}
+        <div className="w-10" />
+      </div>
+    </header>
+  );
+}
diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
new file mode 100644
index 00000000..fad0aa83
--- /dev/null
+++ b/components/layout/sidebar.tsx
@@ -0,0 +1,470 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+import { useParams, useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Inbox,
+  Send,
+  File,
+  Star,
+  Trash2,
+  Archive,
+  PenSquare,
+  Search,
+  Menu,
+  LogOut,
+  ChevronRight,
+  ChevronDown,
+  Folder,
+  FolderOpen,
+  Settings,
+  ChevronUp,
+  Users,
+  User,
+} from "lucide-react";
+import { cn, buildMailboxTree, MailboxNode, formatFileSize } from "@/lib/utils";
+import { Mailbox } from "@/lib/jmap/types";
+import { useDragDropContext } from "@/contexts/drag-drop-context";
+import { useMailboxDrop } from "@/hooks/use-mailbox-drop";
+
+interface SidebarProps {
+  mailboxes: Mailbox[];
+  selectedMailbox?: string;
+  onMailboxSelect?: (mailboxId: string) => void;
+  onCompose?: () => void;
+  onLogout?: () => void;
+  onSearch?: (query: string) => void;
+  quota?: { used: number; total: number } | null;
+  isPushConnected?: boolean;
+  className?: string;
+}
+
+// Map role to icon
+const getIconForMailbox = (role?: string, name?: string, hasChildren?: boolean, isExpanded?: boolean, isShared?: boolean, id?: string) => {
+  const lowerName = name?.toLowerCase() || "";
+
+  // Shared folders root node
+  if (id === 'shared-folders-root') {
+    return isExpanded ? FolderOpen : Users;
+  }
+
+  // Shared account nodes
+  if (id?.startsWith('shared-account-')) {
+    return isExpanded ? FolderOpen : User;
+  }
+
+  // Shared mailboxes (but not virtual nodes)
+  if (isShared && hasChildren && !id?.startsWith('shared-')) {
+    return isExpanded ? FolderOpen : Folder;
+  }
+
+  if (hasChildren) {
+    // For folders with children, return open/closed folder icon
+    return isExpanded ? FolderOpen : Folder;
+  }
+
+  if (role === "inbox" || lowerName.includes("inbox")) return Inbox;
+  if (role === "sent" || lowerName.includes("sent")) return Send;
+  if (role === "drafts" || lowerName.includes("draft")) return File;
+  if (role === "trash" || lowerName.includes("trash")) return Trash2;
+  if (role === "archive" || lowerName.includes("archive")) return Archive;
+  if (lowerName.includes("star") || lowerName.includes("flag")) return Star;
+  return Inbox; // Default icon
+};
+
+// Component for rendering a single mailbox node with its children
+function MailboxTreeItem({
+  node,
+  selectedMailbox,
+  expandedFolders,
+  onMailboxSelect,
+  onToggleExpand,
+  isCollapsed,
+}: {
+  node: MailboxNode;
+  selectedMailbox: string;
+  expandedFolders: Set<string>;
+  onMailboxSelect?: (id: string) => void;
+  onToggleExpand: (id: string) => void;
+  isCollapsed: boolean;
+}) {
+  const hasChildren = node.children.length > 0;
+  const isExpanded = expandedFolders.has(node.id);
+  const Icon = getIconForMailbox(node.role, node.name, hasChildren, isExpanded, node.isShared, node.id);
+  const indentPixels = node.depth * 16; // 16px per depth level
+  const isVirtualNode = node.id.startsWith('shared-'); // Virtual nodes for shared folder organization
+
+  // Drag and drop functionality
+  const { isDragging: globalDragging } = useDragDropContext();
+  const { dropHandlers, isValidDropTarget, isInvalidDropTarget } = useMailboxDrop({
+    mailbox: node,
+  });
+
+  return (
+    <>
+      <div
+        {...(globalDragging ? dropHandlers : {})}
+        className={cn(
+          "group w-full flex items-center px-2 py-1 text-sm transition-all duration-200",
+          selectedMailbox === node.id
+            ? "bg-accent text-accent-foreground"
+            : "hover:bg-muted text-foreground",
+          node.depth === 0 && "font-medium", // Root folders are slightly bolder
+          // Drop target visual feedback
+          isValidDropTarget && "bg-primary/20 ring-2 ring-primary ring-inset",
+          isInvalidDropTarget && "bg-destructive/10 ring-2 ring-destructive/30 ring-inset opacity-50"
+        )}
+      >
+        {/* Expand/Collapse Chevron */}
+        {hasChildren && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleExpand(node.id);
+            }}
+            className={cn(
+              "p-0.5 rounded mr-1 transition-all duration-200",
+              "hover:bg-muted active:bg-accent"
+            )}
+            style={{ marginLeft: indentPixels }}
+            title={isExpanded ? "Collapse" : "Expand"}
+          >
+            {isExpanded ? (
+              <ChevronDown className="w-3 h-3 text-muted-foreground" />
+            ) : (
+              <ChevronRight className="w-3 h-3 text-muted-foreground" />
+            )}
+          </button>
+        )}
+
+        {/* Mailbox Button */}
+        <button
+          onClick={() => !isVirtualNode && onMailboxSelect?.(node.id)}
+          disabled={isVirtualNode}
+          className={cn(
+            "flex-1 flex items-center text-left py-1 px-1 rounded",
+            "transition-colors duration-150",
+            isVirtualNode && "cursor-default"
+          )}
+          style={{
+            paddingLeft: hasChildren ? '4px' : `${indentPixels + 24}px`
+          }}
+          title={isCollapsed ? node.name : undefined}
+        >
+          <Icon className={cn(
+            "w-4 h-4 mr-2 flex-shrink-0 transition-colors",
+            hasChildren && isExpanded && "text-primary",
+            selectedMailbox === node.id && "text-accent-foreground",
+            !hasChildren && node.depth > 0 && "text-muted-foreground",
+            node.isShared && "text-blue-500" // Shared folders in blue
+          )} />
+          {!isCollapsed && (
+            <>
+              <span className="flex-1 truncate">{node.name}</span>
+              {node.unreadEmails > 0 && (
+                <span className={cn(
+                  "text-xs rounded-full px-2 py-0.5 ml-2 font-medium",
+                  selectedMailbox === node.id
+                    ? "bg-primary text-primary-foreground"
+                    : "bg-foreground text-background"
+                )}>
+                  {node.unreadEmails}
+                </span>
+              )}
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Render children if expanded */}
+      {hasChildren && isExpanded && !isCollapsed && (
+        <div className="relative">
+          {node.children.map((child) => (
+            <MailboxTreeItem
+              key={child.id}
+              node={child}
+              selectedMailbox={selectedMailbox}
+              expandedFolders={expandedFolders}
+              onMailboxSelect={onMailboxSelect}
+              onToggleExpand={onToggleExpand}
+              isCollapsed={isCollapsed}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
+
+export function Sidebar({
+  mailboxes = [],
+  selectedMailbox = "",
+  onMailboxSelect,
+  onCompose,
+  onLogout,
+  onSearch,
+  quota,
+  isPushConnected = false,
+  className,
+}: SidebarProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+  const [showMenu, setShowMenu] = useState(false);
+  const t = useTranslations('sidebar');
+  const params = useParams();
+  const router = useRouter();
+
+  // Load expanded folders from localStorage on mount
+  useEffect(() => {
+    const stored = localStorage.getItem('expandedMailboxes');
+    if (stored) {
+      try {
+        const parsed = JSON.parse(stored);
+        setExpandedFolders(new Set(parsed));
+      } catch (e) {
+        console.error('Failed to parse expanded mailboxes:', e);
+      }
+    } else {
+      // By default, expand root folders that have children
+      const tree = buildMailboxTree(mailboxes);
+      const defaultExpanded = tree
+        .filter(node => node.children.length > 0)
+        .map(node => node.id);
+      setExpandedFolders(new Set(defaultExpanded));
+    }
+  }, [mailboxes]);
+
+  // Save expanded folders to localStorage when changed
+  const handleToggleExpand = (mailboxId: string) => {
+    setExpandedFolders((prev) => {
+      const next = new Set(prev);
+      if (next.has(mailboxId)) {
+        next.delete(mailboxId);
+      } else {
+        next.add(mailboxId);
+      }
+      localStorage.setItem('expandedMailboxes', JSON.stringify(Array.from(next)));
+      return next;
+    });
+  };
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (searchQuery.trim() && onSearch) {
+      onSearch(searchQuery);
+    }
+  };
+
+  // Build hierarchical mailbox tree
+  const mailboxTree = buildMailboxTree(mailboxes);
+
+  // Keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!selectedMailbox || isCollapsed) return;
+
+      // Find the selected node in the tree
+      const findNode = (nodes: MailboxNode[]): MailboxNode | null => {
+        for (const node of nodes) {
+          if (node.id === selectedMailbox) return node;
+          const found = findNode(node.children);
+          if (found) return found;
+        }
+        return null;
+      };
+
+      const selectedNode = findNode(mailboxTree);
+      if (!selectedNode) return;
+
+      // Handle arrow keys for expand/collapse
+      if (e.key === 'ArrowRight' && selectedNode.children.length > 0) {
+        // Expand folder
+        if (!expandedFolders.has(selectedMailbox)) {
+          handleToggleExpand(selectedMailbox);
+        }
+      } else if (e.key === 'ArrowLeft' && selectedNode.children.length > 0) {
+        // Collapse folder
+        if (expandedFolders.has(selectedMailbox)) {
+          handleToggleExpand(selectedMailbox);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [selectedMailbox, isCollapsed, expandedFolders, mailboxTree]);
+
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col h-full border-r transition-all duration-300 overflow-hidden",
+        "bg-secondary border-border",
+        isCollapsed ? "w-16" : "w-64",
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setIsCollapsed(!isCollapsed)}
+        >
+          <Menu className="w-5 h-5" />
+        </Button>
+        {!isCollapsed && (
+          <Button onClick={onCompose} className="ml-2 flex-1">
+            <PenSquare className="w-4 h-4 mr-2" />
+            {t("compose")}
+          </Button>
+        )}
+      </div>
+
+      {/* Search */}
+      {!isCollapsed && (
+        <div className="px-4 py-3">
+          <form onSubmit={handleSearch} className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              type="text"
+              placeholder={t("search_placeholder")}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9"
+              data-search-input
+            />
+          </form>
+        </div>
+      )}
+
+      {/* Mailbox List */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="py-1">
+          {mailboxes.length === 0 ? (
+            <div className="px-4 py-2 text-sm text-muted-foreground">
+              {!isCollapsed && t("loading_mailboxes")}
+            </div>
+          ) : (
+            <>
+              {/* Render hierarchical mailbox tree */}
+              {mailboxTree.map((node) => (
+                <MailboxTreeItem
+                  key={node.id}
+                  node={node}
+                  selectedMailbox={selectedMailbox}
+                  expandedFolders={expandedFolders}
+                  onMailboxSelect={onMailboxSelect}
+                  onToggleExpand={handleToggleExpand}
+                  isCollapsed={isCollapsed}
+                />
+              ))}
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Footer */}
+      {!isCollapsed && (
+        <>
+          {/* Sliding Menu Panel */}
+          <div className={cn(
+            "absolute bottom-0 left-0 right-0 bg-background border-t border-border z-10 shadow-lg",
+            "transform transition-all duration-300 ease-out",
+            showMenu ? "-translate-y-12" : "translate-y-full"
+          )}>
+            <div className="py-2">
+                {/* Storage Info */}
+                {quota && quota.total > 0 && (
+                  <div className="px-4 py-2">
+                    <div className="flex items-center justify-between text-xs">
+                      <span className="text-muted-foreground">{t("storage")}</span>
+                      <span className="text-foreground">
+                        {formatFileSize(quota.used)} / {formatFileSize(quota.total)}
+                      </span>
+                    </div>
+                    <div className="mt-1 w-full bg-muted rounded-full h-1">
+                      <div
+                        className="bg-primary h-1 rounded-full"
+                        style={{ width: `${Math.min((quota.used / quota.total) * 100, 100)}%` }}
+                      />
+                    </div>
+                  </div>
+                )}
+
+                <div className="border-t border-border mt-2 pt-2">
+                  {/* Settings */}
+                  <button
+                    onClick={() => router.push(`/${params.locale}/settings`)}
+                    className="w-full px-4 py-2 flex items-center justify-between hover:bg-muted transition-colors text-sm"
+                  >
+                    <span className="flex items-center gap-2">
+                      <Settings className="w-4 h-4" />
+                      {t("settings")}
+                    </span>
+                    <ChevronRight className="w-4 h-4 text-muted-foreground" />
+                  </button>
+
+                  {/* Sign Out */}
+                  {onLogout && (
+                    <button
+                      onClick={onLogout}
+                      className="w-full px-4 py-2 flex items-center gap-2 hover:bg-muted transition-colors text-sm"
+                    >
+                      <LogOut className="w-4 h-4" />
+                      {t("sign_out")}
+                    </button>
+                  )}
+                </div>
+            </div>
+          </div>
+
+          {/* Menu Toggle Button */}
+          <div className="border-t border-border relative">
+            <button
+              onClick={() => setShowMenu(!showMenu)}
+              className={cn(
+                "w-full px-4 py-3 flex items-center justify-between",
+                "hover:bg-muted transition-colors",
+                "text-sm text-foreground"
+              )}
+            >
+              <span className="flex items-center gap-2">
+                <Menu className="w-4 h-4" />
+                Menu
+                {/* Push Connection Status Indicator */}
+                <span
+                  className="relative group"
+                  title={isPushConnected ? t("push_connected") : t("push_disconnected")}
+                >
+                  <span
+                    className={cn(
+                      "inline-block w-1.5 h-1.5 rounded-full transition-all duration-300",
+                      isPushConnected ? "bg-green-500" : "bg-muted-foreground/40"
+                    )}
+                  />
+                  {/* Tooltip on hover */}
+                  <span className={cn(
+                    "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1",
+                    "bg-popover text-popover-foreground text-xs rounded shadow-lg",
+                    "whitespace-nowrap opacity-0 group-hover:opacity-100",
+                    "pointer-events-none transition-opacity duration-200 z-50"
+                  )}>
+                    {isPushConnected ? t("push_connected") : t("push_disconnected")}
+                  </span>
+                </span>
+              </span>
+              <ChevronUp className={cn(
+                "w-4 h-4 transition-transform duration-200",
+                showMenu ? "" : "rotate-180"
+              )} />
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/providers/theme-provider.tsx b/components/providers/theme-provider.tsx
new file mode 100644
index 00000000..33596c35
--- /dev/null
+++ b/components/providers/theme-provider.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { useEffect } from 'react';
+import { useThemeStore } from '@/stores/theme-store';
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const initializeTheme = useThemeStore((state) => state.initializeTheme);
+
+  useEffect(() => {
+    initializeTheme();
+  }, [initializeTheme]);
+
+  return <>{children}</>;
+}
\ No newline at end of file
diff --git a/components/settings/account-settings.tsx b/components/settings/account-settings.tsx
new file mode 100644
index 00000000..e880e593
--- /dev/null
+++ b/components/settings/account-settings.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { useTranslations } from 'next-intl';
+import { useAuthStore } from '@/stores/auth-store';
+import { useEmailStore } from '@/stores/email-store';
+import { SettingsSection, SettingItem } from './settings-section';
+import { formatFileSize } from '@/lib/utils';
+
+export function AccountSettings() {
+  const t = useTranslations('settings.account');
+  const { username, serverUrl } = useAuthStore();
+  const { quota } = useEmailStore();
+
+  const quotaPercentage = quota ? Math.round((quota.used / quota.total) * 100) : 0;
+
+  return (
+    <SettingsSection title={t('title')} description={t('description')}>
+      {/* Email Address */}
+      <SettingItem label={t('email.label')}>
+        <span className="text-sm text-foreground">{username || t('../../common.unknown')}</span>
+      </SettingItem>
+
+      {/* Server */}
+      <SettingItem label={t('server.label')}>
+        <span className="text-sm text-foreground truncate max-w-xs">
+          {serverUrl || t('../../common.unknown')}
+        </span>
+      </SettingItem>
+
+      {/* Storage */}
+      {quota && quota.total > 0 && (
+        <SettingItem
+          label={t('storage.label')}
+          description={t('storage.used', {
+            used: formatFileSize(quota.used),
+            total: formatFileSize(quota.total),
+          })}
+        >
+          <div className="flex flex-col items-end gap-1">
+            <span className="text-sm text-foreground">
+              {t('storage.percentage', { percent: quotaPercentage })}
+            </span>
+            <div className="w-32 h-2 bg-muted rounded-full overflow-hidden">
+              <div
+                className="h-full bg-primary rounded-full transition-all"
+                style={{ width: `${quotaPercentage}%` }}
+              />
+            </div>
+          </div>
+        </SettingItem>
+      )}
+    </SettingsSection>
+  );
+}
diff --git a/components/settings/advanced-settings.tsx b/components/settings/advanced-settings.tsx
new file mode 100644
index 00000000..56edf60e
--- /dev/null
+++ b/components/settings/advanced-settings.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { useState, useRef } from 'react';
+import { useTranslations } from 'next-intl';
+import { useSettingsStore } from '@/stores/settings-store';
+import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
+import { Button } from '@/components/ui/button';
+
+export function AdvancedSettings() {
+  const t = useTranslations('settings.advanced');
+  const tCommon = useTranslations('common');
+  const { debugMode, updateSetting, resetToDefaults, exportSettings, importSettings } =
+    useSettingsStore();
+  const [showResetConfirm, setShowResetConfirm] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleExport = () => {
+    const settingsJson = exportSettings();
+    const blob = new Blob([settingsJson], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `webmail-settings-${new Date().toISOString().split('T')[0]}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleImport = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const json = event.target?.result as string;
+      const success = importSettings(json);
+      if (success) {
+        alert(t('../../settings.import_success'));
+      } else {
+        alert(t('../../settings.import_error'));
+      }
+    };
+    reader.readAsText(file);
+  };
+
+  const handleReset = () => {
+    if (showResetConfirm) {
+      resetToDefaults();
+      setShowResetConfirm(false);
+      alert(t('../../settings.save_success'));
+    } else {
+      setShowResetConfirm(true);
+      setTimeout(() => setShowResetConfirm(false), 5000);
+    }
+  };
+
+  return (
+    <SettingsSection title={t('title')} description={t('description')}>
+      {/* Debug Mode */}
+      <SettingItem label={t('debug_mode.label')} description={t('debug_mode.description')}>
+        <ToggleSwitch checked={debugMode} onChange={(checked) => updateSetting('debugMode', checked)} />
+      </SettingItem>
+
+      {/* Export Settings */}
+      <SettingItem label={t('export_settings.label')} description={t('export_settings.description')}>
+        <Button variant="outline" size="sm" onClick={handleExport}>
+          {t('export_settings.button')}
+        </Button>
+      </SettingItem>
+
+      {/* Import Settings */}
+      <SettingItem label={t('import_settings.label')} description={t('import_settings.description')}>
+        <>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="application/json,.json"
+            onChange={handleFileChange}
+            className="hidden"
+          />
+          <Button variant="outline" size="sm" onClick={handleImport}>
+            {t('import_settings.button')}
+          </Button>
+        </>
+      </SettingItem>
+
+      {/* Reset Settings */}
+      <SettingItem label={t('reset_settings.label')} description={t('reset_settings.description')}>
+        <Button
+          variant={showResetConfirm ? 'destructive' : 'outline'}
+          size="sm"
+          onClick={handleReset}
+        >
+          {showResetConfirm ? tCommon('yes') : t('reset_settings.button')}
+        </Button>
+      </SettingItem>
+    </SettingsSection>
+  );
+}
diff --git a/components/settings/appearance-settings.tsx b/components/settings/appearance-settings.tsx
new file mode 100644
index 00000000..21dec067
--- /dev/null
+++ b/components/settings/appearance-settings.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { useTranslations } from 'next-intl';
+import { useThemeStore } from '@/stores/theme-store';
+import { useSettingsStore } from '@/stores/settings-store';
+import { SettingsSection, SettingItem, RadioGroup, ToggleSwitch } from './settings-section';
+
+export function AppearanceSettings() {
+  const t = useTranslations('settings.appearance');
+  const { theme, setTheme } = useThemeStore();
+  const { fontSize, listDensity, animationsEnabled, updateSetting } = useSettingsStore();
+
+  return (
+    <SettingsSection title={t('title')} description={t('description')}>
+      {/* Theme */}
+      <SettingItem label={t('theme.label')} description={t('theme.description')}>
+        <RadioGroup
+          value={theme}
+          onChange={(value) => setTheme(value as 'light' | 'dark' | 'system')}
+          options={[
+            { value: 'light', label: t('theme.light') },
+            { value: 'dark', label: t('theme.dark') },
+            { value: 'system', label: t('theme.system') },
+          ]}
+        />
+      </SettingItem>
+
+      {/* Font Size */}
+      <SettingItem label={t('font_size.label')} description={t('font_size.description')}>
+        <RadioGroup
+          value={fontSize}
+          onChange={(value) => updateSetting('fontSize', value as 'small' | 'medium' | 'large')}
+          options={[
+            { value: 'small', label: t('font_size.small') },
+            { value: 'medium', label: t('font_size.medium') },
+            { value: 'large', label: t('font_size.large') },
+          ]}
+        />
+      </SettingItem>
+
+      {/* List Density */}
+      <SettingItem label={t('list_density.label')} description={t('list_density.description')}>
+        <RadioGroup
+          value={listDensity}
+          onChange={(value) =>
+            updateSetting('listDensity', value as 'compact' | 'regular' | 'comfortable')
+          }
+          options={[
+            { value: 'compact', label: t('list_density.compact') },
+            { value: 'regular', label: t('list_density.regular') },
+            { value: 'comfortable', label: t('list_density.comfortable') },
+          ]}
+        />
+      </SettingItem>
+
+      {/* Animations */}
+      <SettingItem label={t('animations.label')} description={t('animations.description')}>
+        <ToggleSwitch
+          checked={animationsEnabled}
+          onChange={(checked) => updateSetting('animationsEnabled', checked)}
+        />
+      </SettingItem>
+    </SettingsSection>
+  );
+}
diff --git a/components/settings/email-settings.tsx b/components/settings/email-settings.tsx
new file mode 100644
index 00000000..8402ad08
--- /dev/null
+++ b/components/settings/email-settings.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useTranslations } from 'next-intl';
+import { useSettingsStore } from '@/stores/settings-store';
+import { SettingsSection, SettingItem, Select, ToggleSwitch } from './settings-section';
+
+export function EmailSettings() {
+  const t = useTranslations('settings.email_behavior');
+  const {
+    markAsReadDelay,
+    deleteAction,
+    showPreview,
+    emailsPerPage,
+    externalContentPolicy,
+    updateSetting,
+  } = useSettingsStore();
+
+  return (
+    <SettingsSection title={t('title')} description={t('description')}>
+      {/* Mark as Read */}
+      <SettingItem label={t('mark_read.label')} description={t('mark_read.description')}>
+        <Select
+          value={markAsReadDelay.toString()}
+          onChange={(value) => updateSetting('markAsReadDelay', parseInt(value))}
+          options={[
+            { value: '0', label: t('mark_read.instant') },
+            { value: '3000', label: t('mark_read.delay_3s') },
+            { value: '5000', label: t('mark_read.delay_5s') },
+            { value: '-1', label: t('mark_read.never') },
+          ]}
+        />
+      </SettingItem>
+
+      {/* Delete Action */}
+      <SettingItem label={t('delete_action.label')} description={t('delete_action.description')}>
+        <Select
+          value={deleteAction}
+          onChange={(value) => updateSetting('deleteAction', value as 'trash' | 'permanent')}
+          options={[
+            { value: 'trash', label: t('delete_action.trash') },
+            { value: 'permanent', label: t('delete_action.permanent') },
+          ]}
+        />
+      </SettingItem>
+
+      {/* Show Preview */}
+      <SettingItem label={t('show_preview.label')} description={t('show_preview.description')}>
+        <ToggleSwitch checked={showPreview} onChange={(checked) => updateSetting('showPreview', checked)} />
+      </SettingItem>
+
+      {/* Emails Per Page */}
+      <SettingItem label={t('emails_per_page.label')} description={t('emails_per_page.description')}>
+        <Select
+          value={emailsPerPage.toString()}
+          onChange={(value) => updateSetting('emailsPerPage', parseInt(value))}
+          options={[
+            { value: '25', label: t('emails_per_page.25') },
+            { value: '50', label: t('emails_per_page.50') },
+            { value: '100', label: t('emails_per_page.100') },
+          ]}
+        />
+      </SettingItem>
+
+      {/* External Content */}
+      <SettingItem label={t('external_content.label')} description={t('external_content.description')}>
+        <Select
+          value={externalContentPolicy}
+          onChange={(value) =>
+            updateSetting('externalContentPolicy', value as 'ask' | 'block' | 'allow')
+          }
+          options={[
+            { value: 'ask', label: t('external_content.ask') },
+            { value: 'block', label: t('external_content.block') },
+            { value: 'allow', label: t('external_content.allow') },
+          ]}
+        />
+      </SettingItem>
+    </SettingsSection>
+  );
+}
diff --git a/components/settings/settings-section.tsx b/components/settings/settings-section.tsx
new file mode 100644
index 00000000..640d0b9f
--- /dev/null
+++ b/components/settings/settings-section.tsx
@@ -0,0 +1,123 @@
+import { ReactNode } from 'react';
+
+interface SettingsSectionProps {
+  title: string;
+  description?: string;
+  children: ReactNode;
+}
+
+export function SettingsSection({ title, description, children }: SettingsSectionProps) {
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-lg font-medium text-foreground">{title}</h3>
+        {description && (
+          <p className="text-sm text-muted-foreground mt-1">{description}</p>
+        )}
+      </div>
+      <div className="space-y-4">{children}</div>
+    </div>
+  );
+}
+
+interface SettingItemProps {
+  label: string;
+  description?: string;
+  children: ReactNode;
+}
+
+export function SettingItem({ label, description, children }: SettingItemProps) {
+  return (
+    <div className="flex items-start justify-between py-3 border-b border-border last:border-0">
+      <div className="flex-1 pr-4">
+        <label className="text-sm font-medium text-foreground">{label}</label>
+        {description && (
+          <p className="text-xs text-muted-foreground mt-1">{description}</p>
+        )}
+      </div>
+      <div className="flex-shrink-0">{children}</div>
+    </div>
+  );
+}
+
+interface ToggleSwitchProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+export function ToggleSwitch({ checked, onChange, disabled }: ToggleSwitchProps) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className={`
+        relative inline-flex h-6 w-11 items-center rounded-full transition-colors
+        ${checked ? 'bg-primary' : 'bg-muted'}
+        ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+      `}
+    >
+      <span
+        className={`
+          inline-block h-4 w-4 transform rounded-full bg-background transition-transform
+          ${checked ? 'translate-x-6' : 'translate-x-1'}
+        `}
+      />
+    </button>
+  );
+}
+
+interface RadioGroupProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: { value: string; label: string }[];
+}
+
+export function RadioGroup({ value, onChange, options }: RadioGroupProps) {
+  return (
+    <div className="flex gap-2">
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          onClick={() => onChange(option.value)}
+          className={`
+            px-3 py-1.5 text-xs rounded transition-colors
+            ${
+              value === option.value
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-muted hover:bg-accent text-foreground'
+            }
+          `}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+interface SelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: { value: string; label: string }[];
+}
+
+export function Select({ value, onChange, options }: SelectProps) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className="px-3 py-1.5 text-sm rounded bg-muted border border-border text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+    >
+      {options.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+}
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
new file mode 100644
index 00000000..1f069e99
--- /dev/null
+++ b/components/ui/avatar.tsx
@@ -0,0 +1,54 @@
+import { cn } from "@/lib/utils";
+
+interface AvatarProps {
+  name?: string;
+  email?: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+export function Avatar({ name, email, size = "md", className }: AvatarProps) {
+  const getInitials = () => {
+    if (name) {
+      const parts = name.trim().split(/\s+/);
+      if (parts.length >= 2) {
+        return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+      }
+      return name.slice(0, 2).toUpperCase();
+    }
+    if (email) {
+      return email[0].toUpperCase();
+    }
+    return "?";
+  };
+
+  const getBackgroundColor = () => {
+    const str = name || email || "";
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const hue = Math.abs(hash) % 360;
+    return `hsl(${hue}, 70%, 50%)`;
+  };
+
+  const sizeClasses = {
+    sm: "w-8 h-8 text-xs",
+    md: "w-10 h-10 text-sm",
+    lg: "w-12 h-12 text-base",
+  };
+
+  return (
+    <div
+      className={cn(
+        "rounded-full flex items-center justify-center font-semibold text-white",
+        sizeClasses[size],
+        className
+      )}
+      style={{ backgroundColor: getBackgroundColor() }}
+      title={name || email}
+    >
+      {getInitials()}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
new file mode 100644
index 00000000..8aaba79e
--- /dev/null
+++ b/components/ui/button.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "ghost" | "outline" | "destructive";
+  size?: "sm" | "md" | "lg" | "icon";
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "default", size = "md", ...props }, ref) => {
+    return (
+      <button
+        className={cn(
+          "inline-flex items-center justify-center rounded-md font-medium transition-all duration-200",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          "disabled:pointer-events-none disabled:opacity-50",
+          {
+            default:
+              "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm hover:shadow",
+            ghost: "hover:bg-accent hover:text-accent-foreground",
+            outline:
+              "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+            destructive:
+              "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
+          }[variant],
+          {
+            sm: "h-9 px-3 text-sm",
+            md: "h-10 px-4 py-2",
+            lg: "h-11 px-8",
+            icon: "h-10 w-10",
+          }[size],
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button };
\ No newline at end of file
diff --git a/components/ui/context-menu.tsx b/components/ui/context-menu.tsx
new file mode 100644
index 00000000..f75047b6
--- /dev/null
+++ b/components/ui/context-menu.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@/lib/utils";
+import { ChevronRight } from "lucide-react";
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+interface ContextMenuProps {
+  isOpen: boolean;
+  position: Position;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+export const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
+  ({ isOpen, position, onClose: _onClose, children }, ref) => {
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+      setMounted(true);
+    }, []);
+
+    if (!mounted || !isOpen) return null;
+
+    return createPortal(
+      <div
+        ref={ref}
+        className={cn(
+          "fixed z-50 min-w-[200px] bg-background rounded-md shadow-lg border border-border",
+          "animate-in fade-in-0 zoom-in-95 duration-100"
+        )}
+        style={{
+          left: position.x,
+          top: position.y,
+        }}
+        role="menu"
+        aria-orientation="vertical"
+      >
+        <div className="py-1">
+          {children}
+        </div>
+      </div>,
+      document.body
+    );
+  }
+);
+
+ContextMenu.displayName = "ContextMenu";
+
+interface ContextMenuItemProps {
+  icon?: React.ComponentType<{ className?: string }>;
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  destructive?: boolean;
+  shortcut?: string;
+}
+
+export function ContextMenuItem({
+  icon: Icon,
+  label,
+  onClick,
+  disabled = false,
+  destructive = false,
+  shortcut,
+}: ContextMenuItemProps) {
+  return (
+    <button
+      role="menuitem"
+      disabled={disabled}
+      className={cn(
+        "w-full px-3 py-2 text-sm text-left flex items-center gap-2",
+        "transition-colors duration-100",
+        "focus:outline-none focus:bg-muted",
+        disabled && "opacity-50 cursor-not-allowed",
+        !disabled && "hover:bg-muted cursor-pointer",
+        destructive && !disabled && "text-destructive hover:bg-destructive/10 focus:bg-destructive/10"
+      )}
+      onClick={(e) => {
+        if (disabled) return;
+        e.stopPropagation();
+        onClick();
+      }}
+    >
+      {Icon && <Icon className="w-4 h-4 flex-shrink-0" />}
+      <span className="flex-1">{label}</span>
+      {shortcut && (
+        <span className="text-xs text-muted-foreground ml-auto">{shortcut}</span>
+      )}
+    </button>
+  );
+}
+
+export function ContextMenuSeparator() {
+  return <div className="h-px bg-border my-1" role="separator" />;
+}
+
+interface ContextMenuSubMenuProps {
+  icon?: React.ComponentType<{ className?: string }>;
+  label: string;
+  children: React.ReactNode;
+}
+
+export function ContextMenuSubMenu({
+  icon: Icon,
+  label,
+  children,
+}: ContextMenuSubMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [subMenuPosition, setSubMenuPosition] = useState<"right" | "left">("right");
+  const itemRef = useRef<HTMLDivElement>(null);
+  const subMenuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isOpen && itemRef.current) {
+      const rect = itemRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+
+      // Check if submenu would overflow right edge
+      if (rect.right + 200 > viewportWidth - 10) {
+        setSubMenuPosition("left");
+      } else {
+        setSubMenuPosition("right");
+      }
+    }
+  }, [isOpen]);
+
+  return (
+    <div
+      ref={itemRef}
+      className="relative"
+      onMouseEnter={() => setIsOpen(true)}
+      onMouseLeave={() => setIsOpen(false)}
+    >
+      <div
+        className={cn(
+          "w-full px-3 py-2 text-sm flex items-center gap-2",
+          "transition-colors duration-100 cursor-pointer",
+          "hover:bg-muted"
+        )}
+        role="menuitem"
+        aria-haspopup="true"
+        aria-expanded={isOpen}
+      >
+        {Icon && <Icon className="w-4 h-4 flex-shrink-0" />}
+        <span className="flex-1">{label}</span>
+        <ChevronRight className="w-4 h-4 text-muted-foreground" />
+      </div>
+
+      {isOpen && (
+        <div
+          ref={subMenuRef}
+          className={cn(
+            "absolute top-0 min-w-[180px] bg-background rounded-md shadow-lg border border-border",
+            "animate-in fade-in-0 zoom-in-95 duration-100",
+            subMenuPosition === "right" ? "left-full ml-1" : "right-full mr-1"
+          )}
+          role="menu"
+        >
+          <div className="py-1 max-h-[300px] overflow-y-auto">
+            {children}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ContextMenuHeaderProps {
+  children: React.ReactNode;
+}
+
+export function ContextMenuHeader({ children }: ContextMenuHeaderProps) {
+  return (
+    <div className="px-3 py-2 text-xs font-medium text-muted-foreground border-b border-border">
+      {children}
+    </div>
+  );
+}
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 00000000..fd8132fd
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground transition-all duration-200",
+          "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+          "placeholder:text-muted-foreground",
+          "hover:border-muted-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };
\ No newline at end of file
diff --git a/components/ui/language-switcher.tsx b/components/ui/language-switcher.tsx
new file mode 100644
index 00000000..04758041
--- /dev/null
+++ b/components/ui/language-switcher.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useParams, usePathname, useRouter } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { cn } from '@/lib/utils';
+import { locales } from '@/i18n/request';
+
+export function LanguageSwitcher({ className }: { className?: string }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useParams();
+  const t = useTranslations('language');
+  const currentLocale = params.locale as string;
+
+  const handleLanguageChange = (newLocale: string) => {
+    // Get the path without the locale prefix
+    const pathWithoutLocale = pathname.replace(`/${currentLocale}`, '');
+
+    // Navigate to the same page with the new locale
+    router.push(`/${newLocale}${pathWithoutLocale}`);
+  };
+
+  return (
+    <div className={cn("flex items-center gap-1 p-1 bg-muted rounded-lg", className)}>
+      {locales.map((locale) => (
+        <button
+          key={locale}
+          onClick={() => handleLanguageChange(locale)}
+          className={cn(
+            "flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 rounded transition-all text-xs",
+            "text-foreground",
+            currentLocale === locale
+              ? "bg-background shadow-sm font-medium"
+              : "hover:bg-accent/50"
+          )}
+          title={t(locale === 'en' ? 'english' : 'french')}
+        >
+          {locale === 'en' ? '🇬🇧' : '🇫🇷'}
+          <span className="hidden sm:inline">
+            {locale.toUpperCase()}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
new file mode 100644
index 00000000..2b4b5650
--- /dev/null
+++ b/components/ui/toast.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { useEffect } from "react";
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type ToastType = "success" | "error" | "info" | "warning";
+
+export interface Toast {
+  id: string;
+  type: ToastType;
+  title: string;
+  message?: string;
+  duration?: number;
+  onClick?: () => void;
+}
+
+interface ToastProps {
+  toast: Toast;
+  onClose: (id: string) => void;
+}
+
+const icons = {
+  success: CheckCircle,
+  error: AlertCircle,
+  info: Info,
+  warning: AlertTriangle,
+};
+
+const styles = {
+  success: "bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800 text-green-800 dark:text-green-200",
+  error: "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800 text-red-800 dark:text-red-200",
+  info: "bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200",
+  warning: "bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-200",
+};
+
+export function ToastItem({ toast, onClose }: ToastProps) {
+  const Icon = icons[toast.type];
+
+  useEffect(() => {
+    if (toast.duration && toast.duration > 0) {
+      const timer = setTimeout(() => {
+        onClose(toast.id);
+      }, toast.duration);
+      return () => clearTimeout(timer);
+    }
+  }, [toast, onClose]);
+
+  return (
+    <div
+      className={cn(
+        "flex items-start gap-3 p-4 rounded-lg border shadow-lg bg-background animate-slide-in",
+        styles[toast.type],
+        toast.onClick && "cursor-pointer hover:opacity-90 transition-opacity"
+      )}
+      onClick={() => {
+        if (toast.onClick) {
+          toast.onClick();
+          onClose(toast.id);
+        }
+      }}
+    >
+      <Icon className="w-5 h-5 flex-shrink-0 mt-0.5" />
+      <div className="flex-1">
+        <h4 className="font-medium">{toast.title}</h4>
+        {toast.message && (
+          <p className="text-sm mt-1 opacity-90">{toast.message}</p>
+        )}
+      </div>
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onClose(toast.id);
+        }}
+        className="text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </div>
+  );
+}
+
+export function ToastContainer({ toasts, onClose }: { toasts: Toast[]; onClose: (id: string) => void }) {
+  return (
+    <div className="fixed bottom-4 right-4 z-50 space-y-2 max-w-sm">
+      {toasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} onClose={onClose} />
+      ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/contexts/drag-drop-context.tsx b/contexts/drag-drop-context.tsx
new file mode 100644
index 00000000..97c498e3
--- /dev/null
+++ b/contexts/drag-drop-context.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { createContext, useContext, useState, useCallback, ReactNode } from "react";
+import { Email } from "@/lib/jmap/types";
+
+interface DragDropState {
+  isDragging: boolean;
+  draggedEmails: Email[];
+  dragCount: number;
+  sourceMailboxId: string | null;
+}
+
+interface DragDropContextValue extends DragDropState {
+  startDrag: (emails: Email[], sourceMailboxId: string) => void;
+  endDrag: () => void;
+}
+
+const initialState: DragDropState = {
+  isDragging: false,
+  draggedEmails: [],
+  dragCount: 0,
+  sourceMailboxId: null,
+};
+
+const DragDropContext = createContext<DragDropContextValue | null>(null);
+
+export function DragDropProvider({ children }: { children: ReactNode }) {
+  const [state, setState] = useState<DragDropState>(initialState);
+
+  const startDrag = useCallback((emails: Email[], sourceMailboxId: string) => {
+    setState({
+      isDragging: true,
+      draggedEmails: emails,
+      dragCount: emails.length,
+      sourceMailboxId,
+    });
+  }, []);
+
+  const endDrag = useCallback(() => {
+    setState(initialState);
+  }, []);
+
+  return (
+    <DragDropContext.Provider value={{ ...state, startDrag, endDrag }}>
+      {children}
+    </DragDropContext.Provider>
+  );
+}
+
+export function useDragDropContext() {
+  const context = useContext(DragDropContext);
+  if (!context) {
+    throw new Error("useDragDropContext must be used within DragDropProvider");
+  }
+  return context;
+}
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 00000000..b28f65ef
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,60 @@
+import js from "@eslint/js";
+import tseslint from "@typescript-eslint/eslint-plugin";
+import tsparser from "@typescript-eslint/parser";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import globals from "globals";
+
+export default [
+  js.configs.recommended,
+  {
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      parser: tsparser,
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        React: "readonly",
+        JSX: "readonly",
+        NodeJS: "readonly",
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tseslint,
+      "react": reactPlugin,
+      "react-hooks": reactHooksPlugin,
+    },
+    rules: {
+      ...tseslint.configs.recommended.rules,
+      "@typescript-eslint/no-unused-vars": ["warn", {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_"
+      }],
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-empty-object-type": "off",
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+      "no-unused-vars": "off",
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  },
+  {
+    ignores: [
+      ".next/**",
+      "node_modules/**",
+      "*.config.js",
+      "*.config.mjs",
+    ],
+  },
+];
diff --git a/hooks/use-context-menu.ts b/hooks/use-context-menu.ts
new file mode 100644
index 00000000..e7403ddf
--- /dev/null
+++ b/hooks/use-context-menu.ts
@@ -0,0 +1,126 @@
+"use client";
+
+import { useState, useCallback, useEffect, useRef } from "react";
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+interface ContextMenuState<T> {
+  isOpen: boolean;
+  position: Position;
+  data: T | null;
+}
+
+interface UseContextMenuReturn<T> {
+  contextMenu: ContextMenuState<T>;
+  openContextMenu: (e: React.MouseEvent, data: T) => void;
+  closeContextMenu: () => void;
+  menuRef: React.RefObject<HTMLDivElement | null>;
+}
+
+const MENU_WIDTH = 200;
+const MENU_HEIGHT = 320; // Approximate max height
+
+export function useContextMenu<T>(): UseContextMenuReturn<T> {
+  const [contextMenu, setContextMenu] = useState<ContextMenuState<T>>({
+    isOpen: false,
+    position: { x: 0, y: 0 },
+    data: null,
+  });
+
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  const calculatePosition = useCallback((clientX: number, clientY: number): Position => {
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    let x = clientX;
+    let y = clientY;
+
+    // Adjust for right edge
+    if (x + MENU_WIDTH > viewportWidth - 10) {
+      x = viewportWidth - MENU_WIDTH - 10;
+    }
+
+    // Adjust for bottom edge
+    if (y + MENU_HEIGHT > viewportHeight - 10) {
+      y = viewportHeight - MENU_HEIGHT - 10;
+    }
+
+    // Ensure minimum position
+    x = Math.max(10, x);
+    y = Math.max(10, y);
+
+    return { x, y };
+  }, []);
+
+  const openContextMenu = useCallback((e: React.MouseEvent, data: T) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const position = calculatePosition(e.clientX, e.clientY);
+
+    setContextMenu({
+      isOpen: true,
+      position,
+      data,
+    });
+  }, [calculatePosition]);
+
+  const closeContextMenu = useCallback(() => {
+    setContextMenu((prev) => ({
+      ...prev,
+      isOpen: false,
+    }));
+  }, []);
+
+  // Close on escape key, click outside, and scroll
+  useEffect(() => {
+    if (!contextMenu.isOpen) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        closeContextMenu();
+      }
+    };
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        closeContextMenu();
+      }
+    };
+
+    const handleScroll = () => {
+      closeContextMenu();
+    };
+
+    const handleBlur = () => {
+      closeContextMenu();
+    };
+
+    // Add listeners with a slight delay to prevent immediate closing
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("keydown", handleEscape);
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("scroll", handleScroll, true);
+      window.addEventListener("blur", handleBlur);
+    }, 0);
+
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("keydown", handleEscape);
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("blur", handleBlur);
+    };
+  }, [contextMenu.isOpen, closeContextMenu]);
+
+  return {
+    contextMenu,
+    openContextMenu,
+    closeContextMenu,
+    menuRef,
+  };
+}
diff --git a/hooks/use-email-drag.ts b/hooks/use-email-drag.ts
new file mode 100644
index 00000000..b9465b99
--- /dev/null
+++ b/hooks/use-email-drag.ts
@@ -0,0 +1,96 @@
+"use client";
+
+import { useCallback, DragEvent } from "react";
+import { Email } from "@/lib/jmap/types";
+import { useEmailStore } from "@/stores/email-store";
+import { useDragDropContext } from "@/contexts/drag-drop-context";
+
+interface UseEmailDragOptions {
+  email: Email;
+  sourceMailboxId: string;
+}
+
+interface UseEmailDragReturn {
+  dragHandlers: {
+    draggable: boolean;
+    onDragStart: (e: DragEvent<HTMLDivElement>) => void;
+    onDragEnd: (e: DragEvent<HTMLDivElement>) => void;
+  };
+  isDragging: boolean;
+}
+
+function createDragPreview(count: number): HTMLElement {
+  const preview = document.createElement("div");
+  preview.className = "drag-preview";
+  preview.style.cssText = `
+    position: fixed;
+    top: -9999px;
+    left: 0;
+    padding: 8px 16px;
+    background-color: var(--color-primary, #3b82f6);
+    color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    font-size: 14px;
+    font-weight: 500;
+    z-index: 9999;
+    white-space: nowrap;
+    pointer-events: none;
+  `;
+  preview.textContent = count === 1 ? "1 email" : `${count} emails`;
+  document.body.appendChild(preview);
+  return preview;
+}
+
+export function useEmailDrag({ email, sourceMailboxId }: UseEmailDragOptions): UseEmailDragReturn {
+  const { selectedEmailIds, emails } = useEmailStore();
+  const { startDrag, endDrag, isDragging, draggedEmails } = useDragDropContext();
+
+  const handleDragStart = useCallback((e: DragEvent<HTMLDivElement>) => {
+    // Determine which emails to drag:
+    // - If current email is selected, drag all selected
+    // - Otherwise, drag only this email
+    const isSelected = selectedEmailIds.has(email.id);
+    const emailsToDrag = isSelected
+      ? emails.filter(em => selectedEmailIds.has(em.id))
+      : [email];
+
+    // Set data transfer
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData(
+      "application/x-email-ids",
+      JSON.stringify(emailsToDrag.map(em => em.id))
+    );
+    e.dataTransfer.setData(
+      "text/plain",
+      emailsToDrag.map(em => em.subject || "(no subject)").join(", ")
+    );
+
+    // Create custom drag image
+    const dragPreview = createDragPreview(emailsToDrag.length);
+    e.dataTransfer.setDragImage(dragPreview, 0, 0);
+
+    // Clean up preview after drag starts (browser keeps a snapshot)
+    requestAnimationFrame(() => {
+      dragPreview.remove();
+    });
+
+    startDrag(emailsToDrag, sourceMailboxId);
+  }, [email, selectedEmailIds, emails, sourceMailboxId, startDrag]);
+
+  const handleDragEnd = useCallback(() => {
+    endDrag();
+  }, [endDrag]);
+
+  // Check if this specific email is being dragged
+  const isThisEmailDragging = isDragging && draggedEmails.some(em => em.id === email.id);
+
+  return {
+    dragHandlers: {
+      draggable: true,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+    },
+    isDragging: isThisEmailDragging,
+  };
+}
diff --git a/hooks/use-keyboard-shortcuts.ts b/hooks/use-keyboard-shortcuts.ts
new file mode 100644
index 00000000..47ad3b40
--- /dev/null
+++ b/hooks/use-keyboard-shortcuts.ts
@@ -0,0 +1,278 @@
+"use client";
+
+import { useEffect, useCallback, useRef } from "react";
+import { Email } from "@/lib/jmap/types";
+
+export interface KeyboardShortcutHandlers {
+  // Navigation
+  onNextEmail?: () => void;
+  onPreviousEmail?: () => void;
+  onOpenEmail?: () => void;
+  onCloseEmail?: () => void;
+
+  // Email actions
+  onReply?: () => void;
+  onReplyAll?: () => void;
+  onForward?: () => void;
+  onToggleStar?: () => void;
+  onArchive?: () => void;
+  onDelete?: () => void;
+  onMarkAsUnread?: () => void;
+  onMarkAsRead?: () => void;
+
+  // Global actions
+  onCompose?: () => void;
+  onFocusSearch?: () => void;
+  onShowHelp?: () => void;
+  onRefresh?: () => void;
+
+  // Selection
+  onSelectAll?: () => void;
+  onDeselectAll?: () => void;
+
+  // Thread actions
+  onToggleThreadExpansion?: () => void;
+}
+
+export interface UseKeyboardShortcutsOptions {
+  enabled?: boolean;
+  emails: Email[];
+  selectedEmailId?: string;
+  handlers: KeyboardShortcutHandlers;
+}
+
+// Check if user is typing in an input field
+function isInputFocused(): boolean {
+  const activeElement = document.activeElement;
+  if (!activeElement) return false;
+
+  const tagName = activeElement.tagName.toLowerCase();
+  const isInput = tagName === "input" || tagName === "textarea" || tagName === "select";
+  const isContentEditable = activeElement.getAttribute("contenteditable") === "true";
+
+  return isInput || isContentEditable;
+}
+
+export function useKeyboardShortcuts({
+  enabled = true,
+  emails,
+  selectedEmailId,
+  handlers,
+}: UseKeyboardShortcutsOptions) {
+  const handlersRef = useRef(handlers);
+
+  // Keep handlers ref updated
+  useEffect(() => {
+    handlersRef.current = handlers;
+  }, [handlers]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      // Don't trigger shortcuts when typing in inputs
+      if (isInputFocused()) return;
+
+      const h = handlersRef.current;
+      const key = event.key.toLowerCase();
+      const hasModifier = event.ctrlKey || event.metaKey || event.altKey;
+
+      // Shortcuts that work with modifiers
+      if (event.ctrlKey || event.metaKey) {
+        switch (key) {
+          case "a":
+            // Ctrl/Cmd + A: Select all
+            event.preventDefault();
+            h.onSelectAll?.();
+            return;
+        }
+      }
+
+      // Shortcuts that should NOT work with modifiers
+      if (hasModifier) return;
+
+      switch (key) {
+        // Navigation
+        case "j":
+        case "arrowdown":
+          event.preventDefault();
+          h.onNextEmail?.();
+          break;
+
+        case "k":
+        case "arrowup":
+          event.preventDefault();
+          h.onPreviousEmail?.();
+          break;
+
+        case "enter":
+        case "o":
+          if (selectedEmailId) {
+            event.preventDefault();
+            h.onOpenEmail?.();
+          }
+          break;
+
+        case "escape":
+          event.preventDefault();
+          h.onCloseEmail?.();
+          h.onDeselectAll?.();
+          break;
+
+        // Email actions (only when email is selected)
+        case "r":
+          if (selectedEmailId) {
+            event.preventDefault();
+            if (event.shiftKey) {
+              h.onReplyAll?.();
+            } else {
+              h.onReply?.();
+            }
+          }
+          break;
+
+        case "a":
+          if (selectedEmailId) {
+            event.preventDefault();
+            h.onReplyAll?.();
+          }
+          break;
+
+        case "f":
+          if (selectedEmailId) {
+            event.preventDefault();
+            h.onForward?.();
+          }
+          break;
+
+        case "s":
+          if (selectedEmailId) {
+            event.preventDefault();
+            h.onToggleStar?.();
+          }
+          break;
+
+        case "e":
+          if (selectedEmailId) {
+            event.preventDefault();
+            h.onArchive?.();
+          }
+          break;
+
+        case "#":
+        case "delete":
+        case "backspace":
+          if (selectedEmailId && (key === "#" || key === "delete" || key === "backspace")) {
+            event.preventDefault();
+            h.onDelete?.();
+          }
+          break;
+
+        case "u":
+          if (selectedEmailId) {
+            event.preventDefault();
+            h.onMarkAsUnread?.();
+          }
+          break;
+
+        case "i":
+          if (selectedEmailId && event.shiftKey) {
+            event.preventDefault();
+            h.onMarkAsRead?.();
+          }
+          break;
+
+        // Global actions
+        case "c":
+          event.preventDefault();
+          h.onCompose?.();
+          break;
+
+        case "/":
+          event.preventDefault();
+          h.onFocusSearch?.();
+          break;
+
+        case "?":
+          event.preventDefault();
+          h.onShowHelp?.();
+          break;
+
+        case "g":
+          if (event.shiftKey) {
+            event.preventDefault();
+            h.onRefresh?.();
+          }
+          break;
+
+        // Thread actions
+        case "x":
+          if (selectedEmailId) {
+            event.preventDefault();
+            h.onToggleThreadExpansion?.();
+          }
+          break;
+      }
+    },
+    [selectedEmailId]
+  );
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [enabled, handleKeyDown]);
+
+  // Helper to get next/previous email
+  const getAdjacentEmailIndex = useCallback(
+    (direction: "next" | "previous"): number => {
+      if (emails.length === 0) return -1;
+
+      if (!selectedEmailId) {
+        // If no email selected, select first (for next) or last (for previous)
+        return direction === "next" ? 0 : emails.length - 1;
+      }
+
+      const currentIndex = emails.findIndex((e) => e.id === selectedEmailId);
+      if (currentIndex === -1) return direction === "next" ? 0 : emails.length - 1;
+
+      if (direction === "next") {
+        return currentIndex < emails.length - 1 ? currentIndex + 1 : currentIndex;
+      } else {
+        return currentIndex > 0 ? currentIndex - 1 : currentIndex;
+      }
+    },
+    [emails, selectedEmailId]
+  );
+
+  return { getAdjacentEmailIndex };
+}
+
+// Shortcut definitions for the help modal
+export const KEYBOARD_SHORTCUTS = {
+  navigation: [
+    { key: "j / ↓", description: "shortcuts.navigation.next_email" },
+    { key: "k / ↑", description: "shortcuts.navigation.previous_email" },
+    { key: "Enter / o", description: "shortcuts.navigation.open_email" },
+    { key: "Esc", description: "shortcuts.navigation.close_email" },
+  ],
+  actions: [
+    { key: "r", description: "shortcuts.actions.reply" },
+    { key: "R / a", description: "shortcuts.actions.reply_all" },
+    { key: "f", description: "shortcuts.actions.forward" },
+    { key: "s", description: "shortcuts.actions.star" },
+    { key: "e", description: "shortcuts.actions.archive" },
+    { key: "# / Del", description: "shortcuts.actions.delete" },
+    { key: "u", description: "shortcuts.actions.mark_unread" },
+    { key: "Shift + I", description: "shortcuts.actions.mark_read" },
+  ],
+  global: [
+    { key: "c", description: "shortcuts.global.compose" },
+    { key: "/", description: "shortcuts.global.search" },
+    { key: "?", description: "shortcuts.global.help" },
+    { key: "Shift + G", description: "shortcuts.global.refresh" },
+    { key: "Ctrl + A", description: "shortcuts.global.select_all" },
+  ],
+  threads: [
+    { key: "x", description: "shortcuts.threads.expand_collapse" },
+  ],
+} as const;
diff --git a/hooks/use-mailbox-drop.ts b/hooks/use-mailbox-drop.ts
new file mode 100644
index 00000000..9047b50e
--- /dev/null
+++ b/hooks/use-mailbox-drop.ts
@@ -0,0 +1,151 @@
+"use client";
+
+import { useCallback, useState, DragEvent } from "react";
+import { Mailbox } from "@/lib/jmap/types";
+import { useEmailStore } from "@/stores/email-store";
+import { useAuthStore } from "@/stores/auth-store";
+import { useDragDropContext } from "@/contexts/drag-drop-context";
+import { toast } from "@/stores/toast-store";
+
+interface UseMailboxDropOptions {
+  mailbox: Mailbox;
+  onDropComplete?: () => void;
+}
+
+interface UseMailboxDropReturn {
+  dropHandlers: {
+    onDragOver: (e: DragEvent<HTMLDivElement>) => void;
+    onDragEnter: (e: DragEvent<HTMLDivElement>) => void;
+    onDragLeave: (e: DragEvent<HTMLDivElement>) => void;
+    onDrop: (e: DragEvent<HTMLDivElement>) => void;
+  };
+  isDropTarget: boolean;
+  isValidDropTarget: boolean;
+  isInvalidDropTarget: boolean;
+}
+
+export function useMailboxDrop({ mailbox, onDropComplete }: UseMailboxDropOptions): UseMailboxDropReturn {
+  const [isOver, setIsOver] = useState(false);
+  const { client } = useAuthStore();
+  const { moveToMailbox, selectedEmailIds, clearSelection, fetchEmails, selectedMailbox } = useEmailStore();
+  const { isDragging, sourceMailboxId, draggedEmails, endDrag } = useDragDropContext();
+
+  // Determine if this is a valid drop target
+  const isValidTarget = useCallback(() => {
+    if (!isDragging) return false;
+
+    // Cannot drop on same mailbox
+    if (mailbox.id === sourceMailboxId) return false;
+
+    // Check if mailbox accepts items
+    if (!mailbox.myRights?.mayAddItems) return false;
+
+    // Virtual nodes (shared folder headers) cannot be drop targets
+    if (mailbox.id.startsWith("shared-")) return false;
+
+    // For shared mailboxes, check account compatibility
+    if (mailbox.isShared && draggedEmails[0]) {
+      // Get the source mailbox's account ID from the store
+      const mailboxes = useEmailStore.getState().mailboxes;
+      const sourceMb = mailboxes.find(mb => mb.id === sourceMailboxId);
+
+      // Cross-account moves are not supported
+      if (sourceMb?.accountId !== mailbox.accountId) {
+        return false;
+      }
+    }
+
+    return true;
+  }, [isDragging, mailbox, sourceMailboxId, draggedEmails]);
+
+  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    if (isValidTarget()) {
+      e.dataTransfer.dropEffect = "move";
+    } else {
+      e.dataTransfer.dropEffect = "none";
+    }
+  }, [isValidTarget]);
+
+  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Only leave if actually leaving the element (not entering a child)
+    const relatedTarget = e.relatedTarget as Node | null;
+    if (!e.currentTarget.contains(relatedTarget)) {
+      setIsOver(false);
+    }
+  }, []);
+
+  const handleDrop = useCallback(async (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsOver(false);
+
+    if (!client || !isValidTarget()) {
+      endDrag();
+      return;
+    }
+
+    try {
+      const emailIdsJson = e.dataTransfer.getData("application/x-email-ids");
+      if (!emailIdsJson) {
+        endDrag();
+        return;
+      }
+
+      const emailIds: string[] = JSON.parse(emailIdsJson);
+
+      // Get the destination mailbox ID (use originalId for shared folders)
+      const destinationId = mailbox.originalId || mailbox.id;
+
+      // Move emails one by one (store handles counter updates)
+      for (const emailId of emailIds) {
+        await moveToMailbox(client, emailId, destinationId);
+      }
+
+      // Clear selection if any selected emails were moved
+      if (emailIds.some(id => selectedEmailIds.has(id))) {
+        clearSelection();
+      }
+
+      // Refresh the current mailbox view
+      await fetchEmails(client, selectedMailbox);
+
+      // Show success toast
+      if (emailIds.length === 1) {
+        toast.success("Email moved", `Moved to ${mailbox.name}`);
+      } else {
+        toast.success("Emails moved", `${emailIds.length} emails moved to ${mailbox.name}`);
+      }
+
+      onDropComplete?.();
+    } catch (error) {
+      console.error("Failed to move emails:", error);
+      toast.error("Move failed", "Could not move emails to the selected folder");
+    } finally {
+      endDrag();
+    }
+  }, [client, mailbox, isValidTarget, moveToMailbox, selectedEmailIds, clearSelection, fetchEmails, selectedMailbox, endDrag, onDropComplete]);
+
+  const valid = isValidTarget();
+
+  return {
+    dropHandlers: {
+      onDragOver: handleDragOver,
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+    },
+    isDropTarget: isOver && isDragging,
+    isValidDropTarget: isOver && valid,
+    isInvalidDropTarget: isOver && isDragging && !valid,
+  };
+}
diff --git a/hooks/use-media-query.ts b/hooks/use-media-query.ts
new file mode 100644
index 00000000..fc245387
--- /dev/null
+++ b/hooks/use-media-query.ts
@@ -0,0 +1,76 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useUIStore } from "@/stores/ui-store";
+
+// Tailwind v4 breakpoints
+const BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+} as const;
+
+/**
+ * SSR-safe media query hook
+ * Returns false during SSR to prevent hydration mismatch
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
+
+    const handler = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, [query]);
+
+  return matches;
+}
+
+/**
+ * Hook to detect device type and sync with UI store
+ * Uses Tailwind breakpoints: mobile < 768px, tablet 768-1024px, desktop > 1024px
+ */
+export function useDeviceDetection() {
+  const { setDeviceType, isMobile, isTablet, isDesktop } = useUIStore();
+
+  const isMobileQuery = useMediaQuery(`(max-width: ${BREAKPOINTS.md - 1}px)`);
+  const isTabletQuery = useMediaQuery(
+    `(min-width: ${BREAKPOINTS.md}px) and (max-width: ${BREAKPOINTS.lg - 1}px)`
+  );
+  const isDesktopQuery = useMediaQuery(`(min-width: ${BREAKPOINTS.lg}px)`);
+
+  useEffect(() => {
+    setDeviceType(isMobileQuery, isTabletQuery, isDesktopQuery);
+  }, [isMobileQuery, isTabletQuery, isDesktopQuery, setDeviceType]);
+
+  return { isMobile, isTablet, isDesktop };
+}
+
+/**
+ * Convenience hooks for specific breakpoints
+ */
+export function useIsMobile() {
+  return useMediaQuery(`(max-width: ${BREAKPOINTS.md - 1}px)`);
+}
+
+export function useIsTablet() {
+  return useMediaQuery(
+    `(min-width: ${BREAKPOINTS.md}px) and (max-width: ${BREAKPOINTS.lg - 1}px)`
+  );
+}
+
+export function useIsDesktop() {
+  return useMediaQuery(`(min-width: ${BREAKPOINTS.lg}px)`);
+}
+
+export function useBreakpoint(breakpoint: keyof typeof BREAKPOINTS) {
+  return useMediaQuery(`(min-width: ${BREAKPOINTS[breakpoint]}px)`);
+}
diff --git a/i18n/request.ts b/i18n/request.ts
new file mode 100644
index 00000000..9807084a
--- /dev/null
+++ b/i18n/request.ts
@@ -0,0 +1,27 @@
+import { getRequestConfig } from 'next-intl/server';
+
+export const locales = ['en', 'fr'] as const;
+export type Locale = (typeof locales)[number];
+export const defaultLocale: Locale = 'en';
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  // Get the locale from the request or use default
+  let locale = await requestLocale || defaultLocale;
+
+  // Validate that the incoming `locale` parameter is valid
+  if (!(locales as readonly string[]).includes(locale)) {
+    locale = defaultLocale;
+  }
+
+  // Use static imports for better compatibility
+  const messages = locale === 'fr'
+    ? (await import('../locales/fr/common.json')).default
+    : (await import('../locales/en/common.json')).default;
+
+  return {
+    locale,
+    messages,
+    timeZone: 'Europe/Paris',
+    now: new Date()
+  };
+});
\ No newline at end of file
diff --git a/lib/debug.ts b/lib/debug.ts
new file mode 100644
index 00000000..4846b97f
--- /dev/null
+++ b/lib/debug.ts
@@ -0,0 +1,77 @@
+import { useSettingsStore } from '@/stores/settings-store';
+
+/**
+ * Debug logger that respects the debugMode setting.
+ * Use this instead of console.log for conditional debug output.
+ */
+export const debug = {
+  /**
+   * Log a debug message (only when debugMode is enabled)
+   */
+  log: (...args: unknown[]) => {
+    if (useSettingsStore.getState().debugMode) {
+      console.log('[DEBUG]', ...args);
+    }
+  },
+
+  /**
+   * Log a warning message (only when debugMode is enabled)
+   */
+  warn: (...args: unknown[]) => {
+    if (useSettingsStore.getState().debugMode) {
+      console.warn('[DEBUG]', ...args);
+    }
+  },
+
+  /**
+   * Log an error message (always logs, regardless of debugMode)
+   */
+  error: (...args: unknown[]) => {
+    console.error('[ERROR]', ...args);
+  },
+
+  /**
+   * Start a collapsed console group (only when debugMode is enabled)
+   */
+  group: (label: string) => {
+    if (useSettingsStore.getState().debugMode) {
+      console.group(`[DEBUG] ${label}`);
+    }
+  },
+
+  /**
+   * End a console group (only when debugMode is enabled)
+   */
+  groupEnd: () => {
+    if (useSettingsStore.getState().debugMode) {
+      console.groupEnd();
+    }
+  },
+
+  /**
+   * Start a performance timer (only when debugMode is enabled)
+   */
+  time: (label: string) => {
+    if (useSettingsStore.getState().debugMode) {
+      console.time(`[DEBUG] ${label}`);
+    }
+  },
+
+  /**
+   * End a performance timer (only when debugMode is enabled)
+   */
+  timeEnd: (label: string) => {
+    if (useSettingsStore.getState().debugMode) {
+      console.timeEnd(`[DEBUG] ${label}`);
+    }
+  },
+
+  /**
+   * Log a table (only when debugMode is enabled)
+   */
+  table: (data: unknown) => {
+    if (useSettingsStore.getState().debugMode) {
+      console.table(data);
+    }
+  }
+};
diff --git a/lib/email-headers.ts b/lib/email-headers.ts
new file mode 100644
index 00000000..a6ebd83f
--- /dev/null
+++ b/lib/email-headers.ts
@@ -0,0 +1,230 @@
+import { AuthenticationResults } from './jmap/types';
+
+/**
+ * Parse Authentication-Results header to extract SPF, DKIM, DMARC results
+ */
+export function parseAuthenticationResults(header: string): AuthenticationResults {
+  const results: AuthenticationResults = {};
+
+  type SpfResult = 'pass' | 'fail' | 'softfail' | 'neutral' | 'none' | 'temperror' | 'permerror';
+  type DkimResult = 'pass' | 'fail' | 'policy' | 'neutral' | 'temperror' | 'permerror';
+  type DmarcResult = 'pass' | 'fail' | 'none';
+  type DmarcPolicy = 'reject' | 'quarantine' | 'none';
+
+  // Parse SPF
+  const spfMatch = header.match(/spf=(\w+)(?:\s+\([^)]*\))?\s+(?:smtp\.(?:mailfrom|helo)=([^\s;]+))?/);
+  if (spfMatch) {
+    results.spf = {
+      result: spfMatch[1] as SpfResult,
+      domain: spfMatch[2]
+    };
+  }
+
+  // Parse DKIM
+  const dkimMatch = header.match(/dkim=(\w+)(?:\s+header\.d=([^\s]+))?(?:\s+header\.s=([^\s]+))?/);
+  if (dkimMatch) {
+    results.dkim = {
+      result: dkimMatch[1] as DkimResult,
+      domain: dkimMatch[2],
+      selector: dkimMatch[3]
+    };
+  }
+
+  // Parse DMARC
+  const dmarcMatch = header.match(/dmarc=(\w+)(?:\s+header\.from=([^\s]+))?(?:\s+policy\.dmarc=(\w+))?/);
+  if (dmarcMatch) {
+    results.dmarc = {
+      result: dmarcMatch[1] as DmarcResult,
+      domain: dmarcMatch[2],
+      policy: dmarcMatch[3] as DmarcPolicy | undefined
+    };
+  }
+
+  // Parse IP reverse lookup
+  const iprevMatch = header.match(/iprev=(\w+)(?:\s+policy\.iprev=([\d.]+))?/);
+  if (iprevMatch) {
+    results.iprev = {
+      result: iprevMatch[1] as 'pass' | 'fail',
+      ip: iprevMatch[2]
+    };
+  }
+
+  return results;
+}
+
+/**
+ * Parse spam score from X-Spam-Result or X-Spam-Status headers
+ */
+export function parseSpamScore(header: string): { score: number; status: string } | null {
+  // Try X-Spam-Status format: "No, score=-0.25"
+  const statusMatch = header.match(/^(Yes|No),?\s+score=([-\d.]+)/i);
+  if (statusMatch) {
+    return {
+      status: statusMatch[1].toLowerCase(),
+      score: parseFloat(statusMatch[2])
+    };
+  }
+
+  // Try to extract just the score
+  const scoreMatch = header.match(/score[=:]?\s*([-\d.]+)/i);
+  if (scoreMatch) {
+    const score = parseFloat(scoreMatch[1]);
+    return {
+      score,
+      status: score > 5 ? 'spam' : 'ham'
+    };
+  }
+
+  return null;
+}
+
+/**
+ * Parse Received headers to extract mail routing path
+ */
+interface ReceivedHeaderInfo {
+  from: string;
+  by: string;
+  timestamp?: string;
+  protocol?: string;
+  id?: string;
+}
+
+export function parseReceivedHeaders(headers: string[]): ReceivedHeaderInfo[] {
+  const path: ReceivedHeaderInfo[] = [];
+
+  for (const header of headers) {
+    const fromMatch = header.match(/from\s+([^\s]+)(?:\s+\([^)]+\))?/);
+    const byMatch = header.match(/by\s+([^\s]+)/);
+    const dateMatch = header.match(/;\s+(.+)$/);
+    const protoMatch = header.match(/with\s+(\w+)/);
+    const idMatch = header.match(/id\s+([^\s;]+)/);
+
+    if (fromMatch || byMatch) {
+      path.push({
+        from: fromMatch?.[1] || 'unknown',
+        by: byMatch?.[1] || 'unknown',
+        timestamp: dateMatch?.[1],
+        protocol: protoMatch?.[1],
+        id: idMatch?.[1]
+      });
+    }
+  }
+
+  return path;
+}
+
+/**
+ * Format bytes to human readable size
+ */
+export function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+}
+
+/**
+ * Get security status color and icon based on result
+ */
+export function getSecurityStatus(result?: string): {
+  color: string;
+  icon: 'check' | 'x' | 'alert' | 'minus';
+  bgColor: string;
+  borderColor: string;
+} {
+  switch (result) {
+    case 'pass':
+      return {
+        color: 'text-green-700 dark:text-green-400',
+        icon: 'check',
+        bgColor: 'bg-gray-50 dark:bg-gray-800',
+        borderColor: 'border-l-4 border-green-600 dark:border-green-500'
+      };
+    case 'fail':
+    case 'permerror':
+      return {
+        color: 'text-red-700 dark:text-red-400',
+        icon: 'x',
+        bgColor: 'bg-gray-50 dark:bg-gray-800',
+        borderColor: 'border-l-4 border-red-600 dark:border-red-500'
+      };
+    case 'softfail':
+    case 'neutral':
+    case 'temperror':
+      return {
+        color: 'text-amber-700 dark:text-amber-400',
+        icon: 'alert',
+        bgColor: 'bg-gray-50 dark:bg-gray-800',
+        borderColor: 'border-l-4 border-amber-600 dark:border-amber-500'
+      };
+    default:
+      return {
+        color: 'text-gray-700 dark:text-gray-400',
+        icon: 'minus',
+        bgColor: 'bg-gray-50 dark:bg-gray-800',
+        borderColor: 'border-l-4 border-gray-400 dark:border-gray-600'
+      };
+  }
+}
+
+/**
+ * Parse X-Spam-LLM header to extract AI verdict and explanation
+ */
+export function parseSpamLLM(header: string): { verdict: string; explanation: string } | null {
+  // Format: "LEGITIMATE (explanation)" or "SPAM (explanation)"
+  // Trim the header first to remove any leading/trailing whitespace
+  const trimmed = header.trim();
+  const match = trimmed.match(/^(LEGITIMATE|SPAM|SUSPICIOUS)\s*\((.+)\)\s*$/i);
+
+  if (match) {
+    return {
+      verdict: match[1].toUpperCase(),
+      explanation: match[2].trim()
+    };
+  }
+  return null;
+}
+
+/**
+ * Extract list headers (List-Unsubscribe, List-Id, etc.)
+ */
+interface ListHeaders {
+  listId?: string;
+  listUnsubscribe?: string;
+  listHelp?: string;
+  listPost?: string;
+}
+
+export function extractListHeaders(headers: Record<string, string | string[]>): ListHeaders {
+  const result: ListHeaders = {};
+
+  if (headers['List-Id']) {
+    result.listId = Array.isArray(headers['List-Id'])
+      ? headers['List-Id'][0]
+      : headers['List-Id'];
+  }
+
+  if (headers['List-Unsubscribe']) {
+    const unsub = Array.isArray(headers['List-Unsubscribe'])
+      ? headers['List-Unsubscribe'][0]
+      : headers['List-Unsubscribe'];
+    // Extract URL from <url> format
+    const match = unsub.match(/<([^>]+)>/);
+    result.listUnsubscribe = match ? match[1] : unsub;
+  }
+
+  if (headers['List-Help']) {
+    result.listHelp = Array.isArray(headers['List-Help'])
+      ? headers['List-Help'][0]
+      : headers['List-Help'];
+  }
+
+  if (headers['List-Post']) {
+    result.listPost = Array.isArray(headers['List-Post'])
+      ? headers['List-Post'][0]
+      : headers['List-Post'];
+  }
+
+  return result;
+}
\ No newline at end of file
diff --git a/lib/error-reporting.ts b/lib/error-reporting.ts
new file mode 100644
index 00000000..f3188eb0
--- /dev/null
+++ b/lib/error-reporting.ts
@@ -0,0 +1,43 @@
+import { debug } from "./debug";
+
+interface ErrorReport {
+  error: Error;
+  errorInfo?: React.ErrorInfo;
+  zone: string;
+  timestamp: Date;
+  userAgent: string;
+  url: string;
+}
+
+/**
+ * Report an error to the logging system.
+ * In debug mode, logs detailed information to the console.
+ * Future: Can be extended to send to external error tracking services.
+ */
+export function reportError(
+  error: Error,
+  zone: string,
+  errorInfo?: React.ErrorInfo
+): void {
+  const report: ErrorReport = {
+    error,
+    errorInfo,
+    zone,
+    timestamp: new Date(),
+    userAgent: typeof navigator !== "undefined" ? navigator.userAgent : "SSR",
+    url: typeof window !== "undefined" ? window.location.href : "",
+  };
+
+  // Always log errors
+  debug.error(`[ErrorBoundary:${zone}]`, error.message, {
+    stack: error.stack,
+    componentStack: errorInfo?.componentStack,
+    url: report.url,
+    timestamp: report.timestamp.toISOString(),
+  });
+
+  // Future: Send to error tracking service (Sentry, etc.)
+  // if (process.env.NODE_ENV === 'production') {
+  //   sendToErrorService(report);
+  // }
+}
diff --git a/lib/jmap/client.ts b/lib/jmap/client.ts
new file mode 100644
index 00000000..bb25dc34
--- /dev/null
+++ b/lib/jmap/client.ts
@@ -0,0 +1,1437 @@
+import type { Email, Mailbox, StateChange, AccountStates, Thread } from "./types";
+
+// JMAP protocol types - these are intentionally flexible due to server variations
+interface JMAPSession {
+  apiUrl: string;
+  downloadUrl: string;
+  uploadUrl?: string;
+  eventSourceUrl?: string;
+  primaryAccounts?: Record<string, string>;
+  accounts?: Record<string, JMAPAccount>;
+  capabilities?: Record<string, unknown>;
+}
+
+interface JMAPAccount {
+  name?: string;
+  isPersonal?: boolean;
+  isReadOnly?: boolean;
+  accountCapabilities?: Record<string, unknown>;
+}
+
+interface JMAPQuota {
+  resourceType?: string;
+  scope?: string;
+  used?: number;
+  hardLimit?: number;
+  limit?: number;
+}
+
+interface JMAPMailbox {
+  id: string;
+  name: string;
+  parentId?: string | null;
+  role?: string | null;
+  totalEmails?: number;
+  unreadEmails?: number;
+  totalThreads?: number;
+  unreadThreads?: number;
+  sortOrder?: number;
+  isSubscribed?: boolean;
+  myRights?: Record<string, boolean>;
+}
+
+interface JMAPEmailHeader {
+  name: string;
+  value: string;
+}
+
+// Generic JMAP method call type
+type JMAPMethodCall = [string, Record<string, unknown>, string];
+
+// JMAP response types - using flexible types due to protocol variations
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type JMAPResponseResult = Record<string, any>;
+
+interface JMAPResponse {
+  methodResponses: Array<[string, JMAPResponseResult, string]>;
+}
+
+export class JMAPClient {
+  private serverUrl: string;
+  private username: string;
+  private password: string;
+  private authHeader: string;
+  private apiUrl: string = "";
+  private accountId: string = "";
+  private downloadUrl: string = "";
+  private capabilities: Record<string, unknown> = {};
+  private session: JMAPSession | null = null;
+  private lastPingTime: number = 0;
+  private pingInterval: NodeJS.Timeout | null = null;
+  private accounts: Record<string, JMAPAccount> = {}; // All accounts (primary + shared)
+  private eventSource: EventSource | null = null;
+  private stateChangeCallback: ((change: StateChange) => void) | null = null;
+  private lastStates: AccountStates = {};
+
+  constructor(serverUrl: string, username: string, password: string) {
+    this.serverUrl = serverUrl.replace(/\/$/, '');
+    this.username = username;
+    this.password = password;
+    this.authHeader = `Basic ${btoa(`${username}:${password}`)}`;
+  }
+
+  async connect(): Promise<void> {
+    // Get the session first
+    const sessionUrl = `${this.serverUrl}/.well-known/jmap`;
+
+    try {
+      const sessionResponse = await fetch(sessionUrl, {
+        method: 'GET',
+        headers: {
+          'Authorization': this.authHeader,
+        },
+      });
+
+      if (!sessionResponse.ok) {
+        if (sessionResponse.status === 401) {
+          throw new Error('Invalid username or password');
+        }
+        throw new Error(`Failed to get session: ${sessionResponse.status}`);
+      }
+
+      const session = await sessionResponse.json();
+
+      // Store the full session for reference
+      this.session = session;
+
+      // Extract and store capabilities
+      this.capabilities = session.capabilities || {};
+
+      // Extract the API URL
+      this.apiUrl = session.apiUrl;
+
+      // Extract the download URL
+      this.downloadUrl = session.downloadUrl;
+
+      // Extract and store all accounts (primary + shared)
+      this.accounts = session.accounts || {};
+
+      // Extract the primary account ID
+      const mailAccount = session.primaryAccounts?.["urn:ietf:params:jmap:mail"];
+      if (mailAccount) {
+        this.accountId = mailAccount;
+      } else {
+        // Try to find any account
+        if (this.accounts && Object.keys(this.accounts).length > 0) {
+          this.accountId = Object.keys(this.accounts)[0];
+        } else {
+          throw new Error('No mail account found in session');
+        }
+      }
+
+      // Start keep-alive mechanism
+      this.startKeepAlive();
+    } catch (error) {
+      console.error('Connection failed:', error);
+      throw error;
+    }
+  }
+
+  private startKeepAlive(): void {
+    // Stop any existing interval
+    this.stopKeepAlive();
+
+    // Ping every 30 seconds to keep the connection alive
+    const PING_INTERVAL = 30000; // 30 seconds
+
+    this.pingInterval = setInterval(async () => {
+      try {
+        await this.ping();
+      } catch (error) {
+        console.error('Keep-alive ping failed:', error);
+        // If ping fails, try to reconnect
+        try {
+          await this.reconnect();
+        } catch (reconnectError) {
+          console.error('Reconnection failed:', reconnectError);
+        }
+      }
+    }, PING_INTERVAL);
+  }
+
+  private stopKeepAlive(): void {
+    if (this.pingInterval) {
+      clearInterval(this.pingInterval);
+      this.pingInterval = null;
+    }
+  }
+
+  async ping(): Promise<void> {
+    if (!this.apiUrl) {
+      throw new Error('Not connected');
+    }
+
+    const now = Date.now();
+
+    // Use Echo method for lightweight ping
+    const response = await this.request([
+      ["Core/echo", { ping: "pong" }, "0"]
+    ]);
+
+    if (response.methodResponses?.[0]?.[0] === "Core/echo") {
+      this.lastPingTime = now;
+    } else {
+      throw new Error('Ping failed');
+    }
+  }
+
+  async reconnect(): Promise<void> {
+    await this.connect();
+  }
+
+  disconnect(): void {
+    this.stopKeepAlive();
+    this.closePushNotifications();
+    this.apiUrl = "";
+    this.accountId = "";
+    this.session = null;
+    this.capabilities = {};
+  }
+
+  private async request(methodCalls: JMAPMethodCall[]): Promise<JMAPResponse> {
+    if (!this.apiUrl) {
+      throw new Error('Not connected. Call connect() first.');
+    }
+
+    const requestBody = {
+      using: ["urn:ietf:params:jmap:core", "urn:ietf:params:jmap:mail"],
+      methodCalls: methodCalls,
+    };
+
+    const response = await fetch(this.apiUrl, {
+      method: 'POST',
+      headers: {
+        'Authorization': this.authHeader,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(requestBody),
+    });
+
+    const responseText = await response.text();
+
+    if (!response.ok) {
+      console.error('Request failed:', response.status, responseText);
+      throw new Error(`Request failed: ${response.status} - ${responseText.substring(0, 200)}`);
+    }
+
+    let data;
+    try {
+      data = JSON.parse(responseText);
+    } catch {
+      console.error('Failed to parse response:', responseText);
+      throw new Error('Invalid JSON response from server');
+    }
+
+    return data;
+  }
+
+  async getQuota(): Promise<{ used: number; total: number } | null> {
+    try {
+      const response = await this.request([
+        ["Quota/get", {
+          accountId: this.accountId,
+        }, "0"]
+      ]);
+
+      if (response.methodResponses?.[0]?.[0] === "Quota/get") {
+        const quotas = (response.methodResponses[0][1].list || []) as JMAPQuota[];
+        // Find the mail quota if it exists
+        const mailQuota = quotas.find((q) => q.resourceType === "mail" || q.scope === "mail");
+
+        if (mailQuota) {
+          return {
+            used: mailQuota.used ?? 0,
+            total: mailQuota.hardLimit ?? mailQuota.limit ?? 0
+          };
+        }
+      }
+
+      return null;
+    } catch {
+      return null;
+    }
+  }
+
+  async getMailboxes(): Promise<Mailbox[]> {
+    try {
+      const response = await this.request([
+        ["Mailbox/get", {
+          accountId: this.accountId,
+        }, "0"]
+      ]);
+
+      if (response.methodResponses?.[0]?.[0] === "Mailbox/get") {
+        const rawMailboxes = (response.methodResponses[0][1].list || []) as JMAPMailbox[];
+
+        // Map and ensure all required fields are present
+        const mailboxes = rawMailboxes.map((mb) => {
+          return {
+            id: mb.id,
+            originalId: undefined, // Primary account uses original IDs
+            name: mb.name,
+            parentId: mb.parentId || undefined,
+            role: mb.role || undefined,
+            sortOrder: mb.sortOrder ?? 0,
+            totalEmails: mb.totalEmails ?? 0,
+            unreadEmails: mb.unreadEmails ?? 0,
+            totalThreads: mb.totalThreads ?? 0,
+            unreadThreads: mb.unreadThreads ?? 0,
+            myRights: mb.myRights || {
+              mayReadItems: true,
+              mayAddItems: true,
+              mayRemoveItems: true,
+              maySetSeen: true,
+              maySetKeywords: true,
+              mayCreateChild: true,
+              mayRename: true,
+              mayDelete: true,
+              maySubmit: true,
+            },
+            isSubscribed: mb.isSubscribed ?? true,
+            // Account info for primary account
+            accountId: this.accountId,
+            accountName: this.accounts[this.accountId]?.name || this.username,
+            isShared: false,
+          } as Mailbox;
+        });
+
+        return mailboxes;
+      }
+
+      throw new Error('Unexpected response format');
+    } catch (error) {
+      console.error('Failed to get mailboxes:', error);
+      // Return default inbox with all required fields
+      return [{
+        id: 'INBOX',
+        originalId: undefined,
+        name: 'Inbox',
+        role: 'inbox',
+        sortOrder: 0,
+        totalEmails: 0,
+        unreadEmails: 0,
+        totalThreads: 0,
+        unreadThreads: 0,
+        myRights: {
+          mayReadItems: true,
+          mayAddItems: true,
+          mayRemoveItems: true,
+          maySetSeen: true,
+          maySetKeywords: true,
+          mayCreateChild: true,
+          mayRename: true,
+          mayDelete: true,
+          maySubmit: true,
+        },
+        isSubscribed: true,
+        accountId: this.accountId,
+        accountName: this.username,
+        isShared: false,
+      }] as Mailbox[];
+    }
+  }
+
+  async getAllMailboxes(): Promise<Mailbox[]> {
+    try {
+      const allMailboxes: Mailbox[] = [];
+
+      // Get all account IDs
+      const accountIds = Object.keys(this.accounts);
+
+      // If no accounts, fallback to primary only
+      if (accountIds.length === 0) {
+        return this.getMailboxes();
+      }
+
+      // Fetch mailboxes for each account
+      for (const accountId of accountIds) {
+        const account = this.accounts[accountId];
+        const isPrimary = accountId === this.accountId;
+
+        try {
+          const response = await this.request([
+            ["Mailbox/get", {
+              accountId: accountId,
+            }, "0"]
+          ]);
+
+          if (response.methodResponses?.[0]?.[0] === "Mailbox/get") {
+            const rawMailboxes = (response.methodResponses[0][1].list || []) as JMAPMailbox[];
+
+            // Map mailboxes with account info
+            const mailboxes = rawMailboxes.map((mb) => {
+              return {
+                id: isPrimary ? mb.id : `${accountId}:${mb.id}`, // Namespace shared mailbox IDs
+                originalId: mb.id, // Keep original ID for JMAP queries
+                name: mb.name,
+                parentId: mb.parentId ? (isPrimary ? mb.parentId : `${accountId}:${mb.parentId}`) : undefined,
+                role: mb.role || undefined,
+                sortOrder: mb.sortOrder ?? 0,
+                totalEmails: mb.totalEmails ?? 0,
+                unreadEmails: mb.unreadEmails ?? 0,
+                totalThreads: mb.totalThreads ?? 0,
+                unreadThreads: mb.unreadThreads ?? 0,
+                myRights: mb.myRights || {
+                  mayReadItems: true,
+                  mayAddItems: true,
+                  mayRemoveItems: true,
+                  maySetSeen: true,
+                  maySetKeywords: true,
+                  mayCreateChild: true,
+                  mayRename: true,
+                  mayDelete: true,
+                  maySubmit: true,
+                },
+                isSubscribed: mb.isSubscribed ?? true,
+                // Account info
+                accountId: accountId,
+                accountName: account?.name || (isPrimary ? this.username : accountId),
+                isShared: !isPrimary,
+              } as Mailbox;
+            });
+
+            allMailboxes.push(...mailboxes);
+          }
+        } catch (error) {
+          console.error(`Failed to fetch mailboxes for account ${accountId}:`, error);
+          // Continue with other accounts even if one fails
+        }
+      }
+
+      return allMailboxes;
+    } catch (error) {
+      console.error("Failed to fetch all mailboxes:", error);
+      // Fallback to primary account mailboxes
+      return this.getMailboxes();
+    }
+  }
+
+  async getEmails(mailboxId?: string, accountId?: string, limit: number = 50, position: number = 0): Promise<{ emails: Email[], hasMore: boolean, total: number }> {
+    try {
+      // Use provided accountId or fallback to primary account
+      const targetAccountId = accountId || this.accountId;
+
+      // Build filter - only add inMailbox if we have a mailboxId
+      const filter: { inMailbox?: string } = {};
+      if (mailboxId && mailboxId !== '') {
+        filter.inMailbox = mailboxId;
+      }
+
+      const response = await this.request([
+        ["Email/query", {
+          accountId: targetAccountId,
+          filter: filter,
+          sort: [{ property: "receivedAt", isAscending: false }],
+          limit: limit,
+          position: position,
+        }, "0"],
+        ["Email/get", {
+          accountId: targetAccountId,
+          "#ids": {
+            resultOf: "0",
+            name: "Email/query",
+            path: "/ids",
+          },
+          properties: [
+            "id",
+            "threadId",
+            "mailboxIds",
+            "keywords",
+            "size",
+            "receivedAt",
+            "from",
+            "to",
+            "cc",
+            "subject",
+            "preview",
+            "hasAttachment",
+          ],
+        }, "1"],
+      ]);
+
+      const queryResponse = response.methodResponses?.[0]?.[1];
+      const getResponse = response.methodResponses?.[1]?.[1];
+
+      if (response.methodResponses?.[1]?.[0] === "Email/get" && getResponse) {
+        const emails = getResponse.list || [];
+
+        // Stalwart doesn't return 'total', so we use a different strategy:
+        // If we got exactly 'limit' emails, there might be more
+        // If we got fewer, we've reached the end
+        const total = queryResponse?.total || 0;
+        const hasMore = total > 0
+          ? (position + emails.length) < total  // Use total if available
+          : emails.length === limit;             // Otherwise, check if we got a full page
+
+        // If fetching from a shared account, namespace the mailboxIds to match our store
+        const isSharedAccount = accountId && accountId !== this.accountId;
+        if (isSharedAccount) {
+          emails.forEach((email: Email) => {
+            if (email.mailboxIds) {
+              const namespacedMailboxIds: Record<string, boolean> = {};
+              Object.keys(email.mailboxIds).forEach(mbId => {
+                namespacedMailboxIds[`${accountId}:${mbId}`] = email.mailboxIds[mbId];
+              });
+              email.mailboxIds = namespacedMailboxIds;
+            }
+          });
+        }
+
+        return { emails, hasMore, total };
+      }
+
+      return { emails: [], hasMore: false, total: 0 };
+    } catch (error) {
+      console.error('Failed to get emails:', error);
+      return { emails: [], hasMore: false, total: 0 };
+    }
+  }
+
+  async getEmail(emailId: string, accountId?: string): Promise<Email | null> {
+    try {
+      // Use provided accountId or fallback to primary account
+      const targetAccountId = accountId || this.accountId;
+
+      const response = await this.request([
+        ["Email/get", {
+          accountId: targetAccountId,
+          ids: [emailId],
+          properties: [
+            "id",
+            "threadId",
+            "mailboxIds",
+            "keywords",
+            "size",
+            "receivedAt",
+            "sentAt",
+            "from",
+            "to",
+            "cc",
+            "bcc",
+            "replyTo",
+            "subject",
+            "preview",
+            "textBody",
+            "htmlBody",
+            "bodyValues",
+            "hasAttachment",
+            "attachments",
+            "messageId",
+            "inReplyTo",
+            "references",
+            "headers",
+          ],
+          fetchTextBodyValues: true,
+          fetchHTMLBodyValues: true,
+          fetchAllBodyValues: true,
+          maxBodyValueBytes: 256000,
+        }, "0"],
+      ]);
+
+      if (response.methodResponses?.[0]?.[0] === "Email/get") {
+        const emails = response.methodResponses[0][1].list || [];
+        const email = emails[0];
+
+        if (email) {
+          // If fetching from a shared account, namespace the mailboxIds to match our store
+          const isSharedAccount = accountId && accountId !== this.accountId;
+          if (isSharedAccount && email.mailboxIds) {
+            const namespacedMailboxIds: Record<string, boolean> = {};
+            Object.keys(email.mailboxIds).forEach(mbId => {
+              namespacedMailboxIds[`${accountId}:${mbId}`] = email.mailboxIds[mbId];
+            });
+            email.mailboxIds = namespacedMailboxIds;
+          }
+
+          // Parse headers if available
+          if (email.headers) {
+            // Import the parsing functions
+            const { parseAuthenticationResults, parseSpamScore, parseSpamLLM } = await import('@/lib/email-headers');
+
+            // Convert headers array to Record format if needed
+            let headersRecord: Record<string, string | string[]>;
+            if (Array.isArray(email.headers)) {
+              headersRecord = {};
+              (email.headers as JMAPEmailHeader[]).forEach((header) => {
+                if (header && header.name && header.value) {
+                  // If header already exists, convert to array or append
+                  if (headersRecord[header.name]) {
+                    if (Array.isArray(headersRecord[header.name])) {
+                      (headersRecord[header.name] as string[]).push(header.value);
+                    } else {
+                      headersRecord[header.name] = [headersRecord[header.name] as string, header.value];
+                    }
+                  } else {
+                    headersRecord[header.name] = header.value;
+                  }
+                }
+              });
+              // Replace array with record for easier access
+              email.headers = headersRecord;
+            } else {
+              headersRecord = email.headers as Record<string, string | string[]>;
+            }
+
+            // Parse Authentication-Results header
+            const authResultsHeader = headersRecord['Authentication-Results'];
+            if (authResultsHeader) {
+              const headerValue = Array.isArray(authResultsHeader) ? authResultsHeader[0] : authResultsHeader;
+              email.authenticationResults = parseAuthenticationResults(headerValue);
+            }
+
+            // Parse Spam headers
+            const spamHeaders = ['X-Spam-Status', 'X-Spam-Result', 'X-Rspamd-Score'];
+            for (const header of spamHeaders) {
+              if (headersRecord[header]) {
+                const headerValue = Array.isArray(headersRecord[header]) ? headersRecord[header][0] : headersRecord[header];
+                const spamResult = parseSpamScore(headerValue as string);
+                if (spamResult) {
+                  email.spamScore = spamResult.score;
+                  email.spamStatus = spamResult.status;
+                  break;
+                }
+              }
+            }
+
+            // Parse X-Spam-LLM header
+            if (headersRecord['X-Spam-LLM']) {
+              const llmHeader = Array.isArray(headersRecord['X-Spam-LLM'])
+                ? headersRecord['X-Spam-LLM'][0]
+                : headersRecord['X-Spam-LLM'];
+              const llmResult = parseSpamLLM(llmHeader as string);
+              if (llmResult) {
+                email.spamLLM = llmResult;
+              }
+            }
+          }
+
+          return email;
+        }
+
+        return null;
+      }
+
+      return null;
+    } catch (error) {
+      console.error('Failed to get email:', error);
+      return null;
+    }
+  }
+
+  async markAsRead(emailId: string, read: boolean = true, accountId?: string): Promise<void> {
+    // Use provided accountId or fallback to primary account
+    const targetAccountId = accountId || this.accountId;
+
+    await this.request([
+      ["Email/set", {
+        accountId: targetAccountId,
+        update: {
+          [emailId]: {
+            "keywords/$seen": read,
+          },
+        },
+      }, "0"],
+    ]);
+  }
+
+  async batchMarkAsRead(emailIds: string[], read: boolean = true): Promise<void> {
+    if (emailIds.length === 0) return;
+
+    const updates: Record<string, { "keywords/$seen": boolean }> = {};
+    emailIds.forEach(id => {
+      updates[id] = {
+        "keywords/$seen": read,
+      };
+    });
+
+    await this.request([
+      ["Email/set", {
+        accountId: this.accountId,
+        update: updates,
+      }, "0"],
+    ]);
+  }
+
+  async toggleStar(emailId: string, starred: boolean): Promise<void> {
+    await this.request([
+      ["Email/set", {
+        accountId: this.accountId,
+        update: {
+          [emailId]: {
+            "keywords/$flagged": starred,
+          },
+        },
+      }, "0"],
+    ]);
+  }
+
+  async updateEmailKeywords(emailId: string, keywords: Record<string, boolean>): Promise<void> {
+    await this.request([
+      ["Email/set", {
+        accountId: this.accountId,
+        update: {
+          [emailId]: {
+            keywords,
+          },
+        },
+      }, "0"],
+    ]);
+  }
+
+  async deleteEmail(emailId: string): Promise<void> {
+    await this.request([
+      ["Email/set", {
+        accountId: this.accountId,
+        destroy: [emailId],
+      }, "0"],
+    ]);
+  }
+
+  async moveToTrash(emailId: string, trashMailboxId: string, accountId?: string): Promise<void> {
+    const targetAccountId = accountId || this.accountId;
+    await this.request([
+      ["Email/set", {
+        accountId: targetAccountId,
+        update: {
+          [emailId]: {
+            mailboxIds: { [trashMailboxId]: true },
+          },
+        },
+      }, "0"],
+    ]);
+  }
+
+  async batchDeleteEmails(emailIds: string[]): Promise<void> {
+    if (emailIds.length === 0) return;
+
+    await this.request([
+      ["Email/set", {
+        accountId: this.accountId,
+        destroy: emailIds,
+      }, "0"],
+    ]);
+  }
+
+  async batchMoveEmails(emailIds: string[], toMailboxId: string): Promise<void> {
+    if (emailIds.length === 0) return;
+
+    const updates: Record<string, { mailboxIds: Record<string, boolean> }> = {};
+    emailIds.forEach(id => {
+      updates[id] = {
+        mailboxIds: { [toMailboxId]: true },
+      };
+    });
+
+    await this.request([
+      ["Email/set", {
+        accountId: this.accountId,
+        update: updates,
+      }, "0"],
+    ]);
+  }
+
+  async moveEmail(emailId: string, toMailboxId: string): Promise<void> {
+    await this.request([
+      ["Email/set", {
+        accountId: this.accountId,
+        update: {
+          [emailId]: {
+            mailboxIds: { [toMailboxId]: true },
+          },
+        },
+      }, "0"],
+    ]);
+  }
+
+  async searchEmails(query: string, limit: number = 50): Promise<Email[]> {
+    try {
+      const response = await this.request([
+        ["Email/query", {
+          accountId: this.accountId,
+          filter: {
+            text: query,
+          },
+          sort: [{ property: "receivedAt", isAscending: false }],
+          limit: limit,
+        }, "0"],
+        ["Email/get", {
+          accountId: this.accountId,
+          "#ids": {
+            resultOf: "0",
+            name: "Email/query",
+            path: "/ids",
+          },
+          properties: [
+            "id",
+            "threadId",
+            "mailboxIds",
+            "keywords",
+            "size",
+            "receivedAt",
+            "from",
+            "to",
+            "cc",
+            "subject",
+            "preview",
+            "hasAttachment",
+          ],
+        }, "1"],
+      ]);
+
+      if (response.methodResponses?.[1]?.[0] === "Email/get") {
+        return response.methodResponses[1][1].list || [];
+      }
+
+      return [];
+    } catch (error) {
+      console.error('Search failed:', error);
+      return [];
+    }
+  }
+
+  // Thread methods for conversation view
+  async getThread(threadId: string, accountId?: string): Promise<Thread | null> {
+    try {
+      const targetAccountId = accountId || this.accountId;
+
+      const response = await this.request([
+        ["Thread/get", {
+          accountId: targetAccountId,
+          ids: [threadId],
+        }, "0"],
+      ]);
+
+      if (response.methodResponses?.[0]?.[0] === "Thread/get") {
+        const threads = response.methodResponses[0][1].list || [];
+        return threads[0] || null;
+      }
+
+      return null;
+    } catch (error) {
+      console.error('Failed to get thread:', error);
+      return null;
+    }
+  }
+
+  async getThreadEmails(threadId: string, accountId?: string): Promise<Email[]> {
+    try {
+      const targetAccountId = accountId || this.accountId;
+
+      // First get the thread to find all email IDs
+      const thread = await this.getThread(threadId, accountId);
+      if (!thread || !thread.emailIds || thread.emailIds.length === 0) {
+        return [];
+      }
+
+      // Fetch all emails in the thread
+      const response = await this.request([
+        ["Email/get", {
+          accountId: targetAccountId,
+          ids: thread.emailIds,
+          properties: [
+            "id",
+            "threadId",
+            "mailboxIds",
+            "keywords",
+            "size",
+            "receivedAt",
+            "from",
+            "to",
+            "cc",
+            "subject",
+            "preview",
+            "hasAttachment",
+          ],
+        }, "0"],
+      ]);
+
+      if (response.methodResponses?.[0]?.[0] === "Email/get") {
+        const emails = response.methodResponses[0][1].list || [];
+
+        // If fetching from a shared account, namespace the mailboxIds
+        const isSharedAccount = accountId && accountId !== this.accountId;
+        if (isSharedAccount) {
+          emails.forEach((email: Email) => {
+            if (email.mailboxIds) {
+              const namespacedMailboxIds: Record<string, boolean> = {};
+              Object.keys(email.mailboxIds).forEach(mbId => {
+                namespacedMailboxIds[`${accountId}:${mbId}`] = email.mailboxIds[mbId];
+              });
+              email.mailboxIds = namespacedMailboxIds;
+            }
+          });
+        }
+
+        // Sort by receivedAt descending (newest first)
+        return emails.sort((a: Email, b: Email) =>
+          new Date(b.receivedAt).getTime() - new Date(a.receivedAt).getTime()
+        );
+      }
+
+      return [];
+    } catch (error) {
+      console.error('Failed to get thread emails:', error);
+      return [];
+    }
+  }
+
+  async createDraft(
+    to: string[],
+    subject: string,
+    body: string,
+    cc?: string[],
+    bcc?: string[],
+    draftId?: string,
+    attachments?: Array<{ blobId: string; name: string; type: string; size: number }>
+  ): Promise<string> {
+    // Find the drafts mailbox
+    const mailboxes = await this.getMailboxes();
+    const draftsMailbox = mailboxes.find(mb => mb.role === 'drafts');
+
+    if (!draftsMailbox) {
+      throw new Error('No drafts mailbox found');
+    }
+
+    const emailId = `draft-${Date.now()}`;
+
+    // Build email object with attachments if provided
+    interface EmailDraft {
+      from: { email: string }[];
+      to: { email: string }[];
+      cc?: { email: string }[];
+      bcc?: { email: string }[];
+      subject: string;
+      keywords: Record<string, boolean>;
+      mailboxIds: Record<string, boolean>;
+      bodyValues: Record<string, { value: string }>;
+      textBody: { partId: string }[];
+      attachments?: { blobId: string; type: string; name: string; disposition: string }[];
+    }
+    const emailData: EmailDraft = {
+      from: [{ email: this.username }],
+      to: to.map(email => ({ email })),
+      cc: cc?.map(email => ({ email })),
+      bcc: bcc?.map(email => ({ email })),
+      subject: subject,
+      keywords: { "$draft": true },
+      mailboxIds: { [draftsMailbox.id]: true },
+      bodyValues: {
+        "1": {
+          value: body,
+        },
+      },
+      textBody: [
+        {
+          partId: "1",
+        },
+      ],
+    };
+
+    // Add attachments if provided
+    if (attachments && attachments.length > 0) {
+      emailData.attachments = attachments.map(att => ({
+        blobId: att.blobId,
+        type: att.type,
+        name: att.name,
+        disposition: "attachment",
+      }));
+    }
+
+    // If updating an existing draft, destroy it first then create new one
+    // This is simpler than trying to update individual fields
+    const methodCalls: JMAPMethodCall[] = [];
+
+    if (draftId) {
+      // Delete old draft
+      methodCalls.push(["Email/set", {
+        accountId: this.accountId,
+        destroy: [draftId],
+      }, "0"]);
+
+      // Create new draft
+      methodCalls.push(["Email/set", {
+        accountId: this.accountId,
+        create: {
+          [emailId]: emailData
+        },
+      }, "1"]);
+    } else {
+      // Just create new draft
+      methodCalls.push(["Email/set", {
+        accountId: this.accountId,
+        create: {
+          [emailId]: emailData
+        },
+      }, "0"]);
+    }
+
+    const response = await this.request(methodCalls);
+
+    console.log('Draft save response:', JSON.stringify(response, null, 2));
+
+    // If we're updating (destroy + create), check the second response
+    // Otherwise check the first response
+    const responseIndex = draftId ? 1 : 0;
+
+    if (response.methodResponses?.[responseIndex]?.[0] === "Email/set") {
+      const result = response.methodResponses[responseIndex][1];
+
+      // Check for errors
+      if (result.notCreated || result.notUpdated) {
+        const errors = result.notCreated || result.notUpdated;
+        const firstError = Object.values(errors)[0] as { description?: string; type?: string };
+        console.error('Draft save error:', firstError);
+        throw new Error(firstError?.description || firstError?.type || 'Failed to save draft');
+      }
+
+      if (result.created?.[emailId]) {
+        console.log('Draft created successfully:', result.created[emailId].id);
+        return result.created[emailId].id;
+      }
+    }
+
+    console.error('Unexpected draft save response:', response);
+    throw new Error('Failed to save draft');
+  }
+
+  async sendEmail(
+    to: string[],
+    subject: string,
+    body: string,
+    cc?: string[],
+    bcc?: string[],
+    draftId?: string
+  ): Promise<void> {
+    const emailId = draftId || `draft-${Date.now()}`;
+
+    // Find the Sent mailbox
+    const mailboxes = await this.getMailboxes();
+    const sentMailbox = mailboxes.find(mb => mb.role === 'sent');
+
+    if (!sentMailbox) {
+      throw new Error('No sent mailbox found');
+    }
+
+    // Get the identity ID - fetch identities from server
+    const identityResponse = await this.request([
+      ["Identity/get", {
+        accountId: this.accountId,
+      }, "0"]
+    ]);
+
+    let identityId = this.accountId; // fallback
+
+    if (identityResponse.methodResponses?.[0]?.[0] === "Identity/get") {
+      const identities = (identityResponse.methodResponses[0][1].list || []) as { id: string; email: string }[];
+
+      if (identities.length > 0) {
+        // Use the first identity (or find one matching the username)
+        const matchingIdentity = identities.find((id) => id.email === this.username);
+        identityId = matchingIdentity?.id || identities[0].id;
+      }
+    }
+
+    const methodCalls: JMAPMethodCall[] = [];
+
+    // If we have a draftId, update it and remove draft keyword, move to Sent
+    // Otherwise, create a new email in Sent
+    if (draftId) {
+      methodCalls.push(["Email/set", {
+        accountId: this.accountId,
+        update: {
+          [draftId]: {
+            "keywords/$draft": false,
+            "keywords/$seen": true,
+            mailboxIds: { [sentMailbox.id]: true },
+          },
+        },
+      }, "0"]);
+      methodCalls.push(["EmailSubmission/set", {
+        accountId: this.accountId,
+        create: {
+          "1": {
+            emailId: draftId,
+            identityId: identityId,
+          },
+        },
+      }, "1"]);
+    } else {
+      methodCalls.push(["Email/set", {
+        accountId: this.accountId,
+        create: {
+          [emailId]: {
+            from: [{ email: this.username }],
+            to: to.map(email => ({ email })),
+            cc: cc?.map(email => ({ email })),
+            bcc: bcc?.map(email => ({ email })),
+            subject: subject,
+            keywords: { "$seen": true },
+            mailboxIds: { [sentMailbox.id]: true },
+            bodyValues: {
+              "1": {
+                value: body,
+              },
+            },
+            textBody: [
+              {
+                partId: "1",
+              },
+            ],
+          },
+        },
+      }, "0"]);
+      methodCalls.push(["EmailSubmission/set", {
+        accountId: this.accountId,
+        create: {
+          "1": {
+            emailId: `#${emailId}`,
+            identityId: identityId,
+          },
+        },
+      }, "1"]);
+    }
+
+    const response = await this.request(methodCalls);
+
+    // Check for errors in the response
+    if (response.methodResponses) {
+      for (const [methodName, result] of response.methodResponses) {
+        if (methodName.endsWith('/error')) {
+          console.error('JMAP method error:', result);
+          throw new Error(result.description || `Failed to send email: ${result.type}`);
+        }
+
+        // Check for notCreated/notUpdated
+        if (result.notCreated || result.notUpdated) {
+          const errors = result.notCreated || result.notUpdated;
+          const firstError = Object.values(errors)[0] as { description?: string; type?: string };
+          console.error('Email send error:', firstError);
+          throw new Error(firstError?.description || firstError?.type || 'Failed to send email');
+        }
+      }
+    }
+  }
+
+  async uploadBlob(file: File): Promise<{ blobId: string; size: number; type: string }> {
+    if (!this.session) {
+      throw new Error('Not connected. Call connect() first.');
+    }
+
+    // Get upload URL from session
+    const uploadUrl = this.session.uploadUrl;
+    if (!uploadUrl) {
+      throw new Error('Upload URL not available');
+    }
+
+    // Replace accountId in the upload URL
+    const finalUploadUrl = uploadUrl.replace('{accountId}', encodeURIComponent(this.accountId));
+    console.log('Uploading file to:', finalUploadUrl);
+    console.log('File info:', { name: file.name, size: file.size, type: file.type });
+
+    const response = await fetch(finalUploadUrl, {
+      method: 'POST',
+      headers: {
+        'Authorization': this.authHeader,
+        'Content-Type': file.type || 'application/octet-stream',
+      },
+      body: file, // Send the file directly as binary
+    });
+
+    console.log('Upload response status:', response.status);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('Upload failed:', errorText);
+      throw new Error(`Failed to upload file: ${response.status} - ${errorText}`);
+    }
+
+    const responseText = await response.text();
+    console.log('Upload response body:', responseText);
+
+    let result;
+    try {
+      result = JSON.parse(responseText);
+      console.log('Parsed upload response:', JSON.stringify(result, null, 2));
+    } catch {
+      console.error('Failed to parse upload response as JSON:', responseText);
+      throw new Error('Invalid JSON response from upload');
+    }
+
+    // Try different response formats
+    // Format 1: Direct response { blobId, type, size }
+    if (result.blobId) {
+      console.log('Using direct response format');
+      return {
+        blobId: result.blobId,
+        size: result.size || file.size,
+        type: result.type || file.type,
+      };
+    }
+
+    // Format 2: Nested under accountId { accountId: { blobId, type, size } }
+    const blobInfo = result[this.accountId];
+    if (blobInfo && blobInfo.blobId) {
+      console.log('Using accountId-nested response format');
+      return {
+        blobId: blobInfo.blobId,
+        size: blobInfo.size || file.size,
+        type: blobInfo.type || file.type,
+      };
+    }
+
+    // If neither format works, show what we got
+    console.error('Unexpected upload response format:', result);
+    throw new Error('Invalid upload response: blobId not found');
+  }
+
+  getBlobDownloadUrl(blobId: string, name?: string, type?: string): string {
+    if (!this.downloadUrl) {
+      throw new Error('Download URL not available. Please reconnect.');
+    }
+
+    // The downloadUrl is a URI Template (RFC 6570 level 1) with variables
+    // like {accountId}, {blobId}, {name}, and {type}
+    let url = this.downloadUrl;
+
+    // Replace template variables with actual values
+    url = url.replace('{accountId}', encodeURIComponent(this.accountId));
+    url = url.replace('{blobId}', encodeURIComponent(blobId));
+
+    // Replace {name} - use a default if not provided
+    const fileName = name || 'download';
+    url = url.replace('{name}', encodeURIComponent(fileName));
+
+    // Replace {type} - URL encode it since it may contain slashes (e.g., "application/pdf")
+    // If type is not provided, use a generic binary type
+    const mimeType = type || 'application/octet-stream';
+    url = url.replace('{type}', encodeURIComponent(mimeType));
+
+    return url;
+  }
+
+  // Capability checking methods
+  getCapabilities(): Record<string, unknown> {
+    return this.capabilities;
+  }
+
+  hasCapability(capability: string): boolean {
+    return capability in this.capabilities;
+  }
+
+  getMaxSizeUpload(): number {
+    const coreCapability = this.capabilities["urn:ietf:params:jmap:core"] as { maxSizeUpload?: number } | undefined;
+    return coreCapability?.maxSizeUpload || 0;
+  }
+
+  getMaxCallsInRequest(): number {
+    const coreCapability = this.capabilities["urn:ietf:params:jmap:core"] as { maxCallsInRequest?: number } | undefined;
+    return coreCapability?.maxCallsInRequest || 50;
+  }
+
+  getEventSourceUrl(): string | null {
+    const session = this.session;
+    if (!session) {
+      return null;
+    }
+    // RFC 8620: eventSourceUrl is at session root level
+    if (session.eventSourceUrl) {
+      return session.eventSourceUrl;
+    }
+    // Some servers may put it in capabilities
+    const coreCapability = session.capabilities?.["urn:ietf:params:jmap:core"] as { eventSourceUrl?: string } | undefined;
+    if (coreCapability?.eventSourceUrl) {
+      return coreCapability.eventSourceUrl;
+    }
+    return null;
+  }
+
+  getAccountId(): string {
+    return this.accountId;
+  }
+
+  supportsEmailSubmission(): boolean {
+    return this.hasCapability("urn:ietf:params:jmap:submission");
+  }
+
+  supportsQuota(): boolean {
+    return this.hasCapability("urn:ietf:params:jmap:quota");
+  }
+
+  supportsVacationResponse(): boolean {
+    return this.hasCapability("urn:ietf:params:jmap:vacationresponse");
+  }
+
+  async downloadBlob(blobId: string, name?: string, type?: string): Promise<void> {
+    const url = this.getBlobDownloadUrl(blobId, name, type);
+
+    const response = await fetch(url, {
+      headers: {
+        'Authorization': this.authHeader,
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to download attachment: ${response.status}`);
+    }
+
+    // Get the blob from the response
+    const blob = await response.blob();
+
+    // Create a temporary URL for the blob
+    const blobUrl = URL.createObjectURL(blob);
+
+    // Create a temporary anchor element and trigger download
+    const a = document.createElement('a');
+    a.href = blobUrl;
+    a.download = name || 'download';
+    document.body.appendChild(a);
+    a.click();
+
+    // Clean up
+    document.body.removeChild(a);
+    URL.revokeObjectURL(blobUrl);
+  }
+
+  // Real-time Updates via Polling (EventSource has auth limitations with Basic Auth)
+  private pollingInterval: NodeJS.Timeout | null = null;
+  private pollingStates: { [key: string]: string } = {};
+
+  setupPushNotifications(): boolean {
+    // Use polling instead of EventSource due to Basic Auth limitations
+    // EventSource can't send Authorization headers, and URL-embedded credentials
+    // get decoded by browsers, breaking auth for usernames/passwords with special chars
+
+    // Initial state fetch
+    this.fetchCurrentStates();
+
+    // Set up polling interval
+    this.pollingInterval = setInterval(() => {
+      this.checkForStateChanges();
+    }, 15000); // Poll every 15 seconds
+
+    return true;
+  }
+
+  private async fetchCurrentStates(): Promise<void> {
+    try {
+      // Get current states from server using JMAP query
+      const response = await fetch(this.apiUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': this.authHeader,
+        },
+        body: JSON.stringify({
+          using: ['urn:ietf:params:jmap:core', 'urn:ietf:params:jmap:mail'],
+          methodCalls: [
+            ['Mailbox/get', { accountId: this.accountId, ids: null, properties: ['id'] }, 'a'],
+            ['Email/get', { accountId: this.accountId, ids: [], properties: ['id'] }, 'b'],
+          ],
+        }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        // Extract states from response
+        for (const [method, result] of data.methodResponses) {
+          if (method === 'Mailbox/get' && result.state) {
+            this.pollingStates['Mailbox'] = result.state;
+          }
+          if (method === 'Email/get' && result.state) {
+            this.pollingStates['Email'] = result.state;
+          }
+        }
+      }
+    } catch {
+      // Silently fail - polling will retry
+    }
+  }
+
+  private async checkForStateChanges(): Promise<void> {
+    try {
+      const response = await fetch(this.apiUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': this.authHeader,
+        },
+        body: JSON.stringify({
+          using: ['urn:ietf:params:jmap:core', 'urn:ietf:params:jmap:mail'],
+          methodCalls: [
+            ['Mailbox/get', { accountId: this.accountId, ids: null, properties: ['id'] }, 'a'],
+            ['Email/get', { accountId: this.accountId, ids: [], properties: ['id'] }, 'b'],
+          ],
+        }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        const changes: { [key: string]: string } = {};
+        let hasChanges = false;
+
+        for (const [method, result] of data.methodResponses) {
+          if (method === 'Mailbox/get' && result.state) {
+            if (this.pollingStates['Mailbox'] && this.pollingStates['Mailbox'] !== result.state) {
+              changes['Mailbox'] = result.state;
+              hasChanges = true;
+            }
+            this.pollingStates['Mailbox'] = result.state;
+          }
+          if (method === 'Email/get' && result.state) {
+            if (this.pollingStates['Email'] && this.pollingStates['Email'] !== result.state) {
+              changes['Email'] = result.state;
+              hasChanges = true;
+            }
+            this.pollingStates['Email'] = result.state;
+          }
+        }
+
+        if (hasChanges && this.stateChangeCallback) {
+          this.stateChangeCallback({
+            '@type': 'StateChange',
+            changed: {
+              [this.accountId]: changes,
+            },
+          });
+        }
+      }
+    } catch {
+      // Silently fail - polling will retry
+    }
+  }
+
+  closePushNotifications(): void {
+    if (this.pollingInterval) {
+      clearInterval(this.pollingInterval);
+      this.pollingInterval = null;
+    }
+    if (this.eventSource) {
+      this.eventSource.close();
+      this.eventSource = null;
+    }
+    this.stateChangeCallback = null;
+    this.pollingStates = {};
+  }
+
+  onStateChange(callback: (change: StateChange) => void): void {
+    this.stateChangeCallback = callback;
+  }
+
+  getLastStates(): AccountStates {
+    return { ...this.lastStates };
+  }
+
+  setLastStates(states: AccountStates): void {
+    this.lastStates = { ...states };
+  }
+}
\ No newline at end of file
diff --git a/lib/jmap/types.ts b/lib/jmap/types.ts
new file mode 100644
index 00000000..22efb4b9
--- /dev/null
+++ b/lib/jmap/types.ts
@@ -0,0 +1,213 @@
+export interface EmailHeader {
+  name: string;
+  value: string;
+}
+
+export interface Email {
+  id: string;
+  threadId: string;
+  mailboxIds: Record<string, boolean>;
+  keywords: Record<string, boolean>;
+  size: number;
+  receivedAt: string;
+  from?: EmailAddress[];
+  to?: EmailAddress[];
+  cc?: EmailAddress[];
+  bcc?: EmailAddress[];
+  replyTo?: EmailAddress[];
+  subject?: string;
+  sentAt?: string;
+  preview?: string;
+  textBody?: EmailBodyPart[];
+  htmlBody?: EmailBodyPart[];
+  bodyValues?: Record<string, EmailBodyValue>;
+  attachments?: Attachment[];
+  hasAttachment: boolean;
+  // Extended header information
+  messageId?: string;
+  inReplyTo?: string[];
+  references?: string[];
+  headers?: Record<string, string | string[]>;
+  // Security headers parsed
+  authenticationResults?: AuthenticationResults;
+  spamScore?: number;
+  spamStatus?: string;
+  spamLLM?: {
+    verdict: string;
+    explanation: string;
+  };
+}
+
+export interface AuthenticationResults {
+  spf?: {
+    result: 'pass' | 'fail' | 'softfail' | 'neutral' | 'none' | 'temperror' | 'permerror';
+    domain?: string;
+    ip?: string;
+  };
+  dkim?: {
+    result: 'pass' | 'fail' | 'policy' | 'neutral' | 'temperror' | 'permerror';
+    domain?: string;
+    selector?: string;
+  };
+  dmarc?: {
+    result: 'pass' | 'fail' | 'none';
+    policy?: 'reject' | 'quarantine' | 'none';
+    domain?: string;
+  };
+  iprev?: {
+    result: 'pass' | 'fail';
+    ip?: string;
+  };
+}
+
+export interface EmailBodyValue {
+  value: string;
+  isEncodingProblem?: boolean;
+  isTruncated?: boolean;
+}
+
+export interface EmailAddress {
+  name?: string;
+  email: string;
+}
+
+export interface EmailBodyPart {
+  partId: string;
+  blobId: string;
+  size: number;
+  name?: string;
+  type: string;
+  charset?: string;
+  disposition?: string;
+  cid?: string;
+  language?: string[];
+  location?: string;
+  subParts?: EmailBodyPart[];
+}
+
+export interface Attachment {
+  partId: string;
+  blobId: string;
+  size: number;
+  name?: string;
+  type: string;
+  charset?: string;
+  cid?: string;
+  disposition?: string;
+}
+
+export interface Mailbox {
+  id: string;
+  originalId?: string; // Original JMAP ID (for shared mailboxes)
+  name: string;
+  parentId?: string;
+  role?: string;
+  sortOrder: number;
+  totalEmails: number;
+  unreadEmails: number;
+  totalThreads: number;
+  unreadThreads: number;
+  myRights: {
+    mayReadItems: boolean;
+    mayAddItems: boolean;
+    mayRemoveItems: boolean;
+    maySetSeen: boolean;
+    maySetKeywords: boolean;
+    mayCreateChild: boolean;
+    mayRename: boolean;
+    mayDelete: boolean;
+    maySubmit: boolean;
+  };
+  isSubscribed: boolean;
+  // Shared folder support
+  accountId?: string;
+  accountName?: string;
+  isShared?: boolean;
+}
+
+export interface Thread {
+  id: string;
+  emailIds: string[];
+}
+
+// Thread grouping for UI display
+export interface ThreadGroup {
+  threadId: string;
+  emails: Email[];           // Emails in this thread (sorted by receivedAt desc)
+  latestEmail: Email;        // Most recent email
+  participantNames: string[];// Unique participant names
+  hasUnread: boolean;        // Any unread emails in thread
+  hasStarred: boolean;       // Any starred emails in thread
+  hasAttachment: boolean;    // Any email has attachment
+  emailCount: number;        // Total emails in thread
+}
+
+export interface Identity {
+  id: string;
+  name: string;
+  email: string;
+  replyTo?: EmailAddress[];
+  bcc?: EmailAddress[];
+  textSignature?: string;
+  htmlSignature?: string;
+  mayDelete: boolean;
+}
+
+export interface EmailSubmission {
+  id: string;
+  identityId: string;
+  emailId: string;
+  threadId?: string;
+  envelope: {
+    mailFrom: EmailAddress;
+    rcptTo: EmailAddress[];
+  };
+  sendAt?: string;
+  undoStatus: "pending" | "final" | "canceled";
+  deliveryStatus?: Record<string, DeliveryStatus>;
+  dsnBlobIds?: string[];
+  mdnBlobIds?: string[];
+}
+
+export interface DeliveryStatus {
+  smtpReply: string;
+  delivered: "queued" | "yes" | "no" | "unknown";
+  displayed: "unknown" | "yes";
+}
+
+// JMAP Push Notification Types (RFC 8620 Section 7)
+
+export interface StateChange {
+  '@type': 'StateChange';
+  changed: {
+    [accountId: string]: {
+      Email?: string;
+      Mailbox?: string;
+      Thread?: string;
+      EmailDelivery?: string;
+      EmailSubmission?: string;
+      Identity?: string;
+    };
+  };
+}
+
+export interface PushSubscription {
+  id: string;
+  deviceClientId: string;
+  url: string;
+  keys: {
+    p256dh: string;
+    auth: string;
+  } | null;
+  expires: string | null;
+  types: string[] | null;
+}
+
+// For tracking last known states
+export interface AccountStates {
+  [accountId: string]: {
+    Email?: string;
+    Mailbox?: string;
+    Thread?: string;
+  };
+}
\ No newline at end of file
diff --git a/lib/thread-utils.ts b/lib/thread-utils.ts
new file mode 100644
index 00000000..ebcde2e8
--- /dev/null
+++ b/lib/thread-utils.ts
@@ -0,0 +1,163 @@
+import type { Email, ThreadGroup } from "./jmap/types";
+
+/**
+ * Groups emails by their threadId and creates ThreadGroup objects for UI display.
+ * Single-email threads are still returned as ThreadGroups with emailCount=1.
+ */
+export function groupEmailsByThread(emails: Email[]): ThreadGroup[] {
+  if (!emails || emails.length === 0) {
+    return [];
+  }
+
+  // Group emails by threadId
+  const threadMap = new Map<string, Email[]>();
+
+  for (const email of emails) {
+    const threadId = email.threadId;
+    if (!threadMap.has(threadId)) {
+      threadMap.set(threadId, []);
+    }
+    threadMap.get(threadId)!.push(email);
+  }
+
+  // Convert to ThreadGroup array
+  const threadGroups: ThreadGroup[] = [];
+
+  for (const [threadId, threadEmails] of threadMap) {
+    // Sort emails by receivedAt descending (newest first)
+    const sortedEmails = [...threadEmails].sort(
+      (a, b) => new Date(b.receivedAt).getTime() - new Date(a.receivedAt).getTime()
+    );
+
+    const latestEmail = sortedEmails[0];
+
+    // Collect unique participant names from all emails in thread
+    const participantNames = getThreadParticipants(sortedEmails);
+
+    // Check for unread, starred, and attachments
+    const hasUnread = sortedEmails.some(e => !e.keywords?.$seen);
+    const hasStarred = sortedEmails.some(e => e.keywords?.$flagged);
+    const hasAttachment = sortedEmails.some(e => e.hasAttachment);
+
+    threadGroups.push({
+      threadId,
+      emails: sortedEmails,
+      latestEmail,
+      participantNames,
+      hasUnread,
+      hasStarred,
+      hasAttachment,
+      emailCount: sortedEmails.length,
+    });
+  }
+
+  return threadGroups;
+}
+
+/**
+ * Sorts thread groups by their latest email's receivedAt date (newest first).
+ */
+export function sortThreadGroups(groups: ThreadGroup[]): ThreadGroup[] {
+  return [...groups].sort(
+    (a, b) => new Date(b.latestEmail.receivedAt).getTime() - new Date(a.latestEmail.receivedAt).getTime()
+  );
+}
+
+/**
+ * Extracts unique participant names from a list of emails.
+ * Includes both senders and recipients, limited to avoid UI overflow.
+ */
+export function getThreadParticipants(emails: Email[], maxNames: number = 4): string[] {
+  const seen = new Set<string>();
+  const names: string[] = [];
+
+  for (const email of emails) {
+    // Add sender
+    if (email.from && email.from.length > 0) {
+      const sender = email.from[0];
+      const senderName = sender.name || sender.email.split('@')[0];
+      const key = sender.email.toLowerCase();
+
+      if (!seen.has(key)) {
+        seen.add(key);
+        names.push(senderName);
+      }
+    }
+
+    // Stop if we have enough names
+    if (names.length >= maxNames) break;
+  }
+
+  return names;
+}
+
+/**
+ * Merges newly fetched thread emails into an existing thread group.
+ * Used when expanding a thread to show all emails (some may not have been in the original list).
+ */
+export function mergeThreadEmails(
+  existingGroup: ThreadGroup,
+  fetchedEmails: Email[]
+): ThreadGroup {
+  // Create a map of existing emails by ID
+  const emailMap = new Map<string, Email>();
+
+  for (const email of existingGroup.emails) {
+    emailMap.set(email.id, email);
+  }
+
+  // Add fetched emails that aren't already in the group
+  for (const email of fetchedEmails) {
+    if (!emailMap.has(email.id)) {
+      emailMap.set(email.id, email);
+    }
+  }
+
+  // Convert back to array and sort
+  const mergedEmails = Array.from(emailMap.values()).sort(
+    (a, b) => new Date(b.receivedAt).getTime() - new Date(a.receivedAt).getTime()
+  );
+
+  const latestEmail = mergedEmails[0];
+  const participantNames = getThreadParticipants(mergedEmails);
+  const hasUnread = mergedEmails.some(e => !e.keywords?.$seen);
+  const hasStarred = mergedEmails.some(e => e.keywords?.$flagged);
+  const hasAttachment = mergedEmails.some(e => e.hasAttachment);
+
+  return {
+    threadId: existingGroup.threadId,
+    emails: mergedEmails,
+    latestEmail,
+    participantNames,
+    hasUnread,
+    hasStarred,
+    hasAttachment,
+    emailCount: mergedEmails.length,
+  };
+}
+
+/**
+ * Gets color tag from email keywords (if any).
+ */
+export function getEmailColorTag(keywords: Record<string, boolean> | undefined): string | null {
+  if (!keywords) return null;
+
+  for (const key of Object.keys(keywords)) {
+    if (key.startsWith("$color:") && keywords[key] === true) {
+      return key.replace("$color:", "");
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Checks if a thread has any color tag (returns first found).
+ */
+export function getThreadColorTag(emails: Email[]): string | null {
+  for (const email of emails) {
+    const color = getEmailColorTag(email.keywords);
+    if (color) return color;
+  }
+  return null;
+}
diff --git a/lib/utils.ts b/lib/utils.ts
new file mode 100644
index 00000000..11025791
--- /dev/null
+++ b/lib/utils.ts
@@ -0,0 +1,297 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Mailbox } from "./jmap/types";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatDate(date: Date | string): string {
+  const d = typeof date === "string" ? new Date(date) : date;
+  const now = new Date();
+  const diff = now.getTime() - d.getTime();
+
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+
+  if (minutes < 1) return "Just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days < 7) return `${days}d ago`;
+
+  return d.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: d.getFullYear() !== now.getFullYear() ? "numeric" : undefined,
+  });
+}
+
+export function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.substring(0, maxLength).trim() + "...";
+}
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+}
+
+// Types for mailbox tree
+export interface MailboxNode extends Mailbox {
+  children: MailboxNode[];
+  depth: number;
+}
+
+// Role priority for mailbox ordering (lower number = higher priority)
+const ROLE_PRIORITY: Record<string, number> = {
+  inbox: 0,
+  drafts: 1,
+  sent: 2,
+  archive: 3,
+  junk: 4,
+  spam: 4, // Treat spam same as junk
+  trash: 5,
+};
+
+// Deduplicate mailboxes (e.g., "Sent" vs "Sent Mail")
+function deduplicateMailboxes(mailboxes: Mailbox[]): Mailbox[] {
+  const roleMap = new Map<string, Mailbox>();
+  const result: Mailbox[] = [];
+
+  // First pass: collect mailboxes with roles
+  mailboxes.forEach(mb => {
+    if (mb.role) {
+      roleMap.set(mb.role, mb);
+    }
+  });
+
+  // Second pass: filter out duplicates
+  mailboxes.forEach(mb => {
+    // If this mailbox has a role, always keep it
+    if (mb.role) {
+      result.push(mb);
+      return;
+    }
+
+    // Check if this is a duplicate of a role-based mailbox
+    const lowerName = mb.name.toLowerCase();
+    const isDuplicate = Array.from(roleMap.values()).some(roleMb => {
+      const roleLowerName = roleMb.name.toLowerCase();
+      // Check for common duplicates: "Sent Mail" vs "Sent", etc.
+      return lowerName.includes(roleLowerName) || roleLowerName.includes(lowerName);
+    });
+
+    // Only keep if not a duplicate
+    if (!isDuplicate) {
+      result.push(mb);
+    }
+  });
+
+  return result;
+}
+
+// Build a hierarchical tree structure from flat mailbox array
+export function buildMailboxTree(mailboxes: Mailbox[]): MailboxNode[] {
+  // Deduplicate mailboxes first
+  const deduplicated = deduplicateMailboxes(mailboxes);
+
+  // Separate own and shared mailboxes
+  const ownMailboxes = deduplicated.filter(mb => !mb.isShared);
+  const sharedMailboxes = deduplicated.filter(mb => mb.isShared);
+
+  const mailboxMap = new Map<string, MailboxNode>();
+  const rootMailboxes: MailboxNode[] = [];
+
+  // First pass: create nodes for own mailboxes
+  ownMailboxes.forEach(mailbox => {
+    mailboxMap.set(mailbox.id, {
+      ...mailbox,
+      children: [],
+      depth: 0
+    });
+  });
+
+  // Second pass: build tree structure for own mailboxes
+  ownMailboxes.forEach(mailbox => {
+    const node = mailboxMap.get(mailbox.id)!;
+
+    if (mailbox.parentId && mailboxMap.has(mailbox.parentId)) {
+      const parent = mailboxMap.get(mailbox.parentId)!;
+      parent.children.push(node);
+      node.depth = parent.depth + 1;
+    } else {
+      // Root level mailbox or orphaned mailbox
+      rootMailboxes.push(node);
+      node.depth = 0;
+    }
+  });
+
+  // If we have shared mailboxes, create a virtual "Shared Folders" parent
+  if (sharedMailboxes.length > 0) {
+    // Group shared mailboxes by account
+    const accountGroups = new Map<string, Mailbox[]>();
+    sharedMailboxes.forEach(mb => {
+      const accountId = mb.accountId || 'unknown';
+      if (!accountGroups.has(accountId)) {
+        accountGroups.set(accountId, []);
+      }
+      accountGroups.get(accountId)!.push(mb);
+    });
+
+    // Create virtual nodes for each shared account
+    const sharedAccountNodes: MailboxNode[] = [];
+
+    accountGroups.forEach((accountMailboxes, accountId) => {
+      // Create account nodes
+      const accountMailboxMap = new Map<string, MailboxNode>();
+      const accountRootNodes: MailboxNode[] = [];
+
+      // Create nodes for this account's mailboxes
+      accountMailboxes.forEach(mailbox => {
+        accountMailboxMap.set(mailbox.id, {
+          ...mailbox,
+          children: [],
+          depth: 2 // Account level is depth 1, these are depth 2
+        });
+      });
+
+      // Build tree for this account's mailboxes
+      accountMailboxes.forEach(mailbox => {
+        const node = accountMailboxMap.get(mailbox.id)!;
+
+        if (mailbox.parentId && accountMailboxMap.has(mailbox.parentId)) {
+          const parent = accountMailboxMap.get(mailbox.parentId)!;
+          parent.children.push(node);
+          node.depth = parent.depth + 1;
+        } else {
+          accountRootNodes.push(node);
+        }
+      });
+
+      // Create virtual account folder node
+      const accountName = accountMailboxes[0]?.accountName || accountId;
+      const accountNode: MailboxNode = {
+        id: `shared-account-${accountId}`,
+        name: accountName,
+        sortOrder: 1000, // After all own folders
+        totalEmails: accountMailboxes.reduce((sum, mb) => sum + mb.totalEmails, 0),
+        unreadEmails: accountMailboxes.reduce((sum, mb) => sum + mb.unreadEmails, 0),
+        totalThreads: 0,
+        unreadThreads: 0,
+        myRights: {
+          mayReadItems: true,
+          mayAddItems: false,
+          mayRemoveItems: false,
+          maySetSeen: false,
+          maySetKeywords: false,
+          mayCreateChild: false,
+          mayRename: false,
+          mayDelete: false,
+          maySubmit: false,
+        },
+        isSubscribed: true,
+        accountId: accountId,
+        accountName: accountName,
+        isShared: true,
+        children: accountRootNodes,
+        depth: 1,
+      };
+
+      sharedAccountNodes.push(accountNode);
+    });
+
+    // Create virtual "Shared Folders" root node
+    const sharedFoldersNode: MailboxNode = {
+      id: 'shared-folders-root',
+      name: 'Shared Folders',
+      sortOrder: 999, // After all own folders
+      totalEmails: sharedMailboxes.reduce((sum, mb) => sum + mb.totalEmails, 0),
+      unreadEmails: sharedMailboxes.reduce((sum, mb) => sum + mb.unreadEmails, 0),
+      totalThreads: 0,
+      unreadThreads: 0,
+      myRights: {
+        mayReadItems: true,
+        mayAddItems: false,
+        mayRemoveItems: false,
+        maySetSeen: false,
+        maySetKeywords: false,
+        mayCreateChild: false,
+        mayRename: false,
+        mayDelete: false,
+        maySubmit: false,
+      },
+      isSubscribed: true,
+      isShared: true,
+      children: sharedAccountNodes,
+      depth: 0,
+    };
+
+    rootMailboxes.push(sharedFoldersNode);
+  }
+
+  // Smart multi-level sorting
+  const sortNodes = (nodes: MailboxNode[]) => {
+    nodes.sort((a, b) => {
+      // 1. Priority: Own folders before shared folders
+      if (a.isShared !== b.isShared) {
+        return a.isShared ? 1 : -1;
+      }
+
+      // 2. Priority: Role-based ordering (inbox first, trash last, etc.)
+      const aPriority = a.role ? (ROLE_PRIORITY[a.role] ?? 999) : 999;
+      const bPriority = b.role ? (ROLE_PRIORITY[b.role] ?? 999) : 999;
+      if (aPriority !== bPriority) {
+        return aPriority - bPriority;
+      }
+
+      // 3. Priority: Year folders (e.g., "2025", "2024") sorted numerically descending
+      const aIsYear = /^\d{4}$/.test(a.name);
+      const bIsYear = /^\d{4}$/.test(b.name);
+      if (aIsYear && bIsYear) {
+        return parseInt(b.name) - parseInt(a.name); // Descending: 2025, 2024, 2023...
+      }
+
+      // 4. Fallback: Server sortOrder
+      if (a.sortOrder !== b.sortOrder) {
+        return a.sortOrder - b.sortOrder;
+      }
+
+      // 5. Fallback: Alphabetical by name
+      return a.name.localeCompare(b.name);
+    });
+
+    // Recursively sort children
+    nodes.forEach(node => {
+      if (node.children.length > 0) {
+        sortNodes(node.children);
+      }
+    });
+  };
+
+  sortNodes(rootMailboxes);
+
+  return rootMailboxes;
+}
+
+// Flatten a mailbox tree for rendering with proper depth info
+export function flattenMailboxTree(nodes: MailboxNode[]): MailboxNode[] {
+  const result: MailboxNode[] = [];
+
+  const traverse = (nodes: MailboxNode[], depth: number = 0) => {
+    nodes.forEach(node => {
+      result.push({ ...node, depth });
+      if (node.children.length > 0) {
+        traverse(node.children, depth + 1);
+      }
+    });
+  };
+
+  traverse(nodes);
+  return result;
+}
\ No newline at end of file
diff --git a/locales/en/common.json b/locales/en/common.json
new file mode 100644
index 00000000..3cc8718e
--- /dev/null
+++ b/locales/en/common.json
@@ -0,0 +1,494 @@
+{
+  "login": {
+    "title": "Webmail",
+    "username_label": "Email",
+    "username_placeholder": "user@example.com",
+    "password_label": "Password",
+    "password_placeholder": "Enter your password",
+    "sign_in": "Sign in",
+    "signing_in": "Signing in...",
+    "error": {
+      "invalid_credentials": "Invalid email or password",
+      "connection_failed": "Failed to connect to the server",
+      "generic": "An error occurred. Please try again."
+    }
+  },
+  "sidebar": {
+    "compose": "Compose",
+    "search_placeholder": "Search mail...",
+    "storage": "Storage",
+    "sign_out": "Sign out",
+    "settings": "Settings",
+    "loading_mailboxes": "Loading mailboxes...",
+    "push_connected": "Real-time updates active",
+    "push_disconnected": "Real-time updates inactive",
+    "theme": {
+      "light": "Light mode",
+      "dark": "Dark mode",
+      "system": "System theme"
+    },
+    "mailboxes": {
+      "inbox": "Inbox",
+      "sent": "Sent",
+      "drafts": "Drafts",
+      "trash": "Trash",
+      "archive": "Archive",
+      "starred": "Starred",
+      "all_mail": "All Mail",
+      "spam": "Spam",
+      "important": "Important"
+    },
+    "expand": "Expand",
+    "collapse": "Collapse"
+  },
+  "email_list": {
+    "no_emails": "No emails",
+    "no_emails_description": "Start by composing a new email",
+    "loading": "Loading emails...",
+    "unread": "unread",
+    "to_me": "To me",
+    "to_recipients": "To {{count}} recipients",
+    "and_others": "and {{count}} others",
+    "draft": "Draft",
+    "starred": "Starred"
+  },
+  "email_viewer": {
+    "no_email_selected": "No email selected",
+    "no_email_description": "Select an email from the list to view it here",
+    "no_subject": "(No Subject)",
+    "reply": "Reply",
+    "reply_all": "Reply All",
+    "forward": "Forward",
+    "delete": "Delete",
+    "archive": "Archive",
+    "star": "Star",
+    "unstar": "Unstar",
+    "mark_unread": "Mark as unread",
+    "mark_read": "Mark as read",
+    "print": "Print",
+    "view_source": "View source",
+    "email_source": "Email Source",
+    "copy_source": "Copy to clipboard",
+    "source_copied": "Source copied to clipboard",
+    "attachments": "Attachments",
+    "download": "Download",
+    "from": "From",
+    "to": "To",
+    "cc": "CC",
+    "bcc": "BCC",
+    "date": "Date",
+    "subject": "Subject",
+    "show_details": "Show details",
+    "hide_details": "Hide details",
+    "external_content_warning": "Images and external content have been blocked",
+    "load_external_content": "Load images",
+    "message_details": "Message Details",
+    "authentication": {
+      "title": "Authentication",
+      "status": {
+        "verified": "Verified",
+        "warning": "Warning",
+        "none": "Not authenticated"
+      },
+      "spf": {
+        "pass": "SPF Pass",
+        "fail": "SPF Fail",
+        "none": "No SPF"
+      },
+      "dkim": {
+        "pass": "DKIM Valid",
+        "fail": "DKIM Invalid",
+        "none": "No DKIM"
+      },
+      "dmarc": {
+        "pass": "DMARC Pass",
+        "fail": "DMARC Fail",
+        "none": "No DMARC"
+      },
+      "spam_score": "Spam Score"
+    },
+    "headers": {
+      "routing": "Routing",
+      "received": "Received",
+      "message_id": "Message ID",
+      "list_info": "List Information"
+    },
+    "color_tag": {
+      "title": "Color Tag",
+      "red": "Red",
+      "orange": "Orange",
+      "yellow": "Yellow",
+      "green": "Green",
+      "blue": "Blue",
+      "purple": "Purple",
+      "none": "None"
+    }
+  },
+  "email_composer": {
+    "new_message": "New Message",
+    "reply": "Reply",
+    "reply_all": "Reply All",
+    "forward": "Forward",
+    "reply_to": "Reply",
+    "reply_all_to": "Reply All",
+    "forward_message": "Forward",
+    "to": "To",
+    "cc": "CC",
+    "bcc": "BCC",
+    "subject": "Subject",
+    "body_placeholder": "Write your message...",
+    "send": "Send",
+    "cancel": "Cancel",
+    "attach": "Attach files",
+    "discard_draft_confirm": "You have unsaved changes. Do you want to discard this draft?",
+    "quote": {
+      "reply_header": "On {{date}}, {{sender}} wrote:",
+      "forward_header": "---------- Forwarded message ----------",
+      "from": "From: {{sender}}",
+      "date": "Date: {{date}}",
+      "subject": "Subject: {{subject}}",
+      "to": "To: {{recipients}}"
+    }
+  },
+  "common": {
+    "loading": "Loading...",
+    "error": "Error",
+    "success": "Success",
+    "cancel": "Cancel",
+    "save": "Save",
+    "delete": "Delete",
+    "edit": "Edit",
+    "close": "Close",
+    "search": "Search",
+    "refresh": "Refresh",
+    "settings": "Settings",
+    "help": "Help",
+    "logout": "Logout",
+    "yes": "Yes",
+    "no": "No",
+    "unknown": "Unknown"
+  },
+  "notifications": {
+    "email_sent": "Email sent successfully",
+    "email_deleted": "Email deleted",
+    "email_archived": "Email archived",
+    "email_starred": "Email starred",
+    "email_unstarred": "Email unstarred",
+    "email_marked_read": "Email marked as read",
+    "email_marked_unread": "Email marked as unread",
+    "copied_to_clipboard": "Copied to clipboard",
+    "source_copied": "Source copied to clipboard",
+    "error_sending": "Failed to send email",
+    "error_deleting": "Failed to delete email",
+    "error_loading": "Failed to load emails",
+    "new_email": "New email",
+    "new_email_from": "From {sender}",
+    "click_to_view": "Click to view"
+  },
+  "date": {
+    "today": "Today",
+    "yesterday": "Yesterday",
+    "this_week": "This week",
+    "last_week": "Last week",
+    "this_month": "This month",
+    "older": "Older",
+    "just_now": "Just now",
+    "minutes_ago": "{{count}} minute ago",
+    "minutes_ago_plural": "{{count}} minutes ago",
+    "hours_ago": "{{count}} hour ago",
+    "hours_ago_plural": "{{count}} hours ago",
+    "days_ago": "{{count}} day ago",
+    "days_ago_plural": "{{count}} days ago"
+  },
+  "language": {
+    "title": "Language",
+    "english": "English",
+    "french": "Français"
+  },
+  "settings": {
+    "title": "Settings",
+    "back_to_mail": "Back to Mail",
+    "save_success": "Settings saved successfully",
+    "import_success": "Settings imported successfully",
+    "import_error": "Failed to import settings",
+    "reset_confirm": "Are you sure you want to reset all settings to defaults?",
+    "tabs": {
+      "appearance": "Appearance",
+      "language": "Language & Region",
+      "email": "Email Behavior",
+      "composer": "Composer",
+      "privacy": "Privacy & Security",
+      "account": "Account",
+      "advanced": "Advanced"
+    },
+    "appearance": {
+      "title": "Appearance",
+      "description": "Customize the look and feel of your webmail",
+      "theme": {
+        "label": "Theme",
+        "description": "Choose your preferred color scheme",
+        "light": "Light",
+        "dark": "Dark",
+        "system": "System"
+      },
+      "font_size": {
+        "label": "Font Size",
+        "description": "Adjust text size for better readability",
+        "small": "Small",
+        "medium": "Medium",
+        "large": "Large"
+      },
+      "list_density": {
+        "label": "List Density",
+        "description": "Control spacing in email lists",
+        "compact": "Compact",
+        "regular": "Regular",
+        "comfortable": "Comfortable"
+      },
+      "animations": {
+        "label": "Enable Animations",
+        "description": "Show smooth transitions and effects"
+      }
+    },
+    "language_region": {
+      "title": "Language & Region",
+      "description": "Configure language and regional preferences",
+      "language": {
+        "label": "Language",
+        "description": "Choose your preferred language",
+        "english": "English",
+        "french": "Français"
+      },
+      "date_format": {
+        "label": "Date Format",
+        "description": "How dates should be displayed",
+        "regional": "Regional",
+        "iso": "ISO 8601",
+        "custom": "Custom"
+      },
+      "time_format": {
+        "label": "Time Format",
+        "description": "Choose between 12-hour or 24-hour clock",
+        "12h": "12-hour",
+        "24h": "24-hour"
+      },
+      "first_day": {
+        "label": "First Day of Week",
+        "description": "Start week on Sunday or Monday",
+        "sunday": "Sunday",
+        "monday": "Monday"
+      }
+    },
+    "email_behavior": {
+      "title": "Email Behavior",
+      "description": "Configure how emails are handled",
+      "mark_read": {
+        "label": "Mark as Read",
+        "description": "When to mark emails as read when opened",
+        "instant": "Instantly",
+        "delay_3s": "After 3 seconds",
+        "delay_5s": "After 5 seconds",
+        "never": "Never"
+      },
+      "delete_action": {
+        "label": "Delete Action",
+        "description": "What happens when you delete an email",
+        "trash": "Move to Trash",
+        "permanent": "Delete Permanently"
+      },
+      "show_preview": {
+        "label": "Show Preview Text",
+        "description": "Display email preview in the list"
+      },
+      "emails_per_page": {
+        "label": "Emails Per Page",
+        "description": "Number of emails to load at once",
+        "25": "25 emails",
+        "50": "50 emails",
+        "100": "100 emails"
+      },
+      "external_content": {
+        "label": "External Content",
+        "description": "How to handle images and external content",
+        "ask": "Always ask",
+        "block": "Always block",
+        "allow": "Always allow"
+      }
+    },
+    "composer": {
+      "title": "Composer",
+      "description": "Configure email composition settings",
+      "autosave": {
+        "label": "Auto-save Interval",
+        "description": "How often to save drafts automatically",
+        "30s": "Every 30 seconds",
+        "1m": "Every minute",
+        "2m": "Every 2 minutes",
+        "5m": "Every 5 minutes"
+      },
+      "send_confirmation": {
+        "label": "Send Confirmation",
+        "description": "Ask for confirmation before sending emails"
+      },
+      "default_reply": {
+        "label": "Default Reply Mode",
+        "description": "Default action when clicking reply",
+        "reply": "Reply",
+        "reply_all": "Reply All"
+      }
+    },
+    "privacy": {
+      "title": "Privacy & Security",
+      "description": "Manage your privacy and security settings",
+      "external_images": {
+        "label": "Block External Images",
+        "description": "Prevent tracking through external images"
+      },
+      "session_timeout": {
+        "label": "Session Timeout",
+        "description": "Automatically log out after inactivity",
+        "never": "Never",
+        "30m": "30 minutes",
+        "1h": "1 hour",
+        "4h": "4 hours"
+      },
+      "clear_cache": {
+        "label": "Clear Cache",
+        "description": "Remove cached data and temporary files",
+        "button": "Clear Cache",
+        "confirm": "Are you sure you want to clear the cache?",
+        "success": "Cache cleared successfully"
+      }
+    },
+    "account": {
+      "title": "Account",
+      "description": "View your account information",
+      "email": {
+        "label": "Email Address",
+        "value": "{{email}}"
+      },
+      "server": {
+        "label": "JMAP Server",
+        "value": "{{server}}"
+      },
+      "storage": {
+        "label": "Storage Usage",
+        "used": "{{used}} of {{total}} used",
+        "percentage": "{{percent}}% used"
+      },
+      "last_sync": {
+        "label": "Last Sync",
+        "value": "{{time}}"
+      }
+    },
+    "advanced": {
+      "title": "Advanced",
+      "description": "Advanced options and developer settings",
+      "debug_mode": {
+        "label": "Debug Mode",
+        "description": "Enable detailed logging for troubleshooting"
+      },
+      "keyboard_shortcuts": {
+        "label": "Keyboard Shortcuts",
+        "description": "View available keyboard shortcuts",
+        "button": "View Shortcuts"
+      },
+      "reset_settings": {
+        "label": "Reset Settings",
+        "description": "Restore all settings to default values",
+        "button": "Reset to Defaults"
+      },
+      "export_settings": {
+        "label": "Export Settings",
+        "description": "Download your settings as JSON",
+        "button": "Export"
+      },
+      "import_settings": {
+        "label": "Import Settings",
+        "description": "Upload settings from JSON file",
+        "button": "Import"
+      }
+    }
+  },
+  "errors": {
+    "page_error_title": "Something went wrong",
+    "page_error_description": "We encountered an unexpected error. Please try again or return to the home page.",
+    "sidebar_error": "Unable to load mailboxes",
+    "email_list_error": "Unable to load emails",
+    "viewer_error_title": "Unable to display email",
+    "viewer_error_description": "There was a problem rendering this email. It may contain unsupported content.",
+    "composer_error": "Unable to load composer",
+    "settings_error_title": "Settings unavailable",
+    "settings_error_description": "Unable to load settings. Your preferences may not be saved.",
+    "try_again": "Try again",
+    "reload": "Reload",
+    "reload_emails": "Reload emails",
+    "reload_settings": "Reload settings",
+    "retry": "Retry",
+    "go_home": "Go to inbox"
+  },
+  "context_menu": {
+    "reply": "Reply",
+    "reply_all": "Reply All",
+    "forward": "Forward",
+    "mark_read": "Mark as Read",
+    "mark_unread": "Mark as Unread",
+    "star": "Star",
+    "unstar": "Unstar",
+    "move_to": "Move to...",
+    "archive": "Archive",
+    "delete": "Delete",
+    "color_tag": "Color Tag",
+    "remove_color": "Remove Color",
+    "items_selected": "{{count}} emails selected"
+  },
+  "shortcuts": {
+    "title": "Keyboard Shortcuts",
+    "tip": "Press ? anytime to show this help",
+    "sections": {
+      "navigation": "Navigation",
+      "actions": "Email Actions",
+      "global": "Global",
+      "threads": "Threads"
+    },
+    "navigation": {
+      "next_email": "Next email",
+      "previous_email": "Previous email",
+      "open_email": "Open email",
+      "close_email": "Close / Deselect"
+    },
+    "actions": {
+      "reply": "Reply",
+      "reply_all": "Reply all",
+      "forward": "Forward",
+      "star": "Toggle star",
+      "archive": "Archive",
+      "delete": "Delete",
+      "mark_unread": "Mark as unread",
+      "mark_read": "Mark as read"
+    },
+    "global": {
+      "compose": "Compose new email",
+      "search": "Focus search",
+      "help": "Show shortcuts",
+      "refresh": "Refresh emails",
+      "select_all": "Select all"
+    },
+    "threads": {
+      "expand_collapse": "Expand/collapse thread"
+    }
+  },
+  "threads": {
+    "messages_one": "{count} message",
+    "messages_other": "{count} messages",
+    "expand": "Expand conversation",
+    "collapse": "Collapse conversation",
+    "loading": "Loading conversation...",
+    "mark_read": "Mark conversation as read",
+    "mark_unread": "Mark conversation as unread",
+    "archive": "Archive conversation",
+    "delete": "Delete conversation",
+    "star": "Star conversation",
+    "unstar": "Unstar conversation"
+  }
+}
\ No newline at end of file
diff --git a/locales/fr/common.json b/locales/fr/common.json
new file mode 100644
index 00000000..7b641b1f
--- /dev/null
+++ b/locales/fr/common.json
@@ -0,0 +1,494 @@
+{
+  "login": {
+    "title": "Webmail",
+    "username_label": "Email",
+    "username_placeholder": "utilisateur@exemple.com",
+    "password_label": "Mot de passe",
+    "password_placeholder": "Entrez votre mot de passe",
+    "sign_in": "Se connecter",
+    "signing_in": "Connexion en cours...",
+    "error": {
+      "invalid_credentials": "Email ou mot de passe invalide",
+      "connection_failed": "Échec de la connexion au serveur",
+      "generic": "Une erreur s'est produite. Veuillez réessayer."
+    }
+  },
+  "sidebar": {
+    "compose": "Composer",
+    "search_placeholder": "Rechercher un email...",
+    "storage": "Stockage",
+    "sign_out": "Se déconnecter",
+    "settings": "Paramètres",
+    "loading_mailboxes": "Chargement des boîtes mail...",
+    "push_connected": "Mises à jour en temps réel actives",
+    "push_disconnected": "Mises à jour en temps réel inactives",
+    "theme": {
+      "light": "Mode clair",
+      "dark": "Mode sombre",
+      "system": "Thème système"
+    },
+    "mailboxes": {
+      "inbox": "Boîte de réception",
+      "sent": "Envoyés",
+      "drafts": "Brouillons",
+      "trash": "Corbeille",
+      "archive": "Archives",
+      "starred": "Favoris",
+      "all_mail": "Tous les messages",
+      "spam": "Spam",
+      "important": "Important"
+    },
+    "expand": "Développer",
+    "collapse": "Réduire"
+  },
+  "email_list": {
+    "no_emails": "Aucun email",
+    "no_emails_description": "Commencez par composer un nouvel email",
+    "loading": "Chargement des emails...",
+    "unread": "non lu",
+    "to_me": "À moi",
+    "to_recipients": "À {{count}} destinataires",
+    "and_others": "et {{count}} autres",
+    "draft": "Brouillon",
+    "starred": "Favori"
+  },
+  "email_viewer": {
+    "no_email_selected": "Aucun email sélectionné",
+    "no_email_description": "Sélectionnez un email dans la liste pour le voir ici",
+    "no_subject": "(Sans objet)",
+    "reply": "Répondre",
+    "reply_all": "Répondre à tous",
+    "forward": "Transférer",
+    "delete": "Supprimer",
+    "archive": "Archiver",
+    "star": "Marquer comme favori",
+    "unstar": "Retirer des favoris",
+    "mark_unread": "Marquer comme non lu",
+    "mark_read": "Marquer comme lu",
+    "print": "Imprimer",
+    "view_source": "Voir la source",
+    "email_source": "Source de l'email",
+    "copy_source": "Copier dans le presse-papiers",
+    "source_copied": "Source copiée dans le presse-papiers",
+    "attachments": "Pièces jointes",
+    "download": "Télécharger",
+    "from": "De",
+    "to": "À",
+    "cc": "CC",
+    "bcc": "CCI",
+    "date": "Date",
+    "subject": "Objet",
+    "show_details": "Afficher les détails",
+    "hide_details": "Masquer les détails",
+    "external_content_warning": "Les images et le contenu externe ont été bloqués",
+    "load_external_content": "Charger les images",
+    "message_details": "Détails du message",
+    "authentication": {
+      "title": "Authentification",
+      "status": {
+        "verified": "Vérifié",
+        "warning": "Attention",
+        "none": "Non authentifié"
+      },
+      "spf": {
+        "pass": "SPF Validé",
+        "fail": "SPF Échoué",
+        "none": "Pas de SPF"
+      },
+      "dkim": {
+        "pass": "DKIM Valide",
+        "fail": "DKIM Invalide",
+        "none": "Pas de DKIM"
+      },
+      "dmarc": {
+        "pass": "DMARC Validé",
+        "fail": "DMARC Échoué",
+        "none": "Pas de DMARC"
+      },
+      "spam_score": "Score de spam"
+    },
+    "headers": {
+      "routing": "Routage",
+      "received": "Reçu",
+      "message_id": "ID du message",
+      "list_info": "Information de liste"
+    },
+    "color_tag": {
+      "title": "Étiquette de couleur",
+      "red": "Rouge",
+      "orange": "Orange",
+      "yellow": "Jaune",
+      "green": "Vert",
+      "blue": "Bleu",
+      "purple": "Violet",
+      "none": "Aucune"
+    }
+  },
+  "email_composer": {
+    "new_message": "Nouveau message",
+    "reply": "Répondre",
+    "reply_all": "Répondre à tous",
+    "forward": "Transférer",
+    "reply_to": "Répondre",
+    "reply_all_to": "Répondre à tous",
+    "forward_message": "Transférer",
+    "to": "À",
+    "cc": "CC",
+    "bcc": "CCI",
+    "subject": "Objet",
+    "body_placeholder": "Écrivez votre message...",
+    "send": "Envoyer",
+    "cancel": "Annuler",
+    "attach": "Joindre des fichiers",
+    "discard_draft_confirm": "Vous avez des modifications non enregistrées. Voulez-vous supprimer ce brouillon ?",
+    "quote": {
+      "reply_header": "Le {{date}}, {{sender}} a écrit :",
+      "forward_header": "---------- Message transféré ----------",
+      "from": "De : {{sender}}",
+      "date": "Date : {{date}}",
+      "subject": "Objet : {{subject}}",
+      "to": "À : {{recipients}}"
+    }
+  },
+  "common": {
+    "loading": "Chargement...",
+    "error": "Erreur",
+    "success": "Succès",
+    "cancel": "Annuler",
+    "save": "Enregistrer",
+    "delete": "Supprimer",
+    "edit": "Modifier",
+    "close": "Fermer",
+    "search": "Rechercher",
+    "refresh": "Actualiser",
+    "settings": "Paramètres",
+    "help": "Aide",
+    "logout": "Déconnexion",
+    "yes": "Oui",
+    "no": "Non",
+    "unknown": "Inconnu"
+  },
+  "notifications": {
+    "email_sent": "Email envoyé avec succès",
+    "email_deleted": "Email supprimé",
+    "email_archived": "Email archivé",
+    "email_starred": "Email ajouté aux favoris",
+    "email_unstarred": "Email retiré des favoris",
+    "email_marked_read": "Email marqué comme lu",
+    "email_marked_unread": "Email marqué comme non lu",
+    "copied_to_clipboard": "Copié dans le presse-papiers",
+    "source_copied": "Source copiée dans le presse-papiers",
+    "error_sending": "Échec de l'envoi de l'email",
+    "error_deleting": "Échec de la suppression de l'email",
+    "error_loading": "Échec du chargement des emails",
+    "new_email": "Nouvel email",
+    "new_email_from": "De {sender}",
+    "click_to_view": "Cliquer pour voir"
+  },
+  "date": {
+    "today": "Aujourd'hui",
+    "yesterday": "Hier",
+    "this_week": "Cette semaine",
+    "last_week": "La semaine dernière",
+    "this_month": "Ce mois-ci",
+    "older": "Plus ancien",
+    "just_now": "À l'instant",
+    "minutes_ago": "Il y a {{count}} minute",
+    "minutes_ago_plural": "Il y a {{count}} minutes",
+    "hours_ago": "Il y a {{count}} heure",
+    "hours_ago_plural": "Il y a {{count}} heures",
+    "days_ago": "Il y a {{count}} jour",
+    "days_ago_plural": "Il y a {{count}} jours"
+  },
+  "language": {
+    "title": "Langue",
+    "english": "English",
+    "french": "Français"
+  },
+  "settings": {
+    "title": "Paramètres",
+    "back_to_mail": "Retour aux emails",
+    "save_success": "Paramètres enregistrés avec succès",
+    "import_success": "Paramètres importés avec succès",
+    "import_error": "Échec de l'importation des paramètres",
+    "reset_confirm": "Êtes-vous sûr de vouloir réinitialiser tous les paramètres ?",
+    "tabs": {
+      "appearance": "Apparence",
+      "language": "Langue et région",
+      "email": "Comportement email",
+      "composer": "Compositeur",
+      "privacy": "Confidentialité et sécurité",
+      "account": "Compte",
+      "advanced": "Avancé"
+    },
+    "appearance": {
+      "title": "Apparence",
+      "description": "Personnalisez l'apparence de votre webmail",
+      "theme": {
+        "label": "Thème",
+        "description": "Choisissez votre schéma de couleurs préféré",
+        "light": "Clair",
+        "dark": "Sombre",
+        "system": "Système"
+      },
+      "font_size": {
+        "label": "Taille de police",
+        "description": "Ajustez la taille du texte pour une meilleure lisibilité",
+        "small": "Petite",
+        "medium": "Moyenne",
+        "large": "Grande"
+      },
+      "list_density": {
+        "label": "Densité de la liste",
+        "description": "Contrôlez l'espacement dans les listes d'emails",
+        "compact": "Compacte",
+        "regular": "Normale",
+        "comfortable": "Confortable"
+      },
+      "animations": {
+        "label": "Activer les animations",
+        "description": "Afficher les transitions et effets fluides"
+      }
+    },
+    "language_region": {
+      "title": "Langue et région",
+      "description": "Configurez vos préférences linguistiques et régionales",
+      "language": {
+        "label": "Langue",
+        "description": "Choisissez votre langue préférée",
+        "english": "English",
+        "french": "Français"
+      },
+      "date_format": {
+        "label": "Format de date",
+        "description": "Comment les dates doivent être affichées",
+        "regional": "Régional",
+        "iso": "ISO 8601",
+        "custom": "Personnalisé"
+      },
+      "time_format": {
+        "label": "Format d'heure",
+        "description": "Choisissez entre 12 heures ou 24 heures",
+        "12h": "12 heures",
+        "24h": "24 heures"
+      },
+      "first_day": {
+        "label": "Premier jour de la semaine",
+        "description": "Commencer la semaine le dimanche ou le lundi",
+        "sunday": "Dimanche",
+        "monday": "Lundi"
+      }
+    },
+    "email_behavior": {
+      "title": "Comportement email",
+      "description": "Configurez la gestion des emails",
+      "mark_read": {
+        "label": "Marquer comme lu",
+        "description": "Quand marquer les emails comme lus à l'ouverture",
+        "instant": "Instantanément",
+        "delay_3s": "Après 3 secondes",
+        "delay_5s": "Après 5 secondes",
+        "never": "Jamais"
+      },
+      "delete_action": {
+        "label": "Action de suppression",
+        "description": "Que se passe-t-il quand vous supprimez un email",
+        "trash": "Déplacer vers la corbeille",
+        "permanent": "Supprimer définitivement"
+      },
+      "show_preview": {
+        "label": "Afficher l'aperçu",
+        "description": "Afficher l'aperçu de l'email dans la liste"
+      },
+      "emails_per_page": {
+        "label": "Emails par page",
+        "description": "Nombre d'emails à charger à la fois",
+        "25": "25 emails",
+        "50": "50 emails",
+        "100": "100 emails"
+      },
+      "external_content": {
+        "label": "Contenu externe",
+        "description": "Comment gérer les images et le contenu externe",
+        "ask": "Toujours demander",
+        "block": "Toujours bloquer",
+        "allow": "Toujours autoriser"
+      }
+    },
+    "composer": {
+      "title": "Compositeur",
+      "description": "Configurez les paramètres de composition d'email",
+      "autosave": {
+        "label": "Intervalle de sauvegarde automatique",
+        "description": "Fréquence de sauvegarde automatique des brouillons",
+        "30s": "Toutes les 30 secondes",
+        "1m": "Toutes les minutes",
+        "2m": "Toutes les 2 minutes",
+        "5m": "Toutes les 5 minutes"
+      },
+      "send_confirmation": {
+        "label": "Confirmation d'envoi",
+        "description": "Demander une confirmation avant d'envoyer les emails"
+      },
+      "default_reply": {
+        "label": "Mode de réponse par défaut",
+        "description": "Action par défaut lors du clic sur répondre",
+        "reply": "Répondre",
+        "reply_all": "Répondre à tous"
+      }
+    },
+    "privacy": {
+      "title": "Confidentialité et sécurité",
+      "description": "Gérez vos paramètres de confidentialité et sécurité",
+      "external_images": {
+        "label": "Bloquer les images externes",
+        "description": "Empêcher le suivi par les images externes"
+      },
+      "session_timeout": {
+        "label": "Délai d'expiration de session",
+        "description": "Déconnexion automatique après inactivité",
+        "never": "Jamais",
+        "30m": "30 minutes",
+        "1h": "1 heure",
+        "4h": "4 heures"
+      },
+      "clear_cache": {
+        "label": "Vider le cache",
+        "description": "Supprimer les données en cache et fichiers temporaires",
+        "button": "Vider le cache",
+        "confirm": "Êtes-vous sûr de vouloir vider le cache ?",
+        "success": "Cache vidé avec succès"
+      }
+    },
+    "account": {
+      "title": "Compte",
+      "description": "Consultez les informations de votre compte",
+      "email": {
+        "label": "Adresse email",
+        "value": "{{email}}"
+      },
+      "server": {
+        "label": "Serveur JMAP",
+        "value": "{{server}}"
+      },
+      "storage": {
+        "label": "Utilisation du stockage",
+        "used": "{{used}} sur {{total}} utilisés",
+        "percentage": "{{percent}}% utilisé"
+      },
+      "last_sync": {
+        "label": "Dernière synchronisation",
+        "value": "{{time}}"
+      }
+    },
+    "advanced": {
+      "title": "Avancé",
+      "description": "Options avancées et paramètres développeur",
+      "debug_mode": {
+        "label": "Mode débogage",
+        "description": "Activer la journalisation détaillée pour le dépannage"
+      },
+      "keyboard_shortcuts": {
+        "label": "Raccourcis clavier",
+        "description": "Voir les raccourcis clavier disponibles",
+        "button": "Voir les raccourcis"
+      },
+      "reset_settings": {
+        "label": "Réinitialiser les paramètres",
+        "description": "Restaurer tous les paramètres par défaut",
+        "button": "Réinitialiser"
+      },
+      "export_settings": {
+        "label": "Exporter les paramètres",
+        "description": "Télécharger vos paramètres au format JSON",
+        "button": "Exporter"
+      },
+      "import_settings": {
+        "label": "Importer les paramètres",
+        "description": "Charger les paramètres depuis un fichier JSON",
+        "button": "Importer"
+      }
+    }
+  },
+  "errors": {
+    "page_error_title": "Une erreur s'est produite",
+    "page_error_description": "Nous avons rencontré une erreur inattendue. Veuillez réessayer ou retourner à la page d'accueil.",
+    "sidebar_error": "Impossible de charger les boîtes mail",
+    "email_list_error": "Impossible de charger les emails",
+    "viewer_error_title": "Impossible d'afficher l'email",
+    "viewer_error_description": "Un problème est survenu lors de l'affichage de cet email. Il peut contenir du contenu non pris en charge.",
+    "composer_error": "Impossible de charger le compositeur",
+    "settings_error_title": "Paramètres indisponibles",
+    "settings_error_description": "Impossible de charger les paramètres. Vos préférences peuvent ne pas être sauvegardées.",
+    "try_again": "Réessayer",
+    "reload": "Recharger",
+    "reload_emails": "Recharger les emails",
+    "reload_settings": "Recharger les paramètres",
+    "retry": "Réessayer",
+    "go_home": "Aller à la boîte de réception"
+  },
+  "context_menu": {
+    "reply": "Répondre",
+    "reply_all": "Répondre à tous",
+    "forward": "Transférer",
+    "mark_read": "Marquer comme lu",
+    "mark_unread": "Marquer comme non lu",
+    "star": "Marquer comme favori",
+    "unstar": "Retirer des favoris",
+    "move_to": "Déplacer vers...",
+    "archive": "Archiver",
+    "delete": "Supprimer",
+    "color_tag": "Étiquette de couleur",
+    "remove_color": "Supprimer la couleur",
+    "items_selected": "{{count}} emails sélectionnés"
+  },
+  "shortcuts": {
+    "title": "Raccourcis clavier",
+    "tip": "Appuyez sur ? à tout moment pour afficher cette aide",
+    "sections": {
+      "navigation": "Navigation",
+      "actions": "Actions email",
+      "global": "Global",
+      "threads": "Conversations"
+    },
+    "navigation": {
+      "next_email": "Email suivant",
+      "previous_email": "Email précédent",
+      "open_email": "Ouvrir l'email",
+      "close_email": "Fermer / Désélectionner"
+    },
+    "actions": {
+      "reply": "Répondre",
+      "reply_all": "Répondre à tous",
+      "forward": "Transférer",
+      "star": "Basculer favori",
+      "archive": "Archiver",
+      "delete": "Supprimer",
+      "mark_unread": "Marquer comme non lu",
+      "mark_read": "Marquer comme lu"
+    },
+    "global": {
+      "compose": "Composer un email",
+      "search": "Rechercher",
+      "help": "Afficher les raccourcis",
+      "refresh": "Actualiser les emails",
+      "select_all": "Tout sélectionner"
+    },
+    "threads": {
+      "expand_collapse": "Développer/réduire la conversation"
+    }
+  },
+  "threads": {
+    "messages_one": "{count} message",
+    "messages_other": "{count} messages",
+    "expand": "Développer la conversation",
+    "collapse": "Réduire la conversation",
+    "loading": "Chargement de la conversation...",
+    "mark_read": "Marquer la conversation comme lue",
+    "mark_unread": "Marquer la conversation comme non lue",
+    "archive": "Archiver la conversation",
+    "delete": "Supprimer la conversation",
+    "star": "Marquer la conversation comme favorite",
+    "unstar": "Retirer des favoris"
+  }
+}
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
new file mode 100644
index 00000000..960b10ad
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,8 @@
+const createNextIntlPlugin = require('next-intl/plugin');
+
+const withNextIntl = createNextIntlPlugin('./i18n/request.ts');
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = withNextIntl(nextConfig);
\ No newline at end of file
diff --git a/next.config.ts b/next.config.ts
new file mode 100644
index 00000000..e9ffa308
--- /dev/null
+++ b/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..0669a14e
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,7821 @@
+{
+  "name": "jmap-webmail",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "jmap-webmail",
+      "version": "0.1.0",
+      "dependencies": {
+        "@types/dompurify": "^3.0.5",
+        "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
+        "dompurify": "^3.2.7",
+        "jmap-jam": "^0.11.0",
+        "lucide-react": "^0.556.0",
+        "next": "^16.0.8",
+        "next-auth": "^4.24.11",
+        "next-intl": "^4.5.8",
+        "react": "^19.2.1",
+        "react-dom": "^19.2.1",
+        "tailwind-merge": "^3.3.1",
+        "zustand": "^5.0.9"
+      },
+      "devDependencies": {
+        "@tailwindcss/postcss": "^4",
+        "@types/node": "^22",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "@typescript-eslint/eslint-plugin": "^8.49.0",
+        "@typescript-eslint/parser": "^8.49.0",
+        "eslint": "^9.39.1",
+        "eslint-config-next": "^16.0.8",
+        "eslint-plugin-react": "^7.37.5",
+        "globals": "^16.5.0",
+        "husky": "^9.1.7",
+        "lint-staged": "^16.2.7",
+        "tailwindcss": "^4.1.17",
+        "typescript": "^5"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
+      "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
+      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
+      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.5"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
+      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.5",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.7.1.tgz",
+      "integrity": "sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.7.1.tgz",
+      "integrity": "sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
+      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz",
+      "integrity": "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
+      "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.1",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.39.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.1.tgz",
+      "integrity": "sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.6.tgz",
+      "integrity": "sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/fast-memoize": "2.2.7",
+        "@formatjs/intl-localematcher": "0.6.2",
+        "decimal.js": "^10.4.3",
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/ecma402-abstract/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.6.2.tgz",
+      "integrity": "sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.7.tgz",
+      "integrity": "sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.11.4.tgz",
+      "integrity": "sha512-7kR78cRrPNB4fjGFZg3Rmj5aah8rQj9KPzuLsmcSn4ipLXQvC04keycTI1F7kJYDwIXtT2+7IDEto842CfZBtw==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.3.6",
+        "@formatjs/icu-skeleton-parser": "1.8.16",
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.16.tgz",
+      "integrity": "sha512-H13E9Xl+PxBd8D5/6TVUluSpxGNvFSlN/b3coUp0e0JpuWXXnQDiavIpY3NnvSp4xhEMoXyyBvVfdFX8jglOHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.3.6",
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.10.tgz",
+      "integrity": "sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
+      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.10.0"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.0.8.tgz",
+      "integrity": "sha512-xP4WrQZuj9MdmLJy3eWFHepo+R3vznsMSS8Dy3wdA7FKpjCiesQ6DxZvdGziQisj0tEtCgBKJzjcAc4yZOgLEQ==",
+      "license": "MIT"
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.0.8.tgz",
+      "integrity": "sha512-1miV0qXDcLUaOdHridVPCh4i39ElRIAraseVIbb3BEqyZ5ol9sPyjTP/GNTPV5rBxqxjF6/vv5zQTVbhiNaLqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "3.3.1"
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.8.tgz",
+      "integrity": "sha512-yjVMvTQN21ZHOclQnhSFbjBTEizle+1uo4NV6L4rtS9WO3nfjaeJYw+H91G+nEf3Ef43TaEZvY5mPWfB/De7tA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.0.8.tgz",
+      "integrity": "sha512-+zu2N3QQ0ZOb6RyqQKfcu/pn0UPGmg+mUDqpAAEviAcEVEYgDckemOpiMRsBP3IsEKpcoKuNzekDcPczEeEIzA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.0.8.tgz",
+      "integrity": "sha512-LConttk+BeD0e6RG0jGEP9GfvdaBVMYsLJ5aDDweKiJVVCu6sGvo+Ohz9nQhvj7EQDVVRJMCGhl19DmJwGr6bQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.0.8.tgz",
+      "integrity": "sha512-JaXFAlqn8fJV+GhhA9lpg6da/NCN/v9ub98n3HoayoUSPOVdoxEEt86iT58jXqQCs/R3dv5ZnxGkW8aF4obMrQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.0.8.tgz",
+      "integrity": "sha512-O7M9it6HyNhsJp3HNAsJoHk5BUsfj7hRshfptpGcVsPZ1u0KQ/oVy8oxF7tlwxA5tR43VUP0yRmAGm1us514ng==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.0.8.tgz",
+      "integrity": "sha512-8+KClEC/GLI2dLYcrWwHu5JyC5cZYCFnccVIvmxpo6K+XQt4qzqM5L4coofNDZYkct/VCCyJWGbZZDsg6w6LFA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.0.8.tgz",
+      "integrity": "sha512-rpQ/PgTEgH68SiXmhu/cJ2hk9aZ6YgFvspzQWe2I9HufY6g7V02DXRr/xrVqOaKm2lenBFPNQ+KAaeveywqV+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.0.8.tgz",
+      "integrity": "sha512-jWpWjWcMQu2iZz4pEK2IktcfR+OA9+cCG8zenyLpcW8rN4rzjfOzH4yj/b1FiEAZHKS+5Vq8+bZyHi+2yqHbFA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4.0"
+      }
+    },
+    "node_modules/@panva/hkdf": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.2.1.tgz",
+      "integrity": "sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@schummar/icu-type-parser": {
+      "version": "1.21.5",
+      "resolved": "https://registry.npmjs.org/@schummar/icu-type-parser/-/icu-type-parser-1.21.5.tgz",
+      "integrity": "sha512-bXHSaW5jRTmke9Vd0h5P7BtWZG9Znqb8gSDxZnxaGSJnGwPLDPfS+3g0BKzeWqzgZPsIVZkM7m2tbo18cm5HBw==",
+      "license": "MIT"
+    },
+    "node_modules/@swc/core-darwin-arm64": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.15.3.tgz",
+      "integrity": "sha512-AXfeQn0CvcQ4cndlIshETx6jrAM45oeUrK8YeEY6oUZU/qzz0Id0CyvlEywxkWVC81Ajpd8TQQ1fW5yx6zQWkQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-darwin-x64": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.15.3.tgz",
+      "integrity": "sha512-p68OeCz1ui+MZYG4wmfJGvcsAcFYb6Sl25H9TxWl+GkBgmNimIiRdnypK9nBGlqMZAcxngNPtnG3kEMNnvoJ2A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm-gnueabihf": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.15.3.tgz",
+      "integrity": "sha512-Nuj5iF4JteFgwrai97mUX+xUOl+rQRHqTvnvHMATL/l9xE6/TJfPBpd3hk/PVpClMXG3Uvk1MxUFOEzM1JrMYg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-gnu": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.15.3.tgz",
+      "integrity": "sha512-2Nc/s8jE6mW2EjXWxO/lyQuLKShcmTrym2LRf5Ayp3ICEMX6HwFqB1EzDhwoMa2DcUgmnZIalesq2lG3krrUNw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-musl": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.15.3.tgz",
+      "integrity": "sha512-j4SJniZ/qaZ5g8op+p1G9K1z22s/EYGg1UXIb3+Cg4nsxEpF5uSIGEE4mHUfA70L0BR9wKT2QF/zv3vkhfpX4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-gnu": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.15.3.tgz",
+      "integrity": "sha512-aKttAZnz8YB1VJwPQZtyU8Uk0BfMP63iDMkvjhJzRZVgySmqt/apWSdnoIcZlUoGheBrcqbMC17GGUmur7OT5A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-musl": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.15.3.tgz",
+      "integrity": "sha512-oe8FctPu1gnUsdtGJRO2rvOUIkkIIaHqsO9xxN0bTR7dFTlPTGi2Fhk1tnvXeyAvCPxLIcwD8phzKg6wLv9yug==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-arm64-msvc": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.15.3.tgz",
+      "integrity": "sha512-L9AjzP2ZQ/Xh58e0lTRMLvEDrcJpR7GwZqAtIeNLcTK7JVE+QineSyHp0kLkO1rttCHyCy0U74kDTj0dRz6raA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-ia32-msvc": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.15.3.tgz",
+      "integrity": "sha512-B8UtogMzErUPDWUoKONSVBdsgKYd58rRyv2sHJWKOIMCHfZ22FVXICR4O/VwIYtlnZ7ahERcjayBHDlBZpR0aw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-x64-msvc": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.15.3.tgz",
+      "integrity": "sha512-SpZKMR9QBTecHeqpzJdYEfgw30Oo8b/Xl6rjSzBt1g0ZsXyy60KLXrp6IagQyfTYqNYE/caDvwtF2FPn7pomog==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@swc/types": {
+      "version": "0.1.25",
+      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.25.tgz",
+      "integrity": "sha512-iAoY/qRhNH8a/hBvm3zKj9qQ4oc2+3w1unPJa2XvTK3XjeLXtzcCingVPw/9e5mn1+0yPqxcBGp9Jf0pkfMb1g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3"
+      }
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz",
+      "integrity": "sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.17"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.17.tgz",
+      "integrity": "sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.17",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.17",
+        "@tailwindcss/oxide-darwin-x64": "4.1.17",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.17",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.17",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.17",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.17",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.17",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.17",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.17",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.17",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.17"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.17.tgz",
+      "integrity": "sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.17.tgz",
+      "integrity": "sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.17.tgz",
+      "integrity": "sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.17.tgz",
+      "integrity": "sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.17.tgz",
+      "integrity": "sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.17.tgz",
+      "integrity": "sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.17.tgz",
+      "integrity": "sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.17.tgz",
+      "integrity": "sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.17.tgz",
+      "integrity": "sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.17.tgz",
+      "integrity": "sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.6.0",
+        "@emnapi/runtime": "^1.6.0",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.0.7",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.17.tgz",
+      "integrity": "sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.17.tgz",
+      "integrity": "sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.17.tgz",
+      "integrity": "sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.17",
+        "@tailwindcss/oxide": "4.1.17",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.17"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "22.19.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.2.tgz",
+      "integrity": "sha512-LPM2G3Syo1GLzXLGJAKdqoU35XvrWzGJ21/7sgZTUpbkBaOasTj8tjwn6w+hCkqaa1TfJ/w67rJSwYItlJ2mYw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
+      "devOptional": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT"
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.49.0.tgz",
+      "integrity": "sha512-JXij0vzIaTtCwu6SxTh8qBc66kmf1xs7pI4UOiMDFVct6q86G0Zs7KRcEoJgY3Cav3x5Tq0MF5jwgpgLqgKG3A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.49.0",
+        "@typescript-eslint/type-utils": "8.49.0",
+        "@typescript-eslint/utils": "8.49.0",
+        "@typescript-eslint/visitor-keys": "8.49.0",
+        "ignore": "^7.0.0",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.49.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.49.0.tgz",
+      "integrity": "sha512-N9lBGA9o9aqb1hVMc9hzySbhKibHmB+N3IpoShyV6HyQYRGIhlrO5rQgttypi+yEeKsKI4idxC8Jw6gXKD4THA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.49.0",
+        "@typescript-eslint/types": "8.49.0",
+        "@typescript-eslint/typescript-estree": "8.49.0",
+        "@typescript-eslint/visitor-keys": "8.49.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.49.0.tgz",
+      "integrity": "sha512-/wJN0/DKkmRUMXjZUXYZpD1NEQzQAAn9QWfGwo+Ai8gnzqH7tvqS7oNVdTjKqOcPyVIdZdyCMoqN66Ia789e7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.49.0",
+        "@typescript-eslint/types": "^8.49.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.49.0.tgz",
+      "integrity": "sha512-npgS3zi+/30KSOkXNs0LQXtsg9ekZ8OISAOLGWA/ZOEn0ZH74Ginfl7foziV8DT+D98WfQ5Kopwqb/PZOaIJGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.49.0",
+        "@typescript-eslint/visitor-keys": "8.49.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.49.0.tgz",
+      "integrity": "sha512-8prixNi1/6nawsRYxet4YOhnbW+W9FK/bQPxsGB1D3ZrDzbJ5FXw5XmzxZv82X3B+ZccuSxo/X8q9nQ+mFecWA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.49.0.tgz",
+      "integrity": "sha512-KTExJfQ+svY8I10P4HdxKzWsvtVnsuCifU5MvXrRwoP2KOlNZ9ADNEWWsQTJgMxLzS5VLQKDjkCT/YzgsnqmZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.49.0",
+        "@typescript-eslint/typescript-estree": "8.49.0",
+        "@typescript-eslint/utils": "8.49.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.49.0.tgz",
+      "integrity": "sha512-e9k/fneezorUo6WShlQpMxXh8/8wfyc+biu6tnAqA81oWrEic0k21RHzP9uqqpyBBeBKu4T+Bsjy9/b8u7obXQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.49.0.tgz",
+      "integrity": "sha512-jrLdRuAbPfPIdYNppHJ/D0wN+wwNfJ32YTAm10eJVsFmrVpXQnDWBn8niCSMlWjvml8jsce5E/O+86IQtTbJWA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.49.0",
+        "@typescript-eslint/tsconfig-utils": "8.49.0",
+        "@typescript-eslint/types": "8.49.0",
+        "@typescript-eslint/visitor-keys": "8.49.0",
+        "debug": "^4.3.4",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.49.0.tgz",
+      "integrity": "sha512-N3W7rJw7Rw+z1tRsHZbK395TWSYvufBXumYtEGzypgMUthlg0/hmCImeA8hgO2d2G4pd7ftpxxul2J8OdtdaFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.49.0",
+        "@typescript-eslint/types": "8.49.0",
+        "@typescript-eslint/typescript-estree": "8.49.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.49.0.tgz",
+      "integrity": "sha512-LlKaciDe3GmZFphXIc79THF/YYBugZ7FS1pO581E/edlVVNbZKDy93evqmrfQ9/Y4uN0vVhX4iuchq26mK/iiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.49.0",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.11.1.tgz",
+      "integrity": "sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.11.1.tgz",
+      "integrity": "sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.11.1.tgz",
+      "integrity": "sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.11.1.tgz",
+      "integrity": "sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.11.1.tgz",
+      "integrity": "sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.11.1.tgz",
+      "integrity": "sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.11.1.tgz",
+      "integrity": "sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.11.1.tgz",
+      "integrity": "sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.11.1.tgz",
+      "integrity": "sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.11.1.tgz",
+      "integrity": "sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.11.1.tgz",
+      "integrity": "sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.11.1.tgz",
+      "integrity": "sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.11.1.tgz",
+      "integrity": "sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.11.1.tgz",
+      "integrity": "sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.11.1.tgz",
+      "integrity": "sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.11.1.tgz",
+      "integrity": "sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.11.1.tgz",
+      "integrity": "sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.11.1.tgz",
+      "integrity": "sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz",
+      "integrity": "sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-escapes": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.2.0.tgz",
+      "integrity": "sha512-g6LhBsl+GBPRWGWsBtutpzBYuIIdBkLEvad5C/va/74Db018+5TZiyA26cZJAr3Rft5lprVqOIPxf5Vid6tqAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "environment": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ast-types-flow": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
+      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.0.tgz",
+      "integrity": "sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.5",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.5.tgz",
+      "integrity": "sha512-D5vIoztZOq1XM54LUdttJVc96ggEsIfju2JBvht06pSzpckp3C7HReun67Bghzrtdsq9XdMGbSSB3v3GhMNmAA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001760",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001760.tgz",
+      "integrity": "sha512-7AAMPcueWELt1p3mi13HR/LHH0TJLT11cnwDJEs3xA4+CK/PLKeO9Kl1oru24htkyUKtkGCvAx4ohB0Ttry8Dw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+      "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-5.1.1.tgz",
+      "integrity": "sha512-SroPvNHxUnk+vIW/dOSfNqdy1sPEFkrTk6TUtqLCnBlo3N7TNYYkzzN7uSD6+jVjrdO4+p8nH7JzH6cIvUem6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "slice-ansi": "^7.1.0",
+        "string-width": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.2.tgz",
+      "integrity": "sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "license": "MIT"
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/dompurify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.1.tgz",
+      "integrity": "sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.267",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
+      "integrity": "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/environment": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
+      "integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/es-abstract": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
+      "integrity": "sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
+      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.0.3",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.6",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.4",
+        "safe-array-concat": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.39.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.1.tgz",
+      "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.39.1",
+        "@eslint/plugin-kit": "^0.4.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-next": {
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.0.8.tgz",
+      "integrity": "sha512-8J5cOAboXIV3f8OD6BOyj7Fik6n/as7J4MboiUSExWruf/lCu1OPR3ZVSdnta6WhzebrmAATEmNSBZsLWA6kbg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@next/eslint-plugin-next": "16.0.8",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.32.0",
+        "eslint-plugin-jsx-a11y": "^6.10.0",
+        "eslint-plugin-react": "^7.37.0",
+        "eslint-plugin-react-hooks": "^7.0.0",
+        "globals": "16.4.0",
+        "typescript-eslint": "^8.46.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=9.0.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-next/node_modules/globals": {
+      "version": "16.4.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-16.4.0.tgz",
+      "integrity": "sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-import-resolver-typescript": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.10.1.tgz",
+      "integrity": "sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@nolyfill/is-core-module": "1.0.39",
+        "debug": "^4.4.0",
+        "get-tsconfig": "^4.10.0",
+        "is-bun-module": "^2.0.0",
+        "stable-hash": "^0.0.5",
+        "tinyglobby": "^0.2.13",
+        "unrs-resolver": "^1.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-import-resolver-typescript"
+      },
+      "peerDependencies": {
+        "eslint": "*",
+        "eslint-plugin-import": "*",
+        "eslint-plugin-import-x": "*"
+      },
+      "peerDependenciesMeta": {
+        "eslint-plugin-import": {
+          "optional": true
+        },
+        "eslint-plugin-import-x": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
+      "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.12.1",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.16.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.1",
+        "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.9",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
+      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "aria-query": "^5.3.2",
+        "array-includes": "^3.1.8",
+        "array.prototype.flatmap": "^1.3.2",
+        "ast-types-flow": "^0.0.8",
+        "axe-core": "^4.10.0",
+        "axobject-query": "^4.1.0",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^3.3.5",
+        "language-tags": "^1.0.9",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.includes": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.1.tgz",
+      "integrity": "sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/eslint/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-east-asian-width": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz",
+      "integrity": "sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.0.tgz",
+      "integrity": "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-16.5.0.tgz",
+      "integrity": "sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
+    "node_modules/husky": {
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
+      "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "husky": "bin.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/intl-messageformat": {
+      "version": "10.7.18",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.18.tgz",
+      "integrity": "sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.3.6",
+        "@formatjs/fast-memoize": "2.2.7",
+        "@formatjs/icu-messageformat-parser": "2.11.4",
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bun-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz",
+      "integrity": "sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.7.1"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz",
+      "integrity": "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/jmap-jam": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/jmap-jam/-/jmap-jam-0.11.0.tgz",
+      "integrity": "sha512-XGtiLjAXKbpabsa67Ig5RU4KzpssdpyNSn0NBToD37qEbBHbx9m6XdC1OM8pCYNovOpXVXYbl93qABWX/5ixfg==",
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "4"
+      }
+    },
+    "node_modules/jose": {
+      "version": "4.15.9",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.9.tgz",
+      "integrity": "sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/language-subtag-registry": {
+      "version": "0.3.23",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
+      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/language-tags": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
+      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "language-subtag-registry": "^0.3.20"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lint-staged": {
+      "version": "16.2.7",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-16.2.7.tgz",
+      "integrity": "sha512-lDIj4RnYmK7/kXMya+qJsmkRFkGolciXjrsZ6PC25GdTfWOAWetR0ZbsNXRAj1EHHImRSalc+whZFg56F5DVow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^14.0.2",
+        "listr2": "^9.0.5",
+        "micromatch": "^4.0.8",
+        "nano-spawn": "^2.0.0",
+        "pidtree": "^0.6.0",
+        "string-argv": "^0.3.2",
+        "yaml": "^2.8.1"
+      },
+      "bin": {
+        "lint-staged": "bin/lint-staged.js"
+      },
+      "engines": {
+        "node": ">=20.17"
+      },
+      "funding": {
+        "url": "https://opencollective.com/lint-staged"
+      }
+    },
+    "node_modules/listr2": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-9.0.5.tgz",
+      "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cli-truncate": "^5.0.0",
+        "colorette": "^2.0.20",
+        "eventemitter3": "^5.0.1",
+        "log-update": "^6.1.0",
+        "rfdc": "^1.4.1",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/log-update": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
+      "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-escapes": "^7.0.0",
+        "cli-cursor": "^5.0.0",
+        "slice-ansi": "^7.1.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.556.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.556.0.tgz",
+      "integrity": "sha512-iOb8dRk7kLaYBZhR2VlV1CeJGxChBgUthpSP8wom9jfj79qovgG6qcSdiy6vkoREKPnbUYzJsCn4o4PtG3Iy+A==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mimic-function": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nano-spawn": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/nano-spawn/-/nano-spawn-2.0.0.tgz",
+      "integrity": "sha512-tacvGzUY5o2D8CBh2rrwxyNojUsZNU2zjNTzKQrkgGJQTbGAfArVWXSKMBokBeeg6C7OLRGUEyoFlYbfeWQIqw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/nano-spawn?sponsor=1"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/napi-postinstall": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
+      "integrity": "sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/next": {
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.0.8.tgz",
+      "integrity": "sha512-LmcZzG04JuzNXi48s5P+TnJBsTGPJunViNKV/iE4uM6kstjTQsQhvsAv+xF6MJxU2Pr26tl15eVbp0jQnsv6/g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@next/env": "16.0.8",
+        "@swc/helpers": "0.5.15",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "16.0.8",
+        "@next/swc-darwin-x64": "16.0.8",
+        "@next/swc-linux-arm64-gnu": "16.0.8",
+        "@next/swc-linux-arm64-musl": "16.0.8",
+        "@next/swc-linux-x64-gnu": "16.0.8",
+        "@next/swc-linux-x64-musl": "16.0.8",
+        "@next/swc-win32-arm64-msvc": "16.0.8",
+        "@next/swc-win32-x64-msvc": "16.0.8",
+        "sharp": "^0.34.4"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.51.1",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next-auth": {
+      "version": "4.24.13",
+      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.13.tgz",
+      "integrity": "sha512-sgObCfcfL7BzIK76SS5TnQtc3yo2Oifp/yIpfv6fMfeBOiBJkDWF3A2y9+yqnmJ4JKc2C+nMjSjmgDeTwgN1rQ==",
+      "license": "ISC",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@panva/hkdf": "^1.0.2",
+        "cookie": "^0.7.0",
+        "jose": "^4.15.5",
+        "oauth": "^0.9.15",
+        "openid-client": "^5.4.0",
+        "preact": "^10.6.3",
+        "preact-render-to-string": "^5.1.19",
+        "uuid": "^8.3.2"
+      },
+      "peerDependencies": {
+        "@auth/core": "0.34.3",
+        "next": "^12.2.5 || ^13 || ^14 || ^15 || ^16",
+        "nodemailer": "^7.0.7",
+        "react": "^17.0.2 || ^18 || ^19",
+        "react-dom": "^17.0.2 || ^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@auth/core": {
+          "optional": true
+        },
+        "nodemailer": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next-intl": {
+      "version": "4.5.8",
+      "resolved": "https://registry.npmjs.org/next-intl/-/next-intl-4.5.8.tgz",
+      "integrity": "sha512-BdN6494nvt09WtmW5gbWdwRhDDHC/Sg7tBMhN7xfYds3vcRCngSDXat81gmJkblw9jYOv8zXzzFJyu5VYXnJzg==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/amannn"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "^0.5.4",
+        "@swc/core": "^1.15.2",
+        "negotiator": "^1.0.0",
+        "next-intl-swc-plugin-extractor": "^4.5.8",
+        "po-parser": "^1.0.2",
+        "use-intl": "^4.5.8"
+      },
+      "peerDependencies": {
+        "next": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0",
+        "typescript": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next-intl-swc-plugin-extractor": {
+      "version": "4.5.8",
+      "resolved": "https://registry.npmjs.org/next-intl-swc-plugin-extractor/-/next-intl-swc-plugin-extractor-4.5.8.tgz",
+      "integrity": "sha512-hscCKUv+5GQ0CCNbvqZ8gaxnAGToCgDTbL++jgCq8SCk/ljtZDEeQZcMk46Nm6Ynn49Q/JKF4Npo/Sq1mpbusA==",
+      "license": "MIT"
+    },
+    "node_modules/next-intl/node_modules/@swc/core": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.3.tgz",
+      "integrity": "sha512-Qd8eBPkUFL4eAONgGjycZXj1jFCBW8Fd+xF0PzdTlBCWQIV1xnUT7B93wUANtW3KGjl3TRcOyxwSx/u/jyKw/Q==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "@swc/types": "^0.1.25"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/swc"
+      },
+      "optionalDependencies": {
+        "@swc/core-darwin-arm64": "1.15.3",
+        "@swc/core-darwin-x64": "1.15.3",
+        "@swc/core-linux-arm-gnueabihf": "1.15.3",
+        "@swc/core-linux-arm64-gnu": "1.15.3",
+        "@swc/core-linux-arm64-musl": "1.15.3",
+        "@swc/core-linux-x64-gnu": "1.15.3",
+        "@swc/core-linux-x64-musl": "1.15.3",
+        "@swc/core-win32-arm64-msvc": "1.15.3",
+        "@swc/core-win32-ia32-msvc": "1.15.3",
+        "@swc/core-win32-x64-msvc": "1.15.3"
+      },
+      "peerDependencies": {
+        "@swc/helpers": ">=0.5.17"
+      },
+      "peerDependenciesMeta": {
+        "@swc/helpers": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/oauth": {
+      "version": "0.9.15",
+      "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
+      "integrity": "sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==",
+      "license": "MIT"
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/oidc-token-hash": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/oidc-token-hash/-/oidc-token-hash-5.2.0.tgz",
+      "integrity": "sha512-6gj2m8cJZ+iSW8bm0FXdGF0YhIQbKrfP4yWTNzxc31U6MOjfEmB1rHvlYvxI1B7t7BCi1F2vYTT6YhtQRG4hxw==",
+      "license": "MIT",
+      "engines": {
+        "node": "^10.13.0 || >=12.0.0"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-function": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/openid-client": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/openid-client/-/openid-client-5.7.1.tgz",
+      "integrity": "sha512-jDBPgSVfTnkIh71Hg9pRvtJc6wTwqjRkN88+gCFtYWrlP4Yx2Dsrow8uPi3qLr/aeymPF3o2+dS+wOpglK04ew==",
+      "license": "MIT",
+      "dependencies": {
+        "jose": "^4.15.9",
+        "lru-cache": "^6.0.0",
+        "object-hash": "^2.2.0",
+        "oidc-token-hash": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pidtree": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.6.0.tgz",
+      "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "pidtree": "bin/pidtree.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/po-parser": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/po-parser/-/po-parser-1.0.2.tgz",
+      "integrity": "sha512-yTIQL8PZy7V8c0psPoJUx7fayez+Mo/53MZgX9MPuPHx+Dt+sRPNuRbI+6Oqxnddhkd68x4Nlgon/zizL1Xg+w==",
+      "license": "MIT"
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/preact": {
+      "version": "10.28.0",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.28.0.tgz",
+      "integrity": "sha512-rytDAoiXr3+t6OIP3WGlDd0ouCUG1iCWzkcY3++Nreuoi17y6T5i/zRhe6uYfoVcxq6YU+sBtJouuRDsq8vvqA==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
+    "node_modules/preact-render-to-string": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.6.tgz",
+      "integrity": "sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==",
+      "license": "MIT",
+      "dependencies": {
+        "pretty-format": "^3.8.0"
+      },
+      "peerDependencies": {
+        "preact": ">=10"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
+      "integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==",
+      "license": "MIT"
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "19.2.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
+      "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
+      "integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.1"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "devOptional": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/slice-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz",
+      "integrity": "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stable-hash": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
+      "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.1.0.tgz",
+      "integrity": "sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.3.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string.prototype.includes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
+      "integrity": "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
+      "integrity": "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tsconfig-paths/node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/typescript-eslint": {
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.49.0.tgz",
+      "integrity": "sha512-zRSVH1WXD0uXczCXw+nsdjGPUdx4dfrs5VQoHnUWmv1U3oNlAKv4FUNdLDhVUg+gYn+a5hUESqch//Rv5wVhrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.49.0",
+        "@typescript-eslint/parser": "8.49.0",
+        "@typescript-eslint/typescript-estree": "8.49.0",
+        "@typescript-eslint/utils": "8.49.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unrs-resolver": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
+      "integrity": "sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "napi-postinstall": "^0.3.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unrs-resolver"
+      },
+      "optionalDependencies": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.11.1",
+        "@unrs/resolver-binding-android-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-x64": "1.11.1",
+        "@unrs/resolver-binding-freebsd-x64": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-musl": "1.11.1",
+        "@unrs/resolver-binding-wasm32-wasi": "1.11.1",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.11.1"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.2.tgz",
+      "integrity": "sha512-E85pfNzMQ9jpKkA7+TJAi4TJN+tBCuWh5rUcS/sv6cFi+1q9LYDwDI5dpUL0u/73EElyQ8d3TEaeW4sPedBqYA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/use-intl": {
+      "version": "4.5.8",
+      "resolved": "https://registry.npmjs.org/use-intl/-/use-intl-4.5.8.tgz",
+      "integrity": "sha512-rWPV2Sirw55BQbA/7ndUBtsikh8WXwBrUkZJ1mD35+emj/ogPPqgCZdv1DdrEFK42AjF1g5w8d3x8govhqPH6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/fast-memoize": "^2.2.0",
+        "@schummar/icu-type-parser": "1.21.5",
+        "intl-messageformat": "^10.5.14"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
+      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
+      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.13.tgz",
+      "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.9.tgz",
+      "integrity": "sha512-ALBtUj0AfjJt3uNRQoL1tL2tMvj6Gp/6e39dnfT6uzpelGru8v1tPOGBzayOWbPJvujM8JojDk3E1LxeFisBNg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..fb910554
--- /dev/null
+++ b/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "jmap-webmail",
+  "version": "1.0.0",
+  "description": "A modern JMAP webmail client built for Stalwart Mail Server",
+  "author": "Matthieu MALVACHE <matthieu@root.cloud>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/root-fr/jmap-webmail.git"
+  },
+  "homepage": "https://github.com/root-fr/jmap-webmail",
+  "bugs": {
+    "url": "https://github.com/root-fr/jmap-webmail/issues"
+  },
+  "keywords": [
+    "jmap",
+    "webmail",
+    "stalwart",
+    "email",
+    "nextjs",
+    "react",
+    "typescript"
+  ],
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build --turbopack",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "prepare": "husky",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@types/dompurify": "^3.0.5",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "dompurify": "^3.2.7",
+    "jmap-jam": "^0.11.0",
+    "lucide-react": "^0.556.0",
+    "next": "^16.0.8",
+    "next-auth": "^4.24.11",
+    "next-intl": "^4.5.8",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "tailwind-merge": "^3.3.1",
+    "zustand": "^5.0.9"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@typescript-eslint/eslint-plugin": "^8.49.0",
+    "@typescript-eslint/parser": "^8.49.0",
+    "eslint": "^9.39.1",
+    "eslint-config-next": "^16.0.8",
+    "eslint-plugin-react": "^7.37.5",
+    "globals": "^16.5.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5"
+  }
+}
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 00000000..c7bcb4b1
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;
diff --git a/proxy.ts b/proxy.ts
new file mode 100644
index 00000000..cbec0b96
--- /dev/null
+++ b/proxy.ts
@@ -0,0 +1,14 @@
+import createMiddleware from 'next-intl/middleware';
+import { locales, defaultLocale } from './i18n/request';
+
+export default createMiddleware({
+  locales,
+  defaultLocale,
+  localePrefix: 'always', // Always show locale in URL for consistency
+  localeDetection: true // Enable browser language detection
+});
+
+export const config = {
+  // Skip all paths that should not be internationalized
+  matcher: ['/((?!api|_next|.*\\..*).*)']
+};
\ No newline at end of file
diff --git a/public/file.svg b/public/file.svg
new file mode 100644
index 00000000..004145cd
--- /dev/null
+++ b/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/public/globe.svg b/public/globe.svg
new file mode 100644
index 00000000..567f17b0
--- /dev/null
+++ b/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/public/next.svg b/public/next.svg
new file mode 100644
index 00000000..5174b28c
--- /dev/null
+++ b/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/public/vercel.svg b/public/vercel.svg
new file mode 100644
index 00000000..77053960
--- /dev/null
+++ b/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/public/window.svg b/public/window.svg
new file mode 100644
index 00000000..b2b2a44f
--- /dev/null
+++ b/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file
diff --git a/stores/auth-store.ts b/stores/auth-store.ts
new file mode 100644
index 00000000..85c0b203
--- /dev/null
+++ b/stores/auth-store.ts
@@ -0,0 +1,141 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { JMAPClient } from '@/lib/jmap/client';
+import { useEmailStore } from './email-store';
+
+interface AuthState {
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  error: string | null;
+  serverUrl: string | null;
+  username: string | null;
+  client: JMAPClient | null;
+
+  login: (serverUrl: string, username: string, password: string) => Promise<boolean>;
+  logout: () => void;
+  checkAuth: () => Promise<void>;
+  clearError: () => void;
+}
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set, get) => ({
+      isAuthenticated: false,
+      isLoading: false,
+      error: null,
+      serverUrl: null,
+      username: null,
+      client: null,
+
+      login: async (serverUrl, username, password) => {
+        set({ isLoading: true, error: null });
+
+        try {
+          // Create JMAP client
+          const client = new JMAPClient(serverUrl, username, password);
+
+          // Try to connect
+          await client.connect();
+
+          // Success - save state (but NOT the password)
+          set({
+            isAuthenticated: true,
+            isLoading: false,
+            serverUrl,
+            username,
+            client,
+            error: null,
+          });
+
+          return true;
+        } catch (error) {
+          console.error('Login error:', error);
+          let errorKey = 'generic';
+
+          // Map common errors to translation keys
+          if (error instanceof Error) {
+            if (error.message.includes('Invalid username or password') ||
+                error.message.includes('401') ||
+                error.message.includes('Unauthorized')) {
+              errorKey = 'invalid_credentials';
+            } else if (error.message.includes('network') ||
+                       error.message.includes('Failed to fetch')) {
+              errorKey = 'connection_failed';
+            }
+          }
+
+          set({
+            isLoading: false,
+            error: errorKey,
+            isAuthenticated: false,
+            client: null,
+          });
+          return false;
+        }
+      },
+
+      logout: () => {
+        const state = get();
+
+        // Disconnect the JMAP client if it exists
+        if (state.client) {
+          state.client.disconnect();
+        }
+
+        set({
+          isAuthenticated: false,
+          serverUrl: null,
+          username: null,
+          client: null,
+          error: null,
+        });
+
+        // Clear persisted storage
+        localStorage.removeItem('auth-storage');
+
+        // Clear email store state
+        useEmailStore.setState({
+          emails: [],
+          mailboxes: [],
+          selectedEmail: null,
+          selectedMailbox: "",
+          isLoading: false,
+          error: null,
+          searchQuery: "",
+          quota: null,
+        });
+      },
+
+      checkAuth: async () => {
+        const state = get();
+
+        // If authenticated but no client (e.g., after page refresh), we can't restore the session
+        // because we don't store passwords for security reasons
+        if (state.isAuthenticated && !state.client) {
+          // Reset auth state - user will need to log in again
+          set({
+            isAuthenticated: false,
+            isLoading: false,
+            client: null,
+            serverUrl: null,
+            username: null,
+          });
+        }
+
+        // Mark loading as complete
+        set({ isLoading: false });
+      },
+
+      clearError: () => set({ error: null }),
+    }),
+    {
+      name: 'auth-storage',
+      partialize: (state) => ({
+        // Only persist non-sensitive data
+        serverUrl: state.serverUrl,
+        username: state.username,
+        // Don't persist isAuthenticated since we can't restore the session without a password
+      }),
+    }
+  )
+);
\ No newline at end of file
diff --git a/stores/email-store.ts b/stores/email-store.ts
new file mode 100644
index 00000000..88277632
--- /dev/null
+++ b/stores/email-store.ts
@@ -0,0 +1,984 @@
+import { create } from "zustand";
+import { Email, Mailbox, StateChange } from "@/lib/jmap/types";
+import { JMAPClient } from "@/lib/jmap/client";
+import { useSettingsStore } from "@/stores/settings-store";
+
+interface EmailStore {
+  emails: Email[];
+  mailboxes: Mailbox[];
+  selectedEmail: Email | null;
+  selectedMailbox: string;
+  isLoading: boolean;
+  isLoadingEmail: boolean; // Track when a full email is being fetched
+  isLoadingMore: boolean; // Track when loading more emails (pagination)
+  error: string | null;
+  searchQuery: string;
+  quota: { used: number; total: number } | null;
+  processingReadStatus: Set<string>; // Track emails being marked as read/unread
+  selectedEmailIds: Set<string>; // Track selected emails for batch operations
+  hasMoreEmails: boolean; // Track if more emails are available to load
+  totalEmails: number; // Total number of emails in the current mailbox/query
+  isPushConnected: boolean; // Track if push notifications are connected
+  lastPushUpdate: number | null; // Timestamp of last push update
+  newEmailNotification: Email | null; // New email notification for toast
+
+  // Thread expansion state
+  expandedThreadIds: Set<string>; // Which threads are expanded in the list
+  threadEmailsCache: Map<string, Email[]>; // Cache of fully fetched thread emails
+  isLoadingThread: string | null; // Thread ID currently being loaded
+
+  setEmails: (emails: Email[]) => void;
+  setMailboxes: (mailboxes: Mailbox[]) => void;
+  selectEmail: (email: Email | null) => void;
+  selectMailbox: (mailboxId: string) => void;
+  setLoading: (loading: boolean) => void;
+  setLoadingEmail: (loading: boolean) => void;
+  setError: (error: string | null) => void;
+  setSearchQuery: (query: string) => void;
+  setQuota: (quota: { used: number; total: number } | null) => void;
+  toggleEmailSelection: (emailId: string) => void;
+  selectAllEmails: () => void;
+  clearSelection: () => void;
+
+  // JMAP operations
+  fetchMailboxes: (client: JMAPClient) => Promise<void>;
+  fetchEmails: (client: JMAPClient, mailboxId?: string) => Promise<void>;
+  loadMoreEmails: (client: JMAPClient) => Promise<void>;
+  fetchEmailContent: (client: JMAPClient, emailId: string) => Promise<Email | null>;
+  fetchQuota: (client: JMAPClient) => Promise<void>;
+  sendEmail: (client: JMAPClient, to: string[], subject: string, body: string, cc?: string[], bcc?: string[], draftId?: string) => Promise<void>;
+  deleteEmail: (client: JMAPClient, emailId: string) => Promise<void>;
+  markAsRead: (client: JMAPClient, emailId: string, read: boolean) => Promise<void>;
+  moveToMailbox: (client: JMAPClient, emailId: string, mailboxId: string) => Promise<void>;
+  searchEmails: (client: JMAPClient, query: string) => Promise<void>;
+  toggleStar: (client: JMAPClient, emailId: string) => Promise<void>;
+
+  // Batch operations
+  batchMarkAsRead: (client: JMAPClient, read: boolean) => Promise<void>;
+  batchDelete: (client: JMAPClient) => Promise<void>;
+  batchMoveToMailbox: (client: JMAPClient, mailboxId: string) => Promise<void>;
+
+  // Push notification handlers
+  setPushConnected: (connected: boolean) => void;
+  handleStateChange: (change: StateChange, client: JMAPClient) => Promise<void>;
+  refreshCurrentMailbox: (client: JMAPClient) => Promise<void>;
+  handleNewEmailNotification: (email: Email) => void;
+  clearNewEmailNotification: () => void;
+
+  // Thread expansion actions
+  toggleThreadExpansion: (threadId: string) => void;
+  fetchThreadEmails: (client: JMAPClient, threadId: string) => Promise<Email[]>;
+  collapseAllThreads: () => void;
+  updateThreadCache: (threadId: string, emails: Email[]) => void;
+
+  // Mock data for demo
+  loadMockData: () => void;
+}
+
+export const useEmailStore = create<EmailStore>((set, get) => ({
+  emails: [],
+  mailboxes: [],
+  selectedEmail: null,
+  selectedMailbox: "",
+  isLoading: false,
+  isLoadingEmail: false,
+  isLoadingMore: false,
+  error: null,
+  searchQuery: "",
+  quota: null,
+  processingReadStatus: new Set(),
+  selectedEmailIds: new Set(),
+  hasMoreEmails: false,
+  totalEmails: 0,
+  isPushConnected: false,
+  lastPushUpdate: null,
+  newEmailNotification: null,
+
+  // Thread expansion state
+  expandedThreadIds: new Set(),
+  threadEmailsCache: new Map(),
+  isLoadingThread: null,
+
+  setEmails: (emails) => set({ emails }),
+  setMailboxes: (mailboxes) => set({ mailboxes }),
+  selectEmail: (email) => set({ selectedEmail: email }),
+  selectMailbox: (mailboxId) => set({
+    selectedMailbox: mailboxId,
+    selectedEmail: null,
+    selectedEmailIds: new Set(),
+    expandedThreadIds: new Set(),
+    threadEmailsCache: new Map(),
+    isLoadingThread: null,
+  }),
+  setLoading: (loading) => set({ isLoading: loading }),
+  setLoadingEmail: (loading) => set({ isLoadingEmail: loading }),
+  setError: (error) => set({ error }),
+  setSearchQuery: (query) => set({ searchQuery: query }),
+  setQuota: (quota) => set({ quota }),
+
+  toggleEmailSelection: (emailId) => {
+    const { selectedEmailIds } = get();
+    const newSelection = new Set(selectedEmailIds);
+    if (newSelection.has(emailId)) {
+      newSelection.delete(emailId);
+    } else {
+      newSelection.add(emailId);
+    }
+    set({ selectedEmailIds: newSelection });
+  },
+
+  selectAllEmails: () => {
+    const { emails } = get();
+    const allIds = new Set(emails.map(e => e.id));
+    set({ selectedEmailIds: allIds });
+  },
+
+  clearSelection: () => {
+    set({ selectedEmailIds: new Set() });
+  },
+
+  // JMAP operations
+  fetchMailboxes: async (client) => {
+    set({ isLoading: true, error: null });
+    try {
+      const mailboxes = await client.getAllMailboxes();
+
+      // Auto-select inbox if no mailbox is currently selected
+      const currentSelectedMailbox = get().selectedMailbox;
+      if (!currentSelectedMailbox) {
+        // Find inbox from PRIMARY account (not shared accounts)
+        const inboxMailbox = mailboxes.find(m => m.role === 'inbox' && !m.isShared);
+        if (inboxMailbox) {
+          set({ mailboxes, selectedMailbox: inboxMailbox.id, isLoading: false });
+        } else {
+          set({ mailboxes, isLoading: false });
+        }
+      } else {
+        set({ mailboxes, isLoading: false });
+      }
+    } catch (error) {
+      set({
+        error: error instanceof Error ? error.message : "Failed to fetch mailboxes",
+        isLoading: false
+      });
+    }
+  },
+
+  fetchEmails: async (client, mailboxId) => {
+    set({ isLoading: true, error: null }); // Keep previous emails visible during transition
+    try {
+      const targetMailboxId = mailboxId || get().selectedMailbox;
+
+      // Find the mailbox to get its accountId (for shared folder support)
+      const mailboxes = get().mailboxes;
+      const mailbox = mailboxes.find(mb => mb.id === targetMailboxId);
+      // Only pass accountId for shared mailboxes, not for primary account
+      const accountId = mailbox?.isShared ? mailbox.accountId : undefined;
+      // Use originalId for JMAP queries (shared mailboxes use namespaced IDs in the store)
+      const jmapMailboxId = mailbox?.originalId || targetMailboxId;
+
+      // Get emails per page from settings
+      const emailsPerPage = useSettingsStore.getState().emailsPerPage;
+
+      const result = await client.getEmails(jmapMailboxId, accountId, emailsPerPage, 0);
+      set({
+        emails: result.emails,
+        hasMoreEmails: result.hasMore,
+        totalEmails: result.total,
+        isLoading: false
+      });
+    } catch (error) {
+      console.error('Failed to fetch emails:', error);
+      set({
+        error: error instanceof Error ? error.message : "Failed to fetch emails",
+        isLoading: false,
+        emails: [],
+        hasMoreEmails: false,
+        totalEmails: 0
+      });
+    }
+  },
+
+  loadMoreEmails: async (client) => {
+    const { isLoadingMore, hasMoreEmails, emails, selectedMailbox } = get();
+
+    // Don't load if already loading or no more emails
+    if (isLoadingMore || !hasMoreEmails) return;
+
+    set({ isLoadingMore: true, error: null });
+    try {
+      // Find the mailbox to get its accountId (for shared folder support)
+      const mailboxes = get().mailboxes;
+      const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
+      // Only pass accountId for shared mailboxes, not for primary account
+      const accountId = mailbox?.isShared ? mailbox.accountId : undefined;
+      // Use originalId for JMAP queries (shared mailboxes use namespaced IDs in the store)
+      const jmapMailboxId = mailbox?.originalId || selectedMailbox;
+
+      // Get emails per page from settings
+      const emailsPerPage = useSettingsStore.getState().emailsPerPage;
+
+      const result = await client.getEmails(jmapMailboxId, accountId, emailsPerPage, emails.length);
+
+      set({
+        emails: [...emails, ...result.emails],
+        hasMoreEmails: result.hasMore,
+        totalEmails: result.total,
+        isLoadingMore: false
+      });
+    } catch (error) {
+      console.error('Failed to load more emails:', error);
+      set({
+        error: error instanceof Error ? error.message : "Failed to load more emails",
+        isLoadingMore: false
+      });
+    }
+  },
+
+  fetchEmailContent: async (client, emailId) => {
+    try {
+      // Find the selected mailbox to determine accountId (for shared folders)
+      const selectedMailboxId = get().selectedMailbox;
+      const mailboxes = get().mailboxes;
+      const mailbox = mailboxes.find(mb => mb.id === selectedMailboxId);
+
+      // Only pass accountId for shared mailboxes
+      const accountId = mailbox?.isShared ? mailbox.accountId : undefined;
+
+      const email = await client.getEmail(emailId, accountId);
+
+      if (email) {
+        set({ selectedEmail: email });
+      }
+      return email;
+    } catch (error) {
+      set({
+        error: error instanceof Error ? error.message : "Failed to fetch email content"
+      });
+      return null;
+    }
+  },
+
+  fetchQuota: async (client) => {
+    try {
+      const quota = await client.getQuota();
+      set({ quota });
+    } catch {
+      // Don't set error state as quota is optional
+    }
+  },
+
+  sendEmail: async (client, to, subject, body, cc, bcc, draftId) => {
+    set({ isLoading: true, error: null });
+    try {
+      await client.sendEmail(to, subject, body, cc, bcc, draftId);
+      // Refresh emails after sending
+      await get().fetchEmails(client);
+      set({ isLoading: false });
+    } catch (error) {
+      set({
+        error: error instanceof Error ? error.message : "Failed to send email",
+        isLoading: false
+      });
+      throw error;
+    }
+  },
+
+  deleteEmail: async (client, emailId) => {
+    try {
+      // Get the email to check if it's unread and which mailboxes it belongs to
+      const email = get().emails.find(e => e.id === emailId);
+      if (!email) return;
+
+      const isUnread = !email.keywords?.$seen;
+
+      // Get delete action preference from settings
+      const deleteAction = useSettingsStore.getState().deleteAction;
+
+      // Determine accountId for shared folders
+      const selectedMailboxId = get().selectedMailbox;
+      const mailboxes = get().mailboxes;
+      const currentMailbox = mailboxes.find(mb => mb.id === selectedMailboxId);
+      const accountId = currentMailbox?.isShared ? currentMailbox.accountId : undefined;
+
+      // If deleteAction is 'trash', try to move to trash mailbox
+      if (deleteAction === 'trash') {
+        // Find trash mailbox for the correct account
+        const trashMailbox = mailboxes.find(mb => {
+          if (accountId) {
+            // For shared folders, match by accountId
+            return mb.role === 'trash' && mb.accountId === accountId;
+          }
+          // For primary account, find trash that's not from a shared folder
+          return mb.role === 'trash' && !mb.isShared;
+        });
+
+        if (trashMailbox) {
+          // Use originalId for shared mailboxes if available
+          const trashId = trashMailbox.originalId || trashMailbox.id;
+          await client.moveToTrash(emailId, trashId, accountId);
+
+          // Remove from local state (email moved to trash, not in current view)
+          set((state) => {
+            let updatedMailboxes = state.mailboxes;
+
+            // Update counters for source mailbox (email leaving)
+            if (email.mailboxIds) {
+              updatedMailboxes = state.mailboxes.map(mailbox => {
+                if (email.mailboxIds[mailbox.id]) {
+                  return {
+                    ...mailbox,
+                    totalEmails: Math.max(0, mailbox.totalEmails - 1),
+                    unreadEmails: isUnread ? Math.max(0, mailbox.unreadEmails - 1) : mailbox.unreadEmails,
+                    totalThreads: Math.max(0, mailbox.totalThreads - 1),
+                    unreadThreads: isUnread ? Math.max(0, mailbox.unreadThreads - 1) : mailbox.unreadThreads
+                  };
+                }
+                // Update trash mailbox counters (email arriving)
+                if (mailbox.id === trashMailbox.id) {
+                  return {
+                    ...mailbox,
+                    totalEmails: mailbox.totalEmails + 1,
+                    unreadEmails: isUnread ? mailbox.unreadEmails + 1 : mailbox.unreadEmails,
+                    totalThreads: mailbox.totalThreads + 1,
+                    unreadThreads: isUnread ? mailbox.unreadThreads + 1 : mailbox.unreadThreads
+                  };
+                }
+                return mailbox;
+              });
+            }
+
+            return {
+              emails: state.emails.filter(e => e.id !== emailId),
+              selectedEmail: state.selectedEmail?.id === emailId ? null : state.selectedEmail,
+              mailboxes: updatedMailboxes
+            };
+          });
+          return;
+        }
+        // If no trash mailbox found, fall through to permanent delete
+      }
+
+      // Permanent delete
+      await client.deleteEmail(emailId);
+
+      // Remove from local state and update mailbox counters if needed
+      set((state) => {
+        let updatedMailboxes = state.mailboxes;
+
+        // If the email was unread, decrement the unread counters
+        if (isUnread && email.mailboxIds) {
+          updatedMailboxes = state.mailboxes.map(mailbox => {
+            if (email.mailboxIds[mailbox.id]) {
+              return {
+                ...mailbox,
+                totalEmails: Math.max(0, mailbox.totalEmails - 1),
+                unreadEmails: Math.max(0, mailbox.unreadEmails - 1),
+                totalThreads: Math.max(0, mailbox.totalThreads - 1),
+                unreadThreads: Math.max(0, mailbox.unreadThreads - 1)
+              };
+            }
+            return mailbox;
+          });
+        } else if (email.mailboxIds) {
+          // If email was read, only decrement total counters
+          updatedMailboxes = state.mailboxes.map(mailbox => {
+            if (email.mailboxIds[mailbox.id]) {
+              return {
+                ...mailbox,
+                totalEmails: Math.max(0, mailbox.totalEmails - 1),
+                totalThreads: Math.max(0, mailbox.totalThreads - 1)
+              };
+            }
+            return mailbox;
+          });
+        }
+
+        return {
+          emails: state.emails.filter(e => e.id !== emailId),
+          selectedEmail: state.selectedEmail?.id === emailId ? null : state.selectedEmail,
+          mailboxes: updatedMailboxes
+        };
+      });
+    } catch (error) {
+      set({
+        error: error instanceof Error ? error.message : "Failed to delete email"
+      });
+      throw error;
+    }
+  },
+
+  markAsRead: async (client, emailId, read) => {
+    try {
+      // Check if this email is already being processed
+      const processingKey = `${emailId}-${read}`;
+      const currentProcessing = get().processingReadStatus;
+      if (currentProcessing.has(processingKey)) {
+        return; // Already being processed
+      }
+
+      // Get the email to check its current state and mailboxes
+      const email = get().emails.find(e => e.id === emailId);
+      if (!email) return;
+
+      // Check if already in the desired state
+      const isCurrentlyRead = email.keywords?.$seen === true;
+      if (isCurrentlyRead === read) {
+        return; // Already in desired state
+      }
+
+      // Add to processing set
+      set((state) => ({
+        processingReadStatus: new Set([...state.processingReadStatus, processingKey])
+      }));
+
+      // Determine accountId for shared folders
+      const selectedMailboxId = get().selectedMailbox;
+      const mailboxes = get().mailboxes;
+      const mailbox = mailboxes.find(mb => mb.id === selectedMailboxId);
+      const accountId = mailbox?.isShared ? mailbox.accountId : undefined;
+
+      await client.markAsRead(emailId, read, accountId);
+
+      // Update local state including mailbox counters
+      set((state) => {
+        // Remove from processing set
+        const newProcessingSet = new Set(state.processingReadStatus);
+        newProcessingSet.delete(processingKey);
+
+        // Only update counters if the state is actually changing
+        const emailInState = state.emails.find(e => e.id === emailId);
+        if (!emailInState) return { processingReadStatus: newProcessingSet };
+
+        const wasRead = emailInState.keywords?.$seen === true;
+        if (wasRead === read) {
+          return { processingReadStatus: newProcessingSet }; // State unchanged, skip counter update
+        }
+
+        const updatedMailboxes = state.mailboxes.map(mailbox => {
+          // Check if this email belongs to this mailbox
+          if (emailInState.mailboxIds && emailInState.mailboxIds[mailbox.id]) {
+            // Adjust unread counter: -1 if marking as read, +1 if marking as unread
+            const delta = read ? -1 : 1;
+            return {
+              ...mailbox,
+              unreadEmails: Math.max(0, mailbox.unreadEmails + delta),
+              unreadThreads: Math.max(0, mailbox.unreadThreads + delta)
+            };
+          }
+          return mailbox;
+        });
+
+        return {
+          emails: state.emails.map(e =>
+            e.id === emailId ? { ...e, keywords: { ...e.keywords, $seen: read } } : e
+          ),
+          selectedEmail: state.selectedEmail?.id === emailId
+            ? { ...state.selectedEmail, keywords: { ...state.selectedEmail.keywords, $seen: read } }
+            : state.selectedEmail,
+          mailboxes: updatedMailboxes,
+          processingReadStatus: newProcessingSet
+        };
+      });
+    } catch (error) {
+      // Remove from processing set on error
+      set((state) => {
+        const newProcessingSet = new Set(state.processingReadStatus);
+        newProcessingSet.delete(`${emailId}-${read}`);
+        return {
+          processingReadStatus: newProcessingSet,
+          error: error instanceof Error ? error.message : "Failed to update email"
+        };
+      });
+      throw error;
+    }
+  },
+
+  moveToMailbox: async (client, emailId, destinationMailboxId) => {
+    try {
+      // Get the email to check its current mailboxes and read status
+      const email = get().emails.find(e => e.id === emailId);
+      if (!email) return;
+
+      const isUnread = !email.keywords?.$seen;
+      const currentMailboxIds = email.mailboxIds ? Object.keys(email.mailboxIds) : [];
+
+      await client.moveEmail(emailId, destinationMailboxId);
+
+      // Update local state and mailbox counters
+      set((state) => {
+        // Update mailbox counters
+        const updatedMailboxes = state.mailboxes.map(mailbox => {
+          // Remove from current mailboxes
+          if (currentMailboxIds.includes(mailbox.id)) {
+            return {
+              ...mailbox,
+              totalEmails: Math.max(0, mailbox.totalEmails - 1),
+              unreadEmails: isUnread ? Math.max(0, mailbox.unreadEmails - 1) : mailbox.unreadEmails,
+              totalThreads: Math.max(0, mailbox.totalThreads - 1),
+              unreadThreads: isUnread ? Math.max(0, mailbox.unreadThreads - 1) : mailbox.unreadThreads
+            };
+          }
+          // Add to destination mailbox
+          else if (mailbox.id === destinationMailboxId) {
+            return {
+              ...mailbox,
+              totalEmails: mailbox.totalEmails + 1,
+              unreadEmails: isUnread ? mailbox.unreadEmails + 1 : mailbox.unreadEmails,
+              totalThreads: mailbox.totalThreads + 1,
+              unreadThreads: isUnread ? mailbox.unreadThreads + 1 : mailbox.unreadThreads
+            };
+          }
+          return mailbox;
+        });
+
+        // Update the email's mailboxIds
+        const updatedEmails = state.emails.map(e => {
+          if (e.id === emailId) {
+            return {
+              ...e,
+              mailboxIds: { [destinationMailboxId]: true }
+            };
+          }
+          return e;
+        });
+
+        // If moved email is selected, update selectedEmail too
+        const updatedSelectedEmail = state.selectedEmail?.id === emailId
+          ? { ...state.selectedEmail, mailboxIds: { [destinationMailboxId]: true } }
+          : state.selectedEmail;
+
+        return {
+          emails: updatedEmails,
+          selectedEmail: updatedSelectedEmail,
+          mailboxes: updatedMailboxes
+        };
+      });
+    } catch (error) {
+      set({
+        error: error instanceof Error ? error.message : "Failed to move email"
+      });
+      throw error;
+    }
+  },
+
+  searchEmails: async (client, query) => {
+    set({ isLoading: true, error: null, searchQuery: query, emails: [], hasMoreEmails: false, totalEmails: 0 }); // Clear emails for loading state
+    try {
+      const emails = await client.searchEmails(query);
+      set({ emails, isLoading: false, hasMoreEmails: false, totalEmails: emails.length });
+    } catch (error) {
+      set({
+        error: error instanceof Error ? error.message : "Failed to search emails",
+        isLoading: false,
+        emails: [],
+        hasMoreEmails: false,
+        totalEmails: 0
+      });
+    }
+  },
+
+  toggleStar: async (client, emailId) => {
+    try {
+      const email = get().emails.find(e => e.id === emailId);
+      if (!email) return;
+
+      const isFlagged = email.keywords.$flagged || false;
+      await client.toggleStar(emailId, !isFlagged);
+
+      // Update local state
+      set((state) => ({
+        emails: state.emails.map(e =>
+          e.id === emailId ? { ...e, keywords: { ...e.keywords, $flagged: !isFlagged } } : e
+        ),
+        selectedEmail: state.selectedEmail?.id === emailId
+          ? { ...state.selectedEmail, keywords: { ...state.selectedEmail.keywords, $flagged: !isFlagged } }
+          : state.selectedEmail
+      }));
+    } catch (error) {
+      set({
+        error: error instanceof Error ? error.message : "Failed to update star"
+      });
+      throw error;
+    }
+  },
+
+  // Batch operations
+  batchMarkAsRead: async (client, read) => {
+    const { selectedEmailIds, emails, mailboxes } = get();
+    if (selectedEmailIds.size === 0) return;
+
+    set({ isLoading: true, error: null });
+    try {
+      const emailIdsArray = Array.from(selectedEmailIds);
+      await client.batchMarkAsRead(emailIdsArray, read);
+
+      // Update local state
+      const updatedEmails = emails.map(email =>
+        selectedEmailIds.has(email.id)
+          ? { ...email, keywords: { ...email.keywords, $seen: read } }
+          : email
+      );
+
+      // Update mailbox counters
+      const affectedEmails = emails.filter(e => selectedEmailIds.has(e.id));
+      const updatedMailboxes = mailboxes.map(mailbox => {
+        let deltaUnread = 0;
+        affectedEmails.forEach(email => {
+          if (email.mailboxIds?.[mailbox.id]) {
+            const wasRead = email.keywords?.$seen === true;
+            if (wasRead !== read) {
+              deltaUnread += read ? -1 : 1;
+            }
+          }
+        });
+
+        return {
+          ...mailbox,
+          unreadEmails: Math.max(0, mailbox.unreadEmails + deltaUnread),
+          unreadThreads: Math.max(0, mailbox.unreadThreads + deltaUnread)
+        };
+      });
+
+      set({
+        emails: updatedEmails,
+        mailboxes: updatedMailboxes,
+        selectedEmailIds: new Set(),
+        isLoading: false
+      });
+    } catch (error) {
+      set({
+        error: error instanceof Error ? error.message : "Failed to update emails",
+        isLoading: false
+      });
+    }
+  },
+
+  batchDelete: async (client) => {
+    const { selectedEmailIds, emails, mailboxes } = get();
+    if (selectedEmailIds.size === 0) return;
+
+    set({ isLoading: true, error: null });
+    try {
+      const emailIdsArray = Array.from(selectedEmailIds);
+      await client.batchDeleteEmails(emailIdsArray);
+
+      // Remove deleted emails from local state
+      const remainingEmails = emails.filter(e => !selectedEmailIds.has(e.id));
+
+      // Update mailbox counters
+      const deletedEmails = emails.filter(e => selectedEmailIds.has(e.id));
+      const updatedMailboxes = mailboxes.map(mailbox => {
+        let deltaTotalEmails = 0;
+        let deltaUnreadEmails = 0;
+
+        deletedEmails.forEach(email => {
+          if (email.mailboxIds?.[mailbox.id]) {
+            deltaTotalEmails--;
+            if (!email.keywords?.$seen) {
+              deltaUnreadEmails--;
+            }
+          }
+        });
+
+        return {
+          ...mailbox,
+          totalEmails: Math.max(0, mailbox.totalEmails + deltaTotalEmails),
+          unreadEmails: Math.max(0, mailbox.unreadEmails + deltaUnreadEmails),
+          totalThreads: Math.max(0, mailbox.totalThreads + deltaTotalEmails),
+          unreadThreads: Math.max(0, mailbox.unreadThreads + deltaUnreadEmails)
+        };
+      });
+
+      set({
+        emails: remainingEmails,
+        mailboxes: updatedMailboxes,
+        selectedEmailIds: new Set(),
+        selectedEmail: null,
+        isLoading: false
+      });
+    } catch (error) {
+      set({
+        error: error instanceof Error ? error.message : "Failed to delete emails",
+        isLoading: false
+      });
+    }
+  },
+
+  batchMoveToMailbox: async (client, toMailboxId) => {
+    const { selectedEmailIds, emails } = get();
+    if (selectedEmailIds.size === 0) return;
+
+    set({ isLoading: true, error: null });
+    try {
+      const emailIdsArray = Array.from(selectedEmailIds);
+      await client.batchMoveEmails(emailIdsArray, toMailboxId);
+
+      // Update local state - remove from current view since they moved
+      const remainingEmails = emails.filter(e => !selectedEmailIds.has(e.id));
+
+      set({
+        emails: remainingEmails,
+        selectedEmailIds: new Set(),
+        isLoading: false
+      });
+
+      // Refresh emails to get updated list
+      await get().fetchEmails(client, get().selectedMailbox);
+    } catch (error) {
+      set({
+        error: error instanceof Error ? error.message : "Failed to move emails",
+        isLoading: false
+      });
+    }
+  },
+
+  // Push notification handlers
+  setPushConnected: (connected) => {
+    set({ isPushConnected: connected });
+  },
+
+  handleStateChange: async (change, client) => {
+    try {
+      // Update last push update timestamp
+      set({ lastPushUpdate: Date.now() });
+
+      // Get the current account ID from the client (assuming primary account)
+      const accountId = client.getAccountId();
+
+      // Check if there are changes for this account
+      const accountChanges = change.changed[accountId];
+      if (!accountChanges) return;
+
+      // Handle Email state changes - refresh current mailbox
+      if (accountChanges.Email) {
+        await get().refreshCurrentMailbox(client);
+      }
+
+      // Handle Mailbox state changes - refresh mailbox list
+      if (accountChanges.Mailbox) {
+        await get().fetchMailboxes(client);
+      }
+
+      // Could also handle Thread, EmailSubmission, Identity changes in the future
+    } catch (error) {
+      console.error('Failed to handle state change:', error);
+      set({
+        error: error instanceof Error ? error.message : "Failed to handle push notification"
+      });
+    }
+  },
+
+  refreshCurrentMailbox: async (client) => {
+    const { selectedMailbox } = get();
+
+    // Only refresh if a mailbox is currently selected
+    if (!selectedMailbox) return;
+
+    try {
+      // Fetch emails for the current mailbox without clearing the list first
+      // This provides a smoother update experience
+      const mailboxes = get().mailboxes;
+      const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
+      const accountId = mailbox?.isShared ? mailbox.accountId : undefined;
+      const jmapMailboxId = mailbox?.originalId || selectedMailbox;
+
+      // Get emails per page from settings
+      const emailsPerPage = useSettingsStore.getState().emailsPerPage;
+
+      const result = await client.getEmails(jmapMailboxId, accountId, emailsPerPage, 0);
+
+      // Check if there are new emails by comparing the first email ID
+      const currentFirstEmailId = get().emails[0]?.id;
+      const newFirstEmailId = result.emails[0]?.id;
+
+      // If the first email changed, we have a new email - trigger notification
+      if (currentFirstEmailId !== newFirstEmailId && result.emails[0]) {
+        get().handleNewEmailNotification(result.emails[0]);
+      }
+
+      set({
+        emails: result.emails,
+        hasMoreEmails: result.hasMore,
+        totalEmails: result.total
+      });
+    } catch (error) {
+      console.error('Failed to refresh current mailbox:', error);
+      // Don't set error state for background refreshes to avoid disrupting the UI
+    }
+  },
+
+  handleNewEmailNotification: (email) => {
+    // Set the new email notification state
+    // This can be consumed by a toast component
+    set({ newEmailNotification: email });
+  },
+
+  clearNewEmailNotification: () => {
+    set({ newEmailNotification: null });
+  },
+
+  // Thread expansion actions
+  toggleThreadExpansion: (threadId) => {
+    const { expandedThreadIds } = get();
+    const newExpandedThreadIds = new Set(expandedThreadIds);
+
+    if (newExpandedThreadIds.has(threadId)) {
+      newExpandedThreadIds.delete(threadId);
+    } else {
+      newExpandedThreadIds.add(threadId);
+    }
+
+    set({ expandedThreadIds: newExpandedThreadIds });
+  },
+
+  fetchThreadEmails: async (client, threadId) => {
+    const { threadEmailsCache, selectedMailbox, mailboxes } = get();
+
+    // Check if we already have this thread cached
+    const cachedEmails = threadEmailsCache.get(threadId);
+    if (cachedEmails && cachedEmails.length > 0) {
+      return cachedEmails;
+    }
+
+    // Set loading state
+    set({ isLoadingThread: threadId });
+
+    try {
+      // Determine accountId for shared folders
+      const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
+      const accountId = mailbox?.isShared ? mailbox.accountId : undefined;
+
+      // Fetch all emails in the thread
+      const emails = await client.getThreadEmails(threadId, accountId);
+
+      // Update cache
+      const newCache = new Map(get().threadEmailsCache);
+      newCache.set(threadId, emails);
+
+      set({
+        threadEmailsCache: newCache,
+        isLoadingThread: null
+      });
+
+      return emails;
+    } catch (error) {
+      console.error('Failed to fetch thread emails:', error);
+      set({ isLoadingThread: null });
+      return [];
+    }
+  },
+
+  collapseAllThreads: () => {
+    set({
+      expandedThreadIds: new Set(),
+      isLoadingThread: null
+    });
+  },
+
+  updateThreadCache: (threadId, emails) => {
+    const newCache = new Map(get().threadEmailsCache);
+    newCache.set(threadId, emails);
+    set({ threadEmailsCache: newCache });
+  },
+
+  loadMockData: () => {
+    const mockEmails: Email[] = [
+      {
+        id: "1",
+        threadId: "thread-1",
+        mailboxIds: { inbox: true },
+        keywords: { $seen: false },
+        size: 1024,
+        receivedAt: new Date().toISOString(),
+        from: [{ name: "Alice Johnson", email: "alice@example.com" }],
+        to: [{ email: "you@example.com" }],
+        subject: "Q4 Budget Review Meeting",
+        preview: "Hi team, I wanted to schedule a meeting to review our Q4 budget projections. Are you available this Thursday at 2 PM? We need to discuss...",
+        hasAttachment: true,
+      },
+      {
+        id: "2",
+        threadId: "thread-2",
+        mailboxIds: { inbox: true },
+        keywords: { $seen: true, $flagged: true },
+        size: 512,
+        receivedAt: new Date(Date.now() - 3600000).toISOString(),
+        from: [{ name: "Bob Smith", email: "bob@company.com" }],
+        to: [{ email: "you@example.com" }],
+        subject: "Re: Project Timeline Update",
+        preview: "Thanks for the update. The new timeline looks good to me. I've reviewed the milestones and everything seems achievable...",
+        hasAttachment: false,
+      },
+      {
+        id: "3",
+        threadId: "thread-3",
+        mailboxIds: { inbox: true },
+        keywords: { $seen: false },
+        size: 2048,
+        receivedAt: new Date(Date.now() - 7200000).toISOString(),
+        from: [{ name: "Carol White", email: "carol@design.co" }],
+        to: [{ email: "you@example.com" }],
+        subject: "New Design Mockups Ready",
+        preview: "Hey! The new mockups for the landing page are ready for review. I've incorporated all the feedback from last week's meeting...",
+        hasAttachment: true,
+      },
+      {
+        id: "4",
+        threadId: "thread-4",
+        mailboxIds: { inbox: true },
+        keywords: { $seen: true },
+        size: 768,
+        receivedAt: new Date(Date.now() - 86400000).toISOString(),
+        from: [{ name: "GitHub", email: "notifications@github.com" }],
+        to: [{ email: "you@example.com" }],
+        subject: "[PR] Feature: Add authentication module",
+        preview: "A new pull request has been opened in your repository. This PR adds a comprehensive authentication module with OAuth support...",
+        hasAttachment: false,
+      },
+      {
+        id: "5",
+        threadId: "thread-5",
+        mailboxIds: { inbox: true },
+        keywords: { $seen: true },
+        size: 1536,
+        receivedAt: new Date(Date.now() - 172800000).toISOString(),
+        from: [{ name: "David Lee", email: "david@startup.io" }],
+        to: [{ email: "you@example.com" }],
+        subject: "Investment Proposal Discussion",
+        preview: "Following up on our call yesterday, I'm sending over the investment proposal we discussed. The terms are quite favorable...",
+        hasAttachment: true,
+      },
+    ];
+
+    const mockMailboxes: Mailbox[] = [
+      {
+        id: "inbox",
+        name: "Inbox",
+        role: "inbox",
+        sortOrder: 1,
+        totalEmails: 5,
+        unreadEmails: 2,
+        totalThreads: 5,
+        unreadThreads: 2,
+        myRights: {
+          mayReadItems: true,
+          mayAddItems: true,
+          mayRemoveItems: true,
+          maySetSeen: true,
+          maySetKeywords: true,
+          mayCreateChild: true,
+          mayRename: true,
+          mayDelete: true,
+          maySubmit: true,
+        },
+        isSubscribed: true,
+      },
+    ];
+
+    set({
+      emails: mockEmails,
+      mailboxes: mockMailboxes,
+    });
+  },
+}));
\ No newline at end of file
diff --git a/stores/locale-store.ts b/stores/locale-store.ts
new file mode 100644
index 00000000..7cc5e96b
--- /dev/null
+++ b/stores/locale-store.ts
@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface LocaleStore {
+  locale: string;
+  setLocale: (locale: string) => void;
+}
+
+export const useLocaleStore = create<LocaleStore>()(
+  persist(
+    (set) => ({
+      locale: 'en',
+      setLocale: (locale) => set({ locale }),
+    }),
+    {
+      name: 'locale-storage',
+    }
+  )
+);
\ No newline at end of file
diff --git a/stores/settings-store.ts b/stores/settings-store.ts
new file mode 100644
index 00000000..ba16793b
--- /dev/null
+++ b/stores/settings-store.ts
@@ -0,0 +1,213 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export type FontSize = 'small' | 'medium' | 'large';
+export type ListDensity = 'compact' | 'regular' | 'comfortable';
+export type DeleteAction = 'trash' | 'permanent';
+export type ReplyMode = 'reply' | 'replyAll';
+export type DateFormat = 'regional' | 'iso' | 'custom';
+export type TimeFormat = '12h' | '24h';
+export type FirstDayOfWeek = 0 | 1; // 0 = Sunday, 1 = Monday
+export type ExternalContentPolicy = 'ask' | 'block' | 'allow';
+
+interface SettingsState {
+  // Appearance
+  fontSize: FontSize;
+  listDensity: ListDensity;
+  animationsEnabled: boolean;
+
+  // Language & Region
+  dateFormat: DateFormat;
+  timeFormat: TimeFormat;
+  firstDayOfWeek: FirstDayOfWeek;
+
+  // Email Behavior
+  markAsReadDelay: number; // milliseconds (0 = instant, -1 = never)
+  deleteAction: DeleteAction;
+  showPreview: boolean;
+  emailsPerPage: number;
+  externalContentPolicy: ExternalContentPolicy;
+
+  // Composer
+  autoSaveDraftInterval: number; // milliseconds
+  sendConfirmation: boolean;
+  defaultReplyMode: ReplyMode;
+
+  // Privacy & Security
+  sessionTimeout: number; // minutes (0 = never)
+
+  // Advanced
+  debugMode: boolean;
+
+  // Actions
+  updateSetting: <K extends keyof SettingsState>(
+    key: K,
+    value: SettingsState[K]
+  ) => void;
+  resetToDefaults: () => void;
+  exportSettings: () => string;
+  importSettings: (json: string) => boolean;
+}
+
+const DEFAULT_SETTINGS = {
+  // Appearance
+  fontSize: 'medium' as FontSize,
+  listDensity: 'regular' as ListDensity,
+  animationsEnabled: true,
+
+  // Language & Region
+  dateFormat: 'regional' as DateFormat,
+  timeFormat: '24h' as TimeFormat,
+  firstDayOfWeek: 1 as FirstDayOfWeek, // Monday
+
+  // Email Behavior
+  markAsReadDelay: 0, // Instant
+  deleteAction: 'trash' as DeleteAction,
+  showPreview: true,
+  emailsPerPage: 50,
+  externalContentPolicy: 'ask' as ExternalContentPolicy,
+
+  // Composer
+  autoSaveDraftInterval: 60000, // 1 minute
+  sendConfirmation: false,
+  defaultReplyMode: 'reply' as ReplyMode,
+
+  // Privacy & Security
+  sessionTimeout: 0, // Never
+
+  // Advanced
+  debugMode: false,
+};
+
+export const useSettingsStore = create<SettingsState>()(
+  persist(
+    (set, get) => ({
+      ...DEFAULT_SETTINGS,
+
+      updateSetting: (key, value) => {
+        set({ [key]: value });
+
+        // Apply font size to document root
+        if (key === 'fontSize') {
+          applyFontSize(value as FontSize);
+        }
+
+        // Apply list density to document root
+        if (key === 'listDensity') {
+          applyListDensity(value as ListDensity);
+        }
+
+        // Apply animations to document root
+        if (key === 'animationsEnabled') {
+          applyAnimations(value as boolean);
+        }
+      },
+
+      resetToDefaults: () => {
+        set(DEFAULT_SETTINGS);
+        applyFontSize(DEFAULT_SETTINGS.fontSize);
+        applyListDensity(DEFAULT_SETTINGS.listDensity);
+        applyAnimations(DEFAULT_SETTINGS.animationsEnabled);
+      },
+
+      exportSettings: () => {
+        const state = get();
+        const settings = {
+          fontSize: state.fontSize,
+          listDensity: state.listDensity,
+          animationsEnabled: state.animationsEnabled,
+          dateFormat: state.dateFormat,
+          timeFormat: state.timeFormat,
+          firstDayOfWeek: state.firstDayOfWeek,
+          markAsReadDelay: state.markAsReadDelay,
+          deleteAction: state.deleteAction,
+          showPreview: state.showPreview,
+          emailsPerPage: state.emailsPerPage,
+          externalContentPolicy: state.externalContentPolicy,
+          autoSaveDraftInterval: state.autoSaveDraftInterval,
+          sendConfirmation: state.sendConfirmation,
+          defaultReplyMode: state.defaultReplyMode,
+          sessionTimeout: state.sessionTimeout,
+          debugMode: state.debugMode,
+        };
+        return JSON.stringify(settings, null, 2);
+      },
+
+      importSettings: (json: string) => {
+        try {
+          const settings = JSON.parse(json);
+
+          // Validate settings
+          if (typeof settings !== 'object' || settings === null) {
+            return false;
+          }
+
+          // Apply settings
+          Object.keys(settings).forEach((key) => {
+            if (key in DEFAULT_SETTINGS) {
+              set({ [key]: settings[key] });
+            }
+          });
+
+          // Apply visual settings
+          applyFontSize(get().fontSize);
+          applyListDensity(get().listDensity);
+          applyAnimations(get().animationsEnabled);
+
+          return true;
+        } catch (error) {
+          console.error('Failed to import settings:', error);
+          return false;
+        }
+      },
+    }),
+    {
+      name: 'settings-storage',
+      version: 1,
+    }
+  )
+);
+
+// Helper functions to apply settings to DOM
+function applyFontSize(size: FontSize) {
+  if (typeof document === 'undefined') return;
+
+  const root = document.documentElement;
+  const sizeMap = {
+    small: '14px',
+    medium: '16px',
+    large: '18px',
+  };
+  root.style.setProperty('--font-size-base', sizeMap[size]);
+}
+
+function applyListDensity(density: ListDensity) {
+  if (typeof document === 'undefined') return;
+
+  const root = document.documentElement;
+  const densityMap = {
+    compact: '32px',
+    regular: '48px',
+    comfortable: '64px',
+  };
+  root.style.setProperty('--list-item-height', densityMap[density]);
+}
+
+function applyAnimations(enabled: boolean) {
+  if (typeof document === 'undefined') return;
+
+  const root = document.documentElement;
+  if (enabled) {
+    root.style.removeProperty('--transition-duration');
+  } else {
+    root.style.setProperty('--transition-duration', '0s');
+  }
+}
+
+// Initialize settings on load
+if (typeof window !== 'undefined') {
+  const store = useSettingsStore.getState();
+  applyFontSize(store.fontSize);
+  applyListDensity(store.listDensity);
+  applyAnimations(store.animationsEnabled);
+}
diff --git a/stores/theme-store.ts b/stores/theme-store.ts
new file mode 100644
index 00000000..f51c7ecd
--- /dev/null
+++ b/stores/theme-store.ts
@@ -0,0 +1,89 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+type Theme = 'light' | 'dark' | 'system';
+
+interface ThemeState {
+  theme: Theme;
+  resolvedTheme: 'light' | 'dark';
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+  initializeTheme: () => void;
+}
+
+const getSystemTheme = (): 'light' | 'dark' => {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+
+const applyTheme = (theme: 'light' | 'dark') => {
+  if (typeof document === 'undefined') return;
+
+  const root = document.documentElement;
+  // Ensure both classes are handled properly
+  if (theme === 'dark') {
+    root.classList.remove('light');
+    root.classList.add('dark');
+  } else {
+    root.classList.remove('dark');
+    root.classList.add('light');
+  }
+
+  // Store in localStorage for immediate access
+  localStorage.setItem('theme-applied', theme);
+};
+
+export const useThemeStore = create<ThemeState>()(
+  persist(
+    (set, get) => ({
+      theme: 'system',
+      resolvedTheme: 'light',
+
+      setTheme: (theme) => {
+        const resolvedTheme = theme === 'system' ? getSystemTheme() : theme;
+        applyTheme(resolvedTheme);
+        set({ theme, resolvedTheme });
+      },
+
+      toggleTheme: () => {
+        const { theme } = get();
+        const nextTheme: Theme =
+          theme === 'light' ? 'dark' :
+          theme === 'dark' ? 'system' : 'light';
+        get().setTheme(nextTheme);
+      },
+
+      initializeTheme: () => {
+        const { theme } = get();
+        const resolvedTheme = theme === 'system' ? getSystemTheme() : theme;
+        applyTheme(resolvedTheme);
+        set({ resolvedTheme });
+
+        // Listen for system theme changes
+        if (typeof window !== 'undefined') {
+          const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+          const handleChange = () => {
+            const { theme } = get();
+            if (theme === 'system') {
+              const newResolvedTheme = getSystemTheme();
+              applyTheme(newResolvedTheme);
+              set({ resolvedTheme: newResolvedTheme });
+            }
+          };
+
+          // Modern browsers
+          if (mediaQuery.addEventListener) {
+            mediaQuery.addEventListener('change', handleChange);
+          } else {
+            // Fallback for older browsers
+            mediaQuery.addListener(handleChange);
+          }
+        }
+      },
+    }),
+    {
+      name: 'theme-storage',
+      partialize: (state) => ({ theme: state.theme }),
+    }
+  )
+);
\ No newline at end of file
diff --git a/stores/toast-store.ts b/stores/toast-store.ts
new file mode 100644
index 00000000..3577754f
--- /dev/null
+++ b/stores/toast-store.ts
@@ -0,0 +1,52 @@
+import { create } from "zustand";
+import { Toast } from "@/components/ui/toast";
+
+interface ToastStore {
+  toasts: Toast[];
+  addToast: (toast: Omit<Toast, "id">) => void;
+  removeToast: (id: string) => void;
+  clearToasts: () => void;
+}
+
+export const useToastStore = create<ToastStore>((set) => ({
+  toasts: [],
+
+  addToast: (toast) => {
+    const id = Math.random().toString(36).substring(2, 11);
+    const newToast: Toast = {
+      ...toast,
+      id,
+      duration: toast.duration ?? 5000, // Default 5 seconds
+    };
+
+    set((state) => ({
+      toasts: [...state.toasts, newToast],
+    }));
+  },
+
+  removeToast: (id) => {
+    set((state) => ({
+      toasts: state.toasts.filter((toast) => toast.id !== id),
+    }));
+  },
+
+  clearToasts: () => {
+    set({ toasts: [] });
+  },
+}));
+
+// Helper functions for common toast types
+export const toast = {
+  success: (title: string, message?: string) => {
+    useToastStore.getState().addToast({ type: "success", title, message });
+  },
+  error: (title: string, message?: string) => {
+    useToastStore.getState().addToast({ type: "error", title, message, duration: 10000 });
+  },
+  info: (title: string, message?: string) => {
+    useToastStore.getState().addToast({ type: "info", title, message });
+  },
+  warning: (title: string, message?: string) => {
+    useToastStore.getState().addToast({ type: "warning", title, message });
+  },
+};
\ No newline at end of file
diff --git a/stores/ui-store.ts b/stores/ui-store.ts
new file mode 100644
index 00000000..20d344b7
--- /dev/null
+++ b/stores/ui-store.ts
@@ -0,0 +1,72 @@
+"use client";
+
+import { create } from "zustand";
+
+export type ActiveView = "sidebar" | "list" | "viewer";
+
+interface UIState {
+  // Mobile view state
+  activeView: ActiveView;
+  sidebarOpen: boolean;
+
+  // Device detection (hydrated client-side)
+  isMobile: boolean;
+  isTablet: boolean;
+  isDesktop: boolean;
+
+  // Actions
+  setActiveView: (view: ActiveView) => void;
+  setSidebarOpen: (open: boolean) => void;
+  toggleSidebar: () => void;
+  setDeviceType: (isMobile: boolean, isTablet: boolean, isDesktop: boolean) => void;
+
+  // Navigation helpers
+  showEmailList: () => void;
+  showEmailViewer: () => void;
+  goBack: () => void;
+}
+
+export const useUIStore = create<UIState>((set, get) => ({
+  // Initial state (SSR-safe defaults)
+  activeView: "list",
+  sidebarOpen: false,
+  isMobile: false,
+  isTablet: false,
+  isDesktop: true,
+
+  // Actions
+  setActiveView: (view) => set({ activeView: view }),
+
+  setSidebarOpen: (open) => set({ sidebarOpen: open }),
+
+  toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
+
+  setDeviceType: (isMobile, isTablet, isDesktop) =>
+    set({ isMobile, isTablet, isDesktop }),
+
+  // Navigation helpers for mobile
+  showEmailList: () => {
+    const { isMobile } = get();
+    if (isMobile) {
+      set({ activeView: "list", sidebarOpen: false });
+    }
+  },
+
+  showEmailViewer: () => {
+    const { isMobile } = get();
+    if (isMobile) {
+      set({ activeView: "viewer" });
+    }
+  },
+
+  goBack: () => {
+    const { activeView, isMobile } = get();
+    if (!isMobile) return;
+
+    if (activeView === "viewer") {
+      set({ activeView: "list" });
+    } else if (activeView === "list") {
+      set({ sidebarOpen: true });
+    }
+  },
+}));
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 00000000..d4e90b64
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,39 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  darkMode: 'class',
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: [
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Inter",
+          "system-ui",
+          "sans-serif",
+        ],
+        mono: ["JetBrains Mono", "monospace"],
+      },
+      animation: {
+        "fade-in": "fade-in 0.2s ease-out",
+        "slide-in": "slide-in 0.3s ease-out",
+      },
+      keyframes: {
+        "fade-in": {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
+        "slide-in": {
+          "0%": { transform: "translateY(-10px)", opacity: "0" },
+          "100%": { transform: "translateY(0)", opacity: "1" },
+        },
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..e7ff3a26
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}