docs: rename DEVELOPMENT.md to development.md and update links

- Rename docs/contributing/DEVELOPMENT.md to development.md (lowercase)
- Update all references from DEVELOPMENT.md to Development.md (titlecase links)
- Update docs/contributing/contributing.md
- Update docs/index.md

SCREENSHOT_AUTOMATION.md

@@ -0,0 +1,773 @@
+# Screenshot Automation Plan for Bookhoard Documentation
+
+> **Status**: Ready to implement when frontend is complete  
+> **Last Updated**: 2026-02-03
+
+This document outlines the complete plan for automatically generating screenshots for Bookhoard documentation using Playwright.
+
+## Overview
+
+Playwright will be used to:
+1. Navigate the running Bookhoard server
+2. Perform key user/admin workflows
+3. Capture screenshots at each step
+4. Save to `docs/images/` organized by documentation section
+5. Generate/update markdown files with proper image references
+
+## Prerequisites (To Verify When Ready)
+
+### Frontend Pages Complete
+Verify these pages are fully functional before starting:
+
+- [ ] `/` - Login page
+- [ ] `/register` - Registration page
+- [ ] `/dashboard` - Main dashboard with library browsing
+- [ ] `/collections` - Collections management
+- [ ] `/devices` - Device management and registration
+- [ ] `/conflicts` - Sync conflict resolution
+- [ ] `/progress` - Reading progress tracking
+- [ ] `/analytics` - Usage analytics
+- [ ] `/queue` - Sync queue monitoring
+- [ ] `/admin` - Admin dashboard
+- [ ] `/admin/profile` - Profile settings
+- [ ] `/admin/library` - Library management
+- [ ] `/api-explorer` - API testing interface
+
+### Test Environment Ready
+- [ ] Bookhoard server running on `http://localhost:8765`
+- [ ] Test database seeded with sample data (books, collections, devices)
+- [ ] Test admin account ready (username, password, role=admin)
+- [ ] Test regular user account ready (username, password, role=user)
+
+## Installation & Setup
+
+```bash
+# Install Playwright (run in project root)
+npm init -y
+npm install -D @playwright/test
+npx playwright install chromium
+```
+
+Project structure after setup:
+```
+bookhoard/
+├── docs/
+│   ├── images/           # Screenshots will be stored here
+│   │   ├── user/
+│   │   ├── admin/
+│   │   ├── devices/
+│   │   └── sync/
+│   └── *.md              # Existing markdown files
+├── screenshots/          # Playwright test files
+│   ├── auth.spec.ts
+│   ├── user-workflows.spec.ts
+│   ├── admin-workflows.spec.ts
+│   ├── device-workflows.spec.ts
+│   ├── sync-workflows.spec.ts
+│   └── config.ts
+├── .env.screenshots      # Environment configuration
+└── ...
+```
+
+## Environment Setup
+
+Create `.env.screenshots` in the project root:
+
+```env
+# Bookhoard Server
+BASE_URL=http://localhost:8765
+
+# Admin Account (for admin guide screenshots)
+ADMIN_EMAIL=admin@example.com
+ADMIN_USERNAME=admin
+ADMIN_PASSWORD=SecureAdminPass123!
+
+# Regular User Account (for user guide screenshots)
+USER_EMAIL=user@example.com
+USER_USERNAME=user
+USER_PASSWORD=SecureUserPass456!
+```
+
+## Questions to Ask When Ready
+
+Before running the screenshot automation, ask the user:
+
+### 1. Server Access
+**Q**: Where is the Bookhoard server running?
+- [ ] `localhost:8765` (default)
+- [ ] Custom port: `________`
+- [ ] Remote URL: `________`
+
+### 2. Test Credentials
+**Q**: What credentials should Playwright use?
+
+**Admin Account** (for admin guide screenshots):
+- Username: `________`
+- Password: `________`
+
+**Regular User Account** (for user guide screenshots):
+- Username: `________`
+- Password: `________`
+
+### 3. Screenshot Format
+**Q**: What format for screenshots?
+- [ ] **WebP** (recommended - modern, good compression)
+- [ ] PNG (highest quality, larger files)
+- [ ] JPEG (smaller files, compression artifacts)
+
+### 4. Screenshot Dimensions
+**Q**: What viewport sizes for screenshots?
+- [ ] **Desktop**: 1920x1080 (full-width screenshots)
+- [ ] **Tablet**: 768x1024 (responsive documentation)
+- [ ] **Mobile**: 375x667 (mobile documentation)
+- [ ] All three sizes (comprehensive coverage)
+
+### 5. Theme
+**Q**: What theme should screenshots use?
+- [ ] **Default** (Tokyo Night theme as seen in templates)
+- [ ] Light theme (if implemented)
+- [ ] Multiple themes (document theme switching)
+
+### 6. Language
+**Q**: What language/region for the UI?
+- [ ] **English** (default)
+- [ ] Other: `________`
+
+## Screenshot Plan by Documentation Section
+
+### 1. User Guide Screenshots
+**File**: `docs/user/user-guide.md`
+
+**Screenshots Needed**:
+
+| Screenshot Name | Description | Page/Action |
+|-----------------|-------------|-------------|
+| `login-page.webp` | Login form with filled credentials | `/` - Login page |
+| `dashboard-overview.webp` | Main dashboard showing libraries | `/dashboard` |
+| `library-grid.webp` | Media items grid view | `/dashboard` → Click library |
+| `book-detail.webp` | Book detail view with metadata | `/dashboard` → Click book |
+| `search-results.webp` | Search in action | `/dashboard` → Type in search |
+| `filter-panel.webp` | Filter options expanded | `/dashboard` → Open filters |
+| `collections-list.webp` | Collections grid view | `/collections` |
+| `create-collection.webp` | New collection modal | `/collections` → Click "New Collection" |
+| `reading-progress.webp` | Progress tracking view | `/progress` |
+| `analytics-view.webp` | User analytics dashboard | `/analytics` |
+
+**Estimated Screenshots**: ~10
+
+### 2. Admin Guide Screenshots
+**File**: `docs/user/admin-guide.md`
+
+**Screenshots Needed**:
+
+| Screenshot Name | Description | Page/Action |
+|-----------------|-------------|-------------|
+| `admin-dashboard.webp` | Admin overview panel | `/admin` |
+| `user-management.webp` | User list with actions | `/admin` → Users section |
+| `add-user.webp` | Add new user form | `/admin` → Click "Add User" |
+| `library-settings.webp` | Library configuration | `/admin/library` |
+| `add-library.webp` | Create new library form | `/admin/library` → Click "Add Library" |
+| `analytics-admin.webp` | Admin analytics view | `/analytics` (admin view) |
+| `sync-queue.webp` | Sync queue monitoring | `/queue` |
+| `theme-settings.webp` | Theme selection interface | `/admin/profile` → Theme section |
+| `user-profile-edit.webp` | Edit user profile | `/admin/profile` |
+
+**Estimated Screenshots**: ~9
+
+### 3. Device Setup Screenshots
+**File**: `docs/user/devices/kobo-setup.md` and `koreader-setup.md`
+
+**Screenshots Needed**:
+
+| Screenshot Name | Description | Page/Action |
+|-----------------|-------------|-------------|
+| `device-list.webp` | Device management page | `/devices` |
+| `add-device-modal.webp` | Add new device modal | `/devices` → Click "Add New Device" |
+| `device-form-kobo.webp` | Kobo device registration form | `/devices` → Select Kobo type |
+| `device-form-koreader.webp` | KOReader device registration form | `/devices` → Select KOReader type |
+| `device-qr-code.webp` | QR code for device approval | After device registration |
+| `device-approved.webp` | Device approved confirmation | After approving device |
+| `device-sync-settings.webp` | Sync configuration for device | `/devices` → Click device settings |
+| `shelf-mapping.webp` | Collection to shelf mapping | `/devices` → Click shelf mapping |
+| `sync-queue-item.webp` | Device sync in queue | `/queue` (device specific) |
+
+**Estimated Screenshots**: ~9
+
+### 4. Sync Guide Screenshots
+**File**: `docs/user/sync-guide.md`
+
+**Screenshots Needed**:
+
+| Screenshot Name | Description | Page/Action |
+|-----------------|-------------|-------------|
+| `sync-conflicts.webp` | Conflicts list view | `/conflicts` |
+| `conflict-resolution.webp` | Resolve conflict dialog | `/conflicts` → Click resolve |
+| `unlinked-books.webp` | Unlinked books list | `/unlinked-books` |
+| `book-linking.webp` | Link book to metadata | `/unlinked-books` → Click link |
+| `sync-success.webp` | Successful sync indicator | Any page after sync |
+
+**Estimated Screenshots**: ~5
+
+### 5. Settings Guide Screenshots
+**File**: `docs/user/settings-guide.md`
+
+**Screenshots Needed**:
+
+| Screenshot Name | Description | Page/Action |
+|-----------------|-------------|-------------|
+| `profile-overview.webp` | Profile settings page | `/admin/profile` |
+| `update-username.webp` | Username change form | `/admin/profile` |
+| `update-email.webp` | Email change form | `/admin/profile` |
+| `change-password.webp` | Password change form | `/admin/profile` |
+| `theme-selector.webp` | Theme selection dropdown | `/admin/profile` (if implemented) |
+
+**Estimated Screenshots**: ~5
+
+## Playwright Test Files
+
+### `screenshots/config.ts` - Playwright Configuration
+
+```typescript
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './',
+  fullyParallel: false,
+  retries: 1,
+  reporter: 'list',
+  use: {
+    baseURL: process.env.BASE_URL || 'http://localhost:8765',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium-desktop',
+      use: { 
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1920, height: 1080 }
+      },
+    },
+  ],
+});
+```
+
+### `screenshots/auth.spec.ts` - Authentication Screenshots
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Authentication Screenshots', () => {
+  test('Login page', async ({ page }) => {
+    await page.goto('/');
+    
+    await page.screenshot({ 
+      path: 'docs/images/user/login-page.webp',
+      fullPage: true 
+    });
+  });
+
+  test('User login flow', async ({ page }) => {
+    await page.goto('/');
+    
+    await page.fill('input[name="login"]', process.env.USER_USERNAME || 'user');
+    await page.fill('input[name="password"]', process.env.USER_PASSWORD || 'password');
+    
+    await page.screenshot({ 
+      path: 'docs/images/user/login-form-filled.webp',
+      fullPage: true 
+    });
+    
+    await page.click('button[type="submit"]');
+    await page.waitForURL('/dashboard', { timeout: 5000 });
+    
+    await page.screenshot({ 
+      path: 'docs/images/user/dashboard-after-login.webp',
+      fullPage: true 
+    });
+  });
+
+  test('Admin login flow', async ({ page }) => {
+    await page.goto('/');
+    
+    await page.fill('input[name="login"]', process.env.ADMIN_USERNAME || 'admin');
+    await page.fill('input[name="password"]', process.env.ADMIN_PASSWORD || 'password');
+    
+    await page.click('button[type="submit"]');
+    await page.waitForURL('/dashboard', { timeout: 5000 });
+    
+    await page.goto('/admin');
+    
+    await page.screenshot({ 
+      path: 'docs/images/admin/admin-dashboard.webp',
+      fullPage: true 
+    });
+  });
+
+  test('Registration page', async ({ page }) => {
+    await page.goto('/register');
+    
+    await page.screenshot({ 
+      path: 'docs/images/user/registration-page.webp',
+      fullPage: true 
+    });
+    
+    await page.fill('input[name="email"]', 'newuser@example.com');
+    await page.fill('input[name="username"]', 'newuser');
+    await page.fill('input[name="password"]', 'SecurePass123!');
+    
+    await page.screenshot({ 
+      path: 'docs/images/user/registration-form-filled.webp',
+      fullPage: true 
+    });
+  });
+});
+```
+
+### `screenshots/user-workflows.spec.ts` - User Guide Screenshots
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('User Guide Screenshots', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    await page.fill('input[name="login"]', process.env.USER_USERNAME || 'user');
+    await page.fill('input[name="password"]', process.env.USER_PASSWORD || 'password');
+    await page.click('button[type="submit"]');
+    await page.waitForURL('/dashboard', { timeout: 5000 });
+  });
+
+  test('Dashboard overview', async ({ page }) => {
+    await page.goto('/dashboard');
+    
+    await page.screenshot({ 
+      path: 'docs/images/user/dashboard-overview.webp',
+      fullPage: true 
+    });
+  });
+
+  test('Library grid view', async ({ page }) => {
+    await page.goto('/dashboard');
+    
+    await page.waitForSelector('#libraries-container', { timeout: 5000 });
+    
+    const firstLibrary = page.locator('[data-library]').first();
+    if (await firstLibrary.isVisible()) {
+      await firstLibrary.click();
+      await page.waitForURL(/\/dashboard/, { timeout: 5000 });
+      
+      await page.screenshot({ 
+        path: 'docs/images/user/library-grid.webp',
+        fullPage: true 
+      });
+    }
+  });
+
+  test('Search functionality', async ({ page }) => {
+    await page.goto('/dashboard');
+    
+    await page.waitForSelector('#search-input', { timeout: 5000 });
+    
+    await page.fill('#search-input', 'science');
+    await page.waitForTimeout(1000);
+    
+    await page.screenshot({ 
+      path: 'docs/images/user/search-results.webp',
+      fullPage: true 
+    });
+  });
+
+  test('Filter panel', async ({ page }) => {
+    await page.goto('/dashboard');
+    
+    const filterPanel = page.locator('.filter-panel details');
+    if (await filterPanel.isVisible()) {
+      await filterPanel.click();
+      await page.waitForTimeout(500);
+      
+      await page.screenshot({ 
+        path: 'docs/images/user/filter-panel-open.webp',
+        fullPage: true 
+      });
+    }
+  });
+
+  test('Collections list', async ({ page }) => {
+    await page.goto('/collections');
+    
+    await page.screenshot({ 
+      path: 'docs/images/user/collections-list.webp',
+      fullPage: true 
+    });
+  });
+
+  test('Create collection modal', async ({ page }) => {
+    await page.goto('/collections');
+    
+    await page.click('button:has-text("New Collection"), button:has-text("Create Your First Collection")');
+    
+    await page.waitForSelector('#create-modal', { state: 'visible', timeout: 5000 });
+    
+    await page.fill('#collection-name', 'My Reading List');
+    await page.fill('#collection-description', 'Books I want to read');
+    
+    await page.screenshot({ 
+      path: 'docs/images/user/create-collection-modal.webp',
+      fullPage: true 
+    });
+  });
+
+  test('Reading progress view', async ({ page }) => {
+    await page.goto('/progress');
+    
+    await page.screenshot({ 
+      path: 'docs/images/user/reading-progress.webp',
+      fullPage: true 
+    });
+  });
+
+  test('Analytics view', async ({ page }) => {
+    await page.goto('/analytics');
+    
+    await page.screenshot({ 
+      path: 'docs/images/user/analytics-view.webp',
+      fullPage: true 
+    });
+  });
+});
+```
+
+### `screenshots/admin-workflows.spec.ts` - Admin Guide Screenshots
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Admin Guide Screenshots', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    await page.fill('input[name="login"]', process.env.ADMIN_USERNAME || 'admin');
+    await page.fill('input[name="password"]', process.env.ADMIN_PASSWORD || 'password');
+    await page.click('button[type="submit"]');
+    await page.waitForURL('/dashboard', { timeout: 5000 });
+  });
+
+  test('Admin dashboard', async ({ page }) => {
+    await page.goto('/admin');
+    
+    await page.screenshot({ 
+      path: 'docs/images/admin/admin-dashboard.webp',
+      fullPage: true 
+    });
+  });
+
+  test('User management', async ({ page }) => {
+    await page.goto('/admin');
+    
+    const userSection = page.locator('[data-section="users"], text="Users"');
+    if (await userSection.isVisible()) {
+      await page.screenshot({ 
+        path: 'docs/images/admin/user-management.webp',
+        fullPage: true 
+      });
+    }
+  });
+
+  test('Library management', async ({ page }) => {
+    await page.goto('/admin/library');
+    
+    await page.screenshot({ 
+      path: 'docs/images/admin/library-management.webp',
+      fullPage: true 
+    });
+  });
+
+  test('Add library form', async ({ page }) => {
+    await page.goto('/admin/library');
+    
+    const addLibraryBtn = page.locator('button:has-text("Add Library"), button:has-text("Create Library")');
+    if (await addLibraryBtn.isVisible()) {
+      await addLibraryBtn.click();
+      await page.waitForTimeout(500);
+      
+      await page.screenshot({ 
+        path: 'docs/images/admin/add-library-form.webp',
+        fullPage: true 
+      });
+    }
+  });
+
+  test('Profile settings', async ({ page }) => {
+    await page.goto('/admin/profile');
+    
+    await page.screenshot({ 
+      path: 'docs/images/admin/profile-settings.webp',
+      fullPage: true 
+    });
+  });
+
+  test('Theme selector', async ({ page }) => {
+    await page.goto('/admin/profile');
+    
+    const themeSelect = page.locator('select[name="theme"], [data-theme-selector]');
+    if (await themeSelect.isVisible()) {
+      await themeSelect.click();
+      await page.waitForTimeout(500);
+      
+      await page.screenshot({ 
+        path: 'docs/images/admin/theme-selector.webp',
+        fullPage: true 
+      });
+    }
+  });
+});
+```
+
+### `screenshots/device-workflows.spec.ts` - Device Setup Screenshots
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Device Setup Screenshots', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    await page.fill('input[name="login"]', process.env.USER_USERNAME || 'user');
+    await page.fill('input[name="password"]', process.env.USER_PASSWORD || 'password');
+    await page.click('button[type="submit"]');
+    await page.waitForURL('/dashboard', { timeout: 5000 });
+  });
+
+  test('Device list page', async ({ page }) => {
+    await page.goto('/devices');
+    
+    await page.screenshot({ 
+      path: 'docs/images/devices/device-list.webp',
+      fullPage: true 
+    });
+  });
+
+  test('Add device modal', async ({ page }) => {
+    await page.goto('/devices');
+    
+    await page.click('button:has-text("Add New Device"), button:has-text("Add Your First Device")');
+    
+    await page.waitForSelector('[data-modal="add-device"], #add-device-modal', { state: 'visible', timeout: 5000 });
+    
+    await page.screenshot({ 
+      path: 'docs/images/devices/add-device-modal.webp',
+      fullPage: true 
+    });
+  });
+
+  test('Kobo device form', async ({ page }) => {
+    await page.goto('/devices');
+    
+    await page.click('button:has-text("Add New Device")');
+    
+    await page.waitForSelector('[data-modal="add-device"]', { state: 'visible', timeout: 5000 });
+    
+    const deviceTypeSelect = page.locator('select[name="device_type"]');
+    if (await deviceTypeSelect.isVisible()) {
+      await deviceTypeSelect.selectOption('kobo');
+      await page.waitForTimeout(500);
+      
+      await page.screenshot({ 
+        path: 'docs/images/devices/device-form-kobo.webp',
+        fullPage: true 
+      });
+    }
+  });
+
+  test('KOReader device form', async ({ page }) => {
+    await page.goto('/devices');
+    
+    await page.click('button:has-text("Add New Device")');
+    
+    await page.waitForSelector('[data-modal="add-device"]', { state: 'visible', timeout: 5000 });
+    
+    const deviceTypeSelect = page.locator('select[name="device_type"]');
+    if (await deviceTypeSelect.isVisible()) {
+      await deviceTypeSelect.selectOption('koreader');
+      await page.waitForTimeout(500);
+      
+      await page.screenshot({ 
+        path: 'docs/images/devices/device-form-koreader.webp',
+        fullPage: true 
+      });
+    }
+  });
+
+  test('Sync queue', async ({ page }) => {
+    await page.goto('/queue');
+    
+    await page.screenshot({ 
+      path: 'docs/images/devices/sync-queue.webp',
+      fullPage: true 
+    });
+  });
+});
+```
+
+### `screenshots/sync-workflows.spec.ts` - Sync Guide Screenshots
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Sync Guide Screenshots', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    await page.fill('input[name="login"]', process.env.USER_USERNAME || 'user');
+    await page.fill('input[name="password"]', process.env.USER_PASSWORD || 'password');
+    await page.click('button[type="submit"]');
+    await page.waitForURL('/dashboard', { timeout: 5000 });
+  });
+
+  test('Sync conflicts page', async ({ page }) => {
+    await page.goto('/conflicts');
+    
+    await page.screenshot({ 
+      path: 'docs/images/sync/sync-conflicts.webp',
+      fullPage: true 
+    });
+  });
+
+  test('Unlinked books page', async ({ page }) => {
+    await page.goto('/unlinked-books');
+    
+    await page.screenshot({ 
+      path: 'docs/images/sync/unlinked-books.webp',
+      fullPage: true 
+    });
+  });
+});
+```
+
+## Running the Tests
+
+### Run all tests
+```bash
+npx playwright test
+```
+
+### Run specific test file
+```bash
+npx playwright test auth.spec.ts
+```
+
+### Run in headed mode (see browser)
+```bash
+npx playwright test --headed
+```
+
+### Run with debug mode
+```bash
+npx playwright test --debug
+```
+
+## Markdown Update Strategy
+
+### Option 1: Create New Markdown
+Generate fresh markdown files with embedded screenshots.
+
+### Option 2: Update Existing Markdown
+Update existing markdown files by:
+1. Finding section headers
+2. Inserting screenshot references after relevant steps
+3. Using alt text to describe what's shown
+
+**Example Markdown Update**:
+
+```markdown
+### Step 1: Log In to Bookhoard
+
+1. Open your browser and navigate to `http://localhost:8765`
+2. Enter your username and password
+3. Click the **Login** button
+
+![Login page showing username and password fields](../images/user/login-page.webp)
+```
+
+## Workflow When Ready
+
+### Step 1: Verify Frontend Complete
+- Check all pages listed in "Prerequisites" are working
+- Confirm no TODO placeholders in templates
+
+### Step 2: Seed Test Data
+```bash
+# Add sample books, collections, devices
+# Create test admin and user accounts
+```
+
+### Step 3: Set Up Playwright
+```bash
+npm install -D @playwright/test
+npx playwright install chromium
+```
+
+### Step 4: Create Environment File
+Create `.env.screenshots` with the test credentials
+
+### Step 5: Run Screenshot Scripts
+```bash
+# Run all screenshot workflows
+npx playwright test
+
+# Or run specific suites
+npx playwright test auth.spec.ts
+npx playwright test user-workflows.spec.ts
+```
+
+### Step 6: Review and Adjust
+- Manually review screenshots
+- Retake any that need adjustment
+- Update markdown files if needed
+
+## Customizing for Your Implementation
+
+When you're ready to run these, you may need to update:
+
+1. **Selectors**: Update CSS selectors to match your actual HTML structure
+2. **Routes**: Ensure all routes match your router configuration
+3. **Wait conditions**: Adjust timeouts based on your app's performance
+4. **Modal IDs**: Update modal selectors to match your implementation
+
+## Tips for Better Screenshots
+
+1. **Wait for animations**: Add `page.waitForTimeout(500)` after clicking to let animations complete
+2. **Full page vs viewport**: Use `fullPage: true` for complete page screenshots
+3. **Hide scrollbars**: Use `page.evaluate(() => document.body.style.overflow = 'hidden')` for cleaner screenshots
+4. **Dark theme**: Most screenshots will use the default Tokyo Night theme
+5. **Clean test data**: Use consistent test data for reproducible screenshots
+
+## Estimated Time Investment
+
+| Task | Time |
+|------|------|
+| Install & configure Playwright | 15 min |
+| Seed test database | 30 min |
+| Write Playwright scripts | 2-3 hours |
+| Run screenshot automation | 10 min |
+| Review & retake screenshots | 30-60 min |
+| Update markdown files | 30-60 min |
+| **Total** | **4-6 hours** |
+
+## Future Enhancements
+
+- **Visual Regression Testing**: Use Playwright to detect UI changes
+- **Multi-theme Screenshots**: Automatically capture all theme variations
+- **Multi-language Screenshots**: Capture screenshots in different locales
+- **Auto-update on Deploy**: Run screenshots as part of CI/CD on documentation updates
+
+## References
+
+- [Playwright Documentation](https://playwright.dev/)
+- [Playwright Screenshots API](https://playwright.dev/docs/screenshots)
+- [Bookhoard Frontend Templates](templates/)
+- [Bookhoard API Documentation](docs/developer/api/)
+
+---
+
+**Created by**: GLM (OpenCode)  
+**Version**: 1.0  
+**Ready for Implementation**: When frontend development is complete

docs/contributing/contributing.md

@@ -4,7 +4,7 @@ Welcome to the Bookhoard contributing documentation. This section contains guide
 
 ## 🚀 Getting Started
 
-- **[Development Guide](DEVELOPMENT.md)** - Development workflow and architecture
+- **[Development Guide](Development.md)** - Development workflow and architecture
   - Architecture overview
   - Directory structure
   - Local development setup
@@ -22,7 +22,7 @@ Welcome to the Bookhoard contributing documentation. This section contains guide
 
 ## 🤝 How to Contribute
 
-We welcome contributions! Please see our [Development Guide](DEVELOPMENT.md) for information on:
+We welcome contributions! Please see our [Development Guide](Development.md) for information on:
 - Setting up your development environment
 - Understanding the codebase
 - Making pull requests

docs/index.md

@@ -53,7 +53,7 @@ Complete guide to Bookhoard documentation. Find what you need quickly.
 
 **[Contributing Portal](contributing/contributing.md)** - Development workflow
 
-- [Development Guide](contributing/DEVELOPMENT.md) - Architecture, setup, testing
+ - [Development Guide](contributing/Development.md) - Architecture, setup, testing
 - [PROJECT_GUIDELINES.md](PROJECT_GUIDELINES.md) - Development rules and standards
 
 ---
@@ -66,7 +66,7 @@ Complete guide to Bookhoard documentation. Find what you need quickly.
 | **Set up a device** | [User Portal → Device Setup](user/user-guide.md) |
 | **Use the API** | [Developer Portal → API Docs](developer/development.md) |
 | **Deploy Bookhoard** | [Operations Portal → Troubleshooting](operations/troubleshooting.md) |
-| **Contribute code** | [Contributing Portal → Development Guide](contributing/DEVELOPMENT.md) |
+ | **Contribute code** | [Contributing Portal → Development Guide](contributing/Development.md) |
 | **Understand sync** | [User Portal → Sync Guide](user/sync-guide.md) |
 
 ---
@@ -84,7 +84,7 @@ Complete guide to Bookhoard documentation. Find what you need quickly.
 | ...resolve conflicts? | [Sync Guide](user/sync-guide.md) - Managing Conflicts |
 | ...troubleshoot deployment? | [Troubleshooting Guide](operations/troubleshooting.md) |
 | ...use the API? | [API Reference](developer/api-reference.md) |
-| ...contribute code? | [Development Guide](contributing/DEVELOPMENT.md) |
+ | ...contribute code? | [Development Guide](contributing/Development.md) |
 
 ### "Where is..."
 
@@ -116,7 +116,7 @@ Complete guide to Bookhoard documentation. Find what you need quickly.
 1. Follow [README.md](../README.md) quick start
 2. Configure environment: [.env.example](../.env.example)
 3. Review [Troubleshooting Guide](operations/troubleshooting.md)
-4. Check [Development Guide](contributing/DEVELOPMENT.md) for performance tuning
+4. Check [Development Guide](contributing/Development.md) for performance tuning
 
 ---
 
@@ -126,7 +126,7 @@ When adding new features:
 
 1. **User-facing features** → Update relevant User docs
 2. **API endpoints** → Update [API Reference](developer/api-reference.md) & split docs
-3. **Backend changes** → Update [Development Guide](contributing/DEVELOPMENT.md)
+3. **Backend changes** → Update [Development Guide](contributing/Development.md)
 4. **Deployment changes** → Update [Operations Portal](operations/operations.md)
 
 Keep [PROJECT_GUIDELINES.md](PROJECT_GUIDELINES.md) in mind for documentation standards.

internal/docs/http_handler.go

@@ -6,7 +6,9 @@ import (
 	"net/http"
 	"strings"
 
+	"bookhoard/internal/database"
 	"bookhoard/templates"
+	"github.com/google/uuid"
 	"github.com/labstack/echo/v4"
 )
 
@@ -58,18 +60,38 @@ func (h *HTTPHandler) ShowDocumentation(c echo.Context) error {
 	// Get navigation
 	nav := h.docs.BuildNavigation()
 
-	// Create empty user (docs are public, no auth required)
+	// Check if user is authenticated via middleware
-	user := templates.User{
+	var user templates.User
-		ID:       "",
+	if userID := c.Get("user"); userID != nil {
-		Username: "",
+		dbUser := userID.(database.Users)
-		Email:    "",
+		var theme string
-		Role:     "",
+		if dbUser.Theme.Valid {
-		Theme:    "tokyo-night",
+			theme = dbUser.Theme.String
+		} else {
+			theme = "tokyo-night"
+		}
+		user = templates.User{
+			ID:       uuid.UUID(dbUser.ID.Bytes).String(),
+			Username: dbUser.Username,
+			Email:    dbUser.Email,
+			Role:     dbUser.Role,
+			Theme:    theme,
+		}
+	} else {
+		// Create empty user for unauthenticated users
+		user = templates.User{
+			ID:       "",
+			Username: "",
+			Email:    "",
+			Role:     "",
+			Theme:    "tokyo-night",
+		}
 	}
 
 	// Render documentation page
 	var buf bytes.Buffer
-	err = templates.DocsLayout(*nav, *doc, user).Render(c.Request().Context(), &buf)
+	currentPath := c.Request().URL.Path
+	err = templates.DocsLayout(*nav, *doc, user, currentPath).Render(c.Request().Context(), &buf)
 	if err != nil {
 		fmt.Printf("DOCS RENDER ERROR: %v\n", err)
 		return c.HTML(http.StatusInternalServerError, "Failed to render page: "+err.Error())
@@ -118,13 +140,32 @@ func (h *HTTPHandler) ShowAPIEndpoint(c echo.Context, endpointPath string) error
 	// Get navigation
 	nav := h.docs.BuildNavigation()
 
-	// Create empty user (docs are public)
+	// Check if user is authenticated via middleware
-	user := templates.User{
+	var user templates.User
-		ID:       "",
+	if userID := c.Get("user"); userID != nil {
-		Username: "",
+		dbUser := userID.(database.Users)
-		Email:    "",
+		var theme string
-		Role:     "",
+		if dbUser.Theme.Valid {
-		Theme:    "tokyo-night",
+			theme = dbUser.Theme.String
+		} else {
+			theme = "tokyo-night"
+		}
+		user = templates.User{
+			ID:       uuid.UUID(dbUser.ID.Bytes).String(),
+			Username: dbUser.Username,
+			Email:    dbUser.Email,
+			Role:     dbUser.Role,
+			Theme:    theme,
+		}
+	} else {
+		// Create empty user for unauthenticated users
+		user = templates.User{
+			ID:       "",
+			Username: "",
+			Email:    "",
+			Role:     "",
+			Theme:    "tokyo-night",
+		}
 	}
 
 	// Create API explorer data
@@ -135,7 +176,8 @@ func (h *HTTPHandler) ShowAPIEndpoint(c echo.Context, endpointPath string) error
 
 	// Render API endpoint page with explorer
 	var buf bytes.Buffer
-	err = templates.DocsLayoutWithExplorer(*nav, *doc, user, explorerData).Render(c.Request().Context(), &buf)
+	currentPath := c.Request().URL.Path
+	err = templates.DocsLayoutWithExplorer(*nav, *doc, user, explorerData, currentPath).Render(c.Request().Context(), &buf)
 
 	if err != nil {
 		return c.HTML(http.StatusInternalServerError, "Failed to render page")
@@ -179,13 +221,33 @@ func (h *HTTPHandler) showLegacyAPIEndpoint(c echo.Context, endpointPath string,
 	// Get navigation
 	nav := h.docs.BuildNavigation()
 
-	// Create empty user
+	// Check if user is authenticated via middleware
-	user := templates.User{
+	var user templates.User
-		ID:       "",
+	currentPath := c.Request().URL.Path
-		Username: "",
+	if userID := c.Get("user"); userID != nil {
-		Email:    "",
+		dbUser := userID.(database.Users)
-		Role:     "",
+		var theme string
-		Theme:    "tokyo-night",
+		if dbUser.Theme.Valid {
+			theme = dbUser.Theme.String
+		} else {
+			theme = "tokyo-night"
+		}
+		user = templates.User{
+			ID:       uuid.UUID(dbUser.ID.Bytes).String(),
+			Username: dbUser.Username,
+			Email:    dbUser.Email,
+			Role:     dbUser.Role,
+			Theme:    theme,
+		}
+	} else {
+		// Create empty user for unauthenticated users
+		user = templates.User{
+			ID:       "",
+			Username: "",
+			Email:    "",
+			Role:     "",
+			Theme:    "tokyo-night",
+		}
 	}
 
 	// Render API endpoint page
@@ -202,7 +264,7 @@ func (h *HTTPHandler) showLegacyAPIEndpoint(c echo.Context, endpointPath string,
 		},
 		Category:   "API Reference",
 		SourceFile: "api",
-	}, user).Render(c.Request().Context(), &buf)
+	}, user, currentPath).Render(c.Request().Context(), &buf)
 
 	if err != nil {
 		return c.HTML(http.StatusInternalServerError, "Failed to render page")
@@ -221,12 +283,33 @@ func (h *HTTPHandler) APIHome(c echo.Context) error {
 	endpoints := h.docs.GetAPIEndpoints()
 	nav := h.docs.BuildNavigation()
 
-	user := templates.User{
+	// Check if user is authenticated via middleware
-		ID:       "",
+	var user templates.User
-		Username: "",
+	currentPath := c.Request().URL.Path
-		Email:    "",
+	if userID := c.Get("user"); userID != nil {
-		Role:     "",
+		dbUser := userID.(database.Users)
-		Theme:    "tokyo-night",
+		var theme string
+		if dbUser.Theme.Valid {
+			theme = dbUser.Theme.String
+		} else {
+			theme = "tokyo-night"
+		}
+		user = templates.User{
+			ID:       uuid.UUID(dbUser.ID.Bytes).String(),
+			Username: dbUser.Username,
+			Email:    dbUser.Email,
+			Role:     dbUser.Role,
+			Theme:    theme,
+		}
+	} else {
+		// Create empty user for unauthenticated users
+		user = templates.User{
+			ID:       "",
+			Username: "",
+			Email:    "",
+			Role:     "",
+			Theme:    "tokyo-night",
+		}
 	}
 
 	// Build API documentation content
@@ -255,7 +338,7 @@ func (h *HTTPHandler) APIHome(c echo.Context) error {
 	}
 
 	var buf bytes.Buffer
-	err := templates.DocsLayout(*nav, *apiDoc, user).Render(c.Request().Context(), &buf)
+	err := templates.DocsLayout(*nav, *apiDoc, user, currentPath).Render(c.Request().Context(), &buf)
 
 	if err != nil {
 		return c.HTML(http.StatusInternalServerError, "Failed to render page")

internal/handlers/auth.go

@@ -357,14 +357,18 @@ func (h *AuthHandler) Login(c echo.Context) error {
 	}
 
 	if c.Request().Header.Get("HX-Request") == "true" {
+		redirect := c.FormValue("redirect")
+		if redirect == "" {
+			redirect = "/bookshelf"
+		}
 		html := fmt.Sprintf(`<div class="text-green-500">Login successful! Redirecting...</div>
 <script>
 localStorage.setItem('token', '%s');
 localStorage.setItem('refreshToken', '%s');
 localStorage.setItem('user', JSON.stringify(%s));
 document.cookie = 'token=%s; path=/; max-age=3600';
-window.location.href = '/bookshelf';
+window.location.href = '%s';
-</script>`, accessToken, refreshToken, fmt.Sprintf(`{"id":"%s","email":"%s","username":"%s","first_name":"%s","last_name":"%s"}`, uuid.UUID(user.ID.Bytes).String(), user.Email, user.Username, user.FirstName.String, user.LastName.String), accessToken)
+</script>`, accessToken, refreshToken, fmt.Sprintf(`{"id":"%s","email":"%s","username":"%s","first_name":"%s","last_name":"%s"}`, uuid.UUID(user.ID.Bytes).String(), user.Email, user.Username, user.FirstName.String, user.LastName.String), accessToken, redirect)
 		return c.HTML(http.StatusOK, html)
 	}
 

templates/docs.templ

@@ -4,7 +4,7 @@ import (
 	"fmt"
 )
 
-templ DocsLayout(nav Navigation, doc Document, user User) {
+templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 	<!DOCTYPE html>
 	<html lang="en" class="dark">
 		<head>
@@ -16,8 +16,10 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 			<script src="/static/highlight.min.js"></script>
 			<script src="/static/lunr.min.js"></script>
 			<script src="/static/lunr-flex.min.js"></script>
+			<script src="/static/header.js"></script>
 		</head>
-		<body class="theme-tokyo-night bg-background-primary text-text-primary font-sans antialiased">
+		<body class={ "theme-" + user.Theme + " bg-background-primary text-text-primary font-sans antialiased" }>
+			@Header(user, currentPath)
 			<!-- Mobile Menu Button -->
 			<button 
 				class="lg:hidden fixed top-4 left-4 z-50 bg-background-secondary border border-border rounded p-2 text-text-primary hover:bg-background-secondary/80"
@@ -33,7 +35,7 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 			<div id="search-results" class="hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-8 transition-opacity duration-200 ease-in-out"></div>
 
 			<!-- Sidebar -->
-			<div class="sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 lg:translate-x-0 transition-transform duration-300 ease-in-out">
+			<div class="sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 mt-16 lg:translate-x-0 transition-transform duration-300 ease-in-out">
 				<!-- Search -->
 				<div class="p-4 border-b border-border">
 					<input 
@@ -41,7 +43,7 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 						class="search-input w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent text-sm"
 						placeholder="Search documentation..."
 						id="docs-search"
-						oninput="searchDocs(this.value)"
+						
 					>
 				</div>
 
@@ -333,7 +335,7 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 	</html>
 }
 
-  templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer APIExplorerData) {
+  templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer APIExplorerData, currentPath string) {
 	<!DOCTYPE html>
 	<html lang="en" class="dark">
 		<head>
@@ -345,8 +347,10 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 			<script src="/static/highlight.min.js"></script>
 			<script src="/static/lunr.min.js"></script>
 			<script src="/static/lunr-flex.min.js"></script>
+			<script src="/static/header.js"></script>
 		</head>
-		<body class="theme-tokyo-night bg-background-primary text-text-primary font-sans antialiased">
+		<body class={ "theme-" + user.Theme + " bg-background-primary text-text-primary font-sans antialiased" }>
+			@Header(user, currentPath)
 			<!-- Mobile Menu Button -->
 			<button 
 				class="lg:hidden fixed top-4 left-4 z-50 bg-background-secondary border border-border rounded p-2 text-text-primary hover:bg-background-secondary/80"
@@ -362,7 +366,7 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 			<div id="search-results" class="hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-4 lg:p-8 transition-opacity duration-200 ease-in-out"></div>
 
 			<!-- Sidebar -->
-			<div class="sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 lg:translate-x-0 transition-transform duration-300 ease-in-out">
+			<div class="sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 mt-16 lg:translate-x-0 transition-transform duration-300 ease-in-out">
 				<!-- Search -->
 				<div class="p-4 border-b border-border">
 					<input 
@@ -370,7 +374,7 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 						class="search-input w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent text-sm"
 						placeholder="Search documentation..."
 						id="docs-search"
-						oninput="searchDocs(this.value)"
+						
 					>
 				</div>
 

templates/docs_templ.go

@@ -12,7 +12,7 @@ import (
 	"fmt"
 )
 
-func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
+func DocsLayout(nav Navigation, doc Document, user User, currentPath string) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -46,267 +46,297 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Bookhoard Documentation</title><link href=\"/static/style.css\" rel=\"stylesheet\"><link rel=\"stylesheet\" href=\"/static/highlight-dark.min.css\"><script src=\"/static/highlight.min.js\"></script><script src=\"/static/lunr.min.js\"></script><script src=\"/static/lunr-flex.min.js\"></script></head><body class=\"theme-tokyo-night bg-background-primary text-text-primary font-sans antialiased\"><!-- Mobile Menu Button --><button class=\"lg:hidden fixed top-4 left-4 z-50 bg-background-secondary border border-border rounded p-2 text-text-primary hover:bg-background-secondary/80\" onclick=\"toggleSidebar()\" aria-label=\"Toggle menu\"><svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"></path></svg></button><!-- Search Results Overlay --><div id=\"search-results\" class=\"hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-8 transition-opacity duration-200 ease-in-out\"></div><!-- Sidebar --><div class=\"sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 lg:translate-x-0 transition-transform duration-300 ease-in-out\"><!-- Search --><div class=\"p-4 border-b border-border\"><input type=\"text\" class=\"search-input w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent text-sm\" placeholder=\"Search documentation...\" id=\"docs-search\" oninput=\"searchDocs(this.value)\"></div><!-- Navigation Sections -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Bookhoard Documentation</title><link href=\"/static/style.css\" rel=\"stylesheet\"><link rel=\"stylesheet\" href=\"/static/highlight-dark.min.css\"><script src=\"/static/highlight.min.js\"></script><script src=\"/static/lunr.min.js\"></script><script src=\"/static/lunr-flex.min.js\"></script><script src=\"/static/header.js\"></script></head>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 = []any{"theme-" + user.Theme + " bg-background-primary text-text-primary font-sans antialiased"}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var3...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<body class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var3).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Header(user, currentPath).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<!-- Mobile Menu Button --><button class=\"lg:hidden fixed top-4 left-4 z-50 bg-background-secondary border border-border rounded p-2 text-text-primary hover:bg-background-secondary/80\" onclick=\"toggleSidebar()\" aria-label=\"Toggle menu\"><svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"></path></svg></button><!-- Search Results Overlay --><div id=\"search-results\" class=\"hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-8 transition-opacity duration-200 ease-in-out\"></div><!-- Sidebar --><div class=\"sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 mt-16 lg:translate-x-0 transition-transform duration-300 ease-in-out\"><!-- Search --><div class=\"p-4 border-b border-border\"><input type=\"text\" class=\"search-input w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent text-sm\" placeholder=\"Search documentation...\" id=\"docs-search\"></div><!-- Navigation Sections -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		for _, section := range nav.Sections {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"nav-section mb-6\"><div class=\"nav-section-title font-semibold text-xs uppercase tracking-wider text-text-secondary px-4 py-3 cursor-pointer select-none flex items-center justify-between\" onclick=\"toggleSection(this)\"><span>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<div class=\"nav-section mb-6\"><div class=\"nav-section-title font-semibold text-xs uppercase tracking-wider text-text-secondary px-4 py-3 cursor-pointer select-none flex items-center justify-between\" onclick=\"toggleSection(this)\"><span>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var3 string
+			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(section.Title)
+			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(section.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 55, Col: 28}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 57, Col: 28}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</span> <svg class=\"w-4 h-4 transform transition-transform section-arrow\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path></svg></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</span> <svg class=\"w-4 h-4 transform transition-transform section-arrow\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path></svg></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if section.Collapsed {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div class=\"nav-items hidden\" data-collapsed=\"true\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"nav-items hidden\" data-collapsed=\"true\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				for _, item := range section.Items {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<a href=\"")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<a href=\"")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var4 templ.SafeURL
+					var templ_7745c5c3_Var6 templ.SafeURL
-					templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
+					templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 63, Col: 27}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 65, Col: 27}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\" class=\"nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline\"><span class=\"mr-2\">")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var5 string
-					templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 64, Col: 40}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</span>")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var6 string
-					templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 64, Col: 61}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</a>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\" class=\"nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline\"><span class=\"mr-2\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-				}
+					var templ_7745c5c3_Var7 string
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</div>")
+					templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			} else {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<div class=\"nav-items\" data-collapsed=\"false\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				for _, item := range section.Items {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<a href=\"")
 					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 66, Col: 40}
-					}
-					var templ_7745c5c3_Var7 templ.SafeURL
-					templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 71, Col: 27}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" class=\"nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline\"><span class=\"mr-2\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					var templ_7745c5c3_Var8 string
-					templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
+					templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 72, Col: 40}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 66, Col: 61}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</a>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var9 string
+				}
-					templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			} else {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<div class=\"nav-items\" data-collapsed=\"false\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				for _, item := range section.Items {
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<a href=\"")
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 72, Col: 61}
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var9 templ.SafeURL
+					templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 73, Col: 27}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</a>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\" class=\"nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline\"><span class=\"mr-2\">")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var10 string
+					templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 74, Col: 40}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</span>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var11 string
+					templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 74, Col: 61}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</a>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</div><!-- Main Content --><main class=\"main-content lg:ml-72 p-8 max-w-4xl mx-auto\"><!-- Breadcrumb -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</div><!-- Main Content --><main class=\"main-content lg:ml-72 p-8 max-w-4xl mx-auto\"><!-- Breadcrumb -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(doc.Breadcrumb) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<nav class=\"breadcrumb flex gap-2 text-sm text-text-secondary mb-8\" aria-label=\"Breadcrumb\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<nav class=\"breadcrumb flex gap-2 text-sm text-text-secondary mb-8\" aria-label=\"Breadcrumb\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			for i, crumb := range doc.Breadcrumb {
 				if i > 0 {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<span class=\"text-text-secondary/50\">›</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "<span class=\"text-text-secondary/50\">›</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, " <a href=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, " <a href=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var10 templ.SafeURL
+				var templ_7745c5c3_Var12 templ.SafeURL
-				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinURLErrs(crumb.URL)
+				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinURLErrs(crumb.URL)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 90, Col: 26}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 92, Col: 26}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\" class=\"text-accent hover:underline no-underline\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "\" class=\"text-accent hover:underline no-underline\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var11 string
+				var templ_7745c5c3_Var13 string
-				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(crumb.Title)
+				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(crumb.Title)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 90, Col: 91}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 92, Col: 91}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</a>")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</nav>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<!-- Title --><h1 class=\"text-4xl font-bold mb-8 text-text-primary\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var12 string
-		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(doc.Title)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 96, Col: 69}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</h1><!-- Table of Contents -->")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if len(doc.TOC) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "<div class=\"toc bg-background-secondary p-4 rounded-lg mb-8 border border-border\"><strong class=\"block mb-2 text-text-primary font-semibold\">On this page</strong> ")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			for _, item := range doc.TOC {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "<a href=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var13 templ.SafeURL
-				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinURLErrs("#" + item.Anchor)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 104, Col: 32}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "\" class=\"toc-item block py-1 text-text-secondary hover:text-accent text-sm no-underline\" style=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</a>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var14 string
+			}
-				templ_7745c5c3_Var14, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("margin-left: " + fmt.Sprintf("%drem", item.Level))
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</nav>")
-				if templ_7745c5c3_Err != nil {
+			if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 106, Col: 66}
+				return templ_7745c5c3_Err
-				}
+			}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "<!-- Title --><h1 class=\"text-4xl font-bold mb-8 text-text-primary\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var14 string
+		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(doc.Title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 98, Col: 69}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</h1><!-- Table of Contents -->")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if len(doc.TOC) > 0 {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "<div class=\"toc bg-background-secondary p-4 rounded-lg mb-8 border border-border\"><strong class=\"block mb-2 text-text-primary font-semibold\">On this page</strong> ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for _, item := range doc.TOC {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "<a href=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "\">")
+				var templ_7745c5c3_Var15 templ.SafeURL
+				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinURLErrs("#" + item.Anchor)
 				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 106, Col: 32}
-				}
-				var templ_7745c5c3_Var15 string
-				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 108, Col: 20}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "</a>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "\" class=\"toc-item block py-1 text-text-secondary hover:text-accent text-sm no-underline\" style=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var16 string
+				templ_7745c5c3_Var16, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("margin-left: " + fmt.Sprintf("%drem", item.Level))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 108, Col: 66}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var17 string
+				templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 110, Col: 20}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "</a>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "</div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "</div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<!-- Content --><div class=\"prose prose-invert max-w-none\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "<!-- Content --><div class=\"prose prose-invert max-w-none\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -314,7 +344,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "</div></main><script>\n\t\t\t\t// Toggle sidebar section\n\t\t\t\tfunction toggleSection(el) {\n\t\t\t\t\tconst items = el.nextElementSibling;\n\t\t\t\t\tconst arrow = el.querySelector('.section-arrow');\n\t\t\t\t\tconst isCollapsed = items.getAttribute('data-collapsed') === 'true';\n\n\t\t\t\t\tif (isCollapsed) {\n\t\t\t\t\t\titems.classList.remove('hidden');\n\t\t\t\t\t\titems.setAttribute('data-collapsed', 'false');\n\t\t\t\t\t\tarrow.style.transform = 'rotate(0deg)';\n\t\t\t\t\t} else {\n\t\t\t\t\t\titems.classList.add('hidden');\n\t\t\t\t\t\titems.setAttribute('data-collapsed', 'true');\n\t\t\t\t\t\tarrow.style.transform = 'rotate(-90deg)';\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Toggle sidebar on mobile\n\t\t\t\tfunction toggleSidebar() {\n\t\t\t\t\tconst sidebar = document.querySelector('.sidebar');\n\t\t\t\t\tsidebar.classList.toggle('open');\n\t\t\t\t}\n\n\t\t\t\t// Close sidebar when clicking main content on mobile\n\t\t\t\tdocument.querySelector('.main-content')?.addEventListener('click', () => {\n\t\t\t\t\tconst sidebar = document.querySelector('.sidebar');\n\t\t\t\t\tif (window.innerWidth < 1024) {\n\t\t\t\t\t\tsidebar.classList.remove('open');\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\t// Highlight current page in nav\n\t\t\t\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t\t\t\tconst currentPath = window.location.pathname;\n\t\t\t\t\tdocument.querySelectorAll('.nav-item').forEach(item => {\n\t\t\t\t\t\tif (item.getAttribute('href') === currentPath) {\n\t\t\t\t\t\t\titem.classList.add('text-accent', 'bg-accent/10', 'border-r-2', 'border-accent');\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\n\t\t\t\t\t// Initialize syntax highlighting\n\t\t\t\t\tif (typeof hljs !== 'undefined') {\n\t\t\t\t\t\thljs.highlightAll();\n\n\t\t\t\t\t// Add copy buttons to all code blocks\n\t\t\t\t\tdocument.querySelectorAll('pre code').forEach((block) => {\n\t\t\t\t\t\tconst pre = block.parentElement;\n\t\t\t\t\t\tconst wrapper = document.createElement('div');\n\t\t\t\t\t\twrapper.className = 'relative group';\n\t\t\t\t\t\tpre.parentNode.insertBefore(wrapper, pre);\n\t\t\t\t\t\twrapper.appendChild(pre);\n\t\t\t\t\t\t\n\t\t\t\t\t\tconst button = document.createElement('button');\n\t\t\t\t\t\tbutton.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';\n\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\tbutton.onclick = async () => {\n\t\t\t\t\t\t\tawait navigator.clipboard.writeText(block.textContent);\n\t\t\t\t\t\t\tbutton.textContent = 'Copied!';\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t};\n\t\t\t\t\t\twrapper.appendChild(button);\n\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\t// Add copy buttons to all code blocks\n\t\t\t\t\tdocument.querySelectorAll('pre code').forEach((block) => {\n\t\t\t\t\t\tconst pre = block.parentElement;\n\t\t\t\t\t\tconst wrapper = document.createElement('div');\n\t\t\t\t\t\twrapper.className = 'relative group';\n\t\t\t\t\t\tpre.parentNode.insertBefore(wrapper, pre);\n\t\t\t\t\t\twrapper.appendChild(pre);\n\t\t\t\t\t\t\n\t\t\t\t\t\tconst button = document.createElement('button');\n\t\t\t\t\t\tbutton.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';\n\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\tbutton.onclick = async () => {\n\t\t\t\t\t\t\tawait navigator.clipboard.writeText(block.textContent);\n\t\t\t\t\t\t\tbutton.textContent = 'Copied!';\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t};\n\t\t\t\t\t\twrapper.appendChild(button);\n\t\t\t\t\t});\n\t\t\t\t});\n\n\t\t\t\t\t// Add copy buttons to all code blocks\n\t\t\t\t\tdocument.querySelectorAll('pre code').forEach((block) => {\n\t\t\t\t\t\tconst pre = block.parentElement;\n\t\t\t\t\t\tconst wrapper = document.createElement('div');\n\t\t\t\t\t\twrapper.className = 'relative group';\n\t\t\t\t\t\tpre.parentNode.insertBefore(wrapper, pre);\n\t\t\t\t\t\twrapper.appendChild(pre);\n\t\t\t\t\t\t\n\t\t\t\t\t\tconst button = document.createElement('button');\n\t\t\t\t\t\tbutton.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';\n\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\tbutton.onclick = async () => {\n\t\t\t\t\t\t\tawait navigator.clipboard.writeText(block.textContent);\n\t\t\t\t\t\t\tbutton.textContent = 'Copied!';\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t};\n\t\t\t\t\t\twrapper.appendChild(button);\n\tLine truncated
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "</div></main><script>\n\t\t\t\t// Toggle sidebar section\n\t\t\t\tfunction toggleSection(el) {\n\t\t\t\t\tconst items = el.nextElementSibling;\n\t\t\t\t\tconst arrow = el.querySelector('.section-arrow');\n\t\t\t\t\tconst isCollapsed = items.getAttribute('data-collapsed') === 'true';\n\n\t\t\t\t\tif (isCollapsed) {\n\t\t\t\t\t\titems.classList.remove('hidden');\n\t\t\t\t\t\titems.setAttribute('data-collapsed', 'false');\n\t\t\t\t\t\tarrow.style.transform = 'rotate(0deg)';\n\t\t\t\t\t} else {\n\t\t\t\t\t\titems.classList.add('hidden');\n\t\t\t\t\t\titems.setAttribute('data-collapsed', 'true');\n\t\t\t\t\t\tarrow.style.transform = 'rotate(-90deg)';\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Toggle sidebar on mobile\n\t\t\t\tfunction toggleSidebar() {\n\t\t\t\t\tconst sidebar = document.querySelector('.sidebar');\n\t\t\t\t\tsidebar.classList.toggle('open');\n\t\t\t\t}\n\n\t\t\t\t// Close sidebar when clicking main content on mobile\n\t\t\t\tdocument.querySelector('.main-content')?.addEventListener('click', () => {\n\t\t\t\t\tconst sidebar = document.querySelector('.sidebar');\n\t\t\t\t\tif (window.innerWidth < 1024) {\n\t\t\t\t\t\tsidebar.classList.remove('open');\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\t// Highlight current page in nav\n\t\t\t\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t\t\t\tconst currentPath = window.location.pathname;\n\t\t\t\t\tdocument.querySelectorAll('.nav-item').forEach(item => {\n\t\t\t\t\t\tif (item.getAttribute('href') === currentPath) {\n\t\t\t\t\t\t\titem.classList.add('text-accent', 'bg-accent/10', 'border-r-2', 'border-accent');\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\n\t\t\t\t\t// Initialize syntax highlighting\n\t\t\t\t\tif (typeof hljs !== 'undefined') {\n\t\t\t\t\t\thljs.highlightAll();\n\n\t\t\t\t\t// Add copy buttons to all code blocks\n\t\t\t\t\tdocument.querySelectorAll('pre code').forEach((block) => {\n\t\t\t\t\t\tconst pre = block.parentElement;\n\t\t\t\t\t\tconst wrapper = document.createElement('div');\n\t\t\t\t\t\twrapper.className = 'relative group';\n\t\t\t\t\t\tpre.parentNode.insertBefore(wrapper, pre);\n\t\t\t\t\t\twrapper.appendChild(pre);\n\t\t\t\t\t\t\n\t\t\t\t\t\tconst button = document.createElement('button');\n\t\t\t\t\t\tbutton.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';\n\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\tbutton.onclick = async () => {\n\t\t\t\t\t\t\tawait navigator.clipboard.writeText(block.textContent);\n\t\t\t\t\t\t\tbutton.textContent = 'Copied!';\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t};\n\t\t\t\t\t\twrapper.appendChild(button);\n\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\t// Add copy buttons to all code blocks\n\t\t\t\t\tdocument.querySelectorAll('pre code').forEach((block) => {\n\t\t\t\t\t\tconst pre = block.parentElement;\n\t\t\t\t\t\tconst wrapper = document.createElement('div');\n\t\t\t\t\t\twrapper.className = 'relative group';\n\t\t\t\t\t\tpre.parentNode.insertBefore(wrapper, pre);\n\t\t\t\t\t\twrapper.appendChild(pre);\n\t\t\t\t\t\t\n\t\t\t\t\t\tconst button = document.createElement('button');\n\t\t\t\t\t\tbutton.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';\n\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\tbutton.onclick = async () => {\n\t\t\t\t\t\t\tawait navigator.clipboard.writeText(block.textContent);\n\t\t\t\t\t\t\tbutton.textContent = 'Copied!';\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t};\n\t\t\t\t\t\twrapper.appendChild(button);\n\t\t\t\t\t});\n\t\t\t\t});\n\n\t\t\t\t\t// Add copy buttons to all code blocks\n\t\t\t\t\tdocument.querySelectorAll('pre code').forEach((block) => {\n\t\t\t\t\t\tconst pre = block.parentElement;\n\t\t\t\t\t\tconst wrapper = document.createElement('div');\n\t\t\t\t\t\twrapper.className = 'relative group';\n\t\t\t\t\t\tpre.parentNode.insertBefore(wrapper, pre);\n\t\t\t\t\t\twrapper.appendChild(pre);\n\t\t\t\t\t\t\n\t\t\t\t\t\tconst button = document.createElement('button');\n\t\t\t\t\t\tbutton.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';\n\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\tbutton.onclick = async () => {\n\t\t\t\t\t\t\tawait navigator.clipboard.writeText(block.textContent);\n\t\t\t\t\t\t\tbutton.textContent = 'Copied!';\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t};\n\t\t\t\t\t\twrapper.appendChild(button);\n\tLine truncated
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -322,7 +352,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 	})
 }
 
-func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer APIExplorerData) templ.Component {
+func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer APIExplorerData, currentPath string) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -338,102 +368,78 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var16 := templ.GetChildren(ctx)
+		templ_7745c5c3_Var18 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var16 == nil {
+		if templ_7745c5c3_Var18 == nil {
-			templ_7745c5c3_Var16 = templ.NopComponent
+			templ_7745c5c3_Var18 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "<!doctype html><html lang=\"en\" class=\"dark\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "<!doctype html><html lang=\"en\" class=\"dark\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var17 string
+		var templ_7745c5c3_Var19 string
-		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(doc.Title)
+		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(doc.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 342, Col: 21}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 344, Col: 21}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, " - Bookhoard Documentation</title><link href=\"/static/style.css\" rel=\"stylesheet\"><link rel=\"stylesheet\" href=\"/static/highlight-dark.min.css\"><script src=\"/static/highlight.min.js\"></script><script src=\"/static/lunr.min.js\"></script><script src=\"/static/lunr-flex.min.js\"></script></head><body class=\"theme-tokyo-night bg-background-primary text-text-primary font-sans antialiased\"><!-- Mobile Menu Button --><button class=\"lg:hidden fixed top-4 left-4 z-50 bg-background-secondary border border-border rounded p-2 text-text-primary hover:bg-background-secondary/80\" onclick=\"toggleSidebar()\" aria-label=\"Toggle menu\"><svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"></path></svg></button><!-- Search Results Overlay --><div id=\"search-results\" class=\"hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-4 lg:p-8 transition-opacity duration-200 ease-in-out\"></div><!-- Sidebar --><div class=\"sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 lg:translate-x-0 transition-transform duration-300 ease-in-out\"><!-- Search --><div class=\"p-4 border-b border-border\"><input type=\"text\" class=\"search-input w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent text-sm\" placeholder=\"Search documentation...\" id=\"docs-search\" oninput=\"searchDocs(this.value)\"></div><!-- Navigation Sections -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, " - Bookhoard Documentation</title><link href=\"/static/style.css\" rel=\"stylesheet\"><link rel=\"stylesheet\" href=\"/static/highlight-dark.min.css\"><script src=\"/static/highlight.min.js\"></script><script src=\"/static/lunr.min.js\"></script><script src=\"/static/lunr-flex.min.js\"></script><script src=\"/static/header.js\"></script></head>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 = []any{"theme-" + user.Theme + " bg-background-primary text-text-primary font-sans antialiased"}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var20...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "<body class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 string
+		templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var20).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Header(user, currentPath).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "<!-- Mobile Menu Button --><button class=\"lg:hidden fixed top-4 left-4 z-50 bg-background-secondary border border-border rounded p-2 text-text-primary hover:bg-background-secondary/80\" onclick=\"toggleSidebar()\" aria-label=\"Toggle menu\"><svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"></path></svg></button><!-- Search Results Overlay --><div id=\"search-results\" class=\"hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-4 lg:p-8 transition-opacity duration-200 ease-in-out\"></div><!-- Sidebar --><div class=\"sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 mt-16 lg:translate-x-0 transition-transform duration-300 ease-in-out\"><!-- Search --><div class=\"p-4 border-b border-border\"><input type=\"text\" class=\"search-input w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent text-sm\" placeholder=\"Search documentation...\" id=\"docs-search\"></div><!-- Navigation Sections -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		for _, section := range nav.Sections {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "<div class=\"nav-section mb-6\"><div class=\"nav-section-title font-semibold text-xs uppercase tracking-wider text-text-secondary px-4 py-3 cursor-pointer select-none flex items-center justify-between\" onclick=\"toggleSection(this)\"><span>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "<div class=\"nav-section mb-6\"><div class=\"nav-section-title font-semibold text-xs uppercase tracking-wider text-text-secondary px-4 py-3 cursor-pointer select-none flex items-center justify-between\" onclick=\"toggleSection(this)\"><span>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var18 string
+			var templ_7745c5c3_Var22 string
-			templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(section.Title)
+			templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(section.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 384, Col: 28}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 388, Col: 28}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "</span> <svg class=\"w-4 h-4 transform transition-transform section-arrow\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path></svg></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</span> <svg class=\"w-4 h-4 transform transition-transform section-arrow\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path></svg></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if section.Collapsed {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "<div class=\"nav-items hidden\" data-collapsed=\"true\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "<div class=\"nav-items hidden\" data-collapsed=\"true\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				for _, item := range section.Items {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "<a href=\"")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var19 templ.SafeURL
-					templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 392, Col: 27}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "\" class=\"nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline\"><span class=\"mr-2\">")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var20 string
-					templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 393, Col: 40}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "</span>")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var21 string
-					templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 393, Col: 61}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "</a>")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</div>")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			} else {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "<div class=\"nav-items\" data-collapsed=\"false\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -442,12 +448,12 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var22 templ.SafeURL
+					var templ_7745c5c3_Var23 templ.SafeURL
-					templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
+					templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 400, Col: 27}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 396, Col: 27}
 					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
@@ -455,12 +461,12 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var23 string
+					var templ_7745c5c3_Var24 string
-					templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
+					templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 401, Col: 40}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 397, Col: 40}
 					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
@@ -468,12 +474,12 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var24 string
+					var templ_7745c5c3_Var25 string
-					templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
+					templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 401, Col: 61}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 397, Col: 61}
 					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
@@ -486,137 +492,191 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
+			} else {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 51, "<div class=\"nav-items\" data-collapsed=\"false\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				for _, item := range section.Items {
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 52, "<a href=\"")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var26 templ.SafeURL
+					templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 404, Col: 27}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, "\" class=\"nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline\"><span class=\"mr-2\">")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var27 string
+					templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 405, Col: 40}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "</span>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var28 string
+					templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 405, Col: 61}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 55, "</a>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 56, "</div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 51, "</div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 57, "</div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 52, "</div><!-- Main Content --><main class=\"main-content lg:ml-72 p-4 lg:p-8 max-w-4xl mx-auto\"><!-- Breadcrumb -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "</div><!-- Main Content --><main class=\"main-content lg:ml-72 p-4 lg:p-8 max-w-4xl mx-auto\"><!-- Breadcrumb -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(doc.Breadcrumb) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, "<nav class=\"breadcrumb flex flex-wrap gap-2 text-sm text-text-secondary mb-8\" aria-label=\"Breadcrumb\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 59, "<nav class=\"breadcrumb flex flex-wrap gap-2 text-sm text-text-secondary mb-8\" aria-label=\"Breadcrumb\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			for i, crumb := range doc.Breadcrumb {
 				if i > 0 {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "<span class=\"text-text-secondary/50\">›</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 60, "<span class=\"text-text-secondary/50\">›</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 55, " <a href=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 61, " <a href=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var25 templ.SafeURL
+				var templ_7745c5c3_Var29 templ.SafeURL
-				templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinURLErrs(crumb.URL)
+				templ_7745c5c3_Var29, templ_7745c5c3_Err = templ.JoinURLErrs(crumb.URL)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 419, Col: 26}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 423, Col: 26}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 56, "\" class=\"text-accent hover:underline no-underline\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var26 string
-				templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(crumb.Title)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 419, Col: 91}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 57, "</a>")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "</nav>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 59, "<!-- Title --><h1 class=\"text-3xl lg:text-4xl font-bold mb-6 lg:mb-8 text-text-primary\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var27 string
-		templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(doc.Title)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 425, Col: 89}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 60, "</h1><!-- Table of Contents -->")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if len(doc.TOC) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 61, "<div class=\"toc bg-background-secondary p-4 rounded-lg mb-6 lg:mb-8 border border-border lg:static\"><strong class=\"block mb-2 text-text-primary font-semibold\">On this page</strong> ")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			for _, item := range doc.TOC {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 62, "<a href=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var28 templ.SafeURL
-				templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinURLErrs("#" + item.Anchor)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 433, Col: 32}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 63, "\" class=\"toc-item block py-1 text-text-secondary hover:text-accent text-sm no-underline\" style=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var29 string
-				templ_7745c5c3_Var29, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("margin-left: " + fmt.Sprintf("%drem", item.Level))
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 435, Col: 66}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var29))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 64, "\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 62, "\" class=\"text-accent hover:underline no-underline\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var30 string
-				templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
+				templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(crumb.Title)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 437, Col: 20}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 423, Col: 91}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 65, "</a>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 63, "</a>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 66, "</div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 64, "</nav>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 67, "<!-- Content --><div class=\"prose prose-invert prose-sm lg:prose-base max-w-none\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 65, "<!-- Title --><h1 class=\"text-3xl lg:text-4xl font-bold mb-6 lg:mb-8 text-text-primary\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var31 string
+		templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(doc.Title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 429, Col: 89}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 66, "</h1><!-- Table of Contents -->")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if len(doc.TOC) > 0 {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 67, "<div class=\"toc bg-background-secondary p-4 rounded-lg mb-6 lg:mb-8 border border-border lg:static\"><strong class=\"block mb-2 text-text-primary font-semibold\">On this page</strong> ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for _, item := range doc.TOC {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 68, "<a href=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var32 templ.SafeURL
+				templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinURLErrs("#" + item.Anchor)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 437, Col: 32}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 69, "\" class=\"toc-item block py-1 text-text-secondary hover:text-accent text-sm no-underline\" style=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var33 string
+				templ_7745c5c3_Var33, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("margin-left: " + fmt.Sprintf("%drem", item.Level))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 439, Col: 66}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var33))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 70, "\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var34 string
+				templ_7745c5c3_Var34, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `docs.templ`, Line: 441, Col: 20}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var34))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 71, "</a>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 72, "</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 73, "<!-- Content --><div class=\"prose prose-invert prose-sm lg:prose-base max-w-none\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -624,7 +684,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 68, "</div><!-- API Explorer -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 74, "</div><!-- API Explorer -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -632,7 +692,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 69, "</main><script>\n\t\t\t\t// Toggle sidebar section\n\t\t\t\tfunction toggleSection(el) {\n\t\t\t\t\tconst items = el.nextElementSibling;\n\t\t\t\t\tconst arrow = el.querySelector('.section-arrow');\n\t\t\t\t\tconst isCollapsed = items.getAttribute('data-collapsed') === 'true';\n\n\t\t\t\t\tif (isCollapsed) {\n\t\t\t\t\t\titems.classList.remove('hidden');\n\t\t\t\t\t\titems.setAttribute('data-collapsed', 'false');\n\t\t\t\t\t\tarrow.style.transform = 'rotate(0deg)';\n\t\t\t\t\t} else {\n\t\t\t\t\t\titems.classList.add('hidden');\n\t\t\t\t\t\titems.setAttribute('data-collapsed', 'true');\n\t\t\t\t\t\tarrow.style.transform = 'rotate(-90deg)';\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Toggle sidebar on mobile\n\t\t\t\tfunction toggleSidebar() {\n\t\t\t\t\tconst sidebar = document.querySelector('.sidebar');\n\t\t\t\t\tsidebar.classList.toggle('open');\n\t\t\t\t}\n\n\t\t\t\t// Close sidebar when clicking main content on mobile\n\t\t\t\tdocument.querySelector('.main-content')?.addEventListener('click', () => {\n\t\t\t\t\tconst sidebar = document.querySelector('.sidebar');\n\t\t\t\t\tif (window.innerWidth < 1024) {\n\t\t\t\t\t\tsidebar.classList.remove('open');\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\t// Highlight current page in nav\n\t\t\t\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t\t\t\tconst currentPath = window.location.pathname;\n\t\t\t\t\tdocument.querySelectorAll('.nav-item').forEach(item => {\n\t\t\t\t\t\tif (item.getAttribute('href') === currentPath) {\n\t\t\t\t\t\t\titem.classList.add('text-accent', 'bg-accent/10', 'border-r-2', 'border-accent');\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\n\t\t\t\t\t// Initialize syntax highlighting\n\t\t\t\t\tif (typeof hljs !== 'undefined') {\n\t\t\t\t\t\thljs.highlightAll();\n\n\t\t\t\t\t// Add copy buttons to all code blocks\n\t\t\t\t\tdocument.querySelectorAll('pre code').forEach((block) => {\n\t\t\t\t\t\tconst pre = block.parentElement;\n\t\t\t\t\t\tconst wrapper = document.createElement('div');\n\t\t\t\t\t\twrapper.className = 'relative group';\n\t\t\t\t\t\tpre.parentNode.insertBefore(wrapper, pre);\n\t\t\t\t\t\twrapper.appendChild(pre);\n\t\t\t\t\t\t\n\t\t\t\t\t\tconst button = document.createElement('button');\n\t\t\t\t\t\tbutton.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';\n\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\tbutton.onclick = async () => {\n\t\t\t\t\t\t\tawait navigator.clipboard.writeText(block.textContent);\n\t\t\t\t\t\t\tbutton.textContent = 'Copied!';\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t};\n\t\t\t\t\t\twrapper.appendChild(button);\n\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\t// Add copy buttons to all code blocks\n\t\t\t\t\tdocument.querySelectorAll('pre code').forEach((block) => {\n\t\t\t\t\t\tconst pre = block.parentElement;\n\t\t\t\t\t\tconst wrapper = document.createElement('div');\n\t\t\t\t\t\twrapper.className = 'relative group';\n\t\t\t\t\t\tpre.parentNode.insertBefore(wrapper, pre);\n\t\t\t\t\t\twrapper.appendChild(pre);\n\t\t\t\t\t\t\n\t\t\t\t\t\tconst button = document.createElement('button');\n\t\t\t\t\t\tbutton.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';\n\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\tbutton.onclick = async () => {\n\t\t\t\t\t\t\tawait navigator.clipboard.writeText(block.textContent);\n\t\t\t\t\t\t\tbutton.textContent = 'Copied!';\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t};\n\t\t\t\t\t\twrapper.appendChild(button);\n\t\t\t\t\t});\n\t\t\t\t});\n\n\t\t\t\t\t// Add copy buttons to all code blocks\n\t\t\t\t\tdocument.querySelectorAll('pre code').forEach((block) => {\n\t\t\t\t\t\tconst pre = block.parentElement;\n\t\t\t\t\t\tconst wrapper = document.createElement('div');\n\t\t\t\t\t\twrapper.className = 'relative group';\n\t\t\t\t\t\tpre.parentNode.insertBefore(wrapper, pre);\n\t\t\t\t\t\twrapper.appendChild(pre);\n\t\t\t\t\t\t\n\t\t\t\t\t\tconst button = document.createElement('button');\n\t\t\t\t\t\tbutton.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';\n\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\tbutton.onclick = async () => {\n\t\t\t\t\t\t\tawait navigator.clipboard.writeText(block.textContent);\n\t\t\t\t\t\t\tbutton.textContent = 'Copied!';\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t};\n\t\t\t\t\t\twrapper.appendChild(button);\n\t\t\t\tLine truncated
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 75, "</main><script>\n\t\t\t\t// Toggle sidebar section\n\t\t\t\tfunction toggleSection(el) {\n\t\t\t\t\tconst items = el.nextElementSibling;\n\t\t\t\t\tconst arrow = el.querySelector('.section-arrow');\n\t\t\t\t\tconst isCollapsed = items.getAttribute('data-collapsed') === 'true';\n\n\t\t\t\t\tif (isCollapsed) {\n\t\t\t\t\t\titems.classList.remove('hidden');\n\t\t\t\t\t\titems.setAttribute('data-collapsed', 'false');\n\t\t\t\t\t\tarrow.style.transform = 'rotate(0deg)';\n\t\t\t\t\t} else {\n\t\t\t\t\t\titems.classList.add('hidden');\n\t\t\t\t\t\titems.setAttribute('data-collapsed', 'true');\n\t\t\t\t\t\tarrow.style.transform = 'rotate(-90deg)';\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Toggle sidebar on mobile\n\t\t\t\tfunction toggleSidebar() {\n\t\t\t\t\tconst sidebar = document.querySelector('.sidebar');\n\t\t\t\t\tsidebar.classList.toggle('open');\n\t\t\t\t}\n\n\t\t\t\t// Close sidebar when clicking main content on mobile\n\t\t\t\tdocument.querySelector('.main-content')?.addEventListener('click', () => {\n\t\t\t\t\tconst sidebar = document.querySelector('.sidebar');\n\t\t\t\t\tif (window.innerWidth < 1024) {\n\t\t\t\t\t\tsidebar.classList.remove('open');\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\t// Highlight current page in nav\n\t\t\t\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t\t\t\tconst currentPath = window.location.pathname;\n\t\t\t\t\tdocument.querySelectorAll('.nav-item').forEach(item => {\n\t\t\t\t\t\tif (item.getAttribute('href') === currentPath) {\n\t\t\t\t\t\t\titem.classList.add('text-accent', 'bg-accent/10', 'border-r-2', 'border-accent');\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\n\t\t\t\t\t// Initialize syntax highlighting\n\t\t\t\t\tif (typeof hljs !== 'undefined') {\n\t\t\t\t\t\thljs.highlightAll();\n\n\t\t\t\t\t// Add copy buttons to all code blocks\n\t\t\t\t\tdocument.querySelectorAll('pre code').forEach((block) => {\n\t\t\t\t\t\tconst pre = block.parentElement;\n\t\t\t\t\t\tconst wrapper = document.createElement('div');\n\t\t\t\t\t\twrapper.className = 'relative group';\n\t\t\t\t\t\tpre.parentNode.insertBefore(wrapper, pre);\n\t\t\t\t\t\twrapper.appendChild(pre);\n\t\t\t\t\t\t\n\t\t\t\t\t\tconst button = document.createElement('button');\n\t\t\t\t\t\tbutton.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';\n\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\tbutton.onclick = async () => {\n\t\t\t\t\t\t\tawait navigator.clipboard.writeText(block.textContent);\n\t\t\t\t\t\t\tbutton.textContent = 'Copied!';\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t};\n\t\t\t\t\t\twrapper.appendChild(button);\n\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\t// Add copy buttons to all code blocks\n\t\t\t\t\tdocument.querySelectorAll('pre code').forEach((block) => {\n\t\t\t\t\t\tconst pre = block.parentElement;\n\t\t\t\t\t\tconst wrapper = document.createElement('div');\n\t\t\t\t\t\twrapper.className = 'relative group';\n\t\t\t\t\t\tpre.parentNode.insertBefore(wrapper, pre);\n\t\t\t\t\t\twrapper.appendChild(pre);\n\t\t\t\t\t\t\n\t\t\t\t\t\tconst button = document.createElement('button');\n\t\t\t\t\t\tbutton.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';\n\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\tbutton.onclick = async () => {\n\t\t\t\t\t\t\tawait navigator.clipboard.writeText(block.textContent);\n\t\t\t\t\t\t\tbutton.textContent = 'Copied!';\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t};\n\t\t\t\t\t\twrapper.appendChild(button);\n\t\t\t\t\t});\n\t\t\t\t});\n\n\t\t\t\t\t// Add copy buttons to all code blocks\n\t\t\t\t\tdocument.querySelectorAll('pre code').forEach((block) => {\n\t\t\t\t\t\tconst pre = block.parentElement;\n\t\t\t\t\t\tconst wrapper = document.createElement('div');\n\t\t\t\t\t\twrapper.className = 'relative group';\n\t\t\t\t\t\tpre.parentNode.insertBefore(wrapper, pre);\n\t\t\t\t\t\twrapper.appendChild(pre);\n\t\t\t\t\t\t\n\t\t\t\t\t\tconst button = document.createElement('button');\n\t\t\t\t\t\tbutton.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';\n\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\tbutton.onclick = async () => {\n\t\t\t\t\t\t\tawait navigator.clipboard.writeText(block.textContent);\n\t\t\t\t\t\t\tbutton.textContent = 'Copied!';\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tbutton.textContent = 'Copy';\n\t\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t\t};\n\t\t\t\t\t\twrapper.appendChild(button);\n\t\t\t\tLine truncated
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

templates/header.templ

@@ -1,7 +1,7 @@
 package templates
 
 templ Header(user User, currentPath string) {
-    <nav class="border-b header-nav" style="border-color: var(--border); background-color: var(--bg-secondary)">
+	<nav class="border-b header-nav" style="border-color: var(--border); background-color: var(--bg-secondary);">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between items-center h-16">
                 <!-- Left: App Title & Navigation -->
@@ -104,28 +104,60 @@ templ Header(user User, currentPath string) {
 
                     <!-- User Icon with Dropdown -->
                     <div class="relative">
-                        <button onclick="toggleUserMenu()" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700 transition-colors" style="background-color: var(--bg-primary);">
+                        if user.ID != "" {
-                            <svg class="h-6 w-6" style="color: var(--text-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <!-- LOGGED IN: Show user menu with logout -->
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+                            <button onclick="toggleUserMenu()" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700 transition-colors" style="background-color: var(--bg-primary);">
-                            </svg>
+                                <svg class="h-6 w-6" style="color: var(--text-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <span class="text-sm hidden sm:block" style="color: var(--text-primary)">{ user.Username }</span>
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
-                        </button>
+                                </svg>
-                        <div id="user-menu" class="hidden absolute right-0 mt-2 w-48 rounded-lg shadow-lg z-50" style="background-color: var(--bg-secondary); border: 1px solid var(--border);">
+                                <span class="text-sm hidden sm:block" style="color: var(--text-primary)">{ user.Username }</span>
-                            <div class="py-1">
+                            </button>
-                                <a href="/settings" class="block px-4 py-2 text-sm hover:opacity-80" style="color: var(--text-primary); background-color: var(--bg-secondary); text-decoration: none;">
+                            <div id="user-menu" class="hidden absolute right-0 mt-2 w-48 rounded-lg shadow-lg z-50" style="background-color: var(--bg-secondary); border: 1px solid var(--border);">
-                                    Settings
+                                <div class="py-1">
-                                </a>
+                                    <a href="/settings" class="block px-4 py-2 text-sm hover:opacity-80" style="color: var(--text-primary); background-color: var(--bg-secondary); text-decoration: none;">
-                                if user.Role == "admin" {
+                                        Settings
-                                    <a href="/admin" class="block px-4 py-2 text-sm hover:opacity-80" style="color: var(--text-primary); background-color: var(--bg-secondary); text-decoration: none;">
-                                        Admin Panel
                                     </a>
-                                }
+                                    if user.Role == "admin" {
-                                <div class="border-t my-1" style="border-color: var(--border);"></div>
+                                        <a href="/admin" class="block px-4 py-2 text-sm hover:opacity-80" style="color: var(--text-primary); background-color: var(--bg-secondary); text-decoration: none;">
-                                <button onclick="logout()" class="block w-full text-left px-4 py-2 text-sm hover:opacity-80" style="color: var(--text-primary); background-color: var(--bg-secondary);">
+                                            Admin Panel
-                                    Logout
+                                        </a>
-                                </button>
+                                    }
+                                    <div class="border-t my-1" style="border-color: var(--border);"></div>
+                                    <button onclick="logout()" class="block w-full text-left px-4 py-2 text-sm hover:opacity-80" style="color: var(--text-primary); background-color: var(--bg-secondary);">
+                                        Logout
+                                    </button>
+                                </div>
                             </div>
-                        </div>
+                        } else {
+                            <!-- LOGGED OUT: Show login form -->
+                            <button onclick="toggleUserMenu()" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700 transition-colors" style="background-color: var(--bg-primary);">
+                                <svg class="h-6 w-6" style="color: var(--text-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+                                </svg>
+                                <span class="text-sm hidden sm:block" style="color: var(--text-primary)">Login</span>
+                            </button>
+                            <div id="user-menu" class="hidden absolute right-0 mt-2 w-64 rounded-lg shadow-lg z-50 p-4" style="background-color: var(--bg-secondary); border: 1px solid var(--border);">
+                                <form hx-post="/api/auth/login" hx-target="#login-result" hx-swap="innerHTML" class="space-y-3">
+                                    <input type="hidden" name="redirect" value="{ currentPath }">
+                                    <div>
+                                        <label class="block text-sm mb-1" style="color: var(--text-secondary)">Email or Username</label>
+                                        <input type="text" name="login" class="w-full px-3 py-2 border rounded text-sm" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);" required>
+                                    </div>
+                                    <div>
+                                        <label class="block text-sm mb-1" style="color: var(--text-secondary)">Password</label>
+                                        <input type="password" name="password" class="w-full px-3 py-2 border rounded text-sm" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);" required>
+                                    </div>
+                                    <button type="submit" class="w-full py-2 rounded text-sm" style="background-color: var(--accent); color: white;">
+                                        Sign In
+                                    </button>
+                                </form>
+                                <div id="login-result"></div>
+                                <div class="border-t my-2" style="border-color: var(--border);"></div>
+                                <a href="/register" class="block text-center text-sm hover:opacity-80" style="color: var(--text-secondary); text-decoration: none;">
+                                    Don't have an account? Sign Up
+                                </a>
+                            </div>
+                        }
                     </div>
                 </div>
             </div>

templates/header_templ.go

@@ -29,30 +29,45 @@ func Header(user User, currentPath string) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<nav class=\"border-b header-nav\" style=\"border-color: var(--border); background-color: var(--bg-secondary)\"><div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"flex justify-between items-center h-16\"><!-- Left: App Title & Navigation --><div class=\"flex items-center space-x-6\"><a href=\"/bookshelf\" class=\"text-xl font-bold hover:opacity-80 transition-opacity\" style=\"color: var(--text-primary); text-decoration: none;\">📚 Bookhoard</a><div class=\"hidden md:flex items-center space-x-4\"><a href=\"/bookshelf\" class=\"text-sm hover:opacity-80 transition-opacity\" style=\"color: var(--text-secondary); text-decoration: none;\">Library</a> <a href=\"/collections\" class=\"text-sm hover:opacity-80 transition-opacity\" style=\"color: var(--text-secondary); text-decoration: none;\">Collections</a> <a href=\"/progress\" class=\"text-sm hover:opacity-80 transition-opacity\" style=\"color: var(--text-secondary); text-decoration: none;\">Progress</a> <a href=\"/devices\" class=\"text-sm hover:opacity-80 transition-opacity\" style=\"color: var(--text-secondary); text-decoration: none;\">Devices</a></div></div><!-- Center: Search Box --><div class=\"flex-1 max-w-2xl mx-8\"><div class=\"relative\"><input type=\"text\" id=\"header-search\" placeholder=\"Search your library...\" class=\"w-full px-4 py-2 pl-10 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" autocomplete=\"off\"> <svg class=\"absolute left-3 top-2.5 h-5 w-5\" style=\"color: var(--text-secondary)\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"></path></svg></div></div><!-- Right: Theme Switcher & User Menu --><div class=\"flex items-center space-x-4\"><!-- Theme Switcher --><div class=\"relative\"><button onclick=\"toggleThemeDropdown()\" class=\"p-2 rounded-lg hover:bg-gray-700 transition-colors\" style=\"background-color: var(--bg-primary);\"><svg class=\"h-6 w-6\" style=\"color: var(--text-primary)\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01\"></path></svg></button><div id=\"theme-dropdown\" class=\"hidden absolute right-0 mt-2 w-64 rounded-lg shadow-lg z-50\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border);\"><div class=\"p-4\"><h3 class=\"text-sm font-semibold mb-3\" style=\"color: var(--text-primary)\">Select Theme</h3><div class=\"space-y-2\"><button onclick=\"changeThemeTo('tokyo-night')\" class=\"w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\"><span class=\"inline-block w-4 h-4 rounded mr-2\" style=\"background-color: #7aa2f7;\"></span> Tokyo Night</button> <button onclick=\"changeThemeTo('dracula')\" class=\"w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\"><span class=\"inline-block w-4 h-4 rounded mr-2\" style=\"background-color: #bd93f9;\"></span> Dracula</button> <button onclick=\"changeThemeTo('nord')\" class=\"w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\"><span class=\"inline-block w-4 h-4 rounded mr-2\" style=\"background-color: #88c0d0;\"></span> Nord</button> <button onclick=\"changeThemeTo('solarized-dark')\" class=\"w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\"><span class=\"inline-block w-4 h-4 rounded mr-2\" style=\"background-color: #2aa198;\"></span> Solarized Dark</button> <button onclick=\"changeThemeTo('monokai')\" class=\"w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\"><span class=\"inline-block w-4 h-4 rounded mr-2\" style=\"background-color: #a6e22e;\"></span> Monokai</button> <button onclick=\"changeThemeTo('one-dark-pro')\" class=\"w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\"><span class=\"inline-block w-4 h-4 rounded mr-2\" style=\"background-color: #61dafb;\"></span> One Dark Pro</button> <button onclick=\"changeThemeTo('material-dark')\" class=\"w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\"><span classLine truncated
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<nav class=\"border-b header-nav\" style=\"border-color: var(--border); background-color: var(--bg-secondary);\"><div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"flex justify-between items-center h-16\"><!-- Left: App Title & Navigation --><div class=\"flex items-center space-x-6\"><a href=\"/bookshelf\" class=\"text-xl font-bold hover:opacity-80 transition-opacity\" style=\"color: var(--text-primary); text-decoration: none;\">📚 Bookhoard</a><div class=\"hidden md:flex items-center space-x-4\"><a href=\"/bookshelf\" class=\"text-sm hover:opacity-80 transition-opacity\" style=\"color: var(--text-secondary); text-decoration: none;\">Library</a> <a href=\"/collections\" class=\"text-sm hover:opacity-80 transition-opacity\" style=\"color: var(--text-secondary); text-decoration: none;\">Collections</a> <a href=\"/progress\" class=\"text-sm hover:opacity-80 transition-opacity\" style=\"color: var(--text-secondary); text-decoration: none;\">Progress</a> <a href=\"/devices\" class=\"text-sm hover:opacity-80 transition-opacity\" style=\"color: var(--text-secondary); text-decoration: none;\">Devices</a></div></div><!-- Center: Search Box --><div class=\"flex-1 max-w-2xl mx-8\"><div class=\"relative\"><input type=\"text\" id=\"header-search\" placeholder=\"Search your library...\" class=\"w-full px-4 py-2 pl-10 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" autocomplete=\"off\"> <svg class=\"absolute left-3 top-2.5 h-5 w-5\" style=\"color: var(--text-secondary)\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"></path></svg></div></div><!-- Right: Theme Switcher & User Menu --><div class=\"flex items-center space-x-4\"><!-- Theme Switcher --><div class=\"relative\"><button onclick=\"toggleThemeDropdown()\" class=\"p-2 rounded-lg hover:bg-gray-700 transition-colors\" style=\"background-color: var(--bg-primary);\"><svg class=\"h-6 w-6\" style=\"color: var(--text-primary)\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01\"></path></svg></button><div id=\"theme-dropdown\" class=\"hidden absolute right-0 mt-2 w-64 rounded-lg shadow-lg z-50\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border);\"><div class=\"p-4\"><h3 class=\"text-sm font-semibold mb-3\" style=\"color: var(--text-primary)\">Select Theme</h3><div class=\"space-y-2\"><button onclick=\"changeThemeTo('tokyo-night')\" class=\"w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\"><span class=\"inline-block w-4 h-4 rounded mr-2\" style=\"background-color: #7aa2f7;\"></span> Tokyo Night</button> <button onclick=\"changeThemeTo('dracula')\" class=\"w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\"><span class=\"inline-block w-4 h-4 rounded mr-2\" style=\"background-color: #bd93f9;\"></span> Dracula</button> <button onclick=\"changeThemeTo('nord')\" class=\"w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\"><span class=\"inline-block w-4 h-4 rounded mr-2\" style=\"background-color: #88c0d0;\"></span> Nord</button> <button onclick=\"changeThemeTo('solarized-dark')\" class=\"w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\"><span class=\"inline-block w-4 h-4 rounded mr-2\" style=\"background-color: #2aa198;\"></span> Solarized Dark</button> <button onclick=\"changeThemeTo('monokai')\" class=\"w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\"><span class=\"inline-block w-4 h-4 rounded mr-2\" style=\"background-color: #a6e22e;\"></span> Monokai</button> <button onclick=\"changeThemeTo('one-dark-pro')\" class=\"w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\"><span class=\"inline-block w-4 h-4 rounded mr-2\" style=\"background-color: #61dafb;\"></span> One Dark Pro</button> <button onclick=\"changeThemeTo('material-dark')\" class=\"w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\"><span clasLine truncated
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var2 string
+		if user.ID != "" {
-		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(user.Username)
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<!-- LOGGED IN: Show user menu with logout --> <button onclick=\"toggleUserMenu()\" class=\"flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700 transition-colors\" style=\"background-color: var(--bg-primary);\"><svg class=\"h-6 w-6\" style=\"color: var(--text-primary)\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"></path></svg> <span class=\"text-sm hidden sm:block\" style=\"color: var(--text-primary)\">")
-		if templ_7745c5c3_Err != nil {
+			if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `header.templ`, Line: 111, Col: 116}
+				return templ_7745c5c3_Err
-		}
+			}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+			var templ_7745c5c3_Var2 string
-		if templ_7745c5c3_Err != nil {
+			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(user.Username)
-			return templ_7745c5c3_Err
+			if templ_7745c5c3_Err != nil {
-		}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `header.templ`, Line: 113, Col: 120}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</span></button><div id=\"user-menu\" class=\"hidden absolute right-0 mt-2 w-48 rounded-lg shadow-lg z-50\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border);\"><div class=\"py-1\"><a href=\"/settings\" class=\"block px-4 py-2 text-sm hover:opacity-80\" style=\"color: var(--text-primary); background-color: var(--bg-secondary); text-decoration: none;\">Settings</a> ")
+			}
-		if templ_7745c5c3_Err != nil {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
-			return templ_7745c5c3_Err
+			if templ_7745c5c3_Err != nil {
-		}
+				return templ_7745c5c3_Err
-		if user.Role == "admin" {
+			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<a href=\"/admin\" class=\"block px-4 py-2 text-sm hover:opacity-80\" style=\"color: var(--text-primary); background-color: var(--bg-secondary); text-decoration: none;\">Admin Panel</a>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</span></button><div id=\"user-menu\" class=\"hidden absolute right-0 mt-2 w-48 rounded-lg shadow-lg z-50\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border);\"><div class=\"py-1\"><a href=\"/settings\" class=\"block px-4 py-2 text-sm hover:opacity-80\" style=\"color: var(--text-primary); background-color: var(--bg-secondary); text-decoration: none;\">Settings</a> ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if user.Role == "admin" {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<a href=\"/admin\" class=\"block px-4 py-2 text-sm hover:opacity-80\" style=\"color: var(--text-primary); background-color: var(--bg-secondary); text-decoration: none;\">Admin Panel</a>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div class=\"border-t my-1\" style=\"border-color: var(--border);\"></div><button onclick=\"logout()\" class=\"block w-full text-left px-4 py-2 text-sm hover:opacity-80\" style=\"color: var(--text-primary); background-color: var(--bg-secondary);\">Logout</button></div></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<!-- LOGGED OUT: Show login form --> <button onclick=\"toggleUserMenu()\" class=\"flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700 transition-colors\" style=\"background-color: var(--bg-primary);\"><svg class=\"h-6 w-6\" style=\"color: var(--text-primary)\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"></path></svg> <span class=\"text-sm hidden sm:block\" style=\"color: var(--text-primary)\">Login</span></button><div id=\"user-menu\" class=\"hidden absolute right-0 mt-2 w-64 rounded-lg shadow-lg z-50 p-4\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border);\"><form hx-post=\"/api/auth/login\" hx-target=\"#login-result\" hx-swap=\"innerHTML\" class=\"space-y-3\"><input type=\"hidden\" name=\"redirect\" value=\"{ currentPath }\"><div><label class=\"block text-sm mb-1\" style=\"color: var(--text-secondary)\">Email or Username</label> <input type=\"text\" name=\"login\" class=\"w-full px-3 py-2 border rounded text-sm\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" required></div><div><label class=\"block text-sm mb-1\" style=\"color: var(--text-secondary)\">Password</label> <input type=\"password\" name=\"password\" class=\"w-full px-3 py-2 border rounded text-sm\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" required></div><button type=\"submit\" class=\"w-full py-2 rounded text-sm\" style=\"background-color: var(--accent); color: white;\">Sign In</button></form><div id=\"login-result\"></div><div class=\"border-t my-2\" style=\"border-color: var(--border);\"></div><a href=\"/register\" class=\"block text-center text-sm hover:opacity-80\" style=\"color: var(--text-secondary); text-decoration: none;\">Don't have an account? Sign Up</a></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div class=\"border-t my-1\" style=\"border-color: var(--border);\"></div><button onclick=\"logout()\" class=\"block w-full text-left px-4 py-2 text-sm hover:opacity-80\" style=\"color: var(--text-primary); background-color: var(--bg-secondary);\">Logout</button></div></div></div></div></div></div></nav>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</div></div></div></div></nav>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

web/static/input.css

@@ -16,8 +16,8 @@
   .theme-tokyo-night {
     --bg-primary: #1a1b26;
     --bg-secondary: #16161e;
-    --text-primary: #a9b1d6;
+    --text-primary: #c0caf5;
-    --text-secondary: #9aa5ce;
+    --text-secondary: #c0caf5;
     --accent: #7aa2f7;
     --border: #414868;
   }

web/static/style.css

@@ -1 +1,2 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),Line truncated
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3Line truncated